maggicl/usirooms
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix bugs

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.js → app.js
View file

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

6
assets/index.css
View file

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

12
index.html
View file

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