diff options
| -rw-r--r-- | public/js/app.js | 101 |
1 files 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 = '<h2>' + date_str + '</h2>' - + '<canvas id="canvas-' + date_str + '" height="' + canvas_height + '" width="350">' + let rooms = new Set(s.map( el => el.room.name )) + let width = xmargin + 150 * rooms.size + + day.id = "program-" + date + day.innerHTML = '<h2>' + date + '</h2>' + + '<canvas id="canvas-' + date + '" height="' + canvas_height + '" width="' + width + '">' + '</canvas>' 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) |