Feature: Gassi-Hundefotos bei Teilnehmern + Fotos nach dem Treffen (SW by-v878)
This commit is contained in:
parent
b6a644ac3a
commit
44ba51cd38
8 changed files with 230 additions and 20 deletions
|
|
@ -346,6 +346,9 @@ const API = (() => {
|
|||
invite(id, friendId) { return post(`/walks/${id}/invite`, { friend_id: friendId }); },
|
||||
rsvp(id, status) { return post(`/walks/${id}/rsvp`, { status }); },
|
||||
participants(id) { return get(`/walks/${id}/participants`); },
|
||||
photos(id) { return get(`/walks/${id}/photos`); },
|
||||
uploadPhoto(id, formData) { return upload(`/walks/${id}/photos`, formData); },
|
||||
deletePhoto(id, photoId) { return del(`/walks/${id}/photos/${photoId}`); },
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Router, State-Management, Navigation, Initialisierung.
|
||||
============================================================ */
|
||||
|
||||
const APP_VER = '877'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VER = '878'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||
const APP_VERSION = '1.5.1'; // ← semantische Version, wird bei make release gesetzt
|
||||
const IS_STAGING = location.hostname === 'staging.banyaro.app';
|
||||
// Cache-Bust-Parameter nach Update-Reload sofort entfernen
|
||||
|
|
|
|||
|
|
@ -393,14 +393,31 @@ window.Page_walks = (() => {
|
|||
const isInvited = !!myRsvp;
|
||||
const invitations = participantData?.invitations ?? [];
|
||||
|
||||
// Teilnehmerliste (join-Teilnehmer, klassisch)
|
||||
// Teilnehmerliste mit Hundefotos
|
||||
const teilnehmerHTML = walk.teilnehmer?.length
|
||||
? walk.teilnehmer.map(t => `
|
||||
<div class="walks-participant">
|
||||
<div class="walks-inv-avatar walks-inv-avatar--sm">${_avatarInitials(t.user_name)}</div>
|
||||
<span class="walks-participant-name">${UI.escape(t.user_name)}</span>
|
||||
${t.hunde ? `<span class="walks-participant-hunde">${UI.icon('dog')} ${UI.escape(t.hunde)}</span>` : ''}
|
||||
</div>`).join('')
|
||||
? walk.teilnehmer.map(t => {
|
||||
const dogsHTML = (t.hunde_liste || []).map(d => {
|
||||
const av = d.foto_url
|
||||
? `<img src="${UI.escape(d.foto_url)}" alt="${UI.escape(d.name)}"
|
||||
style="width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid var(--c-border)">`
|
||||
: `<div style="width:28px;height:28px;border-radius:50%;background:var(--c-surface-2);
|
||||
display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid var(--c-border)">
|
||||
<svg class="ph-icon" style="width:14px;height:14px;color:var(--c-text-muted)" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>
|
||||
</div>`;
|
||||
return `<div style="display:flex;align-items:center;gap:4px">
|
||||
${av}
|
||||
<span style="font-size:var(--text-xs);color:var(--c-text-secondary)">${UI.escape(d.name)}${d.rasse ? ` · ${UI.escape(d.rasse)}` : ''}</span>
|
||||
</div>`;
|
||||
}).join('');
|
||||
return `
|
||||
<div class="walks-participant">
|
||||
<div class="walks-inv-avatar walks-inv-avatar--sm">${_avatarInitials(t.user_name)}</div>
|
||||
<div style="flex:1;min-width:0">
|
||||
<div class="walks-participant-name">${UI.escape(t.user_name)}</div>
|
||||
${dogsHTML ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:4px">${dogsHTML}</div>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('')
|
||||
: '';
|
||||
|
||||
// Einladungsliste
|
||||
|
|
@ -468,6 +485,31 @@ window.Page_walks = (() => {
|
|||
<div id="wd-rating-${walk.id}"></div>
|
||||
</div>
|
||||
|
||||
<!-- Fotos nach dem Treffen -->
|
||||
<div class="walks-detail-section" id="wd-photos-section">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)">
|
||||
<div class="walks-detail-section-label" style="margin-bottom:0">${UI.icon('images')} Fotos</div>
|
||||
${(isPast || _isToday(walk.datum)) && (isJoined || isOwn) ? `
|
||||
<label style="cursor:pointer">
|
||||
<input type="file" id="wd-photo-input" accept="image/*" style="display:none">
|
||||
<span class="btn btn-secondary btn-sm">${UI.icon('camera')} Foto hinzufügen</span>
|
||||
</label>` : ''}
|
||||
</div>
|
||||
<div id="wd-photos-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:var(--space-2)">
|
||||
${(walk.photos || []).length === 0
|
||||
? `<p style="grid-column:1/-1;color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos.</p>`
|
||||
: (walk.photos || []).map(p => `
|
||||
<div style="position:relative;aspect-ratio:1">
|
||||
<img src="${UI.escape(p.url)}" style="width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer"
|
||||
onclick="UI.lightbox?.show?.([{ url:'${UI.escape(p.url)}' }], 0)">
|
||||
${p.user_id === _appState.user?.id || isOwn ? `
|
||||
<button type="button" class="wd-photo-del" data-photo-id="${p.id}"
|
||||
style="position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0">✕</button>
|
||||
` : ''}
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="color:var(--c-text-muted);font-size:0.8rem;margin-top:var(--space-4)">
|
||||
Veranstaltet von ${UI.escape(walk.veranstalter_name || 'Unbekannt')}
|
||||
</p>
|
||||
|
|
@ -525,6 +567,49 @@ window.Page_walks = (() => {
|
|||
|
||||
document.getElementById('wd-close')?.addEventListener('click', UI.modal.close);
|
||||
|
||||
// Foto-Upload
|
||||
document.getElementById('wd-photo-input')?.addEventListener('change', async function() {
|
||||
if (!this.files.length) return;
|
||||
const file = this.files[0];
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
try {
|
||||
const photo = await API.walks.uploadPhoto(walk.id, formData);
|
||||
const grid = document.getElementById('wd-photos-grid');
|
||||
if (grid) {
|
||||
grid.querySelector('p')?.remove();
|
||||
const div = document.createElement('div');
|
||||
div.style.cssText = 'position:relative;aspect-ratio:1';
|
||||
div.innerHTML = `
|
||||
<img src="${UI.escape(photo.url)}" style="width:100%;height:100%;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer"
|
||||
onclick="UI.lightbox?.show?.([{ url:'${UI.escape(photo.url)}' }], 0)">
|
||||
<button type="button" class="wd-photo-del" data-photo-id="${photo.id}"
|
||||
style="position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0">✕</button>`;
|
||||
grid.appendChild(div);
|
||||
_bindPhotoDel(walk.id, div);
|
||||
UI.toast.success('Foto hochgeladen.');
|
||||
}
|
||||
} catch (err) {
|
||||
UI.toast.error(err.message || 'Fehler beim Hochladen.');
|
||||
}
|
||||
this.value = '';
|
||||
});
|
||||
|
||||
// Foto löschen — alle bestehenden Buttons
|
||||
function _bindPhotoDel(walkId, container) {
|
||||
container.querySelectorAll('.wd-photo-del').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
if (!window.confirm('Foto löschen?')) return;
|
||||
try {
|
||||
await API.walks.deletePhoto(walkId, parseInt(btn.dataset.photoId));
|
||||
btn.closest('[style*="aspect-ratio"]')?.remove();
|
||||
UI.toast.success('Foto gelöscht.');
|
||||
} catch (err) { UI.toast.error(err.message || 'Fehler.'); }
|
||||
});
|
||||
});
|
||||
}
|
||||
_bindPhotoDel(walk.id, document);
|
||||
|
||||
document.getElementById('wd-login')?.addEventListener('click', () => {
|
||||
UI.modal.close();
|
||||
App.navigate('settings');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue