Chore: Sprint32-36 Zwischenstand — alle Änderungen aus dieser Session committen
This commit is contained in:
parent
f4052fbb7d
commit
747c353444
20 changed files with 3115 additions and 63 deletions
File diff suppressed because it is too large
Load diff
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 691 KiB |
|
|
@ -6,69 +6,84 @@
|
|||
|
||||
const API = (() => {
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Request-Deduplication: gleiche GET-URL nur einmal in-flight
|
||||
// ----------------------------------------------------------
|
||||
const _inflight = new Map();
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Interner HTTP-Kern
|
||||
// ----------------------------------------------------------
|
||||
async function _request(method, path, body = null, options = {}) {
|
||||
async function _doRequest(method, path, body, attempt) {
|
||||
const config = {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include', // HttpOnly Cookie wird automatisch mitgesendet
|
||||
credentials: 'include',
|
||||
};
|
||||
|
||||
if (body && !(body instanceof FormData)) {
|
||||
config.body = JSON.stringify(body);
|
||||
} else if (body instanceof FormData) {
|
||||
delete config.headers['Content-Type']; // Browser setzt multipart/form-data
|
||||
delete config.headers['Content-Type'];
|
||||
config.body = body;
|
||||
}
|
||||
|
||||
// JWT aus localStorage als Bearer (für API-Calls die das brauchen)
|
||||
const token = localStorage.getItem('by_token');
|
||||
if (token) {
|
||||
config.headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
if (token) config.headers['Authorization'] = `Bearer ${token}`;
|
||||
|
||||
let response;
|
||||
try {
|
||||
response = await fetch(`/api${path}`, config);
|
||||
} catch (err) {
|
||||
const offlineMsg = 'Kein Internet — du bist offline.';
|
||||
if (window.UI && UI.toast) UI.toast.warning(offlineMsg, 4000);
|
||||
throw new APIError(offlineMsg, 0, 'network');
|
||||
} catch {
|
||||
// Netzwerkfehler: bei GET bis zu 2 Retry-Versuche
|
||||
if (method === 'GET' && attempt < 2) {
|
||||
await new Promise(r => setTimeout(r, 200 * Math.pow(3, attempt)));
|
||||
return _doRequest(method, path, body, attempt + 1);
|
||||
}
|
||||
const msg = 'Kein Internet — du bist offline.';
|
||||
if (window.UI?.toast) UI.toast.warning(msg, 4000);
|
||||
throw new APIError(msg, 0, 'network');
|
||||
}
|
||||
|
||||
// 204 No Content
|
||||
if (response.status === 204) return null;
|
||||
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch {
|
||||
data = null;
|
||||
}
|
||||
try { data = await response.json(); } catch { data = null; }
|
||||
|
||||
if (!response.ok) {
|
||||
const message = data?.detail || data?.message || `Fehler ${response.status}`;
|
||||
// SW gibt bei Offline-Anfragen 503 + 'Offline — keine Verbindung.' zurück
|
||||
const isOffline = response.status === 503 && message.startsWith('Offline');
|
||||
if (isOffline && window.UI && UI.toast) {
|
||||
UI.toast.warning('Kein Internet — du bist offline.', 4000);
|
||||
const isSwOffline = response.status === 503 && message.startsWith('Offline');
|
||||
|
||||
// Retry: GET auf echte 5xx (nicht SW-generierte Offline-503)
|
||||
if (method === 'GET' && response.status >= 500 && !isSwOffline && attempt < 2) {
|
||||
await new Promise(r => setTimeout(r, 200 * Math.pow(3, attempt)));
|
||||
return _doRequest(method, path, body, attempt + 1);
|
||||
}
|
||||
throw new APIError(message, response.status, isOffline ? 'network' : data?.code);
|
||||
|
||||
if (isSwOffline && window.UI?.toast) UI.toast.warning('Kein Internet — du bist offline.', 4000);
|
||||
throw new APIError(message, response.status, isSwOffline ? 'network' : data?.code);
|
||||
}
|
||||
|
||||
// SW hat die Anfrage in die Offline-Queue eingereiht
|
||||
if (data?._queued) {
|
||||
if (typeof UI !== 'undefined' && UI.toast) {
|
||||
if (typeof UI !== 'undefined' && UI.toast)
|
||||
UI.toast.info('Offline gespeichert — wird automatisch synchronisiert');
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
async function _request(method, path, body = null) {
|
||||
// GET-Deduplication: laufende identische Anfragen zusammenfassen
|
||||
if (method === 'GET') {
|
||||
if (_inflight.has(path)) return _inflight.get(path);
|
||||
const promise = _doRequest('GET', path, null, 0).finally(() => _inflight.delete(path));
|
||||
_inflight.set(path, promise);
|
||||
return promise;
|
||||
}
|
||||
return _doRequest(method, path, body, 0);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Öffentliche HTTP-Methoden
|
||||
// ----------------------------------------------------------
|
||||
|
|
@ -426,8 +441,9 @@ const API = (() => {
|
|||
// WETTER
|
||||
// ----------------------------------------------------------
|
||||
const weather = {
|
||||
alerts(lat, lon) { return get(`/weather/alerts?lat=${lat}&lon=${lon}`); },
|
||||
get(lat, lon) { return get(`/weather?lat=${lat}&lon=${lon}`); },
|
||||
alerts(lat, lon) { return get(`/weather/alerts?lat=${lat}&lon=${lon}`); },
|
||||
get(lat, lon) { return get(`/weather?lat=${lat}&lon=${lon}`); },
|
||||
forecast(lat, lon) { return get(`/weather/forecast?lat=${lat}&lon=${lon}`); },
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ window.Page_adoption = (() => {
|
|||
let _activeTab = 'hunde';
|
||||
let _data = null; // { animals, shelters, has_petfinder }
|
||||
let _loading = false;
|
||||
let _communityData = null; // [] listings from /adoption/community
|
||||
let _myListings = null; // [] eigene Inserate
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INIT
|
||||
|
|
@ -90,6 +92,12 @@ window.Page_adoption = (() => {
|
|||
border-bottom:2px solid transparent;font-size:var(--text-sm)">
|
||||
${UI.icon('house-line')} Tierheime
|
||||
</button>
|
||||
<button class="adp-tab" data-tab="community"
|
||||
style="padding:var(--space-2) var(--space-3);background:none;border:none;
|
||||
cursor:pointer;color:var(--c-text-secondary);
|
||||
border-bottom:2px solid transparent;font-size:var(--text-sm)">
|
||||
${UI.icon('heart')} Weitervermittlung
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Inhalt -->
|
||||
|
|
@ -213,12 +221,43 @@ window.Page_adoption = (() => {
|
|||
}
|
||||
}
|
||||
|
||||
async function _loadCommunity() {
|
||||
const content = _container.querySelector('#adp-content');
|
||||
if (content) content.innerHTML = UI.skeleton(4);
|
||||
try {
|
||||
const url = _lat && _lon
|
||||
? `/adoption/community?lat=${_lat}&lon=${_lon}`
|
||||
: '/adoption/community';
|
||||
_communityData = await API.get(url);
|
||||
if (_appState?.user) {
|
||||
try {
|
||||
_myListings = await API.get('/adoption/community/my');
|
||||
} catch {
|
||||
_myListings = [];
|
||||
}
|
||||
}
|
||||
_renderCommunity(content);
|
||||
} catch {
|
||||
if (content) content.innerHTML = UI.emptyState({
|
||||
icon: 'warning',
|
||||
title: 'Weitervermittlungs-Inserate konnten nicht geladen werden',
|
||||
text: 'Bitte versuche es erneut.',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INHALT RENDERN (je nach Tab)
|
||||
// ----------------------------------------------------------
|
||||
function _renderContent() {
|
||||
const content = _container.querySelector('#adp-content');
|
||||
if (!content) return;
|
||||
|
||||
if (_activeTab === 'community') {
|
||||
_loadCommunity();
|
||||
return;
|
||||
}
|
||||
|
||||
if (!_data) { _showNoLocation(); return; }
|
||||
|
||||
if (_activeTab === 'hunde') _renderHunde(content);
|
||||
|
|
@ -455,6 +494,442 @@ window.Page_adoption = (() => {
|
|||
`;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// TAB: WEITERVERMITTLUNG (Community)
|
||||
// ------------------------------------------------------------------
|
||||
function _renderCommunity(content) {
|
||||
if (!content) return;
|
||||
|
||||
const listings = _communityData || [];
|
||||
const isLoggedIn = !!_appState?.user;
|
||||
|
||||
const fabHtml = isLoggedIn ? `
|
||||
<button id="adp-fab-create"
|
||||
style="position:fixed;bottom:calc(var(--nav-height,64px) + var(--space-4));right:var(--space-4);
|
||||
z-index:100;width:56px;height:56px;border-radius:50%;
|
||||
background:var(--c-primary);color:#fff;border:none;cursor:pointer;
|
||||
box-shadow:0 4px 16px rgba(0,0,0,0.2);
|
||||
display:flex;align-items:center;justify-content:center;font-size:1.5rem"
|
||||
title="Hund zur Vermittlung anbieten"
|
||||
aria-label="Hund zur Vermittlung anbieten">
|
||||
${UI.icon('plus')}
|
||||
</button>
|
||||
` : '';
|
||||
|
||||
if (!listings.length) {
|
||||
content.innerHTML = `
|
||||
<div style="text-align:center;padding:var(--space-8) var(--space-4)">
|
||||
<div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
|
||||
<h3 style="margin-bottom:var(--space-2)">Noch keine Hunde zur Weitervermittlung</h3>
|
||||
<p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
|
||||
Hier können Halter Hunde privat zur Weitervermittlung anbieten —
|
||||
zum Beispiel bei Umzug, Krankheit oder Allergie.
|
||||
</p>
|
||||
${isLoggedIn ? `
|
||||
<button class="btn btn-primary" id="adp-empty-create">
|
||||
${UI.icon('plus')} Hund zur Vermittlung anbieten
|
||||
</button>
|
||||
` : `
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
Bitte anmelden, um ein Inserat zu erstellen.
|
||||
</p>
|
||||
`}
|
||||
</div>
|
||||
${fabHtml}
|
||||
`;
|
||||
content.querySelector('#adp-empty-create')?.addEventListener('click', _openCreateModal);
|
||||
content.querySelector('#adp-fab-create')?.addEventListener('click', _openCreateModal);
|
||||
return;
|
||||
}
|
||||
|
||||
// Eigene Inserate trennen
|
||||
const myIds = new Set((_myListings || []).map(l => l.id));
|
||||
|
||||
content.innerHTML = `
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
|
||||
${listings.length} Inserat${listings.length !== 1 ? 'e' : ''} zur Weitervermittlung
|
||||
</p>
|
||||
<div class="adp-grid"
|
||||
style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)">
|
||||
${listings.map(l => _communityCard(l)).join('')}
|
||||
</div>
|
||||
|
||||
${isLoggedIn && _myListings && _myListings.length ? `
|
||||
<div id="adp-my-listings" style="margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
|
||||
<h4 style="margin-bottom:var(--space-3)">Meine Inserate</h4>
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-2)">
|
||||
${_myListings.map(l => _myListingRow(l)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${fabHtml}
|
||||
`;
|
||||
|
||||
// Interest-Button Events
|
||||
content.querySelectorAll('[data-adp-interest]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const id = btn.dataset.adpInterest;
|
||||
const interested = btn.dataset.adpInterested === 'true';
|
||||
_handleInterest(id, interested, btn);
|
||||
});
|
||||
});
|
||||
|
||||
// FAB
|
||||
content.querySelector('#adp-fab-create')?.addEventListener('click', _openCreateModal);
|
||||
|
||||
// Meine Inserate: Status-Dropdown + Löschen
|
||||
content.querySelectorAll('[data-adp-status-change]').forEach(sel => {
|
||||
sel.addEventListener('change', async () => {
|
||||
const id = sel.dataset.adpStatusChange;
|
||||
try {
|
||||
await API.patch(`/adoption/community/${id}`, { status: sel.value });
|
||||
UI.toast.success('Status aktualisiert.');
|
||||
_loadCommunity();
|
||||
} catch {
|
||||
UI.toast.error('Status konnte nicht aktualisiert werden.');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
content.querySelectorAll('[data-adp-delete]').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
if (!window.confirm('Inserat wirklich löschen?')) return;
|
||||
try {
|
||||
await API.del(`/adoption/community/${btn.dataset.adpDelete}`);
|
||||
UI.toast.success('Inserat gelöscht.');
|
||||
_communityData = null;
|
||||
_myListings = null;
|
||||
_loadCommunity();
|
||||
} catch {
|
||||
UI.toast.error('Löschen fehlgeschlagen.');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _communityCard(l) {
|
||||
const foto = l.foto_url
|
||||
? `<img src="${_esc(l.foto_url)}" alt="${_esc(l.name)}"
|
||||
style="width:100%;height:100%;object-fit:cover"
|
||||
onerror="this.parentElement.innerHTML='<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem">🐾</div>'">`
|
||||
: '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem">🐾</div>';
|
||||
|
||||
const isActive = !l.status || l.status === 'active';
|
||||
const statusLabel = l.status === 'reserved' ? 'Reserviert'
|
||||
: l.status === 'adopted' ? 'Vermittelt'
|
||||
: '';
|
||||
|
||||
const alterLabel = l.alter_kategorie === 'welpe' ? 'Welpe <6Mo'
|
||||
: l.alter_kategorie === 'jung' ? 'Jung 6Mo–2J'
|
||||
: l.alter_kategorie === 'adult' ? 'Adult 2–8J'
|
||||
: l.alter_kategorie === 'senior' ? 'Senior >8J'
|
||||
: '';
|
||||
|
||||
const genderIcon = l.geschlecht === 'maennlich' ? '♂'
|
||||
: l.geschlecht === 'weiblich' ? '♀'
|
||||
: '';
|
||||
|
||||
const distTxt = l.distanz_km != null ? `${l.distanz_km} km` : '';
|
||||
const ort = [l.plz, l.ort].filter(Boolean).join(' ');
|
||||
|
||||
const interestBtn = l.user_interested
|
||||
? `<button class="btn btn-secondary btn-sm" style="width:100%;font-size:var(--text-xs)"
|
||||
data-adp-interest="${_esc(l.id)}" data-adp-interested="true">
|
||||
✓ Bereits gemeldet
|
||||
</button>`
|
||||
: `<button class="btn btn-primary btn-sm" style="width:100%;font-size:var(--text-xs)"
|
||||
data-adp-interest="${_esc(l.id)}" data-adp-interested="false"
|
||||
${!isActive ? 'disabled' : ''}>
|
||||
Interesse bekunden
|
||||
</button>`;
|
||||
|
||||
return `
|
||||
<div style="border-radius:var(--radius-md);overflow:hidden;
|
||||
background:var(--c-bg-card,var(--c-surface-2));
|
||||
box-shadow:0 1px 4px rgba(0,0,0,0.08);
|
||||
display:flex;flex-direction:column;position:relative">
|
||||
<!-- Foto -->
|
||||
<div style="height:140px;overflow:hidden;background:var(--c-surface-3);position:relative">
|
||||
${foto}
|
||||
${!isActive ? `
|
||||
<div style="position:absolute;inset:0;background:rgba(0,0,0,0.45);
|
||||
display:flex;align-items:center;justify-content:center">
|
||||
<span style="color:#fff;font-weight:700;font-size:var(--text-sm);
|
||||
background:rgba(0,0,0,0.6);padding:4px 12px;border-radius:999px">
|
||||
${_esc(statusLabel)}
|
||||
</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div style="padding:var(--space-2) var(--space-2) var(--space-3);flex:1;display:flex;flex-direction:column;gap:var(--space-1)">
|
||||
<div style="font-weight:600;font-size:var(--text-sm);
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
|
||||
${_esc(l.name)}
|
||||
</div>
|
||||
${l.rasse ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
|
||||
${_esc(l.rasse)}
|
||||
</div>` : ''}
|
||||
<!-- Badges -->
|
||||
<div style="display:flex;gap:4px;flex-wrap:wrap">
|
||||
${alterLabel ? `<span style="font-size:10px;background:var(--c-surface-3);
|
||||
border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
|
||||
${_esc(alterLabel)}
|
||||
</span>` : ''}
|
||||
${genderIcon ? `<span style="font-size:10px;background:var(--c-surface-3);
|
||||
border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
|
||||
${genderIcon}
|
||||
</span>` : ''}
|
||||
${distTxt ? `<span style="font-size:10px;background:var(--c-primary-light,#ede9fe);
|
||||
border-radius:999px;padding:1px 6px;color:var(--c-primary)">
|
||||
${_esc(distTxt)}
|
||||
</span>` : ''}
|
||||
</div>
|
||||
${ort ? `<div style="font-size:10px;color:var(--c-text-muted)">${_esc(ort)}</div>` : ''}
|
||||
${l.beschreibung ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
|
||||
overflow:hidden;display:-webkit-box;
|
||||
-webkit-line-clamp:2;-webkit-box-orient:vertical">
|
||||
${_esc(l.beschreibung)}
|
||||
</div>` : ''}
|
||||
${l.interesse_count ? `<div style="font-size:10px;color:var(--c-text-muted)">
|
||||
❤️ ${l.interesse_count} Interessent${l.interesse_count !== 1 ? 'en' : ''}
|
||||
</div>` : ''}
|
||||
<div style="margin-top:auto;padding-top:var(--space-1)">
|
||||
${interestBtn}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function _myListingRow(l) {
|
||||
const statusOptions = [
|
||||
{ value: 'active', label: 'Aktiv' },
|
||||
{ value: 'reserved', label: 'Reserviert' },
|
||||
{ value: 'adopted', label: 'Vermittelt' },
|
||||
];
|
||||
return `
|
||||
<div style="display:flex;align-items:center;gap:var(--space-2);
|
||||
padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
|
||||
background:var(--c-surface-2);border:1px solid var(--c-border)">
|
||||
<div style="flex:1;min-width:0">
|
||||
<div style="font-weight:600;font-size:var(--text-sm);
|
||||
white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
|
||||
${_esc(l.name)}
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-secondary)">
|
||||
${l.interesse_count || 0} Interessent${(l.interesse_count || 0) !== 1 ? 'en' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<select class="form-control" style="width:auto;font-size:var(--text-xs)"
|
||||
data-adp-status-change="${_esc(l.id)}">
|
||||
${statusOptions.map(o => `
|
||||
<option value="${o.value}" ${l.status === o.value ? 'selected' : ''}>${o.label}</option>
|
||||
`).join('')}
|
||||
</select>
|
||||
<button class="btn btn-danger btn-sm" style="font-size:var(--text-xs);white-space:nowrap"
|
||||
data-adp-delete="${_esc(l.id)}">
|
||||
${UI.icon('trash')} Löschen
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// INTERESSE BEKUNDEN / ZURÜCKZIEHEN
|
||||
// ------------------------------------------------------------------
|
||||
async function _handleInterest(id, isInterested, btn) {
|
||||
if (!_appState?.user) {
|
||||
UI.toast.error('Bitte anmelden um Interesse zu bekunden.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isInterested) {
|
||||
// Interesse zurückziehen
|
||||
try {
|
||||
btn.disabled = true;
|
||||
await API.del(`/adoption/community/${id}/interest`);
|
||||
UI.toast.success('Interesse zurückgezogen.');
|
||||
_communityData = null;
|
||||
_myListings = null;
|
||||
_loadCommunity();
|
||||
} catch {
|
||||
UI.toast.error('Fehler beim Zurückziehen des Interesses.');
|
||||
btn.disabled = false;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Interesse bekunden — Modal mit optionaler Nachricht
|
||||
const body = `
|
||||
<form id="adp-interest-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
|
||||
<p style="color:var(--c-text-secondary);font-size:var(--text-sm)">
|
||||
Du kannst optional eine Nachricht an den Anbieter schicken.
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Nachricht (optional)</label>
|
||||
<textarea class="form-control" name="nachricht" rows="3"
|
||||
placeholder="Stell dich kurz vor und erzähle, warum dieser Hund zu dir passt…"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
const footer = `
|
||||
<div style="display:flex;gap:var(--space-2);width:100%">
|
||||
<button type="submit" form="adp-interest-form" class="btn btn-primary flex-1" id="adp-interest-submit">
|
||||
${UI.icon('heart')} Interesse bekunden
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
UI.modal.open({ title: 'Interesse bekunden', body, footer });
|
||||
|
||||
document.getElementById('adp-interest-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const submitBtn = document.getElementById('adp-interest-submit');
|
||||
const fd = new FormData(e.target);
|
||||
const payload = { nachricht: fd.get('nachricht') || null };
|
||||
if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '…'; }
|
||||
try {
|
||||
await API.post(`/adoption/community/${id}/interest`, payload);
|
||||
UI.modal.close();
|
||||
UI.toast.success('Interesse gemeldet!');
|
||||
_communityData = null;
|
||||
_myListings = null;
|
||||
_loadCommunity();
|
||||
} catch {
|
||||
UI.toast.error('Fehler beim Melden des Interesses.');
|
||||
if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = `${UI.icon('heart')} Interesse bekunden`; }
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// INSERAT ERSTELLEN — Modal
|
||||
// ------------------------------------------------------------------
|
||||
function _openCreateModal() {
|
||||
if (!_appState?.user) {
|
||||
UI.toast.error('Bitte anmelden um ein Inserat zu erstellen.');
|
||||
return;
|
||||
}
|
||||
|
||||
const body = `
|
||||
<form id="adp-create-form" style="display:flex;flex-direction:column;gap:var(--space-3)">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Name <span style="color:var(--c-danger)">*</span></label>
|
||||
<input class="form-control" name="name" required placeholder="z.B. Bello">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Rasse (optional)</label>
|
||||
<input class="form-control" name="rasse" placeholder="z.B. Labrador Mischling">
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Alter</label>
|
||||
<select class="form-control" name="alter_kategorie">
|
||||
<option value="">Unbekannt</option>
|
||||
<option value="welpe">Welpe <6Mo</option>
|
||||
<option value="jung">Jung 6Mo–2J</option>
|
||||
<option value="adult">Adult 2–8J</option>
|
||||
<option value="senior">Senior >8J</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Geschlecht</label>
|
||||
<select class="form-control" name="geschlecht">
|
||||
<option value="">Unbekannt</option>
|
||||
<option value="maennlich">Männlich</option>
|
||||
<option value="weiblich">Weiblich</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
|
||||
<div class="form-group">
|
||||
<label class="form-label">PLZ</label>
|
||||
<input class="form-control" name="plz" inputmode="numeric" maxlength="5"
|
||||
placeholder="z.B. 80331" value="${_esc(_lat ? '' : '')}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Ort</label>
|
||||
<input class="form-control" name="ort" placeholder="z.B. München">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Beschreibung <span style="color:var(--c-danger)">*</span></label>
|
||||
<textarea class="form-control" name="beschreibung" rows="4" required minlength="80"
|
||||
placeholder="Erzähle, warum du deinen Hund abgeben musst, und was ihn besonders macht…"></textarea>
|
||||
<div style="font-size:10px;color:var(--c-text-muted);margin-top:2px">Mindestens 80 Zeichen</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Hintergrund (optional)</label>
|
||||
<textarea class="form-control" name="hintergrund" rows="2"
|
||||
placeholder="Warum suchst du ein neues Zuhause? (Krankheit, Umzug, Allergie…)"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Foto (optional)</label>
|
||||
<input class="form-control" type="file" name="foto" accept="image/*" id="adp-create-foto">
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
const footer = `
|
||||
<div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
|
||||
<button type="submit" form="adp-create-form" class="btn btn-primary" style="width:100%" id="adp-create-submit">
|
||||
${UI.icon('plus')} Inserat erstellen
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="UI.modal.close()">Abbrechen</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
UI.modal.open({ title: 'Hund zur Vermittlung anbieten', body, footer });
|
||||
|
||||
document.getElementById('adp-create-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const submitBtn = document.getElementById('adp-create-submit');
|
||||
const fd = new FormData(e.target);
|
||||
|
||||
// Mindestlänge Beschreibung manuell prüfen (minlength gilt nur für text)
|
||||
const beschreibung = (fd.get('beschreibung') || '').trim();
|
||||
if (beschreibung.length < 80) {
|
||||
UI.toast.error('Beschreibung muss mindestens 80 Zeichen lang sein.');
|
||||
return;
|
||||
}
|
||||
|
||||
// FormData für multipart aufbauen
|
||||
const postData = new FormData();
|
||||
postData.append('name', fd.get('name') || '');
|
||||
postData.append('rasse', fd.get('rasse') || '');
|
||||
postData.append('alter_kategorie', fd.get('alter_kategorie') || '');
|
||||
postData.append('geschlecht', fd.get('geschlecht') || '');
|
||||
postData.append('plz', fd.get('plz') || '');
|
||||
postData.append('ort', fd.get('ort') || '');
|
||||
postData.append('beschreibung', beschreibung);
|
||||
postData.append('hintergrund', fd.get('hintergrund') || '');
|
||||
if (_lat) postData.append('lat', _lat);
|
||||
if (_lon) postData.append('lon', _lon);
|
||||
const fotoFile = document.getElementById('adp-create-foto')?.files?.[0];
|
||||
if (fotoFile) postData.append('foto', fotoFile);
|
||||
|
||||
if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '…'; }
|
||||
try {
|
||||
await API.upload('/adoption/community', postData);
|
||||
UI.modal.close();
|
||||
UI.toast.success('Inserat erstellt!');
|
||||
_communityData = null;
|
||||
_myListings = null;
|
||||
_loadCommunity();
|
||||
} catch (err) {
|
||||
UI.toast.error(err.message || 'Inserat konnte nicht erstellt werden.');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerHTML = `${UI.icon('plus')} Inserat erstellen`;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// HILFSFUNKTIONEN
|
||||
// ----------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -263,6 +263,12 @@ window.Page_settings = (() => {
|
|||
<span>Kalender abonnieren</span>
|
||||
<span style="margin-left:auto;color:var(--c-text-secondary)">›</span>
|
||||
</div>
|
||||
<div class="sidebar-item" id="settings-worlds-btn"
|
||||
style="padding:var(--space-4);border-radius:0;border-bottom:1px solid var(--c-border);cursor:pointer">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#squares-four"></use></svg>
|
||||
<span>Welten einrichten</span>
|
||||
<span style="margin-left:auto;color:var(--c-text-secondary)">›</span>
|
||||
</div>
|
||||
<div class="sidebar-item" id="settings-logout-btn"
|
||||
style="padding:var(--space-4);border-radius:0;cursor:pointer;
|
||||
color:var(--c-danger)">
|
||||
|
|
@ -653,6 +659,11 @@ window.Page_settings = (() => {
|
|||
}
|
||||
});
|
||||
|
||||
document.getElementById('settings-worlds-btn')?.addEventListener('click', () => {
|
||||
if (window.Worlds?._openConfigModal) window.Worlds._openConfigModal();
|
||||
else if (window.Worlds) window.Worlds.openConfig?.();
|
||||
});
|
||||
|
||||
document.getElementById('settings-logout-btn')?.addEventListener('click', async () => {
|
||||
const ok = await UI.modal.confirm({
|
||||
title : 'Abmelden?',
|
||||
|
|
|
|||
581
backend/static/js/pages/wetter.js
Normal file
581
backend/static/js/pages/wetter.js
Normal file
|
|
@ -0,0 +1,581 @@
|
|||
/* ============================================================
|
||||
BAN YARO — Wetter (7-Tage-Wettervorhersage)
|
||||
Seiten-Modul: Hunde-optimierte Wettervorhersage mit GPS.
|
||||
============================================================ */
|
||||
|
||||
window.Page_wetter = (() => {
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// KONSTANTEN
|
||||
// ----------------------------------------------------------
|
||||
// WMO-Code → Phosphor-Icon-Name (aus Sprite)
|
||||
const WMO_ICON = {
|
||||
0:'sun', 1:'sun-dim', 2:'cloud-sun', 3:'cloud',
|
||||
45:'cloud-fog', 48:'cloud-fog',
|
||||
51:'cloud-rain', 53:'cloud-rain', 55:'cloud-rain',
|
||||
61:'cloud-rain', 63:'cloud-rain', 65:'cloud-rain',
|
||||
71:'cloud-snow', 73:'cloud-snow', 75:'cloud-snow', 77:'snowflake',
|
||||
80:'rainbow-cloud', 81:'cloud-rain', 82:'cloud-rain',
|
||||
85:'cloud-snow', 86:'cloud-snow',
|
||||
95:'cloud-lightning', 96:'cloud-lightning', 99:'cloud-lightning',
|
||||
};
|
||||
// Farben passend zum Wetter (für Icon-Tinting)
|
||||
const WMO_COLOR = {
|
||||
0:'#F59E0B', 1:'#F59E0B', 2:'#94A3B8', 3:'#64748B',
|
||||
45:'#94A3B8', 48:'#94A3B8',
|
||||
51:'#60A5FA', 53:'#3B82F6', 55:'#2563EB',
|
||||
61:'#3B82F6', 63:'#2563EB', 65:'#1D4ED8',
|
||||
71:'#BAE6FD', 73:'#7DD3FC', 75:'#38BDF8', 77:'#BAE6FD',
|
||||
80:'#60A5FA', 81:'#3B82F6', 82:'#2563EB',
|
||||
85:'#7DD3FC', 86:'#38BDF8',
|
||||
95:'#7C3AED', 96:'#6D28D9', 99:'#5B21B6',
|
||||
};
|
||||
function _wmoIcon(code, size = '2rem', extraStyle = '') {
|
||||
const name = WMO_ICON[code] || 'cloud';
|
||||
const color = WMO_COLOR[code] || 'var(--c-text-secondary)';
|
||||
return `<svg class="ph-icon" aria-hidden="true"
|
||||
style="width:${size};height:${size};color:${color};flex-shrink:0;${extraStyle}">
|
||||
<use href="/icons/phosphor.svg#${name}"></use>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
const WMO_DESC = {
|
||||
0:'Klarer Himmel', 1:'Überwiegend klar', 2:'Teilweise bewölkt', 3:'Bedeckt',
|
||||
45:'Nebel', 48:'Gefrierender Nebel',
|
||||
51:'Leichter Sprühregen', 53:'Mäßiger Sprühregen', 55:'Starker Sprühregen',
|
||||
61:'Leichter Regen', 63:'Mäßiger Regen', 65:'Starker Regen',
|
||||
71:'Leichter Schneefall', 73:'Mäßiger Schneefall', 75:'Starker Schneefall', 77:'Schneekörner',
|
||||
80:'Leichte Regenschauer', 81:'Mäßige Regenschauer', 82:'Starke Regenschauer',
|
||||
85:'Leichte Schneeschauer', 86:'Starke Schneeschauer',
|
||||
95:'Gewitter', 96:'Gewitter mit leichtem Hagel', 99:'Gewitter mit starkem Hagel'
|
||||
};
|
||||
|
||||
const DAY_NAMES = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// MODUL-STATE
|
||||
// ----------------------------------------------------------
|
||||
let _container = null;
|
||||
let _appState = null;
|
||||
let _data = null;
|
||||
let _selDay = 0;
|
||||
let _loading = false;
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INIT
|
||||
// ----------------------------------------------------------
|
||||
async function init(container, appState) {
|
||||
_container = container;
|
||||
_appState = appState;
|
||||
_selDay = 0;
|
||||
_renderShell();
|
||||
_tryAutoLocate();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// REFRESH
|
||||
// ----------------------------------------------------------
|
||||
async function refresh() {
|
||||
_selDay = 0;
|
||||
_renderShell();
|
||||
_tryAutoLocate();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// RENDER — Grundstruktur
|
||||
// ----------------------------------------------------------
|
||||
function _renderShell() {
|
||||
_container.innerHTML = `
|
||||
<div id="wttr-body">
|
||||
<div id="wttr-locating" style="text-align:center;padding:var(--space-10) var(--space-4)">
|
||||
<div style="margin-bottom:var(--space-3)">${_wmoIcon(2, '2.5rem')}</div>
|
||||
<p style="color:var(--c-text-secondary)">Standort wird ermittelt…</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// STANDORT AUTOMATISCH ERMITTELN
|
||||
// ----------------------------------------------------------
|
||||
async function _tryAutoLocate() {
|
||||
try {
|
||||
const pos = await API.getLocation({ timeout: 8000, maximumAge: 300_000 });
|
||||
await _loadData(pos.lat, pos.lon);
|
||||
} catch {
|
||||
_showLocationError();
|
||||
}
|
||||
}
|
||||
|
||||
function _showLocationError() {
|
||||
const body = _container.querySelector('#wttr-body');
|
||||
if (!body) return;
|
||||
body.innerHTML = `
|
||||
<div style="text-align:center;padding:var(--space-10) var(--space-4)">
|
||||
<div style="font-size:2.5rem;margin-bottom:var(--space-3)">📍</div>
|
||||
<h3 style="margin-bottom:var(--space-2)">Standort nicht verfügbar</h3>
|
||||
<p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:300px;margin-inline:auto">
|
||||
Bitte erlaube den Zugriff auf deinen Standort, um die Wettervorhersage zu laden.
|
||||
</p>
|
||||
<button class="btn btn-primary" id="wttr-btn-retry">
|
||||
${UI.icon('map-pin')} Nochmal versuchen
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
body.querySelector('#wttr-btn-retry')?.addEventListener('click', () => {
|
||||
_renderShell();
|
||||
_tryAutoLocate();
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// DATEN LADEN
|
||||
// ----------------------------------------------------------
|
||||
async function _loadData(lat, lon) {
|
||||
if (_loading) return;
|
||||
_loading = true;
|
||||
try {
|
||||
_data = await API.weather.forecast(lat, lon);
|
||||
_selDay = 0;
|
||||
_renderWeather();
|
||||
} catch {
|
||||
const body = _container.querySelector('#wttr-body');
|
||||
if (body) body.innerHTML = `
|
||||
<div style="text-align:center;padding:var(--space-10) var(--space-4)">
|
||||
<div style="font-size:2.5rem;margin-bottom:var(--space-3)">⚠️</div>
|
||||
<h3 style="margin-bottom:var(--space-2)">Wetter nicht verfügbar</h3>
|
||||
<p style="color:var(--c-text-secondary);margin-bottom:var(--space-5)">
|
||||
Die Wetterdaten konnten nicht geladen werden.
|
||||
</p>
|
||||
<button class="btn btn-primary" id="wttr-btn-reload">
|
||||
${UI.icon('arrow-clockwise')} Erneut laden
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
body?.querySelector('#wttr-btn-reload')?.addEventListener('click', () => {
|
||||
refresh();
|
||||
});
|
||||
} finally {
|
||||
_loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// HAUPT-RENDER
|
||||
// ----------------------------------------------------------
|
||||
function _renderWeather() {
|
||||
const body = _container.querySelector('#wttr-body');
|
||||
if (!body || !_data) return;
|
||||
|
||||
const days = _data.days || [];
|
||||
if (!days.length) return;
|
||||
|
||||
body.innerHTML = `
|
||||
<!-- 7-Tage-Strip -->
|
||||
<div id="wttr-strip-wrap"
|
||||
style="overflow-x:auto;-webkit-overflow-scrolling:touch;
|
||||
margin-bottom:var(--space-4);
|
||||
scrollbar-width:none">
|
||||
<div id="wttr-strip"
|
||||
style="display:flex;gap:var(--space-2);padding-bottom:4px;min-width:max-content">
|
||||
${days.map((d, i) => _dayCard(d, i)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail-Card -->
|
||||
<div id="wttr-detail" class="section-card"
|
||||
style="margin-bottom:var(--space-4)">
|
||||
</div>
|
||||
|
||||
<!-- Hunde-Wetter -->
|
||||
<div id="wttr-dog" class="section-card">
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Strip-Klick-Events
|
||||
body.querySelectorAll('[data-wttr-day]').forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
_selDay = parseInt(card.dataset.wttrDay);
|
||||
_updateStrip();
|
||||
_renderDetail();
|
||||
_renderDog();
|
||||
});
|
||||
});
|
||||
|
||||
_renderDetail();
|
||||
_renderDog();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// STRIP AKTUALISIEREN (aktiver Tag)
|
||||
// ----------------------------------------------------------
|
||||
function _updateStrip() {
|
||||
const body = _container.querySelector('#wttr-body');
|
||||
if (!body) return;
|
||||
const days = _data?.days || [];
|
||||
body.querySelectorAll('[data-wttr-day]').forEach((card, i) => {
|
||||
const active = i === _selDay;
|
||||
card.style.background = active ? 'var(--c-primary)' : 'var(--c-bg-card)';
|
||||
card.style.color = active ? '#fff' : 'var(--c-text)';
|
||||
card.style.borderColor = active ? 'var(--c-primary)' : 'var(--c-border)';
|
||||
card.style.transform = active ? 'translateY(-2px)' : '';
|
||||
card.style.boxShadow = active ? '0 4px 12px rgba(196,132,58,0.3)' : '0 1px 3px rgba(0,0,0,0.07)';
|
||||
// Temperatur-Farbe im aktiven Zustand
|
||||
const tempEl = card.querySelector('.wttr-temp');
|
||||
if (tempEl) tempEl.style.color = active ? 'rgba(255,255,255,0.85)' : 'var(--c-text-secondary)';
|
||||
const precipEl = card.querySelector('.wttr-precip');
|
||||
if (precipEl) precipEl.style.color = active ? 'rgba(255,255,255,0.75)' : 'var(--c-text-secondary)';
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// TAG-KARTE (Strip)
|
||||
// ----------------------------------------------------------
|
||||
function _dayCard(d, i) {
|
||||
const active = i === _selDay;
|
||||
const dateObj = new Date(d.date);
|
||||
const dayName = i === 0 ? 'Heute' : DAY_NAMES[dateObj.getDay()];
|
||||
const bg = active ? 'var(--c-primary)' : 'var(--c-bg-card)';
|
||||
const col = active ? '#fff' : 'var(--c-text)';
|
||||
const shadow = active
|
||||
? '0 4px 12px rgba(196,132,58,0.3)'
|
||||
: '0 1px 3px rgba(0,0,0,0.07)';
|
||||
const border = active ? 'var(--c-primary)' : 'var(--c-border)';
|
||||
const transform = active ? 'translateY(-2px)' : '';
|
||||
const textSec = active ? 'rgba(255,255,255,0.85)' : 'var(--c-text-secondary)';
|
||||
const textMut = active ? 'rgba(255,255,255,0.75)' : 'var(--c-text-secondary)';
|
||||
|
||||
return `
|
||||
<div data-wttr-day="${i}"
|
||||
style="display:flex;flex-direction:column;align-items:center;
|
||||
min-width:72px;padding:var(--space-3) var(--space-2);
|
||||
border-radius:var(--radius);border:1.5px solid ${border};
|
||||
background:${bg};color:${col};cursor:pointer;
|
||||
box-shadow:${shadow};transform:${transform};
|
||||
transition:all .15s;user-select:none">
|
||||
<span style="font-size:var(--text-xs);font-weight:600;
|
||||
margin-bottom:var(--space-1)">${_esc(dayName)}</span>
|
||||
<div style="margin-bottom:var(--space-1)">${_wmoIcon(d.weathercode, '1.5rem', active ? 'filter:brightness(0) invert(1)' : '')}</div>
|
||||
<span class="wttr-temp"
|
||||
style="font-size:var(--text-xs);color:${textSec};white-space:nowrap">
|
||||
${Math.round(d.temp_max)}°/<span style="opacity:.75">${Math.round(d.temp_min)}°</span>
|
||||
</span>
|
||||
<span class="wttr-precip"
|
||||
style="font-size:10px;color:${textMut};margin-top:2px">
|
||||
<svg class="ph-icon" style="width:10px;height:10px;vertical-align:-1px;color:#60A5FA"><use href="/icons/phosphor.svg#drop"></use></svg>${d.precip_prob ?? 0}%
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// DETAIL-CARD
|
||||
// ----------------------------------------------------------
|
||||
function _renderDetail() {
|
||||
const el = _container.querySelector('#wttr-detail');
|
||||
if (!el || !_data) return;
|
||||
const d = (_data.days || [])[_selDay];
|
||||
if (!d) return;
|
||||
|
||||
const desc = WMO_DESC[d.weathercode] || '';
|
||||
const [uvLabel, uvColor] = _uvLabel(d.uv_index ?? 0);
|
||||
const uvPct = Math.min(100, ((d.uv_index ?? 0) / 11) * 100);
|
||||
const bft = _beaufort(d.wind_kmh ?? 0);
|
||||
const windDir = d.wind_dir_deg ?? 0;
|
||||
const compass = d.wind_dir ?? _compass(windDir);
|
||||
|
||||
// Sunrise/Sunset Balken
|
||||
const now = new Date();
|
||||
const sunriseStr = d.sunrise || '';
|
||||
const sunsetStr = d.sunset || '';
|
||||
let sunPct = 0;
|
||||
if (sunriseStr && sunsetStr) {
|
||||
const [rH, rM] = sunriseStr.split(':').map(Number);
|
||||
const [sH, sM] = sunsetStr.split(':').map(Number);
|
||||
const riseMin = rH * 60 + rM;
|
||||
const setMin = sH * 60 + sM;
|
||||
const curMin = now.getHours() * 60 + now.getMinutes();
|
||||
sunPct = _selDay === 0
|
||||
? Math.min(100, Math.max(0, ((curMin - riseMin) / (setMin - riseMin)) * 100))
|
||||
: 0;
|
||||
}
|
||||
|
||||
el.innerHTML = `
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)">
|
||||
${_wmoIcon(d.weathercode, '3.5rem')}
|
||||
<div>
|
||||
<div style="font-weight:700;font-size:var(--text-lg)">${_esc(desc)}</div>
|
||||
<div style="font-size:var(--text-2xl);font-weight:800;color:var(--c-primary);line-height:1.1">
|
||||
${Math.round(d.temp_max)}°
|
||||
<span style="font-size:var(--text-base);font-weight:400;color:var(--c-text-secondary)">
|
||||
/ ${Math.round(d.temp_min)}°
|
||||
</span>
|
||||
</div>
|
||||
${d.feels_max != null ? `
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
|
||||
Gefühlt ${Math.round(d.feels_max)}° / ${Math.round(d.feels_min ?? d.feels_max)}°
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sonnenaufgang / -untergang -->
|
||||
${sunriseStr && sunsetStr ? `
|
||||
<div style="margin-bottom:var(--space-4)">
|
||||
<div style="display:flex;justify-content:space-between;
|
||||
font-size:var(--text-xs);color:var(--c-text-secondary);
|
||||
margin-bottom:var(--space-1)">
|
||||
<span style="display:flex;align-items:center;gap:4px">
|
||||
<svg class="ph-icon" style="width:14px;height:14px;color:#F97316"><use href="/icons/phosphor.svg#sun-horizon"></use></svg>
|
||||
${_esc(sunriseStr)}
|
||||
</span>
|
||||
<span style="display:flex;align-items:center;gap:4px">
|
||||
${_esc(sunsetStr)}
|
||||
<svg class="ph-icon" style="width:14px;height:14px;color:#7C3AED"><use href="/icons/phosphor.svg#moon-stars"></use></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div style="height:6px;border-radius:999px;background:var(--c-border);overflow:hidden">
|
||||
<div style="height:100%;width:${sunPct}%;
|
||||
background:linear-gradient(90deg,#f97316,#facc15);
|
||||
border-radius:999px;transition:width .4s"></div>
|
||||
</div>
|
||||
</div>` : ''}
|
||||
|
||||
<!-- Wind -->
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);
|
||||
padding:var(--space-3);border-radius:var(--radius);
|
||||
background:var(--c-bg-card);border:1px solid var(--c-border);
|
||||
margin-bottom:var(--space-3)">
|
||||
<span style="font-size:1.4rem;transform:rotate(${windDir}deg);display:inline-block;line-height:1">
|
||||
${UI.icon('arrow-up')}
|
||||
</span>
|
||||
<div style="flex:1">
|
||||
<div style="font-size:var(--text-sm);font-weight:600">
|
||||
${_esc(compass)} · ${Math.round(d.windspeed_max ?? 0)} km/h
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-secondary)">${_esc(bft)}</div>
|
||||
</div>
|
||||
${d.precip_sum != null ? `
|
||||
<div style="text-align:right">
|
||||
<div style="font-size:var(--text-sm);font-weight:600">
|
||||
${d.precip_sum} mm
|
||||
</div>
|
||||
<div style="font-size:var(--text-xs);color:var(--c-text-secondary)">Niederschlag</div>
|
||||
</div>` : ''}
|
||||
</div>
|
||||
|
||||
<!-- UV-Index -->
|
||||
<div>
|
||||
<div style="display:flex;justify-content:space-between;
|
||||
font-size:var(--text-xs);margin-bottom:4px">
|
||||
<span style="color:var(--c-text-secondary)">UV-Index</span>
|
||||
<span style="font-weight:600;color:${uvColor}">
|
||||
${d.uv_index ?? 0} — ${_esc(uvLabel)}
|
||||
</span>
|
||||
</div>
|
||||
<div style="height:6px;border-radius:999px;background:var(--c-border);overflow:hidden">
|
||||
<div style="height:100%;width:${uvPct}%;background:${uvColor};
|
||||
border-radius:999px;transition:width .4s"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// HUNDE-WETTER
|
||||
// ----------------------------------------------------------
|
||||
function _renderDog() {
|
||||
const el = _container.querySelector('#wttr-dog');
|
||||
if (!el || !_data) return;
|
||||
const d = (_data.days || [])[_selDay];
|
||||
if (!d) return;
|
||||
|
||||
const _POLLEN_NAMES = { erle:'Erle', birke:'Birke', graeser:'Gräser', beifuss:'Beifuß', ambrosia:'Ambrosia' };
|
||||
let html = `<h3 style="font-size:var(--text-base);font-weight:700;
|
||||
margin-bottom:var(--space-4)">
|
||||
<svg class="ph-icon" style="width:1.1em;height:1.1em;vertical-align:-2px;color:var(--c-primary)"><use href="/icons/phosphor.svg#paw-print"></use></svg>
|
||||
Hunde-Wetter
|
||||
</h3>`;
|
||||
|
||||
// Asphalt-Temperatur
|
||||
if (d.asphalt_temp != null) {
|
||||
const [aspText, aspColor, aspAdvice] = _asphaltLevel(d.asphalt_temp);
|
||||
html += `
|
||||
<div style="display:flex;align-items:flex-start;gap:var(--space-3);
|
||||
padding:var(--space-3);border-radius:var(--radius);
|
||||
background:${aspColor}1a;border:1px solid ${aspColor}55;
|
||||
margin-bottom:var(--space-3)">
|
||||
<svg class="ph-icon" style="width:1.3rem;height:1.3rem;flex-shrink:0;color:var(--c-primary)"><use href="/icons/phosphor.svg#paw-print"></use></svg>
|
||||
<div style="flex:1">
|
||||
<div style="font-weight:600;font-size:var(--text-sm);color:${aspColor}">
|
||||
Asphalt ~${Math.round(d.asphalt_temp)}°C — ${_esc(aspText)}
|
||||
</div>
|
||||
${aspAdvice ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
|
||||
${_esc(aspAdvice)}
|
||||
</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Pfoten-Kälteschutz
|
||||
if (d.paw_cold) {
|
||||
html += `
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);
|
||||
padding:var(--space-3);border-radius:var(--radius);
|
||||
background:#3b82f61a;border:1px solid #3b82f655;
|
||||
margin-bottom:var(--space-3)">
|
||||
<svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#38BDF8"><use href="/icons/phosphor.svg#snowflake"></use></svg>
|
||||
<div style="font-size:var(--text-sm)">
|
||||
<strong>Kälteschutz für Pfoten:</strong>
|
||||
Eis und Streusalz können die Pfoten reizen. Pfotenpflege empfohlen.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Gewitter
|
||||
if (d.thunderstorm) {
|
||||
html += `
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);
|
||||
padding:var(--space-3);border-radius:var(--radius);
|
||||
background:#f59e0b1a;border:1px solid #f59e0b55;
|
||||
margin-bottom:var(--space-3)">
|
||||
<svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#7C3AED"><use href="/icons/phosphor.svg#cloud-lightning"></use></svg>
|
||||
<div style="font-size:var(--text-sm)">
|
||||
<strong>Gewitter erwartet:</strong>
|
||||
Hunde können auf Gewitter sensibel reagieren. Sichere Umgebung schaffen.
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Pollenflug
|
||||
const pollen = d.pollen;
|
||||
if (pollen && typeof pollen === 'object' && Object.keys(pollen).length) {
|
||||
const pollenEntries = Object.entries(pollen)
|
||||
.filter(([, v]) => v != null && v.level > 0);
|
||||
if (pollenEntries.length) {
|
||||
html += `
|
||||
<div style="margin-bottom:var(--space-3)">
|
||||
<div style="font-size:var(--text-xs);font-weight:600;
|
||||
color:var(--c-text-secondary);margin-bottom:var(--space-2)">
|
||||
<svg class="ph-icon" style="width:1em;height:1em;vertical-align:-1px;color:#16A34A"><use href="/icons/phosphor.svg#leaf"></use></svg>
|
||||
Pollenflug
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--space-2)">
|
||||
${pollenEntries.map(([key, lvlObj]) => {
|
||||
const col = _pollenColor(lvlObj?.level ?? 0);
|
||||
const name = _POLLEN_NAMES[key] || key;
|
||||
const lbl = lvlObj?.label || '';
|
||||
return `<span style="display:inline-flex;align-items:center;gap:4px;
|
||||
font-size:var(--text-xs);border-radius:999px;
|
||||
padding:3px 10px;background:${col}22;
|
||||
border:1px solid ${col}55;color:${col};font-weight:600">
|
||||
<span style="width:6px;height:6px;border-radius:50%;background:${col};display:inline-block"></span>
|
||||
${_esc(name)}: ${_esc(lbl)}
|
||||
</span>`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Zecken
|
||||
if (d.zecken != null) {
|
||||
const [tickLabel, tickColor] = _tickLevel(d.zecken);
|
||||
html += `
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);
|
||||
padding:var(--space-3);border-radius:var(--radius);
|
||||
background:${tickColor}1a;border:1px solid ${tickColor}55;
|
||||
margin-bottom:var(--space-3)">
|
||||
<svg class="ph-icon" style="width:1.3rem;height:1.3rem;color:#92400E"><use href="/icons/phosphor.svg#bug"></use></svg>
|
||||
<div style="flex:1">
|
||||
<span style="font-size:var(--text-sm);font-weight:600">Zecken-Risiko: </span>
|
||||
<span style="font-size:var(--text-sm);color:${tickColor};font-weight:700">
|
||||
${_esc(tickLabel)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Wenn keine Hunde-Daten vorhanden
|
||||
if (!d.asphalt_temp && !d.paw_cold && !d.thunderstorm
|
||||
&& !d.zecken && !(pollen && Object.keys(pollen).length)) {
|
||||
html += `
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary)">
|
||||
Keine besonderen Hinweise für heute.
|
||||
</p>
|
||||
`;
|
||||
}
|
||||
|
||||
el.innerHTML = html;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// HILFSFUNKTIONEN — Wetter
|
||||
// ----------------------------------------------------------
|
||||
function _beaufort(kmh) {
|
||||
if (kmh < 2) return 'Windstille';
|
||||
if (kmh < 12) return 'leicht';
|
||||
if (kmh < 29) return 'mäßig';
|
||||
if (kmh < 50) return 'frisch';
|
||||
if (kmh < 62) return 'stark';
|
||||
if (kmh < 75) return 'stürmisch';
|
||||
return 'Sturm';
|
||||
}
|
||||
|
||||
function _uvLabel(uv) {
|
||||
if (uv <= 2) return ['niedrig', '#4CAF50'];
|
||||
if (uv <= 5) return ['mittel', '#FFC107'];
|
||||
if (uv <= 7) return ['hoch', '#FF9800'];
|
||||
if (uv <= 10) return ['sehr hoch', '#F44336'];
|
||||
return ['extrem', '#9C27B0'];
|
||||
}
|
||||
|
||||
function _compass(deg) {
|
||||
const dirs = ['N','NO','O','SO','S','SW','W','NW'];
|
||||
return dirs[Math.round(deg / 45) % 8];
|
||||
}
|
||||
|
||||
function _asphaltLevel(temp) {
|
||||
if (temp < 40) return ['Pfoten sicher', '#4CAF50', ''];
|
||||
if (temp < 50) return ['leicht erwärmt', '#FFC107',
|
||||
'Kurze Kontaktzeiten sind unbedenklich.'];
|
||||
if (temp < 60) return ['Vorsicht — Pfoten schützen!', '#FF9800',
|
||||
'Heiße Oberfläche! Auf Gras ausweichen oder Hundeschuhe verwenden.'];
|
||||
return ['GEFAHR — Verbrennungsgefahr!', '#F44336',
|
||||
'Asphalt kann Pfoten in Sekunden verbrennen. Spaziergang vermeiden!'];
|
||||
}
|
||||
|
||||
function _pollenColor(level) {
|
||||
if (level === 0) return '#9E9E9E';
|
||||
if (level === 1) return '#4CAF50';
|
||||
if (level === 2) return '#FFC107';
|
||||
if (level === 3) return '#FF9800';
|
||||
return '#F44336'; // level 4+
|
||||
}
|
||||
|
||||
function _tickLevel(risk) {
|
||||
const r = (risk || '').toLowerCase();
|
||||
if (r === 'niedrig') return ['niedrig', '#4CAF50'];
|
||||
if (r === 'mittel') return ['mittel', '#FF9800'];
|
||||
return ['hoch', '#F44336'];
|
||||
}
|
||||
|
||||
function _esc(s) {
|
||||
if (s == null) return '';
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// PUBLIC API
|
||||
// ----------------------------------------------------------
|
||||
return { init, refresh };
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue