Sprint 18: Lost-Dog CSS, Freunde-Aktivitäts-Feed, Events-Karte
This commit is contained in:
parent
cfdb3fbc19
commit
10d30bf565
8 changed files with 595 additions and 41 deletions
|
|
@ -187,6 +187,131 @@ async def decline_request(friendship_id: int, user=Depends(get_current_user)):
|
|||
return {"ok": True}
|
||||
|
||||
|
||||
@router.get("/activity")
|
||||
async def get_activity(user=Depends(get_current_user)):
|
||||
"""Aggregierter Aktivitäts-Feed der Freunde (max. 30 Einträge, neueste zuerst)."""
|
||||
import json
|
||||
uid = user["id"]
|
||||
|
||||
with db() as conn:
|
||||
# Alle akzeptierten Freunde ermitteln
|
||||
friend_rows = conn.execute("""
|
||||
SELECT CASE WHEN requester_id=? THEN addressee_id ELSE requester_id END AS fid
|
||||
FROM friendships
|
||||
WHERE (requester_id=? OR addressee_id=?) AND status='accepted'
|
||||
""", (uid, uid, uid)).fetchall()
|
||||
|
||||
friend_ids = [r["fid"] for r in friend_rows]
|
||||
if not friend_ids:
|
||||
return []
|
||||
|
||||
ph = ",".join("?" * len(friend_ids))
|
||||
|
||||
# Tagebuch-Einträge der Freunde
|
||||
diary_rows = conn.execute(f"""
|
||||
SELECT
|
||||
'diary' AS type,
|
||||
u.id AS user_id,
|
||||
u.name AS user_name,
|
||||
u.avatar_url,
|
||||
d.name AS dog_name,
|
||||
d.foto_url AS dog_foto,
|
||||
dg.titel AS text,
|
||||
dg.created_at
|
||||
FROM diary dg
|
||||
JOIN dogs d ON d.id = dg.dog_id
|
||||
JOIN users u ON u.id = d.user_id
|
||||
WHERE d.user_id IN ({ph})
|
||||
ORDER BY dg.created_at DESC
|
||||
LIMIT 30
|
||||
""", friend_ids).fetchall()
|
||||
|
||||
# Gesundheitseinträge der Freunde (nur Typ + Datum, kein Inhalt)
|
||||
health_rows = conn.execute(f"""
|
||||
SELECT
|
||||
'health' AS type,
|
||||
u.id AS user_id,
|
||||
u.name AS user_name,
|
||||
u.avatar_url,
|
||||
d.name AS dog_name,
|
||||
d.foto_url AS dog_foto,
|
||||
h.created_at
|
||||
FROM health h
|
||||
JOIN dogs d ON d.id = h.dog_id
|
||||
JOIN users u ON u.id = d.user_id
|
||||
WHERE d.user_id IN ({ph})
|
||||
ORDER BY h.created_at DESC
|
||||
LIMIT 30
|
||||
""", friend_ids).fetchall()
|
||||
|
||||
# Gassi-Treffen der Freunde
|
||||
walk_rows = conn.execute(f"""
|
||||
SELECT
|
||||
'walk' AS type,
|
||||
u.id AS user_id,
|
||||
u.name AS user_name,
|
||||
u.avatar_url,
|
||||
NULL AS dog_name,
|
||||
NULL AS dog_foto,
|
||||
w.titel AS text,
|
||||
w.created_at
|
||||
FROM walks w
|
||||
JOIN users u ON u.id = w.user_id
|
||||
WHERE w.user_id IN ({ph})
|
||||
ORDER BY w.created_at DESC
|
||||
LIMIT 30
|
||||
""", friend_ids).fetchall()
|
||||
|
||||
# Neue Hunde (angelegt in den letzten 30 Tagen)
|
||||
new_dog_rows = conn.execute(f"""
|
||||
SELECT
|
||||
'new_dog' AS type,
|
||||
u.id AS user_id,
|
||||
u.name AS user_name,
|
||||
u.avatar_url,
|
||||
d.name AS dog_name,
|
||||
d.foto_url AS dog_foto,
|
||||
d.created_at
|
||||
FROM dogs d
|
||||
JOIN users u ON u.id = d.user_id
|
||||
WHERE d.user_id IN ({ph})
|
||||
AND d.created_at >= datetime('now', '-30 days')
|
||||
ORDER BY d.created_at DESC
|
||||
LIMIT 30
|
||||
""", friend_ids).fetchall()
|
||||
|
||||
_ICON = {
|
||||
"diary": "book-open",
|
||||
"health": "heart",
|
||||
"walk": "paw-print",
|
||||
"new_dog": "dog",
|
||||
}
|
||||
_TEXT = {
|
||||
"health": "Hat einen Gesundheitseintrag hinzugefügt",
|
||||
"new_dog": "Hat einen neuen Hund eingetragen",
|
||||
}
|
||||
|
||||
items = []
|
||||
for row in [*diary_rows, *health_rows, *walk_rows, *new_dog_rows]:
|
||||
d = dict(row)
|
||||
t = d["type"]
|
||||
items.append({
|
||||
"type": t,
|
||||
"user_id": d["user_id"],
|
||||
"user_name": d["user_name"],
|
||||
"avatar_url": d.get("avatar_url"),
|
||||
"dog_name": d.get("dog_name"),
|
||||
"dog_foto": d.get("dog_foto"),
|
||||
"text": _TEXT.get(t) or (d.get("text") or ""),
|
||||
"created_at": d["created_at"],
|
||||
"icon": _ICON[t],
|
||||
})
|
||||
|
||||
# Zusammenführen und nach created_at absteigend sortieren, max. 30
|
||||
items.sort(key=lambda x: x["created_at"] or "", reverse=True)
|
||||
return items[:30]
|
||||
|
||||
|
||||
@router.delete("/{friend_user_id}")
|
||||
async def remove_friend(friend_user_id: int, user=Depends(get_current_user)):
|
||||
uid = user["id"]
|
||||
|
|
|
|||
|
|
@ -2486,8 +2486,10 @@ textarea.form-control {
|
|||
gap: var(--space-2);
|
||||
}
|
||||
.events-map {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
.events-month-label {
|
||||
font-size: var(--text-sm);
|
||||
|
|
@ -4793,13 +4795,252 @@ textarea.form-control {
|
|||
|
||||
.adm-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-5);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
.adm-stats-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.adm-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.adm-stats-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
|
||||
.adm-stats-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
|
||||
}
|
||||
LOST DOG
|
||||
============================================================ */
|
||||
|
||||
/* Karte für einen vermissten Hund */
|
||||
.lost-card {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
background: var(--c-surface);
|
||||
border: 1px solid var(--c-border);
|
||||
border-left: 4px solid var(--c-danger, #e74c3c);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
.lost-card:hover {
|
||||
background: var(--c-surface-2);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Foto links in der Karte */
|
||||
.lost-card-foto {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: var(--radius-md);
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Platzhalter wenn kein Foto */
|
||||
.lost-card-foto-placeholder {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--c-surface-2);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
/* Text-Block rechts neben dem Foto */
|
||||
.lost-card-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Name des vermissten Hundes */
|
||||
.lost-card-name {
|
||||
font-weight: var(--weight-semibold);
|
||||
font-size: var(--text-base);
|
||||
margin-bottom: var(--space-1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Kurzbeschreibung */
|
||||
.lost-card-desc {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--c-text);
|
||||
margin: 0 0 var(--space-1);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
/* Metadaten-Zeile (Datum, Entfernung) */
|
||||
.lost-card-meta {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--c-text-secondary);
|
||||
}
|
||||
|
||||
/* Badge "Gefunden!" — grüner Überlagerungsstreifen */
|
||||
.lost-badge-gefunden {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
background: var(--c-success, #27ae60);
|
||||
color: #fff;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-semibold);
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: var(--radius-full);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
/* Badge "Meine Meldung" */
|
||||
.lost-badge-own {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--c-warning-subtle, #fff3cd);
|
||||
color: var(--c-warning-dark, #856404);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: var(--weight-medium);
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
/* Entfernungs-Pill */
|
||||
.lost-dist-pill {
|
||||
margin-left: auto;
|
||||
white-space: nowrap;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--c-text-secondary);
|
||||
}
|
||||
|
||||
/* Karten-Wrapper auf der Lost-Seite */
|
||||
.lost-map-wrap {
|
||||
height: 280px;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--c-surface-2);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* OSM-Attribution unter der Karte */
|
||||
.lost-map-attribution {
|
||||
font-size: 10px;
|
||||
color: var(--c-text-secondary);
|
||||
text-align: right;
|
||||
padding: 2px var(--space-2) 0;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
/* Info-Zeile über der Liste ("X vermisste Hunde …") */
|
||||
.lost-info-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--c-text-secondary);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
FRIENDS ACTIVITY FEED
|
||||
============================================================ */
|
||||
.fr-activity-timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.fr-activity-item {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
align-items: flex-start;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
background: var(--c-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
.fr-activity-avatar-wrap {
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.fr-activity-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--c-primary);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fr-activity-avatar--initial {
|
||||
background: var(--c-primary-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: var(--weight-bold);
|
||||
color: var(--c-primary);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.fr-activity-icon-badge {
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: -3px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--c-primary);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--c-surface);
|
||||
}
|
||||
|
||||
.fr-activity-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fr-activity-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: var(--space-1);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.fr-activity-user {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.fr-activity-dog {
|
||||
font-size: var(--text-xs);
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--c-surface-2);
|
||||
color: var(--c-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fr-activity-text {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--c-text-secondary);
|
||||
line-height: 1.4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.fr-activity-time {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--c-text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -335,6 +335,7 @@ const API = (() => {
|
|||
const friends = {
|
||||
list() { return get('/friends/'); },
|
||||
search(q) { return get(`/friends/search?q=${encodeURIComponent(q)}`); },
|
||||
activity() { return get('/friends/activity'); },
|
||||
sendRequest(userId) { return post(`/friends/request/${userId}`, {}); },
|
||||
accept(friendshipId) { return post(`/friends/${friendshipId}/accept`, {}); },
|
||||
decline(friendshipId) { return post(`/friends/${friendshipId}/decline`, {}); },
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '126'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '128'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
|
||||
const App = (() => {
|
||||
|
||||
|
|
|
|||
|
|
@ -41,8 +41,6 @@ window.Page_admin = (() => {
|
|||
// ------------------------------------------------------------------
|
||||
function _render() {
|
||||
_container.innerHTML = `
|
||||
<div style="max-width:720px;margin:0 auto;padding:var(--space-4)">
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="by-tabs adm-tabs" id="adm-tabs">
|
||||
${TABS.map(t => `
|
||||
|
|
@ -54,7 +52,6 @@ window.Page_admin = (() => {
|
|||
|
||||
<!-- Inhalt -->
|
||||
<div id="adm-content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
_container.querySelectorAll('#adm-tabs .by-tab').forEach(btn => {
|
||||
|
|
|
|||
|
|
@ -30,14 +30,15 @@ window.Page_events = (() => {
|
|||
// ----------------------------------------------------------
|
||||
// State
|
||||
// ----------------------------------------------------------
|
||||
let _container = null;
|
||||
let _state = null;
|
||||
let _events = [];
|
||||
let _filter = 'alle';
|
||||
let _quellFilter = 'alle'; // 'alle' | 'vdh' | 'nutzer'
|
||||
let _view = 'liste'; // liste | karte
|
||||
let _map = null;
|
||||
let _markers = [];
|
||||
let _container = null;
|
||||
let _state = null;
|
||||
let _events = [];
|
||||
let _filter = 'alle';
|
||||
let _quellFilter = 'alle'; // 'alle' | 'vdh' | 'nutzer'
|
||||
let _view = 'liste'; // liste | karte
|
||||
let _map = null;
|
||||
let _markers = [];
|
||||
let _clusterGroup = null;
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Phosphor-Icon-Helper
|
||||
|
|
@ -155,8 +156,6 @@ window.Page_events = (() => {
|
|||
}
|
||||
}
|
||||
listEl.innerHTML = html;
|
||||
|
||||
if (_view === 'karte') _renderMap(filtered);
|
||||
}
|
||||
|
||||
function _cardHTML(ev) {
|
||||
|
|
@ -203,48 +202,120 @@ window.Page_events = (() => {
|
|||
async function _renderMap(filtered) {
|
||||
const mapEl = document.getElementById('ev-map');
|
||||
if (!mapEl) return;
|
||||
|
||||
await _loadLeaflet();
|
||||
await _loadMarkerCluster();
|
||||
|
||||
if (!_map) {
|
||||
_map = L.map('ev-map', { zoomControl: true }).setView([51.1657, 10.4515], 6);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_map);
|
||||
} else {
|
||||
_markers.forEach(m => m.remove());
|
||||
_markers = [];
|
||||
}
|
||||
|
||||
// Cluster-Gruppe aufräumen und neu befüllen
|
||||
if (_clusterGroup) {
|
||||
_map.removeLayer(_clusterGroup);
|
||||
}
|
||||
_clusterGroup = L.markerClusterGroup();
|
||||
_markers = [];
|
||||
|
||||
const bounds = [];
|
||||
for (const ev of filtered) {
|
||||
if (!ev.lat || !ev.lon) continue;
|
||||
const color = TYP_COLOR[ev.typ] || '#6b7280';
|
||||
const typ = TYPEN.find(t => t.id === ev.typ) || TYPEN[TYPEN.length - 1];
|
||||
const d = new Date(ev.datum + 'T00:00:00');
|
||||
const datum = d.toLocaleDateString('de-DE', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
const icon = L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="width:32px;height:32px;border-radius:50% 50% 50% 0;background:${color};border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,0.3);transform:rotate(-45deg)"><span style="transform:rotate(45deg)">${typ.icon}</span></div>`,
|
||||
iconSize: [32, 32], iconAnchor: [16, 32],
|
||||
});
|
||||
const m = L.marker([ev.lat, ev.lon], { icon })
|
||||
.addTo(_map)
|
||||
.on('click', () => _showDetail(ev.id));
|
||||
const popup = `
|
||||
<div style="min-width:180px">
|
||||
<strong>${UI.escHtml(ev.titel)}</strong><br>
|
||||
<span style="color:#666;font-size:12px">${datum}</span><br>
|
||||
${ev.ort_name ? `<span style="font-size:12px">📍 ${UI.escHtml(ev.ort_name)}</span><br>` : ''}
|
||||
${ev.beschreibung ? `<span style="font-size:12px">${UI.escHtml(ev.beschreibung.slice(0, 80))}${ev.beschreibung.length > 80 ? '…' : ''}</span><br>` : ''}
|
||||
<a href="#" onclick="event.preventDefault();Page_events._openDetail(${ev.id})"
|
||||
style="font-size:12px;color:var(--c-primary,#2563eb)">Details</a>
|
||||
</div>
|
||||
`;
|
||||
const m = L.marker([ev.lat, ev.lon], { icon }).bindPopup(popup);
|
||||
_clusterGroup.addLayer(m);
|
||||
_markers.push(m);
|
||||
bounds.push([ev.lat, ev.lon]);
|
||||
}
|
||||
|
||||
if (bounds.length) _map.fitBounds(bounds, { padding: [40, 40], maxZoom: 12 });
|
||||
setTimeout(() => _map.invalidateSize(), 50);
|
||||
_map.addLayer(_clusterGroup);
|
||||
|
||||
if (bounds.length) {
|
||||
_map.fitBounds(bounds, { padding: [40, 40], maxZoom: 12 });
|
||||
} else {
|
||||
// Versuche Nutzerstandort, sonst Deutschland-Übersicht
|
||||
try {
|
||||
const pos = await API.getLocation({ timeout: 5000 });
|
||||
_map.setView([pos.lat, pos.lon], 10);
|
||||
} catch {
|
||||
_map.setView([51.1657, 10.4515], 6);
|
||||
}
|
||||
}
|
||||
|
||||
_map.invalidateSize();
|
||||
setTimeout(() => _map.invalidateSize(), 100);
|
||||
}
|
||||
|
||||
function _loadLeaflet() {
|
||||
if (window.L) return Promise.resolve();
|
||||
return new Promise((resolve, reject) => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/css/leaflet.css';
|
||||
document.head.appendChild(link);
|
||||
const s = document.createElement('script');
|
||||
s.src = '/js/leaflet.js';
|
||||
s.onload = resolve;
|
||||
s.onerror = reject;
|
||||
document.head.appendChild(s);
|
||||
const cssLoaded = document.querySelector('link[href*="leaflet"]')
|
||||
? Promise.resolve()
|
||||
: new Promise(res => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/css/leaflet.css';
|
||||
link.onload = res;
|
||||
link.onerror = res;
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
cssLoaded.then(() => {
|
||||
if (document.querySelector('script[src*="leaflet.js"]')) { resolve(); return; }
|
||||
const s = document.createElement('script');
|
||||
s.src = '/js/leaflet.js';
|
||||
s.onload = resolve;
|
||||
s.onerror = reject;
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function _loadMarkerCluster() {
|
||||
if (window.L && L.markerClusterGroup) return Promise.resolve();
|
||||
return new Promise((resolve, reject) => {
|
||||
const cssLoaded = document.querySelector('link[href*="MarkerCluster"]')
|
||||
? Promise.resolve()
|
||||
: new Promise(res => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/css/MarkerCluster.css';
|
||||
link.onload = res;
|
||||
link.onerror = res;
|
||||
document.head.appendChild(link);
|
||||
const link2 = document.createElement('link');
|
||||
link2.rel = 'stylesheet';
|
||||
link2.href = '/css/MarkerCluster.Default.css';
|
||||
link2.onload = res;
|
||||
link2.onerror = res;
|
||||
document.head.appendChild(link2);
|
||||
});
|
||||
cssLoaded.then(() => {
|
||||
if (document.querySelector('script[src*="markercluster"]') ||
|
||||
document.querySelector('script[src*="MarkerCluster"]')) { resolve(); return; }
|
||||
const s = document.createElement('script');
|
||||
s.src = '/js/leaflet.markercluster.js';
|
||||
s.onload = resolve;
|
||||
s.onerror = resolve; // Cluster ist optional — graceful degradation
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -421,7 +492,7 @@ window.Page_events = (() => {
|
|||
if (sourceBtn) {
|
||||
_quellFilter = sourceBtn.dataset.evQuelle;
|
||||
document.querySelectorAll('[data-ev-quelle]').forEach(b => b.classList.toggle('active', b.dataset.evQuelle === _quellFilter));
|
||||
_renderList();
|
||||
if (_view === 'karte') { _renderMap(_filtered()); } else { _renderList(); }
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -430,7 +501,7 @@ window.Page_events = (() => {
|
|||
if (filterBtn) {
|
||||
_filter = filterBtn.dataset.evTyp;
|
||||
document.querySelectorAll('[data-ev-typ]').forEach(b => b.classList.toggle('active', b.dataset.evTyp === _filter));
|
||||
_renderList();
|
||||
if (_view === 'karte') { _renderMap(_filtered()); } else { _renderList(); }
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -444,10 +515,19 @@ window.Page_events = (() => {
|
|||
if (_view === 'karte') {
|
||||
listEl.style.display = 'none';
|
||||
mapEl.style.display = 'block';
|
||||
// Erst div sichtbar machen, dann Karte initialisieren
|
||||
_renderMap(_filtered());
|
||||
} else {
|
||||
listEl.style.display = '';
|
||||
// Karte sauber entfernen
|
||||
if (_map) {
|
||||
_map.remove();
|
||||
_map = null;
|
||||
_clusterGroup = null;
|
||||
_markers = [];
|
||||
}
|
||||
mapEl.style.display = 'none';
|
||||
listEl.style.display = '';
|
||||
_renderList();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -473,6 +553,6 @@ window.Page_events = (() => {
|
|||
if (card) { _showDetail(parseInt(card.dataset.evId)); }
|
||||
}
|
||||
|
||||
return { init, refresh, openNew };
|
||||
return { init, refresh, openNew, _openDetail: _showDetail };
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -104,6 +104,9 @@ window.Page_friends = (() => {
|
|||
<!-- Freundesliste -->
|
||||
<div id="fr-list"></div>
|
||||
|
||||
<!-- Aktivitäten-Feed -->
|
||||
<div id="fr-activity"></div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
|
@ -165,6 +168,113 @@ window.Page_friends = (() => {
|
|||
_renderFriends(data.friends || []);
|
||||
_updateBadge((data.incoming || []).length);
|
||||
} catch { /* silent — 401 bei abgemeldeter Session */ }
|
||||
_loadActivity();
|
||||
}
|
||||
|
||||
async function _loadActivity() {
|
||||
if (!_appState.user) return;
|
||||
const el = _container.querySelector('#fr-activity');
|
||||
if (!el) return;
|
||||
|
||||
// Ladeindikator
|
||||
el.innerHTML = `
|
||||
<div style="margin-top:var(--space-6)">
|
||||
<div class="by-section-label">Aktivitäten</div>
|
||||
<div style="text-align:center;padding:var(--space-6) 0;color:var(--c-text-muted);
|
||||
font-size:var(--text-sm)">
|
||||
<svg class="ph-icon" style="width:20px;height:20px;animation:spin 1s linear infinite"
|
||||
aria-hidden="true"><use href="/icons/phosphor.svg#spinner"></use></svg>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
const items = await API.friends.activity();
|
||||
_renderActivity(items || []);
|
||||
} catch {
|
||||
el.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
function _renderActivity(items) {
|
||||
const el = _container.querySelector('#fr-activity');
|
||||
if (!el) return;
|
||||
|
||||
if (!items.length) {
|
||||
el.innerHTML = `
|
||||
<div style="margin-top:var(--space-6)">
|
||||
<div class="by-section-label">Aktivitäten</div>
|
||||
<div style="text-align:center;padding:var(--space-8) var(--space-4)">
|
||||
<svg class="ph-icon" style="width:40px;height:40px;color:var(--c-border);
|
||||
margin-bottom:var(--space-3)" aria-hidden="true">
|
||||
<use href="/icons/phosphor.svg#paw-print"></use>
|
||||
</svg>
|
||||
<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0">
|
||||
Noch keine Aktivitäten. Füge Freunde hinzu!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
el.innerHTML = `
|
||||
<div style="margin-top:var(--space-6)">
|
||||
<div class="by-section-label">Aktivitäten</div>
|
||||
<div class="fr-activity-timeline">
|
||||
${items.map(item => _activityItem(item)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function _activityItem(item) {
|
||||
const ago = _timeAgo(item.created_at);
|
||||
const text = item.text || '';
|
||||
const dogLabel = item.dog_name
|
||||
? `<span class="fr-activity-dog">${_esc(item.dog_name)}</span>`
|
||||
: '';
|
||||
|
||||
const avatar = item.dog_foto
|
||||
? `<img src="${_esc(item.dog_foto)}" alt="${_esc(item.dog_name || '')}"
|
||||
class="fr-activity-avatar">`
|
||||
: item.avatar_url
|
||||
? `<img src="${_esc(item.avatar_url)}" alt="${_esc(item.user_name)}"
|
||||
class="fr-activity-avatar">`
|
||||
: `<div class="fr-activity-avatar fr-activity-avatar--initial">
|
||||
${_esc((item.user_name || '?')[0].toUpperCase())}
|
||||
</div>`;
|
||||
|
||||
return `
|
||||
<div class="fr-activity-item">
|
||||
<div class="fr-activity-avatar-wrap">
|
||||
${avatar}
|
||||
<div class="fr-activity-icon-badge">
|
||||
<svg class="ph-icon" style="width:10px;height:10px" aria-hidden="true">
|
||||
<use href="/icons/phosphor.svg#${_esc(item.icon)}"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fr-activity-body">
|
||||
<div class="fr-activity-meta">
|
||||
<span class="fr-activity-user">${_esc(item.user_name)}</span>
|
||||
${dogLabel}
|
||||
</div>
|
||||
${text ? `<div class="fr-activity-text">${_esc(text)}</div>` : ''}
|
||||
<div class="fr-activity-time">${_esc(ago)}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function _timeAgo(iso) {
|
||||
if (!iso) return '';
|
||||
const diff = Math.floor((Date.now() - new Date(iso + (iso.endsWith('Z') ? '' : 'Z')).getTime()) / 1000);
|
||||
if (diff < 60) return 'Gerade eben';
|
||||
if (diff < 3600) return `vor ${Math.floor(diff / 60)} Min`;
|
||||
if (diff < 86400) return `vor ${Math.floor(diff / 3600)} Std`;
|
||||
if (diff < 86400 * 7) return `vor ${Math.floor(diff / 86400)} Tagen`;
|
||||
return new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
|
||||
}
|
||||
|
||||
function _updateBadge(count) {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Offline-Cache + Push Notifications + Tile-Cache
|
||||
============================================================ */
|
||||
|
||||
const CACHE_VERSION = 'by-v154';
|
||||
const CACHE_VERSION = 'by-v156';
|
||||
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
||||
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue