source: Klonkt/src/views/pages/ward.ejs@ 303bfc4

Last change on this file since 303bfc4 was 303bfc4, checked in by Robin <roboburr@…>, 3 months ago

De Ward PWA: het vangnet vanuit het kind gezien

Klonkt had /guardian, de kant van de volwassene. Dit is dezelfde relatie
vanaf de andere kant: wie waakt er over mij, is dat vangnet heel, en wat
ligt er bij hen te wachten. Shaer doet dit als native app; dit is het in
de browser, voor wie geen app kan of wil installeren.

Plak 1 is bewust HET VANGNET en niet de sociale kant. De feed en de
composer staan al op de gewone Klonkt-site; die dubbelen we niet zomaar.
Wat Shaer uniek toevoegt voor een ward is juist het guardianship-deel.

Drie keuzes die er toe doen. De hulpknop staat bovenaan en vol breed: als
je hem nodig hebt moet je niet hoeven zoeken. De par. 4-controle zit in
een eigen endpoint omdat hij per guardian een remote fetch kost, dus de
pagina tekent eerst en vult daarna aan; een trage guardian-server mag het
scherm van een kind niet ophouden. En dezelfde drieslag als in de apps:
misvormd is oranje, onbereikbaar is grijs, in orde is stil. Onbereikbaar
is geen goedkeuring, maar ook geen alarm.

New file:
src/routes/ward.js

  • pagina, /api/state, /api/guardian-checks, assets, manifest, icoon

src/views/pages/ward.ejs

  • schil; begintoestand als JSON mee, geen inline script (CSP)

src/assets/js/ward.js

  • tekent guardians, aanvragen en wachtende follows

src/assets/css/ward.css

  • donker, grote raakzones

test/ward-pwa.test.js

  • de poort (een vreemde komt er niet in) en de inhoud

Changed files:
src/server.js

  • /ward gemonteerd

src/services/i18n.js

  • ward-sleutels in nl, en, de

remarks: 886 tests groen. De hulpknop en het accepteren van aanvragen
doen nog niets; dat is de volgende plak.

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>
  • Property mode set to 100644
File size: 1.7 KB
RevLine 
[303bfc4]1<!DOCTYPE html>
2<html lang="<%= lang %>">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6 <title><%= state.strings.title %></title>
7 <link rel="manifest" href="/ward/manifest.webmanifest">
8 <link rel="icon" href="/ward/icon.svg" type="image/svg+xml">
9 <meta name="theme-color" content="#5a32e6">
10 <link rel="stylesheet" href="/ward/app.css">
11</head>
12<body>
13 <main id="app">
14 <h1><%= state.strings.title %></h1>
15
16 <!-- De hulpknop staat BOVENAAN en niet onderaan bij de instellingen.
17 Als je hem nodig hebt, moet je niet hoeven zoeken. -->
18 <section class="help">
19 <button id="help-btn" type="button"><%= state.strings.help %></button>
20 <p class="hint" id="help-hint"></p>
21 </section>
22
23 <section id="guardians">
24 <h2><%= state.strings.guardians %></h2>
25 <ul class="list" id="guardian-list"></ul>
26 <p class="empty" id="guardians-empty" hidden><%= state.strings.noGuardians %></p>
27 </section>
28
29 <section id="offers" hidden>
30 <h2><%= state.strings.offers %></h2>
31 <ul class="list" id="offer-list"></ul>
32 </section>
33
34 <section id="waiting" hidden>
35 <h2><%= state.strings.waiting %></h2>
36 <ul class="list" id="waiting-list"></ul>
37 </section>
38 </main>
39
40 <!-- De begintoestand reist als JSON mee, zodat de pagina meteen compleet is
41 en niet eerst leeg staat te wachten op een fetch. Geen inline script:
42 CSP staat dat niet toe, dus het gaat als data door een script-tag met
43 een type dat de browser niet uitvoert. -->
44 <script type="application/json" id="ward-state"><%- JSON.stringify(state) %></script>
45 <script src="/ward/app.js" defer></script>
46</body>
47</html>
Note: See TracBrowser for help on using the repository browser.