aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--public/js/app.js101
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)