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

Feature: Offline-Banner, Online-Toast und API-Offline-Fehlerbehandlung

Browse source 
- #offline-banner in index.html (display:none, fixed oben) mit Inline-Script für window.online/offline Events
- Wieder-online Toast via UI.toast.success
- api.js fängt network-Fehler und SW-503-Offline-Antworten ab und zeigt UI.toast.warning
- SW-Cache auf by-v210 gebumpt (api.js + components.css geändert)
This commit is contained in:
rene 2026-04-18 18:40:05 +02:00
parent e98ce0d232
commit eb72d6f675
4 changed files with 154 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

43
backend/static/index.html
View file

@ -20,6 +20,16 @@
<title>Ban Yaro</title>
<!-- Theme vor CSS setzen — verhindert Flash of unstyled content -->
<script>
(function() {
var t = localStorage.getItem('by_theme');
if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
if (t === 'light') document.documentElement.setAttribute('data-theme', 'light');
// 'system' (oder kein Wert) → kein data-theme → @media prefers-color-scheme greift
})();
</script>
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
<link rel="stylesheet" href="/css/design-system.css">
<link rel="stylesheet" href="/css/layout.css?v=93">
@ -27,6 +37,9 @@
</head>
<body>
<!-- Offline-Banner -->
<div id="offline-banner">Kein Internet — du bist offline</div>
<!-- Backdrop + Sidebar direkt im body (kein Ancestor-Stacking-Context) -->
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
@ -377,6 +390,36 @@
</div>
</div>
<!-- Offline-Banner Logik -->
<script>
(function() {
var _wasOffline = false;
var banner = document.getElementById('offline-banner');
function setOffline() {
_wasOffline = true;
if (banner) banner.style.display = 'block';
}
function setOnline() {
if (banner) banner.style.display = 'none';
if (_wasOffline) {
_wasOffline = false;
// UI.toast ist verfügbar sobald ui.js geladen ist
if (window.UI && UI.toast) {
UI.toast.success('Wieder online');
}
}
}
window.addEventListener('offline', setOffline);
window.addEventListener('online', setOnline);
// Initialzustand prüfen
if (!navigator.onLine) setOffline();
})();
</script>
<!-- Service Worker -->
<script>
if ('serviceWorker' in navigator) {