diff options
| -rw-r--r-- | public/js/app.js | 29 |
1 files changed, 16 insertions, 13 deletions
diff --git a/public/js/app.js b/public/js/app.js index 826eb42..34c6273 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -68,8 +68,8 @@ window.addEventListener("load", function() { for (let frag of expl) { flen = c.measureText(frag).width - llen += flen - if (llen >= width) { + llen += flen + space + 5 + if (lpos + llen >= width) { llen = 0 lpos = 0 y += 15 @@ -85,27 +85,29 @@ window.addEventListener("load", function() { c.fillText(text, x + xpos, y) } - let margin = 30; + let timestep = 30; + let timescale_font_size = 10; + let top_margin = 30; let xmargin = 50; function draw_timescale(c, start, end) { let dur = Math.ceil((end - start) / 100) - c.font = '10px sans-serif' + c.font = timescale_font_size + 'px sans-serif' c.lineWidth = 'thin' c.strokeStyle = '#ccc' let canvas = c.canvas - for (let y = 0; y <= dur; y += 30) { - let ypos = y + margin; + for (let y = 0; y <= dur; y += timestep) { + let ypos = y + top_margin; c.beginPath() c.moveTo(35, ypos) c.lineTo(canvas.width, ypos) c.stroke() - let label = time_f(new Date(start.valueOf() + y * 30000 + margin)) - c.fillText(label, 5, ypos + 3) + let label = time_f(new Date(start.valueOf() + y * 30000 + top_margin)) + c.fillText(label, 5, ypos - 1 + Math.floor(timescale_font_size/2)) } } @@ -122,13 +124,13 @@ window.addEventListener("load", function() { function draw_screenings(c, screenings, start_time, rooms) { let r = [...rooms] - c.strokeStyle = '#cfc' + c.strokeStyle = '#cc8' for (let s of screenings) { 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 ystart = Math.ceil((stt - start_time) / 30000) + top_margin; + let height = Math.ceil((ett - start_time ) / 30000) + top_margin - ystart; let ri = r.findIndex(el => el == s.room.name) let xstart = xmargin + ri * 150 @@ -141,7 +143,7 @@ window.addEventListener("load", function() { 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, 85) + break_text(c, s.film.title, xstart + 5, ystart + 25, 95) } } @@ -182,12 +184,13 @@ window.addEventListener("load", function() { day.id = "program-" + isodate(dateobj) day.innerHTML = '<h2>' + date_f(dateobj) + '</h2>' - + '<canvas id="canvas-' + isodate(dateobj) + '" height="' + canvas_height + '" width="' + width + '">' + + '<canvas id="canvas-' + isodate(dateobj) + '" height="' + canvas_height * 2 + '" width="' + width * 2 + '">' + '</canvas>' p.appendChild(day) let canvas = document.getElementById('canvas-' + isodate(dateobj)) let c = canvas.getContext('2d'); + c.scale(2,2) c.fillStyle = '#233' c.fillRect(0, 0, width, canvas_height); |