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

UX: Privater-Header mit Zwingername + Logo auf allen Züchter-Seiten (SW by-v910)

Browse source
This commit is contained in:
rene 2026-05-13 19:48:58 +02:00
parent a577e6d8d9
commit ccf5a8b7ba
8 changed files with 117 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/main.py
View file

@ -406,7 +406,7 @@ async def serve_media(path: str, request: _Request):
raise _HE(404, "Nicht gefunden.") raise _HE(404, "Nicht gefunden.")
return _media_response(filepath) return _media_response(filepath)
APP_VER = "909" # muss mit APP_VER in app.js übereinstimmen APP_VER = "910" # muss mit APP_VER in app.js übereinstimmen
@app.get("/.well-known/assetlinks.json") @app.get("/.well-known/assetlinks.json")
async def assetlinks(): async def assetlinks():

12
backend/routes/breeder.py
View file

@ -58,11 +58,21 @@ async def breeder_status(user=Depends(get_current_user)):
"FROM breeder_profiles WHERE user_id=?", "FROM breeder_profiles WHERE user_id=?",
(user["id"],) (user["id"],)
).fetchone() ).fetchone()
return { if profile:
logo = conn.execute(
"""SELECT file_path FROM breeder_photos
WHERE breeder_id=? AND entity_type='breeder'
ORDER BY is_primary DESC, id LIMIT 1""",
(profile["id"],)
).fetchone()
result = {
"rolle": row["rolle"], "rolle": row["rolle"],
"breeder_status": row["breeder_status"], "breeder_status": row["breeder_status"],
"profile": dict(profile) if profile else None, "profile": dict(profile) if profile else None,
} }
if profile:
result["profile"]["logo_url"] = f"/api/media/{logo['file_path']}" if logo else None
return result
# ------------------------------------------------------------------ # ------------------------------------------------------------------

8
backend/static/index.html
View file

@ -591,10 +591,10 @@
<div id="modal-container"></div> <div id="modal-container"></div>
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features --> <!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
<script src="/js/api.js?v=909"></script> <script src="/js/api.js?v=910"></script>
<script src="/js/ui.js?v=909"></script> <script src="/js/ui.js?v=910"></script>
<script src="/js/app.js?v=909"></script> <script src="/js/app.js?v=910"></script>
<script src="/js/worlds.js?v=909"></script> <script src="/js/worlds.js?v=910"></script>
<!-- Feature-Seiten werden lazy geladen --> <!-- Feature-Seiten werden lazy geladen -->

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '909'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '910'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app'; const IS_STAGING = location.hostname === 'staging.banyaro.app';
// Cache-Bust-Parameter nach Update-Reload sofort entfernen // Cache-Bust-Parameter nach Update-Reload sofort entfernen

46
backend/static/js/pages/laeufi.js
View file

@ -2,8 +2,9 @@
window.Page_laeufi = (() => { window.Page_laeufi = (() => {
let _container, _appState; let _container, _appState;
let _hunde = []; // alle weiblichen Zuchthunde let _hunde = [];
let _openHundId = null; let _openHundId = null;
let _breederInfo = null;
// ---------------------------------------------------------- // ----------------------------------------------------------
// Init / Refresh // Init / Refresh
@ -16,6 +17,11 @@ window.Page_laeufi = (() => {
<p style="color:var(--c-text-secondary)">Nur für verifizierte Züchter.</p></div>`; <p style="color:var(--c-text-secondary)">Nur für verifizierte Züchter.</p></div>`;
return; return;
} }
API.breeder.status().then(s => {
_breederInfo = s?.profile ? { zwingername: s.profile.zwingername, logo_url: s.profile.logo_url } : null;
const headerEl = _container.querySelector('#breeder-private-header');
if (headerEl) headerEl.outerHTML = _privateHeader();
}).catch(() => {});
_render(); _render();
await _loadHunde(); await _loadHunde();
} }
@ -27,23 +33,35 @@ window.Page_laeufi = (() => {
// Grundstruktur // Grundstruktur
// ---------------------------------------------------------- // ----------------------------------------------------------
function _privateHeader() { function _privateHeader() {
const zwinger = _breederInfo?.zwingername || '';
const logoUrl = _breederInfo?.logo_url || null;
const logoHtml = logoUrl
? `<img src="${UI.esc(logoUrl)}" alt="Logo"
style="width:40px;height:40px;border-radius:50%;object-fit:cover;
border:2px solid rgba(196,132,58,.5);flex-shrink:0"
onerror="this.style.display='none'">`
: `<div style="width:40px;height:40px;border-radius:50%;background:rgba(196,132,58,.15);
border:2px solid rgba(196,132,58,.3);display:flex;align-items:center;
justify-content:center;flex-shrink:0">
<svg style="width:20px;height:20px;color:var(--c-primary)" viewBox="0 0 256 256">
<use href="/icons/phosphor.svg#paw-print"></use>
</svg>
</div>`;
return ` return `
<div style="background:linear-gradient(135deg,#1a1208,#2d1f0e); <div id="breeder-private-header" style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
border-bottom:1px solid rgba(196,132,58,.25); border-bottom:1px solid rgba(196,132,58,.25);
padding:var(--space-3) var(--space-4); padding:var(--space-3) var(--space-4);
display:flex;align-items:center;gap:var(--space-3)"> display:flex;align-items:center;gap:var(--space-3)">
<div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.3); ${logoHtml}
border-radius:var(--radius-md);padding:var(--space-2) var(--space-3); <div style="flex:1;min-width:0">
display:flex;align-items:center;gap:var(--space-2);flex-shrink:0"> ${zwinger ? `<div style="font-size:var(--text-sm);font-weight:700;color:rgba(255,255,255,.9);
<svg style="width:14px;height:14px;color:var(--c-primary)" viewBox="0 0 256 256"> white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${UI.esc(zwinger)}</div>` : ''}
<use href="/icons/phosphor.svg#lock-key"></use> <div style="display:flex;align-items:center;gap:var(--space-2);margin-top:1px">
</svg> <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
<span style="font-size:var(--text-xs);font-weight:700;color:var(--c-primary);white-space:nowrap"> <use href="/icons/phosphor.svg#lock-key"></use>
Privater Bereich </svg>
</span> <span style="font-size:var(--text-xs);color:rgba(196,132,58,.7)">Privater Bereich · Nur du siehst das</span>
</div> </div>
<div style="font-size:var(--text-xs);color:rgba(196,132,58,.6)">
Nur du siehst das — nicht öffentlich
</div> </div>
</div>`; </div>`;
} }

58
backend/static/js/pages/litters.js
View file

@ -5,11 +5,12 @@
window.Page_litters = (() => { window.Page_litters = (() => {
let _container = null; let _container = null;
let _appState = null; let _appState = null;
let _litters = []; // geladene Würfe let _litters = [];
let _openId = null; // aufgeklappter Wurf let _openId = null;
let _filterStatus = null; // aktiver Status-Filter let _filterStatus = null;
let _breederInfo = null; // { zwingername, logo_url }
// ---------------------------------------------------------- // ----------------------------------------------------------
// Hilfsfunktionen // Hilfsfunktionen
@ -76,6 +77,12 @@ window.Page_litters = (() => {
} }
_render(); _render();
API.breeder.status().then(s => {
_breederInfo = s?.profile ? { zwingername: s.profile.zwingername, logo_url: s.profile.logo_url } : null;
// Header nach Laden der Info neu rendern
const headerEl = _container.querySelector('#breeder-private-header');
if (headerEl) headerEl.outerHTML = _privateHeader();
}).catch(() => {});
await _loadLitters(); await _loadLitters();
} }
@ -90,26 +97,35 @@ window.Page_litters = (() => {
// ---------------------------------------------------------- // ----------------------------------------------------------
// Grundstruktur rendern // Grundstruktur rendern
// ---------------------------------------------------------- // ----------------------------------------------------------
function _privateHeader(icon, title) { function _privateHeader() {
const zwinger = _appState?.user?.name || ''; const zwinger = _breederInfo?.zwingername || '';
const logoUrl = _breederInfo?.logo_url || null;
const logoHtml = logoUrl
? `<img src="${_esc(logoUrl)}" alt="Logo"
style="width:40px;height:40px;border-radius:50%;object-fit:cover;
border:2px solid rgba(196,132,58,.5);flex-shrink:0"
onerror="this.style.display='none'">`
: `<div style="width:40px;height:40px;border-radius:50%;background:rgba(196,132,58,.15);
border:2px solid rgba(196,132,58,.3);display:flex;align-items:center;
justify-content:center;flex-shrink:0">
<svg style="width:20px;height:20px;color:var(--c-primary)" viewBox="0 0 256 256">
<use href="/icons/phosphor.svg#paw-print"></use>
</svg>
</div>`;
return ` return `
<div style="background:linear-gradient(135deg,#1a1208,#2d1f0e); <div id="breeder-private-header" style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
border-bottom:1px solid rgba(196,132,58,.25); border-bottom:1px solid rgba(196,132,58,.25);
padding:var(--space-3) var(--space-4); padding:var(--space-3) var(--space-4);
display:flex;align-items:center;gap:var(--space-3)"> display:flex;align-items:center;gap:var(--space-3)">
<div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.3); ${logoHtml}
border-radius:var(--radius-md);padding:var(--space-2) var(--space-3); <div style="flex:1;min-width:0">
display:flex;align-items:center;gap:var(--space-2);flex-shrink:0"> ${zwinger ? `<div style="font-size:var(--text-sm);font-weight:700;color:rgba(255,255,255,.9);
<svg style="width:14px;height:14px;color:var(--c-primary)" viewBox="0 0 256 256"> white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${_esc(zwinger)}</div>` : ''}
<use href="/icons/phosphor.svg#lock-key"></use> <div style="display:flex;align-items:center;gap:var(--space-2);margin-top:1px">
</svg> <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
<span style="font-size:var(--text-xs);font-weight:700;color:var(--c-primary);white-space:nowrap"> <use href="/icons/phosphor.svg#lock-key"></use>
Privater Bereich </svg>
</span> <span style="font-size:var(--text-xs);color:rgba(196,132,58,.7)">Privater Bereich · Nur du siehst das</span>
</div>
<div style="min-width:0">
<div style="font-size:var(--text-xs);color:rgba(196,132,58,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
Nur du siehst das — nicht öffentlich
</div> </div>
</div> </div>
</div>`; </div>`;

44
backend/static/js/pages/zuchthunde.js
View file

@ -11,7 +11,8 @@ window.Page_zuchthunde = (() => {
let _hunde = []; // geladene Hunde let _hunde = []; // geladene Hunde
let _query = ''; // Suchtext let _query = ''; // Suchtext
let _openSections = {}; // { <hundId>: 'health'|'genetic'|'titles'|null } let _openSections = {}; // { <hundId>: 'health'|'genetic'|'titles'|null }
let _breederId = null; // ID des Züchter-Profils let _breederId = null; // ID des Züchter-Profils
let _breederInfo = null; // { zwingername, logo_url }
// ---------------------------------------------------------- // ----------------------------------------------------------
// Hilfsfunktionen // Hilfsfunktionen
@ -99,23 +100,35 @@ window.Page_zuchthunde = (() => {
// Grundstruktur // Grundstruktur
// ---------------------------------------------------------- // ----------------------------------------------------------
function _privateHeader() { function _privateHeader() {
const zwinger = _breederInfo?.zwingername || '';
const logoUrl = _breederInfo?.logo_url || null;
const logoHtml = logoUrl
? `<img src="${_esc(logoUrl)}" alt="Logo"
style="width:40px;height:40px;border-radius:50%;object-fit:cover;
border:2px solid rgba(196,132,58,.5);flex-shrink:0"
onerror="this.style.display='none'">`
: `<div style="width:40px;height:40px;border-radius:50%;background:rgba(196,132,58,.15);
border:2px solid rgba(196,132,58,.3);display:flex;align-items:center;
justify-content:center;flex-shrink:0">
<svg style="width:20px;height:20px;color:var(--c-primary)" viewBox="0 0 256 256">
<use href="/icons/phosphor.svg#paw-print"></use>
</svg>
</div>`;
return ` return `
<div style="background:linear-gradient(135deg,#1a1208,#2d1f0e); <div style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
border-bottom:1px solid rgba(196,132,58,.25); border-bottom:1px solid rgba(196,132,58,.25);
padding:var(--space-3) var(--space-4); padding:var(--space-3) var(--space-4);
display:flex;align-items:center;gap:var(--space-3)"> display:flex;align-items:center;gap:var(--space-3)">
<div style="background:rgba(196,132,58,.15);border:1px solid rgba(196,132,58,.3); ${logoHtml}
border-radius:var(--radius-md);padding:var(--space-2) var(--space-3); <div style="flex:1;min-width:0">
display:flex;align-items:center;gap:var(--space-2);flex-shrink:0"> ${zwinger ? `<div style="font-size:var(--text-sm);font-weight:700;color:rgba(255,255,255,.9);
<svg style="width:14px;height:14px;color:var(--c-primary)" viewBox="0 0 256 256"> white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${_esc(zwinger)}</div>` : ''}
<use href="/icons/phosphor.svg#lock-key"></use> <div style="display:flex;align-items:center;gap:var(--space-2);margin-top:1px">
</svg> <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
<span style="font-size:var(--text-xs);font-weight:700;color:var(--c-primary);white-space:nowrap"> <use href="/icons/phosphor.svg#lock-key"></use>
Privater Bereich </svg>
</span> <span style="font-size:var(--text-xs);color:rgba(196,132,58,.7)">Privater Bereich · Nur du siehst das</span>
</div> </div>
<div style="font-size:var(--text-xs);color:rgba(196,132,58,.6)">
Nur du siehst das — nicht öffentlich
</div> </div>
</div>`; </div>`;
} }
@ -182,7 +195,10 @@ window.Page_zuchthunde = (() => {
try { try {
[_hunde] = await Promise.all([ [_hunde] = await Promise.all([
API.zuchthunde.list(), API.zuchthunde.list(),
API.breeder.status().then(s => { _breederId = s?.profile?.id || null; }).catch(() => {}), API.breeder.status().then(s => {
_breederId = s?.profile?.id || null;
_breederInfo = s?.profile ? { zwingername: s.profile.zwingername, logo_url: s.profile.logo_url } : null;
}).catch(() => {}),
]); ]);
_renderList(); _renderList();
} catch (err) { } catch (err) {

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v909'; const CACHE_VERSION = 'by-v910';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache const CACHE_API = 'ban-yaro-api-v1'; // API-Response-Cache