Fix bugs
* 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:
parent
be2003e723
commit
ee5b5bfdad
3 changed files with 16 additions and 16 deletions
|
@ -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);
|
|
@ -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;
|
||||
|
|
12
index.html
12
index.html
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue