- {photos.map(p=>(
-
-
})
setBig(p.id)} alt=""/>
-
- {p.date?.slice(0,10)||p.created?.slice(0,10)}
-
+ {big && (
+
setBig(null)}
+ role="presentation"
+ >
+
})
+
+ )}
+ {monthKeys.map((mk) => (
+
+
+ {dayjs(`${mk}-01`).format('MMMM YYYY')}
- ))}
-
+
+ {byMonth.get(mk).map((p) => (
+
+
setBig(p.id)}
+ alt=""
+ />
+
+ {p.date?.slice(0, 10) || p.created?.slice(0, 10)}
+
+
+
+ ))}
+
+
+ ))}
)
}
diff --git a/frontend/src/pages/NewMeasurement.jsx b/frontend/src/pages/NewMeasurement.jsx
index 2e68984..9b4febf 100644
--- a/frontend/src/pages/NewMeasurement.jsx
+++ b/frontend/src/pages/NewMeasurement.jsx
@@ -102,7 +102,7 @@ export default function NewMeasurement() {
if (id) { await api.updateMeasurement(id, payload) }
else { const r = await api.createMeasurement(payload); mid = r.id }
if (photoFile && mid) {
- const pr = await api.uploadPhoto(photoFile, mid)
+ const pr = await api.uploadPhoto(photoFile, form.date)
await api.updateMeasurement(mid, {photo_id: pr.id})
}
setSaved(true); setTimeout(()=>nav('/'), 1200)
diff --git a/frontend/src/pages/PhotosCapturePage.jsx b/frontend/src/pages/PhotosCapturePage.jsx
new file mode 100644
index 0000000..fd77b93
--- /dev/null
+++ b/frontend/src/pages/PhotosCapturePage.jsx
@@ -0,0 +1,203 @@
+import { useState, useEffect, useRef } from 'react'
+import { Camera, Trash2 } from 'lucide-react'
+import dayjs from 'dayjs'
+import { api } from '../utils/api'
+import UsageBadge from '../components/UsageBadge'
+
+export default function PhotosCapturePage() {
+ const [date, setDate] = useState(() => dayjs().format('YYYY-MM-DD'))
+ const [photos, setPhotos] = useState([])
+ const [photoUsage, setPhotoUsage] = useState(null)
+ const [uploading, setUploading] = useState(false)
+ const [error, setError] = useState(null)
+ const [big, setBig] = useState(null)
+ const fileRef = useRef(null)
+
+ const load = () => api.listPhotos().then(setPhotos).catch(() => setPhotos([]))
+
+ const loadUsage = () => {
+ api
+ .getFeatureUsage()
+ .then((features) => {
+ const f = features.find((x) => x.feature_id === 'photos')
+ setPhotoUsage(f)
+ })
+ .catch(() => setPhotoUsage(null))
+ }
+
+ useEffect(() => {
+ load()
+ loadUsage()
+ }, [])
+
+ const onPickFiles = async (e) => {
+ const files = Array.from(e.target.files || [])
+ e.target.value = ''
+ if (!files.length) return
+ setError(null)
+ setUploading(true)
+ try {
+ for (const file of files) {
+ await api.uploadPhoto(file, date)
+ }
+ await load()
+ await loadUsage()
+ } catch (err) {
+ setError(err.message || 'Upload fehlgeschlagen')
+ } finally {
+ setUploading(false)
+ }
+ }
+
+ const handleDelete = async (id) => {
+ if (!confirm('Dieses Foto löschen?')) return
+ try {
+ await api.deletePhoto(id)
+ if (big === id) setBig(null)
+ await load()
+ } catch (err) {
+ alert(err.message || 'Löschen fehlgeschlagen')
+ }
+ }
+
+ const blocked = photoUsage && !photoUsage.allowed
+
+ return (
+
+
+ Fotos
+
+
+
+
+ Neues Foto
+ {photoUsage && }
+
+
+ Fortschrittsfotos unabhängig von Umfängen. Pro Tag beliebig viele Aufnahmen möglich — Datum ist das
+ Zuordnungsdatum (z. B. Aufnahmezeitpunkt).
+
+
+
+ setDate(e.target.value)}
+ />
+
+
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
Meine Fotos ({photos.length})
+ {!photos.length ? (
+
Noch keine Fotos.
+ ) : (
+ <>
+ {big && (
+
setBig(null)}
+ role="presentation"
+ >
+
+
+ )}
+
+ {photos.map((p) => (
+
+
setBig(p.id)}
+ />
+
+ {p.date?.slice(0, 10) || p.created?.slice(0, 10)}
+
+
+
+ ))}
+
+
+ )}
+
+
+ )
+}
diff --git a/frontend/src/utils/api.js b/frontend/src/utils/api.js
index d716e9a..a96875d 100644
--- a/frontend/src/utils/api.js
+++ b/frontend/src/utils/api.js
@@ -171,14 +171,21 @@ export const api = {
},
// Photos
- uploadPhoto: (file,date='')=>{
- const fd=new FormData();fd.append('file',file);fd.append('date',date)
- return fetch(`${BASE}/photos`,{method:'POST',body:fd,headers:hdrs()}).then(r=>r.json())
+ uploadPhoto: async (file, date = '') => {
+ const fd = new FormData()
+ fd.append('file', file)
+ fd.append('date', date)
+ const r = await fetch(`${BASE}/photos`, { method: 'POST', body: fd, headers: hdrs() })
+ const d = await r.json().catch(() => ({}))
+ if (!r.ok) throw new Error(formatFastApiDetail(d.detail, JSON.stringify(d)))
+ return d
},
- listPhotos: () => req('/photos'),
- photoUrl: (pid) => {
+ listPhotos: () => req('/photos'),
+ deletePhoto: (id) => req(`/photos/${id}`, { method: 'DELETE' }),
+ /** Bild-URL; Query heißt `ssetoken` (require_auth_flexible), nicht `token`. */
+ photoUrl: (pid) => {
const token = getToken()
- return `${BASE}/photos/${pid}${token ? `?token=${token}` : ''}`
+ return `${BASE}/photos/${pid}${token ? `?ssetoken=${encodeURIComponent(token)}` : ''}`
},
// Nutrition