tracker

7.8 KB

1. // components/main.hl — THE SHELL (tracker.worldapi.org#32, mission 031): the WorldAPI theme's header and content-first shell
2. // (theme/shell/*, vendored from layouts.worldapi.org — never edited here) around the slot every page renders into. All CSS is
3. // in styles.hl (the theme's own rules come with theme/theme.hl and the shell files).
4. // THE HEADER (creator, tracker#32): desktop — brand left, the search field in the middle, the main menu
5. // Series | Shows | Movies | Genres | People | Franchises (tracker#40), the user icon far right; its dropdown holds the personal lists and ends with
6. // Settings, Logout. Signed out the ident selector stands in the user icon's place. Phone — ☰ (the sidebar overlay with the main
7. // menu), brand, the loupe (opens the search field under the bar), the user icon far right; signed out that is the ident icon (a
8. // small i and a big D lying on the floor, components/main.hl identIcon) whose dropdown holds the selector. The header's contents
9. // are flush with the content column (the theme's --layout-column).
10. // THE MARKED MENU ENTRY: a shell is not told the page's path (hl:web gives it only the route params), so MainMenu gets no
11. // `current`; styles.hl marks the entry of the type the page's heading names ("Series | …" → Series) with :has().
12. // THE SEARCH FIELD sends GET /find?q=… (project.hl findRoute → 302 /search/<text>, components/search.hl).
13. // THE SELECTOR: `<ident-selector key=IDENT_API_KEY>` from <ident>/selector.js, as in calendar/gitoria. Choosing an
14. // identity fires `ident-login` (one-time code); /login.js hands it to the hidden input #identcode, whose `change`
15. // goes to the face trackerLogin (server-side exchange, no reload). The element's class is `in` / `out`; /login.js
16. // mirrors it into the selector's `loggedIn`.
17. // LOGIN: the selector, or (phone, in the ident dropdown) a plain link to <ident>/login?key=&return=<public url>/login/callback
18. // (users.hl loginCallbackOf). After a login or logout in this tab the page is fetched again (navigate('/')).
19. import { navigate } from 'hl:web'
20. import { appTitle } from '../project.hl'
21. import { identKey, selectorScript, loginHref, userIdOfSession, userOfCode } from '../lib/users.hl'
22. import { randomBytes } from 'hl:crypto'
23. import AppHeader from '../theme/shell/app-header.hl'
24. import MainMenu from '../theme/shell/main-menu.hl'
25. import UserMenu from '../theme/shell/user-menu.hl'
26. import Sidebar from '../theme/shell/app-sidebar.hl'
27. import ContentFirst from '../theme/shell/content-first.hl'
29. static menu = [
30. { label = 'Series' href = '/series' }
31. { label = 'Shows' href = '/shows' }
32. { label = 'Movies' href = '/movies' }
33. { label = 'Genres' href = '/genres' }
34. { label = 'People' href = '/people' }
35. // tracker#40: the franchises and their timelines were only reachable by a title's widget
36. { label = 'Franchises' href = '/franchises' }
37. ]
39. slot = null
40. session = null
42. loggedIn = userIdOfSession(session) != null
43. loggedOut = userIdOfSession(session) == null
44. buttonHref = loginHref
45. selectorClass = loggedIn ? 'in' : 'out'
46. selectorKey = identKey
47. identScript = selectorScript
48. loginError = ''
49. hasLoginError = false
50. // OFFLINE (tracker.worldapi.org#10): the service worker opens `/` from its cache without a network; the shell then
51. // says so. hl:web gives a page no connection state and no "mounted" hook, so a tick asks the browser: `netProbe` runs
52. // an endless 1 s CSS animation (styles.hl), and each `animationiteration` reads navigator.onLine — a write only when
53. // it changed. (An `img` error or a socket event would race the hydration and be missed.)
54. offline = false
56. View {
57. body {
58. AppHeader { brand = appTitle search = "/find" searchPlaceholder = "Shows, movies, people"
59. MainMenu { items = menu }
60. if (loggedIn) {
61. UserMenu {
62. a { href = "/my/unwatched" "Unwatched" }
63. a { href = "/my/schedule" "Schedule" }
64. a { href = "/my/series" "My series" }
65. a { href = "/my/shows" "My shows" }
66. a { href = "/my/movies" "My movies" }
67. a { id = "settingslink" href = "/settings" "Settings" }
68. button { id = "logout" type = "button" "Logout" on click(e) { emit doLogout(e) } }
69. }
70. }
71. if (loggedOut) {
72. // the ident icon (phone) and its dropdown; from 60rem the dropdown stands open in the header: the selector alone
73. identMenu {
74. button { type = "button" class = "ident-toggle" popovertarget = "ident-panel" title = "Log in with ident" "aria-label" = "Log in with ident"
75. // identIcon: a small i standing beside a big D that lies on the floor (tilted into the screen); the D's lower
76. // face is its thickness (the 3-D effect), the counter is cut out (evenodd)
77. svg { class = "ident-icon" viewBox = "1 10 20 13.2" "aria-hidden" = "true"
78. path { class = "ident-d-side" d = "M5 22.6 L7.8 14.2 C15.1 14.2 19 16.6 19.6 18.4 C20.2 20.2 16.2 22.6 5 22.6 Z" }
79. path { class = "ident-d" "fill-rule" = "evenodd" d = "M5 21 L7.8 12.6 C15.1 12.6 19 15 19.6 16.8 C20.2 18.6 16.2 21 5 21 Z M10.7 14.4 C13.6 14.4 15.4 15.3 15.6 16.8 C15.8 18.3 13.7 19.2 10 19.2 Z" }
80. rect { class = "ident-i" x = "1.6" y = "14.2" width = "1.9" height = "6.8" rx = ".5" }
81. circle { class = "ident-i" cx = "2.55" cy = "11.6" r = "1.15" }
82. }
83. }
84. identPanel { id = "ident-panel" popover = "auto"
85. identSelector { id = "selector" key = selectorKey class = selectorClass }
86. a { id = "loginbutton" href = buttonHref title = "Log in with ident" "or log in at ident" }
87. }
88. }
89. }
90. }
91. input { id = "identcode" type = "hidden" on change(e) { emit gotCode(e) } }
92. if (hasLoginError) { p { id = "loginerror" class = "message banner" loginError } }
93. if (offline) { offlineNote { id = "offline" "You are offline. Your shows and lists need the network." } }
94. netProbe { "aria-hidden" = "true" on animationiteration(e) { emit netTick(e) } }
95. // the phone's overlay with the main menu (desktop = "false": the header shows the menu from 60rem), then the shell with the
96. // page. NOT the theme's `ContentFirst { Sidebar { … } main { slot } }`: hl:web renders a component's slot children on one
97. // line, and a page slot that does not start its own line is rendered once per line of the page (WebFramework.hl
98. // document(): the text before the marker is taken as the indent) — so `main` stands around the shell and the page is the
99. // shell's slot itself
100. Sidebar { desktop = "false" MainMenu { items = menu } }
101. main {
102. ContentFirst { slot }
103. }
104. script { src = identScript }
105. script { src = "/login.js" }
106. }
107. }
109. showIn = () => {
110. loggedIn = true
111. loggedOut = false
112. selectorClass = 'in'
113. loginError = ''
114. hasLoginError = false
115. }
116. showOut = () => {
117. loggedIn = false
118. loggedOut = true
119. selectorClass = 'out'
120. }
122. // the selector's code (via /login.js and the hidden input) → the server exchanges it
123. on gotCode(e) {
124. code = e.target.value
125. e.target.value = ''
126. if (code == null || code == '') { return null }
127. r = emit server trackerLogin(code)
128. if (r == null || r.error != null) {
129. loginError = r != null ? r.error : 'the login failed'
130. hasLoginError = true
131. return null
132. }
133. showIn()
134. navigate('/')
135. }
137. on client trackerSignedIn(tag) {
138. showIn()
139. navigate('/')
140. }
141. on client trackerSignedOut(tag) {
142. showOut()
143. navigate('/')
144. }
146. on netTick(e) {
147. down = window.navigator.onLine == false
148. if (down != offline) { offline = down }
149. }
151. on doLogout(e) {
152. emit server trackerLogOut()
153. showOut()
154. navigate('/')
155. }
157. // ---- the faces (the trailing `session` is always the server's: hybriel #16) ----
158. on server trackerLogin(code, session) {
159. if (session == null) { return { error = 'no session — reload the page' } }
160. x = userOfCode(code)
161. if (x.error != null) { return { error = x.error } }
162. tag = randomBytes(16)
163. session.user = { id = x.user.id }
164. session.data.tag = tag
165. emit client trackerSignedIn(tag)
166. return { ok = true }
167. }
169. on server trackerLogOut(session) {
170. if (session == null) { return { error = 'no session' } }
171. emit client trackerSignedOut(session.data.tag)
172. session.user = null
173. return { ok = true }
174. }