blob: 602e1872ed99873337b8b6d75c8ca2b42dea4671 (
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
export { ComponentEdit }
import { ComponentVEvent } from './vevent'
import { DateTimeInput } from './date-time-input'
import { vcal_objects, event_calendar_mapping } from '../globals'
import { VEvent } from '../vevent'
import { create_event } from '../server_connect'
/* <vevent-edit />
Edit form for a given VEvent. Used as the edit tab of popups.
*/
class ComponentEdit extends ComponentVEvent {
firstTime: boolean
constructor() {
super();
this.firstTime = true;
}
connectedCallback() {
/* Edit tab is rendered here. It's left blank server-side, since
it only makes sense to have something here if we have javascript */
let data = vcal_objects.get(this.uid)
if (!data) {
throw `Data missing for uid ${this.dataset.uid}.`
}
// return;
/* Handle calendar dropdown */
for (let el of this.getElementsByClassName('calendar-selection')) {
for (let opt of el.getElementsByTagName('option')) {
opt.selected = false;
if (opt.value == event_calendar_mapping.get(this.uid)) {
data.setCalendar(opt.value);
opt.selected = true;
/* No break since we want to set the remainders 'selected' to false */
}
}
el.addEventListener('change', (e) => {
let v = (e.target as HTMLSelectElement).selectedOptions[0].value
// e.selectedOptions[0].innerText
let obj = vcal_objects.get(this.uid)!
obj.setCalendar(v);
});
}
this.redraw(data);
for (let el of this.getElementsByClassName("interactive")) {
// console.log(el);
el.addEventListener('input', () => {
let obj = vcal_objects.get(this.uid)
if (obj === undefined) {
throw 'No object with uid ' + this.uid
}
if (!(el instanceof HTMLInputElement
|| el instanceof DateTimeInput)) {
console.log(el, 'not an HTMLInputElement');
return;
}
obj.setProperty(
el.dataset.property!,
el.value)
});
}
let submit = this.querySelector('form') as HTMLFormElement
submit.addEventListener('submit', (e) => {
console.log(submit, e);
create_event(vcal_objects.get(this.uid)!);
e.preventDefault();
return false;
});
}
redraw(data: VEvent) {
// update ourselves from template
if (!this.template) {
throw "Something";
}
let body;
if (this.firstTime) {
body = (this.template.content.cloneNode(true) as DocumentFragment).firstElementChild!;
} else {
body = this;
}
for (let el of body.getElementsByClassName("interactive")) {
if (!(el instanceof HTMLElement)) continue;
let p = el.dataset.property!;
let d: any;
if ((d = data.getProperty(p))) {
/*
https://stackoverflow.com/questions/57157830/how-can-i-specify-the-sequence-of-running-nested-web-components-constructors
*/
window.setTimeout(() => {
/* NOTE Some specific types might require special formatting
here. But due to my custom components implementing custom
`.value' procedures, we might not need any special cases
here */
/* Technically we just want to cast to HTMLElement with
value field here, but multiple types implement it
sepparately, and no common interface exist */
(el as HTMLInputElement).value = d;
});
}
}
for (let el of body.getElementsByTagName('calendar-selection')) {
for (let opt of el.getElementsByTagName('option')) {
opt.selected = false;
if (opt.value == data._calendar) {
opt.selected = true;
}
}
}
if (this.firstTime) {
this.replaceChildren(body);
this.firstTime = false;
}
}
}
|
