* Slider now properly works
* Move slider to the top
* Fix class changes for room blocks

Signed-off-by: Joey <bevilacquajoey@gmail.com>
This commit is contained in:
Joey 2019-09-27 08:56:06 +02:00
parent be2003e723
commit ee5b5bfdad
3 changed files with 16 additions and 16 deletions

View File

@ -1,4 +1,5 @@
// vim: set ts=2 sw=2 et tw=80:
// Real code
const URL = 'https://usirooms.maggioni.xyz/schedule.html?name=';
const NOW = new Date();
@ -79,9 +80,9 @@ function colorRoom(roomTitle, node, time = NOW /* QuantumLeap */) {
const isFree = currentLecture === void(0);
const block = document.getElementById(roomTitle);
block.className = isFree ?
block.className.replace("room-in-use", "") + " room-free" :
block.className.replace("room-free", "") + " room-in-use";
block.className = block.className.replace(" room-in-use", "")
.replace(" room-free", "");
block.className += isFree ? " room-free" : " room-in-use";
block.querySelector('p').innerHTML = isFree ? 'Free' :
currentLecture.title + "<br> (" + formatTime(currentLecture.start) + " - " +
@ -125,12 +126,11 @@ function setTimePreview(date = NOW) {
function setupTimeMachine() {
const slider = document.getElementById('timemachine');
slider.min = 0;
slider.max = 92 - (NOW.getHours() * 4);
slider.value = slider.min;
// Remaining minutes until 23:59
slider.max = 1380 - (NOW.getHours() * 60) - NOW.getMinutes() - 1;
slider.addEventListener("input", (e) => {
const hours = Math.round(slider.value / 4);
const hours = Math.round(slider.value / 60);
const mins = slider.value % 60;
let newDate = new Date();
newDate.setHours(newDate.getHours() + hours);

View File

@ -102,7 +102,7 @@ input[type="range"]::-moz-range-progress {
.room {
margin: 0.5rem;
background: #ededf0;
border-radius: 4px;
border-radius: 6px;
padding: 0.5rem;
transition: all 0.5s ease;
}
@ -157,7 +157,7 @@ input[type="range"]::-moz-range-progress {
/* Time */
.timepicker {
border: #00000033 solid 1px;
border-radius: 4px;
border-radius: 6px;
box-shadow: 0 1px 3px #0000001a;
display: flex;
flex-direction: column;
@ -170,7 +170,7 @@ input[type="range"]::-moz-range-progress {
.schedule {
border: #00000033 solid 1px;
border-radius: 4px;
border-radius: 6px;
box-shadow: 0 1px 3px #0000001a;
padding: 1rem;
margin: 2rem 5vw;

View File

@ -14,6 +14,11 @@
<body>
<h1>USI INF room availability</h1>
<div class="timepicker">
<h2 id="timepreviewer">Loading...</h2>
<input type="range" id="timemachine" />
</div>
<div class="room-map">
<div class="room room-big" id="SI-003">
<a href="#schedule-SI-003">
@ -63,11 +68,6 @@
</div>
</div>
<div class="timepicker">
<h2 id="timepreviewer">Loading...</h2>
<input type="range" id="timemachine" />
</div>
<div class="schedule">
<h1>Schedule for today</h1>
<section class="times">
@ -90,6 +90,6 @@
</template>
</div>
<script src='index.js'></script>
<script src='app.js'></script>
</body>
</html>