rene
fa0fcbf8c9
- Migration: diary_media.is_cover (INTEGER DEFAULT 0)
- Upload: erstes Item eines Eintrags automatisch is_cover=1
- Neuer Endpoint: PATCH /diary/{id}/media/{mid}/cover
- GET-Endpoints geben is_cover + cover_url zurück
- Frontend: Stern-Button (⭐) in Gallery-Detail und Edit-Formular
- Timeline-Karte verwendet cover_url als Vorschaubild
- SW by-v212, APP_VER 186
1173 lines
50 KiB
JavaScript
1173 lines
50 KiB
JavaScript
/* ============================================================
|
|
BAN YARO — Tagebuch (Sprint 1)
|
|
Seiten-Modul: Timeline aller Einträge, Erstellen, Bearbeiten,
|
|
Löschen, Foto-Upload, Meilensteine.
|
|
============================================================ */
|
|
|
|
window.Page_diary = (() => {
|
|
|
|
// ----------------------------------------------------------
|
|
// MODUL-STATE
|
|
// ----------------------------------------------------------
|
|
let _container = null;
|
|
let _appState = null;
|
|
let _entries = [];
|
|
let _offset = 0;
|
|
let _searchQuery = '';
|
|
let _filterMilestone = false;
|
|
const LIMIT = 20;
|
|
|
|
function _sourceIcon(source) {
|
|
if (source === 'places') return 'star';
|
|
if (source === 'osm') return 'map-pin';
|
|
return 'map-trifold';
|
|
}
|
|
|
|
const _VIDEO_EXT = new Set(['.mp4','.mov','.webm','.m4v','.avi']);
|
|
function _isVideo(url) {
|
|
if (!url) return false;
|
|
return _VIDEO_EXT.has(url.slice(url.lastIndexOf('.')).toLowerCase());
|
|
}
|
|
function _mediaHtml(url, style = '') {
|
|
if (!url) return '';
|
|
return _isVideo(url)
|
|
? `<video src="${url}" controls playsinline style="width:100%;border-radius:var(--radius-md);${style}"></video>`
|
|
: `<img src="${url}" alt="Foto" style="width:100%;border-radius:var(--radius-md);${style}">`;
|
|
}
|
|
|
|
/** Alle Mediendateien eines Eintrags normalisiert als Array zurückgeben.
|
|
* Rückwärtskompatibel: wenn media_items leer, aber media_url gesetzt → altes Format. */
|
|
function _allMedia(entry) {
|
|
const items = entry.media_items || [];
|
|
if (items.length > 0) return items;
|
|
if (entry.media_url) {
|
|
return [{ id: null, url: entry.media_url,
|
|
media_type: _isVideo(entry.media_url) ? 'video' : 'image', sort_order: 0 }];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
const TYPEN = {
|
|
eintrag: { label: 'Eintrag', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#book-open"></use></svg>' },
|
|
foto: { label: 'Foto', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg>' },
|
|
meilenstein:{ label: 'Meilenstein',icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trophy"></use></svg>' },
|
|
training: { label: 'Training', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#target"></use></svg>' },
|
|
gesundheit: { label: 'Gesundheit', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#syringe"></use></svg>' },
|
|
ausflug: { label: 'Ausflug', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#car"></use></svg>' },
|
|
};
|
|
|
|
// ----------------------------------------------------------
|
|
// INIT — erster Aufruf, Container leer
|
|
// ----------------------------------------------------------
|
|
async function init(container, appState) {
|
|
_container = container;
|
|
_appState = appState;
|
|
UI.loadLeaflet(); // Leaflet im Hintergrund vorladen — kein await
|
|
await _render();
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// REFRESH — erneuter Navigations-Aufruf (Tap auf Tab)
|
|
// ----------------------------------------------------------
|
|
async function refresh() {
|
|
if (!_appState.activeDog) return;
|
|
// Mehrere Hunde → Picker zeigen (User kann Hund wählen)
|
|
if (_appState.dogs.length > 1) {
|
|
_renderDogPicker();
|
|
return;
|
|
}
|
|
// Einzelner Hund → Diary direkt neu laden
|
|
_offset = 0;
|
|
_entries = [];
|
|
await _renderDiary();
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// ON DOG CHANGE — vom Header-Switcher ausgelöst
|
|
// ----------------------------------------------------------
|
|
async function onDogChange(dog) {
|
|
_offset = 0;
|
|
_entries = [];
|
|
_searchQuery = '';
|
|
await _renderDiary();
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// OPEN NEW — vom + Button oder Quick-Add
|
|
// ----------------------------------------------------------
|
|
function openNew() {
|
|
_showForm(null);
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// RENDER — Einstieg: Picker bei mehreren Hunden, sonst direkt
|
|
// ----------------------------------------------------------
|
|
async function _render() {
|
|
if (!_appState.activeDog) {
|
|
_container.innerHTML = UI.emptyState({
|
|
icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>',
|
|
title: 'Noch kein Hund angelegt',
|
|
text: 'Erstelle zuerst ein Hundeprofil, um das Tagebuch zu nutzen.',
|
|
action: `<button class="btn btn-primary" id="diary-goto-profile">Profil erstellen</button>`,
|
|
});
|
|
_container.querySelector('#diary-goto-profile')
|
|
?.addEventListener('click', () => App.navigate('dog-profile'));
|
|
return;
|
|
}
|
|
|
|
if (_appState.dogs.length > 1) {
|
|
_renderDogPicker();
|
|
} else {
|
|
await _renderDiary();
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// HUNDE-PICKER — Einstiegsseite bei mehreren Hunden
|
|
// ----------------------------------------------------------
|
|
function _renderDogPicker() {
|
|
const activeDogId = _appState.activeDog?.id;
|
|
|
|
const cards = _appState.dogs.map(dog => {
|
|
const isActive = dog.id === activeDogId;
|
|
const av = dog.foto_url
|
|
? `<img src="${UI.escape(dog.foto_url)}" alt="${UI.escape(dog.name)}">`
|
|
: `<span>${UI.icon('dog')}</span>`;
|
|
return `
|
|
<div class="diary-picker-card${isActive ? ' diary-picker-card--active' : ''}"
|
|
data-dog-id="${dog.id}">
|
|
<div class="diary-picker-av">${av}</div>
|
|
<div class="diary-picker-name">${UI.escape(dog.name)}</div>
|
|
${dog.rasse ? `<div class="diary-picker-rasse">${UI.escape(dog.rasse)}</div>` : ''}
|
|
</div>`;
|
|
}).join('');
|
|
|
|
_container.innerHTML = `
|
|
<div class="diary-picker-wrap">
|
|
<p class="diary-picker-hint">Wessen Tagebuch?</p>
|
|
<div class="diary-picker-grid">${cards}</div>
|
|
</div>`;
|
|
|
|
_container.querySelectorAll('.diary-picker-card').forEach(el => {
|
|
el.addEventListener('click', async () => {
|
|
const id = parseInt(el.dataset.dogId);
|
|
if (id === _appState.activeDog?.id) {
|
|
// Bereits aktiver Hund → direkt Diary laden
|
|
_offset = 0; _entries = [];
|
|
await _renderDiary();
|
|
} else {
|
|
App.setActiveDog(id);
|
|
// onDogChange() → _renderDiary() via _notifyDogChange()
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// DIARY-ANSICHT — Timeline mit Einträgen
|
|
// ----------------------------------------------------------
|
|
async function _renderDiary() {
|
|
_container.innerHTML = `
|
|
<div class="by-toolbar diary-toolbar">
|
|
<div class="diary-search-wrap" id="diary-search-wrap">
|
|
<svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
|
|
<input type="search" class="diary-search-input" id="diary-search-input"
|
|
placeholder="Einträge durchsuchen…" autocomplete="off">
|
|
</div>
|
|
<button class="btn btn-secondary btn-sm${_filterMilestone ? ' btn-active' : ''}" id="diary-milestone-filter" title="Nur Meilensteine">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trophy"></use></svg>
|
|
</button>
|
|
<button class="btn btn-secondary btn-sm" id="diary-import-btn" title="Importieren">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#download-simple"></use></svg>
|
|
</button>
|
|
</div>
|
|
<div id="diary-list"></div>
|
|
<div id="diary-load-more" style="display:none; text-align:center; padding:var(--space-4)">
|
|
<button class="btn btn-secondary" id="diary-btn-more">Weitere laden</button>
|
|
</div>
|
|
`;
|
|
|
|
_container.querySelector('#diary-milestone-filter')
|
|
?.addEventListener('click', async () => {
|
|
_filterMilestone = !_filterMilestone;
|
|
_offset = 0; _entries = [];
|
|
const btn = _container.querySelector('#diary-milestone-filter');
|
|
btn?.classList.toggle('btn-active', _filterMilestone);
|
|
await _load();
|
|
_renderList();
|
|
});
|
|
|
|
_container.querySelector('#diary-import-btn')
|
|
?.addEventListener('click', _showImport);
|
|
_container.querySelector('#diary-btn-more')
|
|
?.addEventListener('click', () => _loadMore());
|
|
|
|
// Suche mit Debounce
|
|
let _searchTimer = null;
|
|
_container.querySelector('#diary-search-input')
|
|
?.addEventListener('input', e => {
|
|
clearTimeout(_searchTimer);
|
|
_searchTimer = setTimeout(async () => {
|
|
_offset = 0;
|
|
_entries = [];
|
|
_searchQuery = e.target.value.trim();
|
|
await _load();
|
|
_renderList();
|
|
}, 350);
|
|
});
|
|
|
|
await _load();
|
|
_renderList();
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// DATEN LADEN
|
|
// ----------------------------------------------------------
|
|
async function _load() {
|
|
const dog = _appState.activeDog;
|
|
if (!dog) return;
|
|
try {
|
|
const params = { limit: LIMIT, offset: _offset };
|
|
if (_searchQuery) params.q = _searchQuery;
|
|
if (_filterMilestone) params.milestone = 1;
|
|
const batch = await API.diary.list(dog.id, params);
|
|
_entries = _entries.concat(batch);
|
|
|
|
// "Mehr laden" anzeigen wenn volle Page geladen wurde
|
|
const loadMore = _container.querySelector('#diary-load-more');
|
|
if (loadMore) {
|
|
loadMore.style.display = batch.length === LIMIT ? 'block' : 'none';
|
|
}
|
|
} catch (err) {
|
|
UI.toast.error('Einträge konnten nicht geladen werden.');
|
|
}
|
|
}
|
|
|
|
async function _loadMore() {
|
|
_offset += LIMIT;
|
|
const btn = _container.querySelector('#diary-btn-more');
|
|
UI.setLoading(btn, true);
|
|
await _load();
|
|
_renderList();
|
|
UI.setLoading(btn, false);
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// LISTE RENDERN — Timeline gruppiert nach Monat
|
|
// ----------------------------------------------------------
|
|
function _renderList() {
|
|
const listEl = _container.querySelector('#diary-list');
|
|
if (!listEl) return;
|
|
|
|
if (_entries.length === 0) {
|
|
listEl.innerHTML = UI.emptyState({
|
|
icon: UI.icon('book-open'),
|
|
title: 'Noch keine Tagebucheinträge',
|
|
text: 'Halte besondere Momente mit deinem Hund fest — Spaziergänge, Erlebnisse, Erinnerungen.',
|
|
action: `<button class="btn btn-primary" id="diary-first-entry">Ersten Eintrag schreiben</button>`,
|
|
});
|
|
listEl.querySelector('#diary-first-entry')
|
|
?.addEventListener('click', () => _showForm(null));
|
|
return;
|
|
}
|
|
|
|
// Gruppieren nach Jahr-Monat (Anzeigereihenfolge: chronologisch absteigend)
|
|
const groups = new Map();
|
|
_entries.forEach(e => {
|
|
const key = e.datum ? e.datum.slice(0, 7) : 'unbekannt'; // "2025-04"
|
|
if (!groups.has(key)) groups.set(key, []);
|
|
groups.get(key).push(e);
|
|
});
|
|
|
|
let html = '';
|
|
groups.forEach((items, key) => {
|
|
const monthLabel = key === 'unbekannt' ? 'Datum unbekannt' : _formatMonth(key);
|
|
html += `<div class="diary-month-header">${monthLabel}</div>`;
|
|
html += items.map(e => _entryCard(e)).join('');
|
|
});
|
|
|
|
listEl.innerHTML = html;
|
|
|
|
// Events an Karten binden
|
|
listEl.querySelectorAll('[data-entry-id]').forEach(card => {
|
|
const id = parseInt(card.dataset.entryId);
|
|
card.addEventListener('click', () => _openDetail(id));
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// ENTRY CARD
|
|
// ----------------------------------------------------------
|
|
function _entryCard(e) {
|
|
const typ = TYPEN[e.typ] || TYPEN.eintrag;
|
|
const isMile = e.is_milestone || e.typ === 'meilenstein';
|
|
const dateStr = e.datum ? UI.time.format(e.datum + 'T00:00:00') : '';
|
|
const tags = (e.tags || []).slice(0, 4);
|
|
|
|
const allMedia = _allMedia(e);
|
|
const coverMedia = allMedia.find(m => m.is_cover) || allMedia[0] || null;
|
|
const mediaCount = allMedia.length;
|
|
const photo = coverMedia
|
|
? `<div class="diary-card-photo">
|
|
${coverMedia.media_type === 'video'
|
|
? `<div class="diary-card-video-thumb"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#play-circle"></use></svg></div>`
|
|
: `<img src="${e.cover_url || coverMedia.url}" alt="Foto" loading="lazy">`}
|
|
${mediaCount > 1 ? `<span class="diary-card-media-count">${mediaCount}</span>` : ''}
|
|
</div>`
|
|
: '';
|
|
|
|
const tagsHtml = tags.length
|
|
? `<div class="diary-card-tags">${tags.map(t => `<span class="badge">${t}</span>`).join('')}</div>`
|
|
: '';
|
|
|
|
const locationHtml = e.location_name
|
|
? `<p class="diary-card-location"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>${UI.escape(e.location_name)}</p>`
|
|
: '';
|
|
|
|
const textPreview = e.text
|
|
? `<p class="diary-card-text">${UI.escape(e.text.slice(0, 140))}${e.text.length > 140 ? '…' : ''}</p>`
|
|
: '';
|
|
|
|
// Meilenstein-Badge (nur bei is_milestone=1, nicht bei manuell gewähltem Typ 'meilenstein')
|
|
const milestoneBadge = e.is_milestone
|
|
? `<div class="diary-card-milestone-badge">${UI.icon('calendar-dots')} Meilenstein</div>`
|
|
: '';
|
|
|
|
// Mehrere Hunde: kleine Avatare in der Karte
|
|
const dogAvatars = _dogAvatarRow(e.dog_ids || []);
|
|
|
|
return `
|
|
<div class="diary-card${isMile ? ' diary-card--milestone' : ''}" data-entry-id="${e.id}">
|
|
${photo}
|
|
<div class="diary-card-body">
|
|
${milestoneBadge}
|
|
<div class="diary-card-meta">
|
|
<span class="diary-card-type">${typ.icon} ${typ.label}</span>
|
|
<span class="diary-card-date">${dateStr}</span>
|
|
</div>
|
|
${e.titel ? `<div class="diary-card-title">${UI.escape(e.titel)}</div>` : ''}
|
|
${locationHtml}
|
|
${textPreview}
|
|
${tagsHtml}
|
|
${dogAvatars}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function _dogAvatarRow(dogIds) {
|
|
if (!dogIds || dogIds.length <= 1) return '';
|
|
const avatars = dogIds.map(did => {
|
|
const dog = _appState.dogs.find(d => d.id === did);
|
|
if (!dog) return '';
|
|
return `<div class="diary-dog-av" title="${UI.escape(dog.name)}">
|
|
${dog.foto_url ? `<img src="${UI.escape(dog.foto_url)}" alt="">` : `<span>${UI.icon('dog')}</span>`}
|
|
</div>`;
|
|
}).join('');
|
|
return `<div class="diary-dog-row">${avatars}</div>`;
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// DETAIL-ANSICHT
|
|
// ----------------------------------------------------------
|
|
function _openDetail(entryId) {
|
|
const entry = _entries.find(e => e.id === entryId);
|
|
if (!entry) return;
|
|
|
|
const typ = TYPEN[entry.typ] || TYPEN.eintrag;
|
|
const isMile = entry.is_milestone || entry.typ === 'meilenstein';
|
|
const tags = (entry.tags || []);
|
|
|
|
const allMedia = _allMedia(entry);
|
|
const photo = allMedia.length > 0
|
|
? (allMedia.length === 1
|
|
? `<div style="position:relative;margin-bottom:var(--space-4)">
|
|
${_mediaHtml(allMedia[0].url)}
|
|
</div>`
|
|
: `<div class="diary-gallery" style="margin-bottom:var(--space-4)">
|
|
${allMedia.map(m => `
|
|
<div class="diary-gallery-wrap" style="position:relative">
|
|
${m.media_type === 'video'
|
|
? `<video src="${m.url}" controls playsinline class="diary-gallery-item"></video>`
|
|
: `<img src="${m.url}" alt="Foto" class="diary-gallery-item">`}
|
|
<button type="button"
|
|
class="diary-cover-btn${m.is_cover ? ' diary-cover-btn--active' : ''}"
|
|
data-media-id="${m.id}"
|
|
aria-label="${m.is_cover ? 'Cover-Bild' : 'Als Cover setzen'}"
|
|
title="${m.is_cover ? 'Cover-Bild' : 'Als Cover setzen'}">⭐</button>
|
|
</div>`).join('')}
|
|
</div>`)
|
|
: '';
|
|
|
|
// Hunde-Anzeige wenn mehrere beteiligt
|
|
const dogIds = entry.dog_ids || [entry.dog_id];
|
|
const dogsHtml = dogIds.length > 1
|
|
? `<div class="diary-detail-dogs">
|
|
${dogIds.map(did => {
|
|
const dog = _appState.dogs.find(d => d.id === did);
|
|
return dog ? `<div class="diary-dog-chip">
|
|
<div class="diary-dog-av">
|
|
${dog.foto_url ? `<img src="${UI.escape(dog.foto_url)}" alt="">` : `<span>${UI.icon('dog')}</span>`}
|
|
</div>
|
|
<span>${UI.escape(dog.name)}</span>
|
|
</div>` : '';
|
|
}).join('')}
|
|
</div>`
|
|
: '';
|
|
|
|
const body = `
|
|
${isMile ? `<div class="diary-detail-milestone-badge">${UI.icon('trophy')} Meilenstein</div>` : ''}
|
|
${photo}
|
|
<div style="display:flex;gap:var(--space-2);align-items:center;margin-bottom:var(--space-3)">
|
|
<span class="badge badge-primary">${typ.icon} ${typ.label}</span>
|
|
<span style="color:var(--c-text-secondary);font-size:var(--text-sm)">
|
|
${entry.datum ? UI.time.format(entry.datum + 'T00:00:00') : ''}
|
|
</span>
|
|
</div>
|
|
${entry.location_name ? `
|
|
<div class="diary-detail-location">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>
|
|
${entry.gps_lat ? `<a href="https://maps.apple.com/?q=${encodeURIComponent(entry.location_name)}&ll=${entry.gps_lat},${entry.gps_lon}" target="_blank" rel="noopener" style="color:inherit">${UI.escape(entry.location_name)}</a>` : UI.escape(entry.location_name)}
|
|
</div>` : ''}
|
|
${dogsHtml}
|
|
${entry.text
|
|
? `<p style="white-space:pre-wrap;line-height:1.6;color:var(--c-text)">${UI.escape(entry.text)}</p>`
|
|
: ''}
|
|
${tags.length
|
|
? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-3)">
|
|
${tags.map(t => `<span class="badge">${t}</span>`).join('')}
|
|
</div>`
|
|
: ''}
|
|
<button class="btn btn-secondary" style="width:100%;margin-top:var(--space-5)" id="detail-edit">Bearbeiten</button>
|
|
`;
|
|
|
|
UI.modal.open({ title: entry.titel || typ.label, body });
|
|
|
|
// Stern-Buttons: Cover-Bild setzen
|
|
document.querySelectorAll('.diary-cover-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (ev) => {
|
|
ev.stopPropagation();
|
|
const mediaId = parseInt(btn.dataset.mediaId);
|
|
try {
|
|
await API.diary.setCover(_appState.activeDog.id, entry.id, mediaId);
|
|
// Lokalen State aktualisieren
|
|
if (entry.media_items) {
|
|
entry.media_items.forEach(m => { m.is_cover = m.id === mediaId ? 1 : 0; });
|
|
}
|
|
entry.cover_url = (entry.media_items || []).find(m => m.id === mediaId)?.url || null;
|
|
_updateEntryInList(entry);
|
|
// Alle Sterne im Modal aktualisieren
|
|
document.querySelectorAll('.diary-cover-btn').forEach(b => {
|
|
const active = parseInt(b.dataset.mediaId) === mediaId;
|
|
b.classList.toggle('diary-cover-btn--active', active);
|
|
b.setAttribute('aria-label', active ? 'Cover-Bild' : 'Als Cover setzen');
|
|
b.setAttribute('title', active ? 'Cover-Bild' : 'Als Cover setzen');
|
|
});
|
|
UI.toast.success('Cover-Bild gesetzt.');
|
|
} catch {
|
|
UI.toast.error('Cover konnte nicht gesetzt werden.');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.getElementById('detail-edit')?.addEventListener('click', async () => {
|
|
UI.modal.close();
|
|
// Nur nachladen wenn location_name/gps_lat fehlen (älterer In-Memory-Eintrag)
|
|
if (entry.location_name !== undefined || entry.gps_lat !== undefined) {
|
|
_showForm(entry);
|
|
} else {
|
|
try {
|
|
const fresh = await API.diary.get(_appState.activeDog.id, entry.id);
|
|
const idx = _entries.findIndex(e => e.id === entry.id);
|
|
if (idx !== -1) _entries[idx] = fresh;
|
|
_showForm(fresh);
|
|
} catch {
|
|
_showForm(entry);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// FORMULAR — Neu erstellen / Bearbeiten
|
|
// ----------------------------------------------------------
|
|
function _showForm(entry) {
|
|
const isEdit = !!entry;
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const activeDog = _appState.activeDog;
|
|
const typOpts = Object.entries(TYPEN)
|
|
.map(([val, { icon, label }]) =>
|
|
`<option value="${val}" ${entry?.typ === val ? 'selected' : ''}>${icon} ${label}</option>`)
|
|
.join('');
|
|
|
|
// Weitere Hunde: alle außer dem aktiven
|
|
const otherDogs = _appState.dogs.filter(d => d.id !== activeDog?.id);
|
|
const entryDogIds = entry?.dog_ids || [activeDog?.id];
|
|
const dogPickerHtml = otherDogs.length > 0 ? `
|
|
<div class="form-group">
|
|
<label class="form-label">Betrifft auch</label>
|
|
<div class="diary-dog-picker">
|
|
${otherDogs.map(d => `
|
|
<label class="diary-dog-pick-item ${entryDogIds.includes(d.id) ? 'checked' : ''}">
|
|
<input type="checkbox" name="extra_dog" value="${d.id}"
|
|
${entryDogIds.includes(d.id) ? 'checked' : ''}>
|
|
<div class="diary-dog-av">
|
|
${d.foto_url ? `<img src="${UI.escape(d.foto_url)}" alt="">` : `<span>${UI.icon('dog')}</span>`}
|
|
</div>
|
|
<span>${UI.escape(d.name)}</span>
|
|
</label>`).join('')}
|
|
</div>
|
|
</div>` : '';
|
|
|
|
const body = `
|
|
<form id="diary-form" autocomplete="off">
|
|
<div class="form-group">
|
|
<label class="form-label">Typ</label>
|
|
<select class="form-control" name="typ">${typOpts}</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Datum</label>
|
|
<input class="form-control" type="date" name="datum"
|
|
value="${entry?.datum || today}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Titel <span style="color:var(--c-text-secondary)">(optional)</span></label>
|
|
<input class="form-control" type="text" name="titel"
|
|
value="${UI.escape(entry?.titel || '')}" placeholder="z.B. Erster Schultag">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Text</label>
|
|
<textarea class="form-control" name="text" rows="5"
|
|
placeholder="Was ist passiert? Besonderheiten, Gedanken…">${UI.escape(entry?.text || '')}</textarea>
|
|
</div>
|
|
<div class="form-group" id="diary-location-group">
|
|
<label class="form-label">Ort <span style="color:var(--c-text-secondary)">(optional)</span></label>
|
|
|
|
<!-- Karte (Lesemodus, Edit per Button aktivierbar) -->
|
|
<div style="position:relative">
|
|
<div id="diary-map-wrap" style="border-radius:var(--radius-md);overflow:hidden;height:220px;background:var(--c-surface-2)"></div>
|
|
<button type="button" id="diary-map-edit-btn" class="btn btn-secondary btn-sm"
|
|
style="position:absolute;bottom:var(--space-2);right:var(--space-2);z-index:500">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#pencil-simple"></use></svg>
|
|
<span id="diary-map-edit-label">Position ändern</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- POI-Name + Aktionen -->
|
|
<div style="margin-top:var(--space-2)">
|
|
<div id="diary-location-chip-wrap" style="${entry?.location_name ? '' : 'display:none'}">
|
|
<div class="diary-location-chip">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>
|
|
<span id="diary-location-label">${UI.escape(entry?.location_name || '')}</span>
|
|
<button type="button" id="diary-location-clear" aria-label="Name entfernen">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
|
|
<button type="button" class="btn btn-danger" id="diary-coords-clear">Ort entfernen</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" id="diary-location-btn">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>
|
|
<span id="diary-location-btn-label">POI suchen</span>
|
|
</button>
|
|
</div>
|
|
<div id="diary-location-suggestions" style="display:none;margin-top:var(--space-2)"></div>
|
|
</div>
|
|
</div>
|
|
${dogPickerHtml}
|
|
<div class="form-group" style="margin-top:var(--space-5)">
|
|
<input type="checkbox" name="is_milestone" id="diary-milestone-cb"
|
|
${entry?.is_milestone ? 'checked' : ''} style="display:none">
|
|
<button type="button" id="diary-milestone-btn"
|
|
class="diary-milestone-toggle${entry?.is_milestone ? ' diary-milestone-toggle--active' : ''}">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trophy"></use></svg>
|
|
<span>${entry?.is_milestone ? 'Meilenstein ✓' : 'Als Meilenstein markieren'}</span>
|
|
</button>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Fotos / Videos <span style="color:var(--c-text-secondary)">(optional)</span></label>
|
|
|
|
<!-- Bestehende Medien (Edit-Modus) -->
|
|
<div id="diary-existing-media"></div>
|
|
|
|
<!-- Neue Medien: Vorschau-Grid -->
|
|
<div id="diary-new-media-grid" class="diary-media-grid" style="display:none"></div>
|
|
|
|
<!-- versteckte Inputs -->
|
|
<input type="file" id="diary-media-input" accept="image/*,video/*" style="display:none">
|
|
<input type="file" id="diary-camera-input" accept="image/*,video/*" capture="environment" style="display:none">
|
|
|
|
<!-- Auswahlbuttons — immer sichtbar -->
|
|
<div class="diary-media-picker" style="margin-top:var(--space-2)">
|
|
<button type="button" class="diary-media-pick-btn" id="diary-btn-camera">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg>
|
|
Kamera
|
|
</button>
|
|
<button type="button" class="diary-media-pick-btn" id="diary-btn-library">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#images"></use></svg>
|
|
Mediathek
|
|
</button>
|
|
<button type="button" class="diary-media-pick-btn" id="diary-btn-file">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#folder-open"></use></svg>
|
|
Datei
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
`;
|
|
|
|
const footer = `
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
|
|
<button type="submit" form="diary-form" class="btn btn-primary" style="width:100%">
|
|
${isEdit ? 'Speichern' : 'Erstellen'}
|
|
</button>
|
|
<div style="display:flex;gap:var(--space-2)">
|
|
${isEdit ? `<button type="button" class="btn btn-danger" id="diary-form-delete">Löschen</button>` : ''}
|
|
<button type="button" class="btn btn-secondary flex-1" id="diary-form-cancel">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
UI.modal.open({ title: isEdit ? 'Eintrag bearbeiten' : 'Neuer Eintrag', body, footer });
|
|
|
|
const form = document.getElementById('diary-form');
|
|
|
|
// Fokus auf Titel-Feld → öffnet Keyboard auf Mobile, zeigt dem User was zu tun ist
|
|
setTimeout(() => form?.querySelector('[name="titel"]')?.focus(), 150);
|
|
|
|
// ---- Multi-Media-Verwaltung ----
|
|
const mediaInput = document.getElementById('diary-media-input');
|
|
const cameraInput = document.getElementById('diary-camera-input');
|
|
|
|
// Neue Dateien die noch nicht hochgeladen wurden
|
|
const _newFiles = [];
|
|
|
|
function _renderNewGrid() {
|
|
const grid = document.getElementById('diary-new-media-grid');
|
|
if (!grid) return;
|
|
if (_newFiles.length === 0) { grid.style.display = 'none'; grid.innerHTML = ''; return; }
|
|
grid.style.display = '';
|
|
grid.innerHTML = _newFiles.map((f, i) => {
|
|
const objUrl = URL.createObjectURL(f);
|
|
const thumb = f.type.startsWith('video/')
|
|
? `<video src="${objUrl}" class="diary-media-thumb" muted playsinline></video>`
|
|
: `<img src="${objUrl}" alt="" class="diary-media-thumb">`;
|
|
return `<div class="diary-media-thumb-wrap" data-new-idx="${i}">
|
|
${thumb}
|
|
<button type="button" class="diary-media-thumb-del" data-new-idx="${i}"
|
|
aria-label="Entfernen">${UI.icon('x')}</button>
|
|
</div>`;
|
|
}).join('');
|
|
grid.querySelectorAll('.diary-media-thumb-del').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const idx = parseInt(btn.dataset.newIdx);
|
|
_newFiles.splice(idx, 1);
|
|
_renderNewGrid();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Bestehende Medien im Edit-Modus rendern
|
|
function _renderExistingMedia() {
|
|
const wrap = document.getElementById('diary-existing-media');
|
|
if (!wrap) return;
|
|
const items = isEdit ? _allMedia(entry) : [];
|
|
if (items.length === 0) { wrap.innerHTML = ''; return; }
|
|
const grid = `<div class="diary-media-grid" style="margin-bottom:var(--space-2)">
|
|
${items.map(m => `
|
|
<div class="diary-media-thumb-wrap" data-media-id="${m.id || ''}">
|
|
${m.media_type === 'video'
|
|
? `<video src="${m.url}" class="diary-media-thumb" muted playsinline></video>`
|
|
: `<img src="${m.url}" alt="" class="diary-media-thumb">`}
|
|
${m.id != null
|
|
? `<button type="button" class="diary-media-thumb-del" data-media-id="${m.id}"
|
|
aria-label="Entfernen">${UI.icon('x')}</button>
|
|
<button type="button"
|
|
class="diary-cover-btn diary-cover-btn--form${m.is_cover ? ' diary-cover-btn--active' : ''}"
|
|
data-media-id="${m.id}"
|
|
aria-label="${m.is_cover ? 'Cover-Bild' : 'Als Cover setzen'}"
|
|
title="${m.is_cover ? 'Cover-Bild' : 'Als Cover setzen'}">⭐</button>`
|
|
: `<button type="button" class="diary-media-thumb-del" data-legacy="1"
|
|
aria-label="Entfernen">${UI.icon('x')}</button>`}
|
|
</div>`).join('')}
|
|
</div>`;
|
|
wrap.innerHTML = grid;
|
|
wrap.querySelectorAll('.diary-media-thumb-del').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const wrap2 = btn.closest('.diary-media-thumb-wrap');
|
|
const mediaId = btn.dataset.mediaId ? parseInt(btn.dataset.mediaId) : null;
|
|
const isLegacy = !!btn.dataset.legacy;
|
|
btn.disabled = true;
|
|
try {
|
|
if (mediaId != null) {
|
|
await API.diary.deleteMediaItem(_appState.activeDog.id, entry.id, mediaId);
|
|
// aus entry.media_items entfernen
|
|
if (entry.media_items) entry.media_items = entry.media_items.filter(m => m.id !== mediaId);
|
|
} else if (isLegacy) {
|
|
await API.diary.deleteMedia(_appState.activeDog.id, entry.id);
|
|
entry.media_url = null;
|
|
}
|
|
wrap2.remove();
|
|
UI.toast.success('Medium entfernt.');
|
|
} catch (e) {
|
|
btn.disabled = false;
|
|
UI.toast.error(e.message || 'Fehler beim Löschen.');
|
|
}
|
|
});
|
|
});
|
|
// Stern-Buttons im Edit-Formular
|
|
wrap.querySelectorAll('.diary-cover-btn--form').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const mediaId = parseInt(btn.dataset.mediaId);
|
|
try {
|
|
await API.diary.setCover(_appState.activeDog.id, entry.id, mediaId);
|
|
if (entry.media_items) {
|
|
entry.media_items.forEach(m => { m.is_cover = m.id === mediaId ? 1 : 0; });
|
|
}
|
|
entry.cover_url = (entry.media_items || []).find(m => m.id === mediaId)?.url || null;
|
|
_updateEntryInList(entry);
|
|
// Alle Sterne in diesem Formular aktualisieren
|
|
wrap.querySelectorAll('.diary-cover-btn--form').forEach(b => {
|
|
const active = parseInt(b.dataset.mediaId) === mediaId;
|
|
b.classList.toggle('diary-cover-btn--active', active);
|
|
b.setAttribute('aria-label', active ? 'Cover-Bild' : 'Als Cover setzen');
|
|
b.setAttribute('title', active ? 'Cover-Bild' : 'Als Cover setzen');
|
|
});
|
|
UI.toast.success('Cover-Bild gesetzt.');
|
|
} catch {
|
|
UI.toast.error('Cover konnte nicht gesetzt werden.');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
_renderExistingMedia();
|
|
|
|
function _addFiles(fileList) {
|
|
for (const f of fileList) _newFiles.push(f);
|
|
_renderNewGrid();
|
|
}
|
|
|
|
function _openPicker(opts = {}) {
|
|
const tmp = document.createElement('input');
|
|
tmp.type = 'file'; tmp.accept = 'image/*,video/*'; tmp.style.display = 'none';
|
|
if (opts.capture) tmp.setAttribute('capture', opts.capture);
|
|
if (opts.noAccept) tmp.removeAttribute('accept');
|
|
tmp.addEventListener('change', () => {
|
|
_addFiles(tmp.files);
|
|
tmp.remove();
|
|
});
|
|
document.body.appendChild(tmp);
|
|
tmp.click();
|
|
}
|
|
|
|
cameraInput?.addEventListener('change', () => {
|
|
if (cameraInput.files.length) {
|
|
_addFiles(cameraInput.files);
|
|
cameraInput.value = '';
|
|
}
|
|
});
|
|
mediaInput?.addEventListener('change', () => {
|
|
if (mediaInput.files.length) {
|
|
_addFiles(mediaInput.files);
|
|
mediaInput.value = '';
|
|
}
|
|
});
|
|
|
|
document.getElementById('diary-btn-camera') ?.addEventListener('click', () => cameraInput.click());
|
|
document.getElementById('diary-btn-library')?.addEventListener('click', () => _openPicker({}));
|
|
document.getElementById('diary-btn-file') ?.addEventListener('click', () => _openPicker({ noAccept: true }));
|
|
|
|
document.getElementById('diary-form-cancel')?.addEventListener('click', UI.modal.close);
|
|
|
|
// Milestone-Toggle
|
|
document.getElementById('diary-milestone-btn')?.addEventListener('click', () => {
|
|
const cb = document.getElementById('diary-milestone-cb');
|
|
const btn = document.getElementById('diary-milestone-btn');
|
|
cb.checked = !cb.checked;
|
|
btn.classList.toggle('diary-milestone-toggle--active', cb.checked);
|
|
btn.querySelector('span').textContent = cb.checked ? 'Meilenstein ✓' : 'Als Meilenstein markieren';
|
|
});
|
|
|
|
// --- Location Picker ---
|
|
let _locLat = (entry?.gps_lat != null) ? entry.gps_lat : null;
|
|
let _locLon = (entry?.gps_lon != null) ? entry.gps_lon : null;
|
|
let _locName = entry?.location_name || null;
|
|
let _miniMap = null, _miniMarker = null;
|
|
|
|
const _pinSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40"><path d="M16 0C7.163 0 0 7.163 0 16c0 10 16 24 16 24S32 26 32 16C32 7.163 24.837 0 16 0z" fill="#C4843A"/><circle cx="16" cy="16" r="7" fill="white"/></svg>';
|
|
const _mkIcon = () => L.divIcon({ html: _pinSvg, className: '', iconSize: [32,40], iconAnchor: [16,40] });
|
|
|
|
function _setName(name) {
|
|
_locName = name;
|
|
document.getElementById('diary-location-label').textContent = name;
|
|
document.getElementById('diary-location-chip-wrap').style.display = '';
|
|
document.getElementById('diary-location-suggestions').style.display = 'none';
|
|
}
|
|
|
|
function _placeMarker(lat, lon) {
|
|
if (_miniMarker) { _miniMarker.setLatLng([lat, lon]); return; }
|
|
_miniMarker = L.marker([lat, lon], { draggable: false, icon: _mkIcon() }).addTo(_miniMap);
|
|
_miniMarker.on('dragend', () => {
|
|
const p = _miniMarker.getLatLng(); _locLat = p.lat; _locLon = p.lng;
|
|
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
|
});
|
|
}
|
|
|
|
document.getElementById('diary-location-clear')?.addEventListener('click', () => {
|
|
_locName = null;
|
|
document.getElementById('diary-location-chip-wrap').style.display = 'none';
|
|
});
|
|
const _clearBtn = document.getElementById('diary-coords-clear');
|
|
let _clearPending = false;
|
|
_clearBtn?.addEventListener('click', () => {
|
|
if (!_clearPending) {
|
|
_clearPending = true;
|
|
_clearBtn.textContent = 'Wirklich entfernen?';
|
|
_clearBtn.style.color = 'var(--c-danger)';
|
|
setTimeout(() => {
|
|
if (_clearPending) {
|
|
_clearPending = false;
|
|
_clearBtn.textContent = 'Ort entfernen';
|
|
_clearBtn.style.color = 'var(--c-text-muted)';
|
|
}
|
|
}, 3000);
|
|
return;
|
|
}
|
|
_clearPending = false;
|
|
_clearBtn.textContent = 'Ort entfernen';
|
|
_clearBtn.style.color = 'var(--c-text-muted)';
|
|
_locLat = null; _locLon = null; _locName = null;
|
|
document.getElementById('diary-location-chip-wrap').style.display = 'none';
|
|
document.getElementById('diary-location-suggestions').style.display = 'none';
|
|
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
|
if (_miniMarker) { _miniMarker.remove(); _miniMarker = null; }
|
|
if (_miniMap) { _miniMap.setView([48.0, 11.9], 7); _setMapEditing(false); }
|
|
});
|
|
|
|
let _mapEditing = false;
|
|
|
|
function _setMapEditing(on) {
|
|
_mapEditing = on;
|
|
const lbl = document.getElementById('diary-map-edit-label');
|
|
if (lbl) lbl.textContent = on ? 'Fertig' : 'Position ändern';
|
|
if (!_miniMap) return;
|
|
if (on) {
|
|
if (_miniMarker) _miniMarker.dragging.enable();
|
|
} else {
|
|
if (_miniMarker) _miniMarker.dragging.disable();
|
|
}
|
|
}
|
|
|
|
document.getElementById('diary-map-edit-btn')?.addEventListener('click', () => {
|
|
_setMapEditing(!_mapEditing);
|
|
});
|
|
|
|
// Karte beim Formular-Open automatisch laden
|
|
UI.loadLeaflet().then(() => {
|
|
setTimeout(() => {
|
|
const lat = _locLat || 48.0, lon = _locLon || 11.9, zoom = _locLat ? 15 : 7;
|
|
_miniMap = L.map('diary-map-wrap', {
|
|
zoomControl: true, attributionControl: false,
|
|
dragging: true, scrollWheelZoom: false,
|
|
}).setView([lat, lon], zoom);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
|
|
.addTo(_miniMap);
|
|
_miniMap.invalidateSize();
|
|
if (_locLat) {
|
|
_placeMarker(lat, lon);
|
|
_miniMarker.dragging.disable(); // Lesemodus: kein Drag
|
|
}
|
|
// Klick nur im Edit-Modus
|
|
_miniMap.on('click', e => {
|
|
if (!_mapEditing) return;
|
|
_locLat = e.latlng.lat; _locLon = e.latlng.lng;
|
|
_placeMarker(_locLat, _locLon);
|
|
if (!_mapEditing) _miniMarker.dragging.disable();
|
|
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
|
});
|
|
}, 150);
|
|
});
|
|
|
|
async function _showSuggestions() {
|
|
const btn = document.getElementById('diary-location-btn');
|
|
UI.setLoading(btn, true);
|
|
try {
|
|
let lat = _locLat, lon = _locLon;
|
|
if (lat == null || lon == null) {
|
|
const pos = await API.getLocation();
|
|
lat = pos.lat; lon = pos.lon;
|
|
_locLat = lat; _locLon = lon;
|
|
if (_miniMap) { _miniMap.setView([lat, lon], 15); _placeMarker(lat, lon); }
|
|
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
|
}
|
|
const suggestions = await API.diary.nearby(_appState.activeDog.id, lat, lon);
|
|
const sugEl = document.getElementById('diary-location-suggestions');
|
|
if (suggestions.length === 0) {
|
|
sugEl.innerHTML = '<p style="font-size:var(--text-sm);color:var(--c-text-secondary);padding:var(--space-2) 0">Keine Orte in der Nähe gefunden.</p>';
|
|
} else {
|
|
sugEl.innerHTML = suggestions.map(s => `
|
|
<button type="button" class="diary-location-suggestion"
|
|
data-name="${UI.escape(s.name)}" data-lat="${s.lat}" data-lon="${s.lon}">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${_sourceIcon(s.source)}"></use></svg>
|
|
<span>${UI.escape(s.name)}</span>
|
|
<small>${s.distance_m < 1000 ? s.distance_m + ' m' : (s.distance_m / 1000).toFixed(1) + ' km'}</small>
|
|
</button>`).join('');
|
|
sugEl.querySelectorAll('.diary-location-suggestion').forEach(el => {
|
|
el.addEventListener('click', () => _setName(el.dataset.name));
|
|
});
|
|
}
|
|
sugEl.style.display = '';
|
|
} catch (err) {
|
|
UI.toast.error(err?.message?.includes('GPS') || lat == null
|
|
? 'GPS nicht verfügbar.' : 'Ortssuche fehlgeschlagen.');
|
|
} finally {
|
|
UI.setLoading(btn, false);
|
|
}
|
|
}
|
|
|
|
document.getElementById('diary-location-btn')?.addEventListener('click', _showSuggestions);
|
|
|
|
document.getElementById('diary-form-delete')?.addEventListener('click', async () => {
|
|
const ok = await UI.modal.confirm({
|
|
title: 'Eintrag löschen?',
|
|
message: 'Dieser Vorgang kann nicht rückgängig gemacht werden.',
|
|
confirmText: 'Löschen',
|
|
danger: true,
|
|
});
|
|
if (ok) await _deleteEntry(entry.id);
|
|
});
|
|
|
|
// Checked-Klasse auf Dog-Picker-Items toggeln
|
|
form.querySelectorAll('.diary-dog-pick-item input').forEach(cb => {
|
|
cb.addEventListener('change', () => {
|
|
cb.closest('.diary-dog-pick-item').classList.toggle('checked', cb.checked);
|
|
});
|
|
});
|
|
|
|
form.addEventListener('submit', async e => {
|
|
e.preventDefault();
|
|
const submitBtn = document.querySelector('[form="diary-form"][type="submit"]') || form.querySelector('[type="submit"]');
|
|
const fd = UI.formData(form);
|
|
|
|
// dog_ids zusammenbauen: aktiver Hund + gewählte weitere
|
|
const dogIds = [_appState.activeDog.id];
|
|
form.querySelectorAll('.diary-dog-pick-item input:checked').forEach(cb => {
|
|
const id = parseInt(cb.value);
|
|
if (!dogIds.includes(id)) dogIds.push(id);
|
|
});
|
|
|
|
await UI.asyncButton(submitBtn, async () => {
|
|
const payload = {
|
|
datum: fd.datum || null,
|
|
typ: fd.typ,
|
|
titel: fd.titel || null,
|
|
text: fd.text || null,
|
|
is_milestone: 'is_milestone' in fd,
|
|
dog_ids: dogIds,
|
|
gps_lat: _locLat,
|
|
gps_lon: _locLon,
|
|
location_name: _locName,
|
|
};
|
|
|
|
async function _uploadNewFiles(entryId) {
|
|
let failCount = 0;
|
|
const uploaded = [];
|
|
for (const file of _newFiles) {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
const m = await API.diary.uploadMedia(_appState.activeDog.id, entryId, formData);
|
|
uploaded.push(m);
|
|
} catch {
|
|
failCount++;
|
|
}
|
|
}
|
|
if (failCount > 0) {
|
|
UI.toast.warning(`${failCount} Medium${failCount > 1 ? 'en' : ''} konnte${failCount > 1 ? 'n' : ''} nicht hochgeladen werden.`);
|
|
}
|
|
return uploaded;
|
|
}
|
|
|
|
if (isEdit) {
|
|
const updated = await API.diary.update(_appState.activeDog.id, entry.id, payload);
|
|
if (_newFiles.length > 0) {
|
|
const uploaded = await _uploadNewFiles(entry.id);
|
|
if (!updated.media_items) updated.media_items = [];
|
|
updated.media_items.push(...uploaded);
|
|
} else {
|
|
// media_items aus dem aktuellen entry-State übernehmen (evtl. gelöscht via X-Button)
|
|
updated.media_items = entry.media_items || updated.media_items || [];
|
|
updated.media_url = entry.media_url ?? updated.media_url;
|
|
}
|
|
_updateEntryInList(updated);
|
|
UI.toast.success('Eintrag gespeichert.');
|
|
} else {
|
|
const created = await API.diary.create(_appState.activeDog.id, payload);
|
|
if (_newFiles.length > 0) {
|
|
const uploaded = await _uploadNewFiles(created.id);
|
|
created.media_items = uploaded;
|
|
}
|
|
_entries.unshift(created);
|
|
UI.toast.success('Eintrag erstellt.');
|
|
}
|
|
|
|
UI.modal.close();
|
|
_renderList();
|
|
});
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// EINTRAG LÖSCHEN
|
|
// ----------------------------------------------------------
|
|
async function _deleteEntry(entryId) {
|
|
try {
|
|
await API.diary.delete(_appState.activeDog.id, entryId);
|
|
_entries = _entries.filter(e => e.id !== entryId);
|
|
UI.modal.close();
|
|
_renderList();
|
|
UI.toast.success('Eintrag gelöscht.');
|
|
} catch (err) {
|
|
UI.toast.error(err.message || 'Fehler beim Löschen.');
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// HELPER
|
|
// ----------------------------------------------------------
|
|
function _updateEntryInList(updated) {
|
|
const i = _entries.findIndex(e => e.id === updated.id);
|
|
if (i !== -1) _entries[i] = updated;
|
|
}
|
|
|
|
function _formatMonth(yearMonth) {
|
|
const [y, m] = yearMonth.split('-');
|
|
return new Intl.DateTimeFormat('de-DE', { month: 'long', year: 'numeric' })
|
|
.format(new Date(+y, +m - 1, 1));
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// IMPORT
|
|
// ----------------------------------------------------------
|
|
function _showImport() {
|
|
UI.modal.open({
|
|
title: 'Tagebuch importieren',
|
|
body: `
|
|
<p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)">
|
|
Importiere Einträge aus einer anderen App in das Tagebuch von
|
|
<strong>${UI.escape(_appState.activeDog?.name || 'deinem Hund')}</strong>.
|
|
</p>
|
|
|
|
<div style="display:flex;flex-direction:column;gap:var(--space-3)">
|
|
|
|
<label class="import-format-card" id="fmt-nsx">
|
|
<input type="radio" name="import-fmt" value="nsx" checked style="display:none">
|
|
<div class="import-format-icon">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#note"></use></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight:var(--weight-semibold)">Synology NoteStation</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">.nsx-Datei aus dem NoteStation-Export</div>
|
|
</div>
|
|
</label>
|
|
|
|
<label class="import-format-card" id="fmt-csv">
|
|
<input type="radio" name="import-fmt" value="csv" style="display:none">
|
|
<div class="import-format-icon">
|
|
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#file-csv"></use></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-weight:var(--weight-semibold)">CSV / Excel</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-muted)">Spalten: datum, titel, text, tags, gps_lat, gps_lon, is_milestone</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div style="margin-top:var(--space-4)">
|
|
<label class="form-label">Datei auswählen</label>
|
|
<input type="file" class="form-control" id="import-file-input"
|
|
accept=".nsx,.csv" style="cursor:pointer">
|
|
</div>
|
|
|
|
<div id="import-result" style="display:none;margin-top:var(--space-4)"></div>`,
|
|
|
|
footer: `
|
|
<button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>
|
|
<button class="btn btn-primary" id="import-start-btn">Importieren</button>`,
|
|
});
|
|
|
|
// Format-Karten klickbar machen
|
|
document.querySelectorAll('.import-format-card').forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
document.querySelectorAll('.import-format-card').forEach(c => c.classList.remove('import-format-card--active'));
|
|
card.classList.add('import-format-card--active');
|
|
card.querySelector('input[type=radio]').checked = true;
|
|
// Accept-Attribut anpassen
|
|
const fmt = card.querySelector('input').value;
|
|
document.getElementById('import-file-input').accept = fmt === 'nsx' ? '.nsx' : '.csv';
|
|
});
|
|
});
|
|
// Erste Karte direkt aktiv setzen
|
|
document.getElementById('fmt-nsx')?.classList.add('import-format-card--active');
|
|
|
|
document.getElementById('import-start-btn').addEventListener('click', async () => {
|
|
const fileInput = document.getElementById('import-file-input');
|
|
const fmt = document.querySelector('input[name="import-fmt"]:checked')?.value;
|
|
const btn = document.getElementById('import-start-btn');
|
|
const resultEl = document.getElementById('import-result');
|
|
|
|
if (!fileInput.files.length) {
|
|
UI.toast('Bitte zuerst eine Datei auswählen.', 'warning');
|
|
return;
|
|
}
|
|
const file = fileInput.files[0];
|
|
const dogId = _appState.activeDog?.id;
|
|
|
|
UI.setLoading(btn, true);
|
|
resultEl.style.display = 'none';
|
|
|
|
try {
|
|
const res = fmt === 'nsx'
|
|
? await API.importData.notestation(dogId, file)
|
|
: await API.importData.csv(dogId, file);
|
|
|
|
const errHtml = res.errors?.length
|
|
? `<details style="margin-top:var(--space-2)"><summary style="font-size:var(--text-xs);cursor:pointer">${res.errors.length} Fehler anzeigen</summary>
|
|
<pre style="font-size:var(--text-xs);white-space:pre-wrap;margin-top:var(--space-1)">${UI.escape(res.errors.join('\n'))}</pre></details>`
|
|
: '';
|
|
|
|
resultEl.innerHTML = `
|
|
<div style="background:var(--c-success-subtle);border-radius:var(--radius-md);
|
|
padding:var(--space-3) var(--space-4);color:var(--c-success)">
|
|
<strong>${res.imported} Einträge importiert</strong>
|
|
${res.skipped ? `<span style="color:var(--c-text-muted);font-size:var(--text-sm)"> · ${res.skipped} übersprungen</span>` : ''}
|
|
${errHtml}
|
|
</div>`;
|
|
resultEl.style.display = 'block';
|
|
UI.setLoading(btn, false);
|
|
|
|
// Diary neu laden falls etwas importiert wurde
|
|
if (res.imported > 0) {
|
|
_offset = 0;
|
|
_entries = [];
|
|
await _load();
|
|
_renderList();
|
|
}
|
|
} catch (e) {
|
|
resultEl.innerHTML = `
|
|
<div style="background:var(--c-danger-subtle);border-radius:var(--radius-md);
|
|
padding:var(--space-3) var(--space-4);color:var(--c-danger)">
|
|
Fehler: ${UI.escape(e.message || String(e))}
|
|
</div>`;
|
|
resultEl.style.display = 'block';
|
|
UI.setLoading(btn, false);
|
|
}
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// PUBLIC
|
|
// ----------------------------------------------------------
|
|
return { init, refresh, openNew, onDogChange };
|
|
|
|
})();
|