diff options
author | Hugo Hörnquist <hugo@lysator.liu.se> | 2023-09-05 01:25:00 +0200 |
---|---|---|
committer | Hugo Hörnquist <hugo@lysator.liu.se> | 2023-09-05 01:25:00 +0200 |
commit | 7949fcdc683d07689bad5da5d20bfa3eeb5a6a46 (patch) | |
tree | c1bc39dc0e508ee498cf7119f888f513db4bab8f /static/ts/clock.ts | |
parent | Add build step for jsdoc. (diff) | |
download | calp-7949fcdc683d07689bad5da5d20bfa3eeb5a6a46.tar.gz calp-7949fcdc683d07689bad5da5d20bfa3eeb5a6a46.tar.xz |
Move frontend code to subdirectories, to simplify command line flags.
Diffstat (limited to 'static/ts/clock.ts')
-rw-r--r-- | static/ts/clock.ts | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/static/ts/clock.ts b/static/ts/clock.ts new file mode 100644 index 00000000..bbd15de0 --- /dev/null +++ b/static/ts/clock.ts @@ -0,0 +1,136 @@ +export { + SmallcalCellHighlight, Timebar, + initialize_clock_components +} + +import { makeElement, date_to_percent } from './lib' + +abstract class Clock { + abstract update(now: Date): void; +} + + +class Timebar extends Clock { + + // start_time: Date + // end_time: Date + bar_object: HTMLElement | null + + constructor(/*start_time: Date, end_time: Date*/) { + super(); + // this.start_time = start_time; + // this.end_time = end_time; + this.bar_object = null + } + + + update(now: Date) { + // if (! (this.start_time <= now.getTime() && now.getTime() < this.end_time)) + // return; + + var event_area = document.getElementById(now.format("~Y-~m-~d")) + + if (event_area) { + if (this.bar_object !== null && this.bar_object.parentNode !== null) { + this.bar_object.parentNode.removeChild(this.bar_object) + } else { + this.bar_object = makeElement('div', { + id: 'bar', + className: 'eventlike current-time', + }); + } + + this.bar_object.style.top = date_to_percent(now) + "%"; + event_area.append(this.bar_object) + } + } +} + +class SmallcalCellHighlight extends Clock { + + small_cal: HTMLElement + current_cell: HTMLElement | null + + constructor(small_cal: HTMLElement) { + super(); + this.small_cal = small_cal; + this.current_cell = null + } + + update(now: Date) { + if (this.current_cell) { + this.current_cell.style.border = ""; + } + + /* This is expeced to fail if the current date is not + currently on screen. */ + this.current_cell = this.small_cal.querySelector( + "time[datetime='" + now.format("~Y-~m-~d") + "']"); + + if (this.current_cell) { + this.current_cell.style.border = "1px solid black"; + } + } +} + +/* -------------------------------------------------- */ + +class ClockElement extends HTMLElement { + + timer_id: number + + constructor() { + super(); + + this.timer_id = 0 + } + + connectedCallback() { + let interval = this.hasAttribute('interval') + ? +(this.getAttribute('interval') as string) + : 60; + interval *= 1000 /* ms */ + + this.timer_id = window.setInterval(() => this.update(new Date), interval) + this.update(new Date) + } + + static get observedAttributes() { + return ['timer_id'] + } + + update(_: Date) { /* noop */ } +} + + +class TodayButton extends ClockElement { + a: HTMLAnchorElement; + + constructor() { + super(); + this.a = document.createElement('a'); + this.a.textContent = 'Idag'; + this.a.classList.add('btn'); + } + + connectedCallback() { + super.connectedCallback(); + this.replaceChildren(this.a); + } + + update(now: Date) { + this.a.href = now.format("~Y-~m-~d.html") + } +} + + +class CurrentTime extends ClockElement { + update(now: Date) { + this.textContent = now.format('~H:~M:~S') + } +} + +function initialize_clock_components() { + customElements.define('today-button', TodayButton) + customElements.define('current-time', CurrentTime) +} |