calendar

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