aboutsummaryrefslogtreecommitdiff
path: root/static/components/vevent-block.ts
blob: 0aad19b2e7216004823d813c1023c5076857c60f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
export { ComponentBlock }

import { ComponentVEvent } from './vevent'
import { VEvent } from '../vevent'
import { toggle_popup, find_popup } from '../popup'
import { parseDate, to_local } from '../lib'


/* <vevent-block />

   A grahpical block in the week view.
*/
class ComponentBlock extends ComponentVEvent {
    constructor(uid?: string) {
        super(uid);

        this.addEventListener('click', () => {
            let uid = this.uid
            let popup = find_popup(uid);
            if (popup === null) throw new Error('no popup for uid ' + uid);
            toggle_popup(popup);
        });
    }

    redraw(data: VEvent) {
        let body = (this.template.content.cloneNode(true) as DocumentFragment).firstElementChild!;

        for (let el of body.querySelectorAll('[data-property]')) {
            if (!(el instanceof HTMLElement)) continue;
            let p = el.dataset.property!;
            let d, fmt;
            if ((d = data.getProperty(p))) {
                if ((fmt = el.dataset.fmt)) {
                    el.textContent = d.format(fmt);
                } else {
                    el.textContent = d;
                }
            } else switch (p.toLowerCase()) {
                /* We lack that property, but might want to set a default here */
                case 'summary':
                    el.textContent = 'Ny händelse'
                    break;
            }
        }

        this.replaceChildren(body);

        /* -------------------------------------------------- */

        let p;
        if ((p = data.getProperty('dtstart'))) {
            let c = this.closest('.event-container') as HTMLElement
            let start = parseDate(c.dataset.start!).getTime()
            let end = parseDate(c.dataset.end!).getTime();
            // console.log(p);
            let pp = to_local(p).getTime()
            let result = 100 * (Math.min(end, Math.max(start, pp)) - start) / (end - start) + "%"
            if (c.classList.contains('longevents')) {
                this.style.left = result
            } else {
                this.style.top = result
            }
            // console.log('dtstart', p);
        }
        if ((p = data.getProperty('dtend'))) {
            // console.log('dtend', p);
            let c = this.closest('.event-container') as HTMLElement
            let start = parseDate(c.dataset.start!).getTime()
            let end = parseDate(c.dataset.end!).getTime();
            let pp = to_local(p).getTime()
            let result = 100 - (100 * (Math.min(end, Math.max(start, pp)) - start) / (end - start)) + "%"
            if (c.classList.contains('longevents')) {
                this.style.width = 'unset';
                this.style.right = result;
            } else {
                this.style.height = 'unset';
                this.style.bottom = result;
            }
        }

        if (data.calendar) {
            this.dataset.calendar = data.calendar;
        }

        if (data.getProperty('rrule') !== undefined) {
            (this.getElementsByClassName('repeating')![0] as HTMLElement).innerText = '↺'
        }
    }
}