Changeset 0202104 in Klonkt for src/views

Timestamp:

07/28/2026 11:40:37 PM (6 weeks ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

439f095

Parents:

6eab7e9

Message:

De gebruikerskant van 3.6: de ward ziet zijn vangnet, de guardian handelt

Drie oppervlakken rondgemaakt op de beschikbaarheid die er sinds vanmorgen
server-side in zit.

Berichten (de ward): de guardians-balk toont per guardian de buddy-list-stip
met het label erbij: beschikbaar, afwezig tot een datum, offline. Het kind ziet
de echte omvang van zijn vangnet, niet alleen de namen. Owner-only omdat de
pagina dat is.

De Guardian-PWA (de guardian): in het paneel per kind staan de mede-guardians
met dezelfde stippen; op een slapende verschijnt de bewuste, zeldzame
vervolgstap "Voorstel: loslaten bij afwezigheid", die langs dezelfde
C2S-pijplijn loopt als de Shaer-apps (Offer van shaer:Lapse, lokaal ward opent
direct, remote ward krijgt het voorstel bezorgd). Lopende lapses staan als
kaart bij de aanvragen, met Eens/Oneens over de bestaande offer-draad en de zin
die het frame bewaakt. En "Even afwezig": een week of een maand, een directe
note met shaer:away naar alle wards, lokaal direct toegepast.

Shaer (beide apps): de lapse-kaart toont stemknoppen alleen aan leden van de
set. De ward kijkt mee naar wat zijn guardians beslissen; het is daar niet de
rechter, om precies de reden uit de editor's note van 3.6.3.

Onderweg gerepareerd: parseStamp kende alleen strings, waardoor een epoch-ms
endTime als lege datum rendde ("unavailable till" zonder datum).

Changed files:
src/routes/posts.js

• /messages geeft de guardians hun beschikbaarheid mee

src/views/pages/messages.ejs

• de stip en het label per guardian, met de opmaak erbij

src/routes/guardian.js

• dashboardState: mede-guardians met status per lokaal kind, plus lapses
• POST /guardian/api/away en /guardian/api/lapse
• de nieuwe labels in uiStrings

src/assets/js/guardian.js

• de guardians-sectie in het paneel, de lapse-kaart, de afwezig-knoppen

src/views/pages/guardian.ejs

• de "Even afwezig"-sectie

src/assets/css/guardian.css

• de stippen en de lapse-kaart

src/middleware/render.js

• parseStamp accepteert epoch ms

src/services/i18n.js

• de labels en teksten in nl, en, de

remarks: end-to-end in de browser nagelopen op de wegwerp-database: het kind
ziet oma afwezig-tot, opa offline en guard beschikbaar; de guardian opent het
paneel, stelt de lapse voor op de slapende opa (kaart verschijnt, eigen stem
geteld), drukt "A week", en bij het kind staat guard meteen op afwezig tot
5 augustus. 276 tests groen. Niet uitgerold.

-robo
Co-Authored-By: Claude Fable 5 <noreply@…>

Location:

src/views/pages

Files:

• guardian.ejs (modified) (1 diff)
• messages.ejs (modified) (2 diffs)

src/views/pages/guardian.ejs

@@ -73 +73 @@
     </section>
 
+    <!-- 4b. Even afwezig (FEP-633c 3.6.1): de verantwoordelijke handeling.
+            Wie zich afmeldt telt niet mee in de besluiten, en een enkel
+            antwoord brengt je meteen terug. Alleen zichtbaar met wards. -->
+    <section id="away-section" hidden>
+      <div class="g-sec-head"><h2><%= t('guardian.away_title') %></h2></div>
+      <p class="g-sec-sub"><%= t('guardian.away_sub') %></p>
+      <div class="g-away-row">
+        <button id="away-week" class="quiet small"><%= t('guardian.away_week') %></button>
+        <button id="away-month" class="quiet small"><%= t('guardian.away_month') %></button>
+      </div>
+      <p id="away-msg" class="g-msg" hidden></p>
+    </section>
+
     <!-- 5. Meldingen. -->
     <section id="push-section">

src/views/pages/messages.ejs

@@ -30 +30 @@
       <div style="flex:1;min-width:200px;">
         <strong><%= t('msg.guardians_label') %></strong><br>
-        <span><%= myGuardians.map(function(g){ return g.handle; }).join(', ') %></span>
+        <%# Availability (FEP-633c 3.6): the ward sees the real size of its
+            safety net, in buddy-list language on the responsibility axis.
+            Labels are UI (Robins besluit); the wire keeps the spec terms.
+            Owner-only by construction: this page is the owner's. %>
+        <span class="msg-guardians">
+          <% myGuardians.forEach(function(g){
+               var _st = g.availability === 'away' ? 'away' : (g.availability === 'dormant' ? 'dormant' : 'active');
+               var _lbl = _st === 'away' ? t('msg.g_away', { date: g.awayUntil ? formatDate(g.awayUntil) : '?' })
+                        : (_st === 'dormant' ? t('msg.g_offline') : t('msg.g_available')); %>
+            <span class="msg-guardian">
+              <span class="msg-gdot msg-gdot-<%= _st %>" aria-hidden="true"></span>
+              <%= g.handle %>
+              <span class="msg-gstate"><%= _lbl %></span>
+            </span>
+          <% }); %>
+        </span>
       </div>
     </div>
@@ -130 +145 @@
 
 <style>
+  /* Availability of the ward's guardians (FEP-633c 3.6): the buddy-list dot
+     on the responsibility axis. Green available, yellow declared away, grey
+     observed dormant (one answer restores). */
+  .msg-guardians { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
+  .msg-guardian { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
+  .msg-gdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+  .msg-gdot-active { background: #4caf7d; }
+  .msg-gdot-away { background: #e0a83a; }
+  .msg-gdot-dormant { background: #8a93a3; }
+  .msg-gstate { color: var(--ink-soft, #888); font-size: .82rem; }
   .msg-wrap { max-width: 640px; margin: 1rem auto; padding: 0 1rem; }
   .msg-title { margin: 0 0 .9rem; }