tracker

6.6 KB

1. // components/timelineedit.hl — `/timelines/:slug/edit` (tracker.worldapi.org#19, mission 066): the creator's editor of ONE
2. // timeline — its franchise (a row of chips: None + every franchise; a tap attaches it), its titles in their in-world order
3. // (↑ / ↓ move one place, ✕ removes), and "Add titles": our database as you type (search.hl's index), "Add" puts the title at
4. // the end. Mobile first: one column, big tap targets. Only the creator (franchises.hl isEditorSession) sees the controls; every
5. // face checks it again.
6. //
7. // HYBRIEL TRAPS (as components/search.hl, hybriel#121/#122): no member reads both the route param and `session` — the
8. // timeline's data come from `slug` alone, the editor state from `session` alone; every list is replaced whole with the
9. // face's answer, never appended to.
10. parent './main.hl'
11. import { appTitle } from '../project.hl'
12. import { isEditorSession, editPageOf, addToTimeline, removeFromTimeline, moveInTimeline, setTimelineFranchise, editSearch } from '../franchises.hl'
14. static editorOf = (session) => { return isEditorSession(session) }
15. static startOf = (slug) => { return editPageOf(slug) }
17. slug = null
18. session = null
19. isEditor = editorOf(session)
20. notEditor = isEditor == false
22. start = startOf(slug)
23. found = start.found
24. notFound = start.found == false
25. timelineId = start.id
26. name = start.name
27. viewHref = start.viewHref
28. rows = start.rows
29. hasRows = rows.length > 0
30. noRows = rows.length == 0
31. countText = rows.length == 1 ? '1 title' : rows.length + ' titles'
32. chips = start.chips
33. results = []
34. hasResults = results.length > 0
35. searchNote = ''
36. hasSearchNote = searchNote != ''
37. message = ''
38. hasMessage = message != ''
40. __title = found ? 'Edit ' + name + ' — ' + appTitle : appTitle
42. View {
43. timelineEditPage { "data-timeline" = timelineId
44. if (notFound) {
45. h1 { "Not found" }
46. p { "This timeline doesn't exist." }
47. }
48. if (found) {
49. franchisesHead {
50. h1 { class = "typed" typeWord { class = "type-word type-timeline" "Timeline" } typeSep { "|" } typeName { name } }
51. a { id = "timeline-view" class = "button" href = viewHref "View" }
52. }
53. if (notEditor) { p { id = "edit-refused" class = "muted" "Only the creator can edit franchises and timelines." } }
54. if (isEditor) {
55. if (hasMessage) { p { id = "edit-message" class = "message" message } }
56. editSection {
57. h2 { class = "film-heading" "Franchise" }
58. chipRow { id = "franchise-chips"
59. for (c of chips) { button { type = "button" class = c.cls value = c.id c.name on click(e) { emit pickFranchise(c.id) } } }
60. }
61. a { class = "edit-new-franchise" href = "/franchises/edit" "New franchise …" }
62. }
63. editSection {
64. h2 { class = "film-heading" "Titles in timeline order" }
65. p { class = "muted list-count" countText }
66. if (noRows) { p { class = "muted" "No titles yet — add some below." } }
67. if (hasRows) {
68. editRows { id = "edit-rows"
69. for (row of rows) {
70. editRow { "data-show" = row.id
71. editPos { row.pos }
72. img { class = "film-poster" src = row.posterUrl alt = "" }
73. filmText {
74. filmTitle { row.title }
75. filmMeta { span { row.typeLabel } }
76. }
77. button { type = "button" class = row.upClass value = "up" title = "Move up" "aria-label" = "Move up" "↑" on click(e) { emit moveRow(row.id, -1) } }
78. button { type = "button" class = row.downClass value = "down" title = "Move down" "aria-label" = "Move down" "↓" on click(e) { emit moveRow(row.id, 1) } }
79. button { type = "button" class = "quiet mv rm" value = "remove" title = "Remove" "aria-label" = "Remove" "✕" on click(e) { emit removeRow(row.id) } }
80. }
81. }
82. }
83. }
84. }
85. editSection {
86. h2 { class = "film-heading" "Add titles" }
87. input { id = "ted-search" type = "search" placeholder = "Search our movies and series" autocomplete = "off" "aria-label" = "Search titles" on input(e) { emit searchTyped(e) } }
88. if (hasSearchNote) { p { id = "ted-note" class = "muted" searchNote } }
89. if (hasResults) {
90. editRows { id = "ted-results"
91. for (r of results) {
92. editRow { "data-show" = r.id
93. img { class = "film-poster" src = r.posterUrl alt = "" }
94. filmText {
95. filmTitle { r.title }
96. filmMeta { span { r.typeLabel } }
97. }
98. button { type = "button" class = "inverted add" value = r.id "Add" on click(e) { emit addRow(r.id) } }
99. }
100. }
101. }
102. }
103. }
104. }
105. }
106. }
107. }
109. on pickFranchise(franchiseId) {
110. let r = emit server tedSetFranchise(timelineId, '' + franchiseId)
111. if (r == null || r.error != null) { message = r != null ? r.error : 'Could not save it.' return null }
112. message = ''
113. chips = r.chips
114. }
116. on moveRow(showId, delta) {
117. let r = emit server tedMove(timelineId, '' + showId, delta)
118. if (r == null || r.error != null) { message = r != null ? r.error : 'Could not save it.' return null }
119. message = ''
120. rows = r.rows
121. }
123. on removeRow(showId) {
124. let r = emit server tedRemove(timelineId, '' + showId)
125. if (r == null || r.error != null) { message = r != null ? r.error : 'Could not save it.' return null }
126. message = ''
127. rows = r.rows
128. }
130. on addRow(showId) {
131. let r = emit server tedAdd(timelineId, '' + showId)
132. if (r == null || r.error != null) { message = r != null ? r.error : 'Could not save it.' return null }
133. message = ''
134. rows = r.rows
135. // the added title leaves the results (it is in the timeline now)
136. let left = []
137. for (x of results) { if (x.id != showId) { left.push(x) } }
138. results = left
139. }
141. on searchTyped(e) {
142. let v = e.target.value
143. let r = emit server tedSearch(timelineId, v)
144. if (r == null || document.getElementById('ted-search').value != v) { return null }
145. results = r.rows
146. searchNote = v.trim() == '' ? '' : r.note
147. }
149. // ---- the faces (unique names; the trailing `session` is the server's) ----
150. on server tedSetFranchise(timelineId, franchiseId, session) {
151. if (!isEditorSession(session)) { return { error = 'only the creator can do that' } }
152. return setTimelineFranchise(timelineId, franchiseId)
153. }
155. on server tedMove(timelineId, showId, delta, session) {
156. if (!isEditorSession(session)) { return { error = 'only the creator can do that' } }
157. return moveInTimeline(timelineId, showId, delta)
158. }
160. on server tedRemove(timelineId, showId, session) {
161. if (!isEditorSession(session)) { return { error = 'only the creator can do that' } }
162. return removeFromTimeline(timelineId, showId)
163. }
165. on server tedAdd(timelineId, showId, session) {
166. if (!isEditorSession(session)) { return { error = 'only the creator can do that' } }
167. return addToTimeline(timelineId, showId)
168. }
170. // the search is our public database (like /search) — no session
171. on server tedSearch(timelineId, text) {
172. return editSearch(timelineId, text)
173. }