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.

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)