From 871f923a8c378cab7aed28d9cc1af69797934cc2 Mon Sep 17 00:00:00 2001 From: Harald Eilertsen Date: Sat, 5 Oct 2019 11:13:11 +0200 Subject: Misc updates. Use proper JavaScript Date objects for handling time and date information. Pick up the screening date from the starting time if not given explicitly. Dynamically set the with of each canvas based on the number of rooms with screenings for that day. --- public/js/app.js | 101 +++++++++++++++++++++++-------------------------------- 1 file changed, 42 insertions(+), 59 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 9608aaa..7c1f37b 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -33,42 +33,18 @@ window.addEventListener("load", function() { let screenings_by_date = new Map() function _add(screening) { - let d = Date.parse(screening.date) - if (!screenings_by_date.has(d)) - screenings_by_date.set(d, new Array()) + let d = new Date(screening.date || screening.start_time) + let key = date_f(d) + if (!screenings_by_date.has(key)) + screenings_by_date.set(key, new Array()) - let s = screenings_by_date.get(d) + let s = screenings_by_date.get(key) s.push(screening) }; - function _end_time(screening) { - if (screening.end_time < screening.start_time) { - return screening.end_time - .split(':') - // Add 24 to the hour component of the time string - .map( (v, i) => i == 0 ? (parseInt(v) + 24).toString() : v) - .join(':') - } - else { - return screening.end_time - } - } - - function _time_to_sec(t) { - let expl = t.split(':').map( v => parseInt(v) ) - return expl[0] * 3600 + expl[1] * 60 + expl[2] - } - - function _sec_to_time(v) { - let hour = Math.floor(v / 3600) - v = v % 3600 - let min = Math.floor(v / 60) + function time_f(t) { let f = Intl.NumberFormat('nb-NO', { minimumIntegerDigits: 2 }) - return [ f.format(hour), f.format(min) ].join(':') - } - - function time_f(t) { - _sec_to_time(_time_to_sec(t)) + return [ f.format(t.getHours()), f.format(t.getMinutes()) ].join(':') } function break_text(c, text, x, y, width) { @@ -106,19 +82,23 @@ window.addEventListener("load", function() { let xmargin = 50; function draw_timescale(c, start, end) { - let dur = Math.ceil((end - start) / 30) + let dur = Math.ceil((end - start) / 100) c.font = '10px sans-serif' c.lineWidth = 'thin' c.strokeStyle = '#ccc' + let canvas = c.canvas + for (let y = 0; y <= dur; y += 30) { let ypos = y + margin; c.beginPath() c.moveTo(35, ypos) - c.lineTo(510, ypos) + c.lineTo(canvas.width, ypos) c.stroke() - c.fillText(_sec_to_time(y * 30 + start + margin), 5, ypos + 3) + + let label = time_f(new Date(start.valueOf() + y * 30000 + margin)) + c.fillText(label, 5, ypos + 3) } } @@ -127,7 +107,7 @@ window.addEventListener("load", function() { c.font = 'bold 15px sans-serif' for (let r of [...rooms]) { - center_text(c, r, 50 + x, 15, 100) + center_text(c, r, xmargin + x, 15, 100) x += 150 } } @@ -138,20 +118,20 @@ window.addEventListener("load", function() { c.strokeStyle = '#cfc' for (let s of screenings) { - let stt = _time_to_sec(s.start_time) - let ett = _time_to_sec(_end_time(s)) - let ystart = Math.ceil((stt - start_time) / 30) + margin; - let height = Math.ceil((ett - start_time ) / 30) + margin - ystart; - let ri = s.room.id - 1 + let stt = new Date(s.start_time) + let ett = new Date(s.end_time) + let ystart = Math.ceil((stt - start_time) / 30000) + margin; + let height = Math.ceil((ett - start_time ) / 30000) + margin - ystart; + let ri = r.findIndex(el => el == s.room.name) let xstart = xmargin + ri * 150 - c.fillStyle = '#eca' + c.fillStyle = '#cc8' c.fillRect(xstart, ystart, 100, height) c.strokeRect(xstart, ystart, 100, height) c.fillStyle = '#000' c.font = '10px sans-serif' - c.fillText(_sec_to_time(stt) + " - " + _sec_to_time(ett), xstart + 5, ystart + 10) + c.fillText(time_f(stt) + " - " + time_f(ett), xstart + 5, ystart + 10) c.font = '12px sans-serif' break_text(c, s.film.title, xstart + 5, ystart + 25, 90) @@ -163,40 +143,43 @@ window.addEventListener("load", function() { console.log("Screenings in " + screenings_by_date.size + " days: ") for (let date of screenings_by_date.keys()) { - let date_str = date_f(date) - console.log(date_str) + console.log(date) let s = screenings_by_date.get(date) let start_time = s - .map( el => _time_to_sec(el.start_time) ) - .reduce( (acc, cur) => cur < acc ? cur : acc, _time_to_sec('23:59:59') ) + .map( el => new Date(el.start_time) ) + .sort() + .shift() let end_time = s - .map( el => _time_to_sec(_end_time(el))) - .reduce( (acc, cur) => cur > acc ? cur : acc, 0 ) + .map( el => new Date(el.end_time) ) + .sort() + .pop() - console.log(" Start time: " + _sec_to_time(start_time)) - console.log(" End time : " + _sec_to_time(end_time)) + console.log(" Start time: " + start_time) + console.log(" End time : " + end_time) - let dur = end_time - start_time - console.log(" Duration : " + _sec_to_time(dur)) + let dur = (end_time - start_time) / 1000 + console.log(" Duration : " + dur) // Each line in the canvas equals half a minute let canvas_height = Math.ceil(dur / 30) + 60 let p = document.querySelector('#program') let day = document.createElement('section') - day.id = "program-" + date_str - day.innerHTML = '

' + date_str + '

' - + '' + let rooms = new Set(s.map( el => el.room.name )) + let width = xmargin + 150 * rooms.size + + day.id = "program-" + date + day.innerHTML = '

' + date + '

' + + '' + '' p.appendChild(day) - let canvas = document.getElementById('canvas-' + date_str) + let canvas = document.getElementById('canvas-' + date) let c = canvas.getContext('2d'); - c.fillStyle = '#000' - c.fillRect(0, 0, 350, canvas_height); + c.fillStyle = '#233' + c.fillRect(0, 0, width, canvas_height); - let rooms = new Set(s.map( el => el.room.name )) c.fillStyle = '#fff' draw_room_headers(c, rooms) draw_timescale(c, start_time, end_time) -- cgit v1.2.3