Offline-Fallbacks für diary, poison, map + SW-Erweiterung
- sw.js: /api/places, /api/breeder/map-markers, /api/gassi-zeiten in _CACHEABLE_GET; /api/lost/report und /api/walks in _QUEUEABLE - diary.js: localStorage-Cache pro Hund, Fallback bei Offline mit Toast - poison.js: localStorage-Cache, Fallback bei Offline mit Toast (sicherheitsrelevant) - map.js: POI-Cache (places/poison/breeders) in localStorage, Offline-Toast + Fallback auf gecachte Daten
This commit is contained in:
parent
0c0daaad6b
commit
53fcb61933
6 changed files with 222 additions and 14 deletions
|
|
@ -6,6 +6,8 @@
|
|||
|
||||
window.Page_diary = (() => {
|
||||
|
||||
const _CACHE_KEY = 'by_diary_cache';
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// MODUL-STATE
|
||||
// ----------------------------------------------------------
|
||||
|
|
@ -324,6 +326,7 @@ window.Page_diary = (() => {
|
|||
async function _load() {
|
||||
const dog = _appState.activeDog;
|
||||
if (!dog) return;
|
||||
const cacheKey = _CACHE_KEY + '_' + dog.id;
|
||||
try {
|
||||
const params = { limit: LIMIT, offset: _offset };
|
||||
if (_searchQuery) params.q = _searchQuery;
|
||||
|
|
@ -331,6 +334,10 @@ window.Page_diary = (() => {
|
|||
const batch = await API.diary.list(dog.id, params);
|
||||
_entries = _entries.concat(batch);
|
||||
|
||||
if (_offset === 0 && !_searchQuery && !_filterMilestone) {
|
||||
try { localStorage.setItem(cacheKey, JSON.stringify({ ts: Date.now(), data: batch })); } catch {}
|
||||
}
|
||||
|
||||
// "Mehr laden" anzeigen wenn volle Page geladen wurde
|
||||
const loadMore = _container.querySelector('#diary-load-more');
|
||||
if (loadMore) {
|
||||
|
|
@ -339,7 +346,17 @@ window.Page_diary = (() => {
|
|||
|
||||
// Stats-Bar befüllen
|
||||
_renderStatsBar();
|
||||
} catch (err) {
|
||||
} catch {
|
||||
try {
|
||||
const raw = localStorage.getItem(cacheKey);
|
||||
if (raw) {
|
||||
const cached = JSON.parse(raw).data || [];
|
||||
_entries = cached;
|
||||
_renderStatsBar();
|
||||
UI.toast.info('Offline — zeige zuletzt geladene Einträge.');
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
UI.toast.error('Einträge konnten nicht geladen werden.');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,43 @@
|
|||
|
||||
window.Page_lost = (() => {
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// OFFLINE-CACHE
|
||||
// ----------------------------------------------------------
|
||||
const _CACHE_KEY = 'by_lost_cache';
|
||||
const _PENDING_KEY = 'by_lost_pending';
|
||||
|
||||
function _getPending() {
|
||||
try { return JSON.parse(localStorage.getItem(_PENDING_KEY) || '[]'); } catch { return []; }
|
||||
}
|
||||
function _setPending(list) {
|
||||
try { localStorage.setItem(_PENDING_KEY, JSON.stringify(list)); } catch {}
|
||||
}
|
||||
function _addPending(data) {
|
||||
const list = _getPending();
|
||||
const entry = { ...data, id: `pending_${Date.now()}`, _isPending: true,
|
||||
created_at: new Date().toISOString() };
|
||||
list.push(entry);
|
||||
_setPending(list);
|
||||
return entry;
|
||||
}
|
||||
async function _syncPending() {
|
||||
if (!navigator.onLine) return;
|
||||
const list = _getPending();
|
||||
if (!list.length) return;
|
||||
let ok = 0;
|
||||
for (const item of [...list]) {
|
||||
try {
|
||||
const { id: _pid, _isPending, ...payload } = item;
|
||||
await API.lost.report(payload);
|
||||
_setPending(_getPending().filter(x => x.id !== item.id));
|
||||
ok++;
|
||||
} catch {}
|
||||
}
|
||||
if (ok > 0) { UI.toast.success(`${ok} Meldung(en) synchronisiert.`); _loadReports(); }
|
||||
}
|
||||
window.addEventListener('online', _syncPending);
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// MODUL-STATE
|
||||
// ----------------------------------------------------------
|
||||
|
|
@ -179,8 +216,14 @@ window.Page_lost = (() => {
|
|||
return;
|
||||
}
|
||||
|
||||
const pending = _getPending().map(p => ({
|
||||
...p,
|
||||
distanz_m: _haversine(_userPos.lat, _userPos.lon, p.lat, p.lon),
|
||||
}));
|
||||
try {
|
||||
_reports = await API.lost.list(_userPos.lat, _userPos.lon, 25);
|
||||
const fetched = await API.lost.list(_userPos.lat, _userPos.lon, 25);
|
||||
try { localStorage.setItem(_CACHE_KEY, JSON.stringify({ ts: Date.now(), data: fetched })); } catch {}
|
||||
_reports = [...pending, ...fetched];
|
||||
_renderMarkers();
|
||||
_renderHeld();
|
||||
_renderList();
|
||||
|
|
@ -191,6 +234,26 @@ window.Page_lost = (() => {
|
|||
: 'Keine vermissten Hunde in deiner Nähe (25 km Radius). 🐾';
|
||||
}
|
||||
} catch {
|
||||
try {
|
||||
const raw = localStorage.getItem(_CACHE_KEY);
|
||||
if (raw) {
|
||||
_reports = [...pending, ...(JSON.parse(raw).data || [])];
|
||||
_renderMarkers();
|
||||
_renderHeld();
|
||||
_renderList();
|
||||
_updateBadge(_reports.length);
|
||||
if (infoEl) infoEl.textContent = 'Offline — zeige zuletzt geladene Meldungen.';
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
_reports = pending;
|
||||
if (pending.length) {
|
||||
_renderMarkers();
|
||||
_renderHeld();
|
||||
_renderList();
|
||||
_updateBadge(_reports.length);
|
||||
return;
|
||||
}
|
||||
UI.toast.error('Meldungen konnten nicht geladen werden.');
|
||||
}
|
||||
}
|
||||
|
|
@ -332,6 +395,7 @@ window.Page_lost = (() => {
|
|||
Gemeldet ${_fmtDate(r.created_at)}
|
||||
${r.melder_name ? '· ' + _escape(r.melder_name.split(' ')[0]) : ''}
|
||||
</div>
|
||||
${r._isPending ? `<div style="font-size:10px;color:var(--c-warning,#d97706);font-weight:600">⏳ Sync ausstehend</div>` : ''}
|
||||
${_appState.user ? `<div style="margin-top:var(--space-2)">
|
||||
<button class="btn btn-ghost btn-xs lost-note-btn"
|
||||
data-lost-note-id="${r.id}"
|
||||
|
|
@ -632,6 +696,17 @@ window.Page_lost = (() => {
|
|||
client_time : API.clientNow(),
|
||||
};
|
||||
|
||||
if (!navigator.onLine) {
|
||||
const pending = _addPending(payload);
|
||||
pending.distanz_m = _userPos
|
||||
? Math.round(_haversine(_userPos.lat, _userPos.lon, pending.lat, pending.lon))
|
||||
: 0;
|
||||
UI.modal.close();
|
||||
UI.toast.success('Offline gespeichert — wird synchronisiert sobald Verbindung besteht.');
|
||||
_loadReports();
|
||||
return;
|
||||
}
|
||||
|
||||
const created = await API.lost.report(payload);
|
||||
|
||||
// Foto hochladen
|
||||
|
|
|
|||
|
|
@ -58,7 +58,8 @@ window.Page_map = (() => {
|
|||
zuechter: [],
|
||||
};
|
||||
|
||||
const VISIBLE_KEY = 'by_map_visible_v1';
|
||||
const VISIBLE_KEY = 'by_map_visible_v1';
|
||||
const _MAP_POI_KEY = 'by_map_pois_cache';
|
||||
|
||||
let _visible = {};
|
||||
// Gespeicherten Zustand laden, Fallback: alles sichtbar
|
||||
|
|
@ -1217,9 +1218,41 @@ window.Page_map = (() => {
|
|||
API.breeder.mapMarkers(),
|
||||
]);
|
||||
|
||||
if (places.status === 'fulfilled') _addPlaces(places.value);
|
||||
if (poisonList.status === 'fulfilled') _addPoison(poisonList.value);
|
||||
if (breederList.status === 'fulfilled') _addBreeders(breederList.value);
|
||||
const allFailed = [places, poisonList, breederList].every(r => r.status === 'rejected');
|
||||
if (allFailed) {
|
||||
try {
|
||||
const raw = localStorage.getItem(_MAP_POI_KEY);
|
||||
if (raw) {
|
||||
const cached = JSON.parse(raw);
|
||||
_addPlaces(cached.places || []);
|
||||
_addPoison(cached.poison || []);
|
||||
_addBreeders(cached.breeders || []);
|
||||
UI.toast.info('Offline — Karte zeigt gecachte Kacheln. POI-Daten eventuell veraltet.');
|
||||
_scheduleOsmLoad();
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const placesVal = places.status === 'fulfilled' ? places.value : [];
|
||||
const poisonVal = poisonList.status === 'fulfilled' ? poisonList.value : [];
|
||||
const breederVal = breederList.status === 'fulfilled' ? breederList.value : [];
|
||||
|
||||
if (places.status === 'fulfilled') _addPlaces(placesVal);
|
||||
if (poisonList.status === 'fulfilled') _addPoison(poisonVal);
|
||||
if (breederList.status === 'fulfilled') _addBreeders(breederVal);
|
||||
|
||||
if (places.status === 'fulfilled' || poisonList.status === 'fulfilled' || breederList.status === 'fulfilled') {
|
||||
try {
|
||||
localStorage.setItem(_MAP_POI_KEY, JSON.stringify({
|
||||
ts: Date.now(),
|
||||
places: placesVal,
|
||||
poison: poisonVal,
|
||||
breeders: breederVal,
|
||||
}));
|
||||
} catch {}
|
||||
}
|
||||
|
||||
_scheduleOsmLoad();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
|
||||
window.Page_poison = (() => {
|
||||
|
||||
const _CACHE_KEY = 'by_poison_cache';
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// MODUL-STATE
|
||||
// ----------------------------------------------------------
|
||||
|
|
@ -171,6 +173,7 @@ window.Page_poison = (() => {
|
|||
|
||||
try {
|
||||
_reports = await API.poison.listNearby(_userPos.lat, _userPos.lon, 10000);
|
||||
try { localStorage.setItem(_CACHE_KEY, JSON.stringify({ ts: Date.now(), data: _reports })); } catch {}
|
||||
_renderMarkers();
|
||||
_renderList();
|
||||
_updateBadge(_reports.length);
|
||||
|
|
@ -180,6 +183,18 @@ window.Page_poison = (() => {
|
|||
: 'Keine aktiven Giftköder-Meldungen in deiner Nähe (10 km Radius).';
|
||||
}
|
||||
} catch {
|
||||
try {
|
||||
const raw = localStorage.getItem(_CACHE_KEY);
|
||||
if (raw) {
|
||||
_reports = JSON.parse(raw).data || [];
|
||||
_renderMarkers();
|
||||
_renderList();
|
||||
_updateBadge(_reports.length);
|
||||
if (infoEl) infoEl.textContent = `${_reports.length} gecachte Meldung${_reports.length !== 1 ? 'en' : ''} (Offline)`;
|
||||
UI.toast.info('Offline — zeige zuletzt geladene Daten.');
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
UI.toast.error('Meldungen konnten nicht geladen werden.');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,45 @@
|
|||
|
||||
window.Page_walks = (() => {
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// OFFLINE-CACHE
|
||||
// ----------------------------------------------------------
|
||||
const _CACHE_KEY = 'by_walks_cache';
|
||||
const _PENDING_KEY = 'by_walks_pending';
|
||||
|
||||
function _getPending() {
|
||||
try { return JSON.parse(localStorage.getItem(_PENDING_KEY) || '[]'); } catch { return []; }
|
||||
}
|
||||
function _setPending(list) {
|
||||
try { localStorage.setItem(_PENDING_KEY, JSON.stringify(list)); } catch {}
|
||||
}
|
||||
function _addPending(data) {
|
||||
const list = _getPending();
|
||||
const entry = { ...data, id: `pending_${Date.now()}`, _isPending: true,
|
||||
created_at: new Date().toISOString(),
|
||||
teilnehmer_count: 1, max_teilnehmer: data.max_teilnehmer || 10,
|
||||
status: 'open' };
|
||||
list.push(entry);
|
||||
_setPending(list);
|
||||
return entry;
|
||||
}
|
||||
async function _syncPending() {
|
||||
if (!navigator.onLine) return;
|
||||
const list = _getPending();
|
||||
if (!list.length) return;
|
||||
let ok = 0;
|
||||
for (const item of [...list]) {
|
||||
try {
|
||||
const { id: _pid, _isPending, created_at: _ca, teilnehmer_count: _tc, status: _st, ...payload } = item;
|
||||
await API.walks.create(payload);
|
||||
_setPending(_getPending().filter(x => x.id !== item.id));
|
||||
ok++;
|
||||
} catch {}
|
||||
}
|
||||
if (ok > 0) { UI.toast.success(`${ok} Treffen synchronisiert.`); _loadData(); }
|
||||
}
|
||||
window.addEventListener('online', _syncPending);
|
||||
|
||||
let _container = null;
|
||||
let _appState = null;
|
||||
let _data = [];
|
||||
|
|
@ -195,14 +234,16 @@ window.Page_walks = (() => {
|
|||
// Daten laden
|
||||
// ----------------------------------------------------------
|
||||
async function _loadData() {
|
||||
const pending = _getPending();
|
||||
try {
|
||||
_data = await API.walks.list(
|
||||
const fetched = await API.walks.list(
|
||||
_userPos?.lat ?? null,
|
||||
_userPos?.lon ?? null
|
||||
);
|
||||
try { localStorage.setItem(_CACHE_KEY, JSON.stringify({ ts: Date.now(), data: fetched })); } catch {}
|
||||
_data = [...pending, ...fetched];
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
// Desktop: Karte direkt initialisieren (beide Panels sichtbar)
|
||||
if (window.innerWidth >= 1024) {
|
||||
UI.loadLeaflet().then(() => {
|
||||
_initMap();
|
||||
|
|
@ -210,8 +251,20 @@ window.Page_walks = (() => {
|
|||
setTimeout(() => _map?.invalidateSize(), 400);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
UI.toast.error(err.message || 'Fehler beim Laden.');
|
||||
} catch {
|
||||
try {
|
||||
const raw = localStorage.getItem(_CACHE_KEY);
|
||||
if (raw) {
|
||||
_data = [...pending, ...(JSON.parse(raw).data || [])];
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
UI.toast.info('Offline — zeige zuletzt geladene Treffen.');
|
||||
return;
|
||||
}
|
||||
} catch {}
|
||||
_data = pending;
|
||||
if (pending.length) { _renderList(); _renderMarkers(); return; }
|
||||
UI.toast.error('Treffen konnten nicht geladen werden.');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -291,6 +344,7 @@ window.Page_walks = (() => {
|
|||
</span>
|
||||
<span class="walks-badge">${UI.icon('paw-print')} ${w.teilnehmer_count}/${w.max_teilnehmer}</span>
|
||||
${isOwn ? '<span class="walks-badge walks-badge--own">Mein Treffen</span>' : ''}
|
||||
${w._isPending ? `<span style="font-size:10px;color:var(--c-warning,#d97706);font-weight:600">⏳ Sync ausstehend</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-1)">
|
||||
|
|
@ -1128,15 +1182,24 @@ window.Page_walks = (() => {
|
|||
const idx = _data.findIndex(w => w.id === walk.id);
|
||||
if (idx !== -1) _data[idx] = { ..._data[idx], ...updated };
|
||||
UI.toast.success('Treffen aktualisiert.');
|
||||
UI.modal.close();
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
} else {
|
||||
if (!navigator.onLine) {
|
||||
_addPending(payload);
|
||||
UI.modal.close();
|
||||
UI.toast.success('Offline gespeichert — wird synchronisiert sobald Verbindung besteht.');
|
||||
_loadData();
|
||||
return;
|
||||
}
|
||||
const created = await API.walks.create(payload);
|
||||
_data.unshift({ ...created, teilnehmer_count: 0 });
|
||||
UI.toast.success('Treffen geplant! 🎉');
|
||||
UI.modal.close();
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
}
|
||||
|
||||
UI.modal.close();
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,6 +119,8 @@ const _QUEUEABLE = [
|
|||
{ re: /^\/api\/training\/sessions$/, methods: ['POST'] },
|
||||
{ re: /^\/api\/training\/progress$/, methods: ['POST'] },
|
||||
{ re: /^\/api\/poison$/, methods: ['POST'] },
|
||||
{ re: /^\/api\/lost\/report$/, methods: ['POST'] },
|
||||
{ re: /^\/api\/walks$/, methods: ['POST'] },
|
||||
];
|
||||
function _isQueueable(pathname, method) {
|
||||
return _QUEUEABLE.some(q => q.methods.includes(method) && q.re.test(pathname));
|
||||
|
|
@ -139,6 +141,9 @@ const _CACHEABLE_GET = [
|
|||
/^\/api\/wiki\/rassen/,
|
||||
/^\/api\/dogs\/\d+\/diary\/stats/,
|
||||
/^\/api\/routes$/,
|
||||
/^\/api\/places$/,
|
||||
/^\/api\/breeder\/map-markers$/,
|
||||
/^\/api\/gassi-zeiten/,
|
||||
// Drei Welten — offline-fähig
|
||||
/^\/api\/streak\/\d+/,
|
||||
/^\/api\/forum\/threads/,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue