rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Offline-Bereitschafts-Indikator (Pfote im Header), SW by-v1077

Browse source 
- Neue Pfote oben rechts im Header zeigt 5-stufige Offline-Bereitschaft
  (1 Ballen + 4 Zehen, je 20% — grau outline → grün gefüllt)
- 5 Checks: App-Shell · Page-Module · Hund-/Tagebuchdaten · Karten-
  Tiles (≥50) · Foto-Previews
- Klick öffnet Status-Modal mit Checkliste + 'Fehlende nachladen'-
  Button. Lädt aktiv: Page-Module per fetch, API-Daten für aktiven
  Hund, Tile-Cache per SW-Message CACHE_TILES, Diary-Foto-Previews
- Refresh: alle 60s + bei SW CACHE_UPDATE-Message
- Eigene offline-indicator.js (nicht im app.js mit reingequetscht);
  ins STATIC_ASSETS-Precache aufgenommen
This commit is contained in:
rene 2026-05-26 14:16:57 +02:00
parent 280213c11d
commit 8097d21605
6 changed files with 305 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

34
backend/static/index.html
View file

@ -101,9 +101,9 @@
</script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css?v=1076">
<link rel="stylesheet" href="/css/layout.css?v=1076">
<link rel="stylesheet" href="/css/components.css?v=1076">
<link rel="stylesheet" href="/css/design-system.css?v=1077">
<link rel="stylesheet" href="/css/layout.css?v=1077">
<link rel="stylesheet" href="/css/components.css?v=1077">
</head>
<body>
@ -325,6 +325,25 @@
<span class="header-title" id="header-title">Ban Yaro</span>
</div>
<div id="header-actions"></div>
<button id="offline-indicator" class="header-menu-btn hidden"
aria-label="Offline-Bereitschaft" title="Offline-Bereitschaft"
style="position:relative;padding:0 6px">
<svg class="ph-icon offline-paw" viewBox="0 0 256 256" aria-hidden="true"
style="width:22px;height:22px">
<!-- 4 Zehen + 1 Ballen, jeweils mit data-step für Reihenfolge -->
<path class="paw-elem" data-step="1"
d="M128,104A36,36,0,0,0,93.43,130a43.49,43.49,0,0,1-20.67,25.9,32,32,0,0,0,27.73,57.62,72.49,72.49,0,0,1,55,0,32,32,0,0,0,27.73-57.62A43.46,43.46,0,0,1,162.57,130,36,36,0,0,0,128,104Z"
fill="none" stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<circle class="paw-elem" data-step="2" cx="44" cy="108" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="3" cx="92" cy="60" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="4" cx="164" cy="60" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
<circle class="paw-elem" data-step="5" cx="212" cy="108" r="20"
fill="none" stroke="currentColor" stroke-width="16"/>
</svg>
</button>
<button id="header-user-btn" aria-label="Profil"
style="width:36px;height:36px;border-radius:50%;border:2px solid var(--c-border);
background:var(--c-surface-2);cursor:pointer;flex-shrink:0;
@ -616,10 +635,11 @@
<div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=1076"></script>
<script src="/js/ui.js?v=1076"></script>
<script src="/js/app.js?v=1076"></script>
<script src="/js/worlds.js?v=1076"></script>
<script src="/js/api.js?v=1077"></script>
<script src="/js/ui.js?v=1077"></script>
<script src="/js/app.js?v=1077"></script>
<script src="/js/worlds.js?v=1077"></script>
<script src="/js/offline-indicator.js?v=1077"></script>
<!-- Feature-Seiten werden lazy geladen -->