calendar

26.7 KB

1. // month-view.hl — THE MONTH VIEW: prev / next buttons on top, the month's name and the year between them, the
2. // days below (weeks start on Monday; the days of the neighbouring months are dimmed; today is marked).
3. // THE CALENDAR'S COPY of the pure-Hybriel month view of components.hybriel.worldapi.org (no .js), plus the user's
4. // events on the days and the editor for them (add: click a day; edit / delete: click an event). Events come from
5. // events.hl, one server round trip per change (faces calLoad / calSave / calDelete in calendar.hl). The date
6. // arithmetic is written here (plain integers), so it runs the same on the server (first render) and in the browser.
7. // What only the browser knows — today in the user's time zone, the month and weekday names in the user's language,
8. // the time zone's name (`Date` and `Intl` are browser globals of View handlers) — is read the moment the pointer, a
9. // finger or the keyboard reaches the month view; until then the server's UTC date and language-neutral names (month number, dots) show — the server never knows
10. // the language, so it never guesses one: names appear once, in the browser's language, and stay.
11. // The page reads `year` and `month` (1–12) as its own members. USE ONE PER PAGE: a composed component's
12. // members are the page's state (COMPONENTS.md §12).
13. import { serverToday } from './clock.hl'
14. import { pad, daysIn, before } from './dates.hl'
15. import { namesFor } from './names.hl'
16. import { userIdOfSession } from '../../users.hl'
17. import { eventsBetween, upcoming, defaultsOf } from '../../events.hl'
18. import { notify } from 'hl:web'
19. import { plan, shift, describe, withIndex, defaultRows } from './reminders.hl'
21. // the request's Accept-Language, handed in by the page (calendar.hl reads it from `headers`, hybriel #105): the first
22. // render already writes the names
23. acceptLanguage = null
24. Hybrid known = namesFor(acceptLanguage)
25. Boolean namesKnown = known != null
26. String today = serverToday()
27. Number year = toNumber(today.slice(0, 4))
28. Number month = toNumber(today.slice(5, 7))
29. Hybrid monthNames = namesKnown ? known.months : ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
30. Hybrid weekdayNames = namesKnown ? known.days : ['·', '·', '·', '·', '·', '·', '·']
31. String title = monthNames[month - 1] + ' ' + year
32. Hybrid base = build(year, month, today)
33. Hybrid weekdays = weekdayNames
34. session = null
35. userId = userIdOfSession(session)
36. Boolean signedIn = userId != null
37. String winFirst = base[0].date
38. String winLast = base[41].date
39. Hybrid events = signedIn ? eventsBetween(userId, winFirst, winLast) : []
40. Hybrid days = fill(base, events)
41. // the reminders (ticket calendar#4): the events of the next days with the reminders that apply (`soon`, kept with the page
42. // state, so an offline page still knows them), the calendar's defaults in words, the timers the browser holds
43. Hybrid soon = signedIn ? upcoming(userId, shift(today, -2), shift(today, 9)) : []
44. String defaultText = signedIn ? describe(defaultsOf(userId)) : ''
45. Hybrid defRows = signedIn ? defaultsOf(userId) : []
46. Boolean fCustom = false
47. Hybrid remRows = []
48. Hybrid setRows = []
49. Hybrid timers = []
50. Number lastArm = 0
51. String notifyState = 'unknown'
52. String setClass = 'closed'
53. String setError = ''
54. String barClass = signedIn ? 'bar' : 'hidden'
55. String askClass = 'hidden'
56. String blockedClass = 'hidden'
57. String plannedText = ''
58. String fId = ''
59. String fTitle = ''
60. Boolean fAllDay = false
61. String fStartDate = ''
62. String fStartTime = '09:00'
63. String fEndDate = ''
64. String fEndTime = '10:00'
65. String fPlace = ''
66. String fNotes = ''
67. String fZone = 'UTC'
68. String formClass = 'closed'
69. String formError = ''
70. String formHeading = 'New event'
71. Boolean isNew = true
72. String formKind = 'timed'
73. String ownClass = 'quiet'
74. String calClass = ''
75. String defaultClass = ''
76. String rowsClass = 'hidden'
77. String addClass = 'quiet hidden'
78. String timedButton = ''
79. String alldayButton = 'quiet'
80. String deleteClass = 'danger hidden'
81. String prevLabel = namesKnown ? known.prev : '‹'
82. String nextLabel = namesKnown ? known.next : '›'
83. Number seen = 0
84. Number paged = 0
86. // 0 = Monday … 6 = Sunday (Sakamoto's method gives 0 = Sunday)
87. weekdayOf(y, m, d) {
88. let t = [0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4]
89. let yy = m < 3 ? y - 1 : y
90. let sun = (yy + (yy - yy % 4) / 4 - (yy - yy % 100) / 100 + (yy - yy % 400) / 400 + t[m - 1] + d) % 7
91. return (sun + 6) % 7
92. }
94. // 42 days (six weeks of seven), so the view keeps its height from month to month
95. build(y, m, todayText) {
96. let py = m == 1 ? y - 1 : y
97. let pm = m == 1 ? 12 : m - 1
98. let ny = m == 12 ? y + 1 : y
99. let nm = m == 12 ? 1 : m + 1
100. let lead = weekdayOf(y, m, 1)
101. let n = daysIn(y, m)
102. let pn = daysIn(py, pm)
103. let out = []
104. let day = 1 - lead
105. let w = 0
106. while (w < 6) {
107. let i = 0
108. while (i < 7) {
109. let cy = y
110. let cm = m
111. let cd = day
112. let cls = ''
113. if (day < 1) { cy = py cm = pm cd = pn + day cls = 'outside' }
114. if (day > n) { cy = ny cm = nm cd = day - n cls = 'outside' }
115. let date = cy + '-' + pad(cm) + '-' + pad(cd)
116. if (date == todayText) { cls = 'today' }
117. out.push({ n = cd date = date cls = cls })
118. day = day + 1
119. i = i + 1
120. }
121. w = w + 1
122. }
123. return out
124. }
126. // the events that touch a day, as four chips on the day cell (a nested `for` does not repaint when the outer list is
127. // reassigned: hybriel #86 — so the chips are fixed members of the day: t = text, c = class, v = event id).
128. // Timed events start with their time on the first day. More than four: the fourth chip says "+N more".
129. fill(list, evs) {
130. let out = []
131. let i = 0
132. while (i < list.length) {
133. let d = list[i]
134. let hit = []
135. let j = 0
136. while (j < evs.length) {
137. let e = evs[j]
138. if (!before(d.date, e.first) && !before(e.last, d.date)) { hit.push(e) }
139. j = j + 1
140. }
141. let row = { n = d.n date = d.date cls = d.cls }
142. let k = 0
143. while (k < 4) {
144. let text = ''
145. let cls = 'unused'
146. let id = ''
147. if (k < hit.length && (hit.length <= 4 || k < 3)) {
148. let e = hit[k]
149. text = (e.allDay || d.date != e.first ? '' : e.startTime + ' ') + e.title
150. cls = 'event'
151. id = e.id
152. }
153. if (k == 3 && hit.length > 4) { text = '+' + (hit.length - 3) + ' more' cls = 'more' }
154. row['t' + k] = text
155. row['c' + k] = cls
156. row['v' + k] = id
157. k = k + 1
158. }
159. out.push(row)
160. i = i + 1
161. }
162. return out
163. }
165. // the form's fields for a new event on `date` (all text; allDay a Boolean); zone = the browser's time zone name
166. blank(date, zone) {
167. return { id = '' title = '' allDay = false startDate = date startTime = '09:00' endDate = date endTime = '10:00' place = '' notes = '' zone = zone custom = false rows = [] }
168. }
170. show(y, m, evs) {
171. year = y
172. month = m
173. title = monthNames[m - 1] + ' ' + y
174. base = build(y, m, today)
175. winFirst = base[0].date
176. winLast = base[41].date
177. events = evs
178. days = fill(base, evs)
179. }
181. // Colours: the semantic WorldAPI tokens as css variables, each with its palette value as fallback (a component's browser
182. // module cannot import tokens.hl itself); the app sets --color-accent in its styles.hl.
183. Style {
184. 'month-view' { display = 'grid' gap = '.5rem' }
185. 'month-view header' { display = 'flex' alignItems = 'center' justifyContent = 'space-between' gap = '.5rem' }
186. 'month-view h2' { margin = '0' fontSize = '1.1rem' color = 'var(--color-text-strong, rgb(245, 250, 255))' textAlign = 'center' flex = '1' textTransform = 'capitalize' }
187. 'month-view ol' { display = 'grid' gridTemplateColumns = 'repeat(7, minmax(0, 1fr))' margin = '0' padding = '0' listStyle = 'none' }
188. 'month-view header button' { font = 'inherit' fontWeight = '600' padding = '.4rem .9rem' color = 'var(--color-text, rgb(195, 200, 205))' background = 'transparent' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.4rem' cursor = 'pointer' }
189. 'month-view header button:hover' { background = 'var(--color-surface, rgb(35, 40, 45))' }
190. '#month-weekdays li' { padding = '.3rem 0' fontSize = '.8rem' fontWeight = '600' color = 'var(--color-text-muted, rgb(145, 150, 155))' textAlign = 'center' }
191. '#month-days li' { minHeight = '3rem' padding = '.3rem' border = '1px solid var(--color-border, rgb(70, 75, 80))' textAlign = 'right' background = 'var(--color-surface, rgb(35, 40, 45))' cursor = 'pointer' overflow = 'hidden' }
192. '#month-days time' { color = 'var(--color-text, rgb(195, 200, 205))' fontSize = '.95rem' }
193. '#month-days li.outside' { background = 'var(--color-background, rgb(25, 30, 35))' }
194. '#month-days li.outside time' { color = 'var(--color-text-muted, rgb(145, 150, 155))' }
195. '#month-days li.today' { outline = '2px solid var(--color-accent, #569bd4)' outlineOffset = '-2px' }
196. '#month-days li.today time' { color = 'var(--color-accent, #569bd4)' fontWeight = '800' }
197. 'month-view bar' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.5rem' }
198. 'month-view bar.hidden' { display = 'none' }
199. 'month-view bar p' { margin = '0' fontSize = '.85rem' color = 'var(--color-text-muted, rgb(145, 150, 155))' }
200. 'month-view .hidden' { display = 'none' }
201. 'reminder-box' { display = 'grid' gap = '.4rem' }
202. 'reminder-box h3' { margin = '0' fontSize = '.85rem' fontWeight = '600' color = 'var(--color-text-muted, rgb(145, 150, 155))' }
203. 'reminder-box p' { margin = '0' fontSize = '.85rem' color = 'var(--color-text-muted, rgb(145, 150, 155))' }
204. 'reminder-box ol' { display = 'grid' gap = '.4rem' }
205. 'reminder-row' { display = 'flex' flexWrap = 'wrap' alignItems = 'center' gap = '.4rem' }
206. 'reminder-row input[type=number]' { width = '5rem' }
207. 'reminder-row select' { font = 'inherit' padding = '.4rem' color = 'var(--color-text-strong, rgb(245, 250, 255))' background = 'var(--color-background-sunken, rgb(20, 25, 30))' border = '1px solid var(--color-border, rgb(70, 75, 80))' borderRadius = '.4rem' }
208. 'reminder-row.other input[type=time]' { display = 'none' }
209. '@media (min-width: 40rem)' {
210. '#month-days li' { minHeight = '5rem' }
211. }
212. }
214. View {
215. monthView { on pointerover(e) { emit monthEnv(e) } on focusin(e) { emit monthEnv(e) } on touchstart(e) { emit monthEnv(e) }
216. header {
217. button { id = "month-prev" type = "button" class = "quiet" title = prevLabel "‹" on click(e) { emit monthPrev(e) } }
218. h2 { id = "month-title" title }
219. button { id = "month-next" type = "button" class = "quiet" title = nextLabel "›" on click(e) { emit monthNext(e) } }
220. }
221. bar { id = "reminder-bar" class = barClass
222. button { id = "notify-ask" type = "button" class = askClass "Turn on notifications" on click(e) { emit askNotify(e) } }
223. p { id = "notify-blocked" class = blockedClass "Notifications are blocked for this site in the browser settings." }
224. p { id = "notify-planned" plannedText }
225. button { id = "settings-open" type = "button" class = "quiet" "Reminder settings" on click(e) { emit openSettings(e) } }
226. }
227. ol { id = "month-weekdays" for (name of weekdays) { li { name } } }
228. ol { id = "month-days" on click(e) { emit dayClick(e) }
229. for (d of days) {
230. li { class = d.cls
231. time { datetime = d.date d.n }
232. dayEvents {
233. button { class = d.c0 type = "button" value = d.v0 d.t0 }
234. button { class = d.c1 type = "button" value = d.v1 d.t1 }
235. button { class = d.c2 type = "button" value = d.v2 d.t2 }
236. button { class = d.c3 type = "button" value = d.v3 d.t3 }
237. }
238. }
239. }
240. }
241. eventEditor { id = "eventeditor" class = formClass
242. form { id = "eventform" class = formKind
243. on submit(e) {
244. e.preventDefault()
245. emit saveEvent(e)
246. }
247. h2 { id = "formheading" formHeading }
248. kindSwitch {
249. button { id = "kind-timed" type = "button" class = timedButton "At a time" on click(e) { emit setKind(false) } }
250. button { id = "kind-allday" type = "button" class = alldayButton "All day" on click(e) { emit setKind(true) } }
251. }
252. label { "Title"
253. input { id = "f-title" name = "title" maxlength = "200" autocomplete = "off" required = "required" value = fTitle on input(e) { emit setF('title', e.target.value) } }
254. }
255. fieldRow {
256. label { "From"
257. input { id = "f-startdate" name = "startDate" type = "date" required = "required" value = fStartDate on input(e) { emit setF('startDate', e.target.value) } }
258. }
259. label { class = "timed" "at"
260. input { id = "f-starttime" name = "startTime" type = "time" value = fStartTime on input(e) { emit setF('startTime', e.target.value) } }
261. }
262. }
263. fieldRow {
264. label { "To"
265. input { id = "f-enddate" name = "endDate" type = "date" value = fEndDate on input(e) { emit setF('endDate', e.target.value) } }
266. }
267. label { class = "timed" "at"
268. input { id = "f-endtime" name = "endTime" type = "time" value = fEndTime on input(e) { emit setF('endTime', e.target.value) } }
269. }
270. }
271. label { "Place"
272. input { id = "f-place" name = "place" maxlength = "200" autocomplete = "off" value = fPlace on input(e) { emit setF('place', e.target.value) } }
273. }
274. label { "Notes"
275. textarea { id = "f-notes" name = "notes" rows = "4" maxlength = "5000" value = fNotes on input(e) { emit setF('notes', e.target.value) } }
276. }
277. reminderBox {
278. h3 { "Reminders" }
279. kindSwitch {
280. button { id = "rem-calendar" type = "button" class = calClass "Calendar's" on click(e) { emit setCustom(false) } }
281. button { id = "rem-own" type = "button" class = ownClass "Own" on click(e) { emit setCustom(true) } }
282. }
283. p { id = "rem-default-text" class = defaultClass defaultText }
284. ol { id = "rem-rows" class = rowsClass
285. for (r of remRows) {
286. reminderRow { class = r.cls
287. input { type = "number" min = "0" value = r.n on change(e) { emit setRem('rem', r.i, 'n', e.target.value) } }
288. select { value = r.unit on change(e) { emit setRem('rem', r.i, 'unit', e.target.value) }
289. option { value = "minutes" "minutes before" }
290. option { value = "hours" "hours before" }
291. option { value = "days" "days before, at" }
292. }
293. input { type = "time" value = r.time on change(e) { emit setRem('rem', r.i, 'time', e.target.value) } }
294. button { type = "button" class = "quiet" "×" on click(e) { emit delRem('rem', r.i) } }
295. }
296. }
297. }
298. button { id = "rem-add" type = "button" class = addClass "Add reminder" on click(e) { emit addRem('rem') } }
299. }
300. p { id = "formerror" class = "message" formError }
301. formButtons {
302. button { id = "event-save" type = "submit" "Save" }
303. button { id = "event-cancel" type = "button" class = "quiet" "Cancel" on click(e) { emit closeForm(e) } }
304. button { id = "event-delete" type = "button" class = deleteClass "Delete" on click(e) { emit deleteEvent(e) } }
305. }
306. }
307. }
308. eventEditor { id = "settingseditor" class = setClass
309. form { id = "settingsform" class = "timed"
310. on submit(e) {
311. e.preventDefault()
312. emit saveSettings(e)
313. }
314. h2 { "Reminder settings" }
315. p { class = "muted" "Every event without reminders of its own is reminded like this:" }
316. ol { id = "set-rows"
317. for (r of setRows) {
318. reminderRow { class = r.cls
319. input { type = "number" min = "0" value = r.n on change(e) { emit setRem('set', r.i, 'n', e.target.value) } }
320. select { value = r.unit on change(e) { emit setRem('set', r.i, 'unit', e.target.value) }
321. option { value = "minutes" "minutes before" }
322. option { value = "hours" "hours before" }
323. option { value = "days" "days before, at" }
324. }
325. input { type = "time" value = r.time on change(e) { emit setRem('set', r.i, 'time', e.target.value) } }
326. button { type = "button" class = "quiet" "×" on click(e) { emit delRem('set', r.i) } }
327. }
328. }
329. }
330. button { id = "set-add" type = "button" class = "quiet" "Add reminder" on click(e) { emit addRem('set') } }
331. p { id = "settingserror" class = "message" setError }
332. formButtons {
333. button { id = "set-save" type = "submit" "Save" }
334. button { id = "set-cancel" type = "button" class = "quiet" "Cancel" on click(e) { emit closeSettings(e) } }
335. }
336. }
337. }
338. input { id = "month-view-goto" type = "hidden" on change(e) { emit monthGoto(e.target.value) } }
339. }
340. }
342. // the events of the six weeks shown, from the server (none while signed out)
343. loadEvents(y, m) {
344. if (!signedIn) { return [] }
345. let b = build(y, m, today)
346. let r = emit server calLoad(b[0].date, b[41].date)
347. if (r != null && r.soon != null) { takeSoon(r) }
348. return r == null || r.events == null ? [] : r.events
349. }
351. on monthPrev(e) {
352. browserEnv()
353. paged = 1
354. let y = month == 1 ? year - 1 : year
355. let m = month == 1 ? 12 : month - 1
356. show(y, m, loadEvents(y, m))
357. }
359. on monthNext(e) {
360. browserEnv()
361. paged = 1
362. let y = month == 12 ? year + 1 : year
363. let m = month == 12 ? 1 : month + 1
364. show(y, m, loadEvents(y, m))
365. }
367. // the browser's today, language and time zone, once: today follows the user's time zone, the names their language
368. on monthEnv(e) {
369. browserEnv()
370. // every ten minutes of use the timers are set again (a long-open page keeps the next week planned)
371. if (signedIn && Date.now() - lastArm > 600000) { arm() }
372. }
374. browserEnv() {
375. if (seen == 1) { return null }
376. seen = 1
377. let now = new Date()
378. let lang = navigator.language != null ? navigator.language : 'en'
379. let zone = Intl.DateTimeFormat().resolvedOptions().timeZone
380. today = ('' + (10000 + now.getFullYear())).slice(1) + '-' + pad(now.getMonth() + 1) + '-' + pad(now.getDate())
381. // the server already wrote the names of a language it knows: they stay, so paging never switches them
382. if (!namesKnown) {
383. let mf = Intl.DateTimeFormat(lang, { month = 'long' })
384. let df = Intl.DateTimeFormat(lang, { weekday = 'short' })
385. let ms = []
386. let ds = []
387. let i = 0
388. while (i < 12) { ms.push(mf.format(new Date(Date.UTC(2024, i, 15, 12)))) i = i + 1 }
389. i = 0
390. while (i < 7) { ds.push(df.format(new Date(Date.UTC(2024, 0, 1 + i, 12)))) i = i + 1 }
391. monthNames = ms
392. weekdayNames = ds
393. weekdays = ds
394. let de = lang.slice(0, 2) == 'de'
395. prevLabel = de ? 'Voriger Monat' : 'Previous month'
396. nextLabel = de ? 'Nächster Monat' : 'Next month'
397. }
398. fZone = zone != null && zone != '' ? zone : 'UTC'
399. readPermission()
400. // the month shown follows the corrected today only while the user has not paged yet
401. if (paged == 0) {
402. let y = toNumber(today.slice(0, 4))
403. let m = toNumber(today.slice(5, 7))
404. show(y, m, loadEvents(y, m))
405. } else { show(year, month, loadEvents(year, month)) }
406. // (offline the server did not answer: the timers are set from the reminders the page already holds)
407. arm()
408. }
410. // ---- the reminders: notifications the browser holds a timer for (they fire while the app or its worker is open, also offline) ----
411. // the server's newest answer about the reminders to come; the timers are set again from it
412. takeSoon(r) {
413. soon = r.soon
414. if (r.defaults != null) { defaultText = r.defaults }
415. if (r.defaultRows != null) { defRows = r.defaultRows }
416. arm()
417. }
419. // one timer per reminder that is still to come within a week; the old timers are dropped first
420. arm() {
421. if (!signedIn) { return null }
422. let i = 0
423. while (i < timers.length) { clearTimeout(timers[i]) i = i + 1 }
424. let nowMs = Date.now()
425. let list = plan(soon, nowMs, 604800000)
426. let ids = []
427. i = 0
428. while (i < list.length) {
429. // `p` is a new binding on every pass (hybriel #106): each timer keeps ITS reminder
430. let p = list[i]
431. ids.push(setTimeout(() => { notify(p.title, { body = p.body tag = p.key icon = '/icons/icon-192.png' }) }, p.at - nowMs))
432. i = i + 1
433. }
434. timers = ids
435. lastArm = nowMs
436. plannedText = list.length == 0 ? '' : (list.length == 1 ? '1 reminder' : list.length + ' reminders') + ' set for the next 7 days'
437. }
439. readPermission() {
440. let n = window.Notification
441. notifyState = n == null ? 'unsupported' : n.permission
442. askClass = notifyState == 'default' ? '' : 'hidden'
443. blockedClass = notifyState == 'denied' ? '' : 'hidden'
444. }
446. // the button is the click the browser wants before it allows notifications
447. on askNotify(e) {
448. notify('Notifications are on', { body = 'Your reminders show up here.' })
449. readPermission()
450. }
452. // from a host script (the date picker): "YYYY-MM-DD" → show that date's month
453. on monthGoto(text) {
454. paged = 1
455. let y = toNumber(text.slice(0, 4))
456. let m = toNumber(text.slice(5, 7))
457. show(y, m, loadEvents(y, m))
458. }
460. // ---- the editor ----
461. // the reminders switch: the calendar's or the event's own
462. syncCustom() {
463. calClass = fCustom ? 'quiet' : ''
464. ownClass = fCustom ? '' : 'quiet'
465. defaultClass = fCustom ? 'hidden' : ''
466. rowsClass = fCustom ? '' : 'hidden'
467. addClass = fCustom ? 'quiet' : 'quiet hidden'
468. }
470. // the classes that follow the form's kind and whether it edits an existing event
471. syncForm() {
472. formKind = fAllDay ? 'allday' : 'timed'
473. timedButton = fAllDay ? 'quiet' : ''
474. alldayButton = fAllDay ? '' : 'quiet'
475. deleteClass = isNew ? 'danger hidden' : 'danger'
476. }
478. openForm(fields, heading, fresh) {
479. fId = fields.id
480. fTitle = fields.title
481. fAllDay = fields.allDay
482. fStartDate = fields.startDate
483. fStartTime = fields.startTime
484. fEndDate = fields.endDate
485. fEndTime = fields.endTime
486. fPlace = fields.place
487. fNotes = fields.notes
488. isNew = fresh
489. fCustom = fields.custom
490. remRows = withIndex(fields.rows)
491. syncCustom()
492. formHeading = heading
493. formError = ''
494. formClass = 'open'
495. syncForm()
496. }
498. // one click on the day list: an event button edits that event, anywhere else on a day adds one to that day
499. on dayClick(e) {
500. if (!signedIn) { return null }
501. let li = e.target.closest('li')
502. if (li == null) { return null }
503. let date = li.querySelector('time').getAttribute('datetime')
504. let b = e.target.closest('button.event')
505. if (b == null) {
506. let fresh = blank(date, fZone)
507. openForm(fresh, 'New event', true)
508. return null
509. }
510. let j = 0
511. while (j < events.length) {
512. let ev = events[j]
513. if (ev.id == b.value) {
514. let fields = { id = ev.id title = ev.title allDay = ev.allDay startDate = ev.startDate startTime = ev.startTime endDate = ev.endDate endTime = ev.endTime place = ev.place notes = ev.notes zone = fZone custom = ev.custom rows = ev.rows }
515. openForm(fields, 'Edit event', false)
516. return null
517. }
518. j = j + 1
519. }
520. }
522. on setF(name, value) {
523. if (name == 'title') { fTitle = value }
524. if (name == 'startDate') { fStartDate = value }
525. if (name == 'startTime') { fStartTime = value }
526. if (name == 'endDate') { fEndDate = value }
527. if (name == 'endTime') { fEndTime = value }
528. if (name == 'place') { fPlace = value }
529. if (name == 'notes') { fNotes = value }
530. }
532. on setCustom(own) {
533. fCustom = own
534. // switching to own reminders starts from the calendar's, so nothing has to be typed for the usual case
535. if (own && remRows.length == 0) { remRows = withIndex(defaultRows) }
536. syncCustom()
537. }
539. // one reminder row of the event editor (which = 'rem') or of the settings (which = 'set')
540. on setRem(which, i, field, value) {
541. let rows = which == 'rem' ? remRows : setRows
542. if (i < 0 || i >= rows.length) { return null }
543. let out = []
544. let k = 0
545. while (k < rows.length) {
546. let r = rows[k]
547. let n = r.n
548. let unit = r.unit
549. let time = r.time
550. if (k == i && field == 'n') { n = value }
551. if (k == i && field == 'unit') { unit = value }
552. if (k == i && field == 'time') { time = value }
553. out.push({ unit = unit n = n time = time })
554. k = k + 1
555. }
556. if (which == 'rem') { remRows = withIndex(out) } else { setRows = withIndex(out) }
557. }
559. on addRem(which) {
560. let rows = which == 'rem' ? remRows : setRows
561. let out = []
562. let k = 0
563. while (k < rows.length) { out.push({ unit = rows[k].unit n = rows[k].n time = rows[k].time }) k = k + 1 }
564. out.push({ unit = 'minutes' n = '10' time = '09:00' })
565. if (which == 'rem') { remRows = withIndex(out) } else { setRows = withIndex(out) }
566. }
568. on delRem(which, i) {
569. let rows = which == 'rem' ? remRows : setRows
570. let out = []
571. let k = 0
572. while (k < rows.length) {
573. if (k != i) { out.push({ unit = rows[k].unit n = rows[k].n time = rows[k].time }) }
574. k = k + 1
575. }
576. if (which == 'rem') { remRows = withIndex(out) } else { setRows = withIndex(out) }
577. }
579. // ---- the calendar settings: the default reminders ----
580. on openSettings(e) {
581. let r = emit server calSettingsLoad()
582. if (r == null || r.error != null) {
583. setError = r == null ? 'the settings need the server: you are offline' : r.error
584. setClass = 'open'
585. return null
586. }
587. setRows = withIndex(r.rows)
588. setError = ''
589. setClass = 'open'
590. }
592. on closeSettings(e) {
593. setClass = 'closed'
594. }
596. on saveSettings(e) {
597. let r = emit server calSettingsSave(setRows)
598. if (r == null || r.error != null) {
599. setError = r == null ? 'the settings could not be saved (offline?)' : r.error
600. return null
601. }
602. setClass = 'closed'
603. takeSoon(r)
604. }
606. on setKind(allDay) {
607. fAllDay = allDay
608. if (!allDay && fStartTime == '') { fStartTime = '09:00' }
609. if (!allDay && fEndTime == '' && fEndDate != '') { fEndTime = '10:00' }
610. syncForm()
611. }
613. on closeForm(e) {
614. formClass = 'closed'
615. }
617. // what the form holds, as the face takes it
618. formFields() {
619. return { id = fId title = fTitle allDay = fAllDay startDate = fStartDate startTime = fStartTime endDate = fEndDate endTime = fEndTime place = fPlace notes = fNotes zone = fZone custom = fCustom reminders = remRows }
620. }
622. // the event as the page shows it, for an event saved while offline (the server sends the real one when it is back)
623. localView(f) {
624. let allDay = f.allDay
625. let last = f.endDate != '' ? f.endDate : f.startDate
626. let mine = []
627. let k = 0
628. while (k < f.reminders.length) { mine.push({ unit = f.reminders[k].unit n = f.reminders[k].n time = f.reminders[k].time }) k = k + 1 }
629. return { id = f.id title = f.title allDay = allDay first = f.startDate last = last
630. startDate = f.startDate startTime = allDay ? '' : f.startTime endDate = f.endDate endTime = allDay ? '' : f.endTime
631. place = f.place notes = f.notes start = f.startDate zone = f.zone custom = f.custom rows = f.custom ? mine : defRows }
632. }
634. on saveEvent(e) {
635. let f = formFields()
636. if (fTitle.trim() == '' || fStartDate == '') {
637. formError = 'the event needs a title and a start date'
638. return null
639. }
640. let r = emit server calSave(f, winFirst, winLast)
641. if (r == null) {
642. // OFFLINE: the save waits in the app's queue (it is sent when the connection is back); here the event and its
643. // reminders are set at once, so the notification still comes
644. if (f.id == '') { f.id = 'local-' + Date.now() }
645. emit server calSaveQueued(f, winFirst, winLast)
646. let v = localView(f)
647. let evs = []
648. let k = 0
649. while (k < events.length) { if (events[k].id != v.id) { evs.push(events[k]) } k = k + 1 }
650. evs.push(v)
651. let mine = []
652. k = 0
653. while (k < soon.length) { if (soon[k].id != v.id) { mine.push(soon[k]) } k = k + 1 }
654. mine.push({ id = v.id title = v.title allDay = v.allDay startDate = v.startDate startTime = v.startTime place = v.place zone = v.zone rows = v.rows })
655. soon = mine
656. formClass = 'closed'
657. show(year, month, evs)
658. arm()
659. return null
660. }
661. if (r.error != null) {
662. formError = r.error
663. return null
664. }
665. formClass = 'closed'
666. takeSoon(r)
667. show(year, month, r.events)
668. }
670. on deleteEvent(e) {
671. let r = emit server calDelete(fId, winFirst, winLast)
672. if (r == null || r.error != null) {
673. formError = r == null ? 'the event could not be deleted (offline?)' : r.error
674. return null
675. }
676. formClass = 'closed'
677. takeSoon(r)
678. show(year, month, r.events)
679. }