const { Icon, Avatar, StatusBadge, Button, Input, Select, Dropzone, VoiceRecorder, BottomSheet, ActionBar, PillToggle } = window.DeterTechDesignSystem_3262d8;
// --- AUTH / API ---------------------------------------------------------------
let authToken = null;
try {
const stored = JSON.parse(localStorage.getItem('dtfc_session') || 'null');
authToken = (stored && stored.token) || null;
} catch (e) {}
function authHeaders(extra) {
const h = { ...(extra || {}) };
if (authToken) h['Authorization'] = 'Bearer ' + authToken;
return h;
}
async function apiFetch(path, opts) {
const r = await fetch('/api' + path, opts);
let data = null;
try { data = await r.json(); } catch (e) {}
if (!r.ok) {
if (r.status === 401 && API.onUnauthorized) API.onUnauthorized();
throw new Error((data && data.error) || ('API-Fehler: ' + path));
}
return data;
}
const API = {
onUnauthorized: null,
setAuthToken(token) { authToken = token; },
login(username, password) {
return apiFetch('/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }),
});
},
get(path) { return apiFetch(path, { headers: authHeaders() }); },
post(path, formData) { return apiFetch(path, { method: 'POST', headers: authHeaders(), body: formData }); },
postJSON(path, body) {
return apiFetch(path, { method: 'POST', headers: authHeaders({ 'Content-Type': 'application/json' }), body: JSON.stringify(body) });
},
patch(path, body) {
return apiFetch(path, { method: 'PATCH', headers: authHeaders({ 'Content-Type': 'application/json' }), body: JSON.stringify(body) });
},
delete(path) { return apiFetch(path, { method: 'DELETE', headers: authHeaders() }); },
};
function relTime(iso) {
const d = new Date(iso);
const diffMin = Math.round((Date.now() - d.getTime()) / 60000);
if (diffMin < 1) return 'jetzt';
if (diffMin < 60) return `vor ${diffMin} Min.`;
const diffH = Math.round(diffMin / 60);
if (diffH < 24) return `vor ${diffH} Std.`;
const diffD = Math.round(diffH / 24);
if (diffD === 1) return 'gestern';
return `vor ${diffD} Tagen`;
}
function statusLabel(s) {
return { review: 'In Prüfung', published: 'Veröffentlicht', archived: 'Archiviert' }[s] || s;
}
function roleLabel(r) {
return { admin: 'Admin', techniker: 'Techniker', team: 'Team' }[r] || r;
}
// Erkennt Desktop-Breite (Sidebar + angedockte Detail-Panels statt oberem
// Umschalter + Bottom-Sheets). Reagiert live auf Fenstergröße-Änderungen.
function useIsDesktop(breakpoint = 960) {
const [isDesktop, setIsDesktop] = React.useState(
() => window.matchMedia(`(min-width: ${breakpoint}px)`).matches
);
React.useEffect(() => {
const mq = window.matchMedia(`(min-width: ${breakpoint}px)`);
const handler = () => setIsDesktop(mq.matches);
mq.addEventListener('change', handler);
return () => mq.removeEventListener('change', handler);
}, [breakpoint]);
return isDesktop;
}
// Kleiner lokaler Helfer: Input aus dem Design-System reicht kein `type` durch,
// es gibt also keine Passwort-Variante. Optisch identisch zu Input, gleiche Tokens.
function PasswordField({ label, placeholder, value, onChange }) {
const [focus, setFocus] = React.useState(false);
return (
{label && (
{label}
)}
);
}
function RolePill({ role }) {
const colors = {
admin: { bg: 'rgba(214,242,60,0.14)', fg: 'var(--lime-500)' },
techniker: { bg: 'rgba(255,255,255,0.10)', fg: 'var(--white)' },
team: { bg: 'rgba(255,255,255,0.06)', fg: 'var(--text-tertiary)' },
};
const c = colors[role] || colors.techniker;
return (
{roleLabel(role)}
);
}
// Dropdown-Menü am Profilbild: öffnet sich beim Klick auf den Avatar, schließt
// bei Klick außerhalb. Bewusst als einfache Liste gehalten, damit später
// leicht weitere Punkte ergänzt werden können. `dropUp` lässt das Menü nach
// oben statt unten aufklappen (für die Sidebar, wo der Avatar unten sitzt).
function ProfileMenu({ user, onOpenTrash, onManageLocations, onViewArchived, onLogout, dropUp, align = 'right', avatarSize }) {
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
if (!open) return;
const handler = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, [open]);
const itemStyle = {
display: 'flex', alignItems: 'center', gap: 10, width: '100%', border: 'none',
background: 'none', cursor: 'pointer', padding: '12px 16px', textAlign: 'left',
fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, color: 'var(--text-primary)',
};
return (
setOpen(o => !o)} />
{open && (
{ setOpen(false); onOpenTrash(); }}>
{onViewArchived && (
{ setOpen(false); onViewArchived(); }}>
)}
{onManageLocations && (
{ setOpen(false); onManageLocations(); }}>
)}
{ setOpen(false); onLogout(); }}>
)}
);
}
// Gemeinsame Chrome für alle Listen+Detail-Stellen (Beitrag bearbeiten,
// Team-Freigabe, Nutzer-Details): auf Mobile ein Bottom-Sheet-Overlay wie
// bisher, auf Desktop ein angedocktes rechtes Panel neben der Liste.
// Vollbild-Player im Browser für Fotos/Videos aus einem Beitrag, statt die
// Datei in einem neuen Tab zu öffnen. `item` = { url, type }.
function MediaLightbox({ item, onClose }) {
if (!item) return null;
return (
e.stopPropagation()} style={{ maxWidth: '100%', maxHeight: '100%', display: 'flex' }}>
{item.type === 'video'
?
:
}
);
}
function DetailChrome({ open, title, onClose, children }) {
const isDesktop = useIsDesktop();
if (!open) return null;
if (!isDesktop) {
return {children} ;
}
return (
);
}
// Standort-Auswahl mit Möglichkeit, direkt einen neuen Standort anzulegen
// (POST /api/projects), statt auf die feste Projektliste beschränkt zu sein.
function ProjectPicker({ projects, value, onChange, onProjectsChanged }) {
const [adding, setAdding] = React.useState(false);
const [newName, setNewName] = React.useState('');
const [creating, setCreating] = React.useState(false);
const [error, setError] = React.useState('');
const projectOptions = projects.map(p => ({ value: String(p.id), label: p.name }));
const create = async () => {
if (!newName.trim()) return;
setCreating(true);
setError('');
try {
const p = await API.postJSON('/projects', { name: newName.trim() });
await onProjectsChanged();
onChange(String(p.id));
setNewName('');
setAdding(false);
} catch (e) {
setError(e.message || 'Standort konnte nicht angelegt werden.');
} finally {
setCreating(false);
}
};
if (adding) {
return (
{error &&
{error}
}
{ setAdding(false); setNewName(''); setError(''); }} style={{ flex: 1 }}>Abbrechen
{creating ? 'Wird angelegt…' : 'Anlegen'}
);
}
return (
setAdding(true)} style={{ alignSelf: 'flex-start', background: 'none', border: 'none', color: 'var(--accent)', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700, cursor: 'pointer', textDecoration: 'underline' }}>
+ Neuen Standort anlegen
);
}
// Mehrfach-Datei-Auswahl (Foto/Video) mit Vorschau-Raster + Entfernen vor dem
// Absenden. Analog zum bestehenden Dropzone aus dem Design-System, aber mit
// `multiple`-Datei-Input statt nur einer Datei.
function MultiDropzone({ files, onFilesChange }) {
const [drag, setDrag] = React.useState(false);
const inputRef = React.useRef(null);
const addFiles = fileList => {
const arr = Array.from(fileList || []).map(f => ({
file: f,
url: URL.createObjectURL(f),
type: f.type.startsWith('video') ? 'video' : 'image',
}));
if (arr.length) onFilesChange([...files, ...arr]);
};
const removeAt = i => {
if (!window.confirm('Diese Datei wirklich entfernen?')) return;
onFilesChange(files.filter((_, idx) => idx !== i));
};
return (
{ e.preventDefault(); setDrag(true); }}
onDragLeave={() => setDrag(false)}
onDrop={e => { e.preventDefault(); setDrag(false); addFiles(e.dataTransfer.files); }}
onClick={() => inputRef.current && inputRef.current.click()}
style={{
border: `1.5px dashed ${drag ? 'var(--accent)' : 'var(--border-strong)'}`,
borderRadius: 'var(--radius-md)',
background: drag ? 'rgba(214,242,60,0.06)' : 'var(--surface-input)',
minHeight: 120, display: 'flex', flexDirection: 'column', alignItems: 'center',
justifyContent: 'center', gap: 8, cursor: 'pointer', padding: 16,
}}
>
Fotos oder Videos hierher ziehen (mehrere möglich)
{ addFiles(e.target.files); e.target.value = ''; }} />
{files.length > 0 && (
{files.map((f, i) => (
{f.type === 'video'
?
:
}
{ e.stopPropagation(); removeAt(i); }} style={{ position: 'absolute', top: 4, right: 4, width: 22, height: 22, borderRadius: '50%', border: 'none', background: 'rgba(10,22,38,0.85)', color: 'var(--white)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, lineHeight: 1 }}>
×
))}
)}
);
}
function LoginScreen({ onLogin }) {
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState('');
const brand = window.BRANDING || {};
const submit = async () => {
if (!username.trim() || !password) return;
setLoading(true);
setError('');
try {
const session = await API.login(username.trim(), password);
onLogin(session);
} catch (e) {
setError(e.message || 'Login fehlgeschlagen.');
} finally {
setLoading(false);
}
};
return (
{brand.appName || 'Field Content'} – Anmeldung
{error &&
{error}
}
);
}
function EditUploadPanel({ post, user, projects, onClose, onSave, onDelete, onUpdate, onPostsChanged, onProjectsChanged }) {
const [desc, setDesc] = React.useState(post.description);
const [projectId, setProjectId] = React.useState(String(post.project_id));
const [coOwnerId, setCoOwnerId] = React.useState(post.co_owner_id ? String(post.co_owner_id) : '');
const [directory, setDirectory] = React.useState([]);
const [saving, setSaving] = React.useState(false);
const [deleting, setDeleting] = React.useState(false);
const [uploadingMedia, setUploadingMedia] = React.useState(false);
const [lightbox, setLightbox] = React.useState(null);
const fileInputRef = React.useRef(null);
React.useEffect(() => {
setDesc(post.description);
setProjectId(String(post.project_id));
setCoOwnerId(post.co_owner_id ? String(post.co_owner_id) : '');
}, [post.id]);
React.useEffect(() => {
API.get('/users/directory').then(setDirectory).catch(() => {});
}, []);
const save = async () => {
setSaving(true);
try {
await onSave(post.id, { description: desc, project_id: Number(projectId), co_owner_id: coOwnerId ? Number(coOwnerId) : null });
onClose();
} finally { setSaving(false); }
};
const remove = async () => {
if (!window.confirm('Diesen Beitrag wirklich unwiderruflich löschen?')) return;
setDeleting(true);
try { await onDelete(post.id); onClose(); }
finally { setDeleting(false); }
};
const addFiles = async fileList => {
const files = Array.from(fileList || []);
if (!files.length) return;
setUploadingMedia(true);
try {
const fd = new FormData();
files.forEach(f => fd.append('media', f));
const { media } = await API.post(`/posts/${post.id}/media`, fd);
onUpdate(prev => ({ ...prev, media: [...(prev.media || []), ...media] }));
onPostsChanged();
} finally {
setUploadingMedia(false);
}
};
const removeMedia = async mediaId => {
if (!window.confirm('Diese Datei wirklich löschen?')) return;
await API.delete(`/posts/${post.id}/media/${mediaId}`);
onUpdate(prev => ({ ...prev, media: (prev.media || []).filter(m => m.id !== mediaId) }));
onPostsChanged();
};
return (
Fotos & Videos
{post.media && post.media.length > 0 ? (
{post.media.map(m => (
setLightbox(m)} style={{ position: 'absolute', inset: 0, display: 'block', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
{m.type === 'video'
?
removeMedia(m.id)} style={{ position: 'absolute', top: 4, right: 4, width: 22, height: 22, borderRadius: '50%', border: 'none', background: 'rgba(10,22,38,0.85)', color: 'var(--white)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, lineHeight: 1 }}>
×
))}
) : (
)}
fileInputRef.current && fileInputRef.current.click()} disabled={uploadingMedia} style={{ marginTop: 10, background: 'none', border: '1px dashed var(--border-strong)', borderRadius: 'var(--radius-sm)', color: 'var(--text-secondary)', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700, padding: '10px 14px', cursor: uploadingMedia ? 'default' : 'pointer', width: '100%' }}>
{uploadingMedia ? 'Wird hochgeladen…' : '+ Datei hinzufügen'}
{ addFiles(e.target.files); e.target.value = ''; }} />
setLightbox(null)} />
{post.voice_path &&
}
u.id !== post.user_id).map(u => ({ value: String(u.id), label: u.name }))}
value={coOwnerId}
onChange={setCoOwnerId}
/>
{saving ? 'Wird gespeichert…' : 'Änderungen speichern'}
{deleting ? 'Löscht…' : 'Beitrag löschen'}
);
}
function TechnikerDashboard({ user, onLogout, onOpenTrash, posts, projects, onNewUpload, onSaveEdit, onDelete, onPostsChanged, onProjectsChanged }) {
const mine = posts.filter(p => p.user_id === user.id || p.co_owner_id === user.id);
const [editing, setEditing] = React.useState(null);
return (
Hallo, {user.name.split(' ')[0]}
+ Neuen Beitrag hochladen
Deine letzten Uploads
{mine.length === 0 &&
Noch keine Uploads.
}
{mine.map(p => (
setEditing(p)} onKeyDown={e => { if (e.key === 'Enter') setEditing(p); }} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 12, cursor: 'pointer' }}>
{p.media && p.media.length > 0
? (p.media[0].type === 'video'
?
:
)
:
}
{p.media && p.media.length > 1 && (
+{p.media.length - 1}
)}
{p.project_name}
{p.media.length} }
{p.voice_path && {relTime(p.created_at)}
{p.co_owner_id === user.id && (
· Mitbesitzer
)}
))}
setEditing(null)}>
{editing && (
setEditing(null)} onSave={onSaveEdit} onDelete={onDelete}
onUpdate={fn => setEditing(e => fn(e))} onPostsChanged={onPostsChanged} onProjectsChanged={onProjectsChanged} />
)}
);
}
function UploadFlow({ user, projects, onCancel, onSubmitted, onProjectsChanged }) {
const [mode, setMode] = React.useState('media');
const [projectId, setProjectId] = React.useState('');
const [desc, setDesc] = React.useState('');
const [coOwnerId, setCoOwnerId] = React.useState('');
const [directory, setDirectory] = React.useState([]);
const [mediaFiles, setMediaFiles] = React.useState([]);
const [recording, setRecording] = React.useState(false);
const [duration, setDuration] = React.useState(0);
const [voiceBlob, setVoiceBlob] = React.useState(null);
const [submitting, setSubmitting] = React.useState(false);
const [error, setError] = React.useState('');
const timerRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
const chunksRef = React.useRef([]);
React.useEffect(() => { API.get('/users/directory').then(setDirectory).catch(() => {}); }, []);
const toggleRecording = async () => {
if (recording) {
mediaRecorderRef.current && mediaRecorderRef.current.stop();
clearInterval(timerRef.current);
setRecording(false);
return;
}
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const mr = new MediaRecorder(stream);
chunksRef.current = [];
mr.ondataavailable = e => chunksRef.current.push(e.data);
mr.onstop = () => {
const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
setVoiceBlob(blob);
stream.getTracks().forEach(t => t.stop());
};
mr.start();
mediaRecorderRef.current = mr;
setDuration(0);
setRecording(true);
timerRef.current = setInterval(() => setDuration(d => d + 1), 1000);
} catch (e) {
setError('Mikrofonzugriff wurde verweigert oder ist nicht verfügbar.');
}
};
const canSubmit = projectId && (mediaFiles.length > 0 || voiceBlob) && !submitting;
const submit = async () => {
setSubmitting(true);
setError('');
try {
const fd = new FormData();
fd.append('project_id', projectId);
fd.append('description', desc);
if (coOwnerId) fd.append('co_owner_id', coOwnerId);
mediaFiles.forEach(f => fd.append('media', f.file));
if (voiceBlob) fd.append('voice', voiceBlob, 'sprachnachricht.webm');
await API.post('/posts', fd);
onSubmitted();
} catch (e) {
setError('Upload fehlgeschlagen. Bitte erneut versuchen.');
} finally {
setSubmitting(false);
}
};
return (
{[{ v: 'media', l: 'Foto / Video' }, { v: 'voice', l: 'Sprachnachricht' }].map(o => (
setMode(o.v)} style={{ border: 'none', cursor: 'pointer', padding: '10px 18px', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, background: mode === o.v ? 'var(--accent)' : 'transparent', color: mode === o.v ? 'var(--text-on-accent)' : 'var(--text-secondary)' }}>{o.l}
))}
{mode === 'media'
?
:
}
{voiceBlob && mode !== 'voice' && (
)}
{mode === 'voice' && (
setMode('media')} style={{ background: 'none', border: 'none', color: 'var(--text-tertiary)', fontFamily: 'var(--font-sans)', fontSize: 13, textAlign: 'left', cursor: 'pointer', textDecoration: 'underline' }}>+ Foto/Video zusätzlich anhängen
)}
u.id !== user.id).map(u => ({ value: String(u.id), label: u.name }))}
value={coOwnerId}
onChange={setCoOwnerId}
/>
{error && {error}
}
{submitting ? 'Wird hochgeladen…' : 'Absenden'}
);
}
async function downloadPostZip(post) {
const brand = window.BRANDING || {};
const zip = new JSZip();
const info = [
`${brand.companyName || ''} ${brand.appName || ''} – Beitrag #${post.id}`.trim(),
`Autor: ${post.user_name}`,
`Projekt: ${post.project_name}`,
`Status: ${statusLabel(post.status)}`,
`Für Content markiert: ${post.is_content ? 'ja' : 'nein'}`,
`Erstellt am: ${new Date(post.created_at).toLocaleString('de-DE')}`,
'',
'Beschreibung:',
post.description || '(keine Beschreibung)',
].join('\n');
zip.file('info.txt', info);
const attachments = [];
(post.media || []).forEach((m, i) => {
const ext = m.url.split('.').pop() || (m.type === 'video' ? 'mp4' : 'jpg');
attachments.push({ url: m.url, name: `${m.type === 'video' ? 'video' : 'foto'}-${i + 1}.${ext}` });
});
if (post.voice_path) attachments.push({ url: post.voice_path, name: 'sprachnachricht.webm' });
await Promise.all(attachments.map(async a => {
try {
const blob = await (await fetch(a.url)).blob();
zip.file(a.name, blob);
} catch (e) { /* Datei ggf. nicht erreichbar */ }
}));
const blob = await zip.generateAsync({ type: 'blob' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `beitrag-${post.id}.zip`;
document.body.appendChild(a);
a.click();
a.remove();
}
function FileRow({ file, onEdit, editing, draft, onDraftChange, onSaveComment, onCancelEdit, onToggleSelected, onDelete, onOpen }) {
const thumb = file.key === 'voice'
?
{file.key === 'voice' ? (
{thumb}
) : (
{thumb}
)}
{file.label}
{!editing && (
{file.comment || 'Kein Kommentar'}
)}
{onDelete && (
)}
{editing && (
)}
);
}
function PostDetailPanel({ post, onClose, onSetStatus, onFileMeta, onUpdate, onPostsChanged, onDeletePost }) {
const [zipping, setZipping] = React.useState(false);
const [editingFile, setEditingFile] = React.useState(null);
const [draft, setDraft] = React.useState('');
const [uploadingMedia, setUploadingMedia] = React.useState(false);
const [lightbox, setLightbox] = React.useState(null);
const fileInputRef = React.useRef(null);
React.useEffect(() => { setEditingFile(null); setDraft(''); }, [post.id]);
const addFiles = async fileList => {
const files = Array.from(fileList || []);
if (!files.length) return;
setUploadingMedia(true);
try {
const fd = new FormData();
files.forEach(f => fd.append('media', f));
const { media } = await API.post(`/posts/${post.id}/media`, fd);
onUpdate(prev => ({ ...prev, media: [...(prev.media || []), ...media] }));
onPostsChanged();
} finally {
setUploadingMedia(false);
}
};
const removeMediaItem = async mediaId => {
if (!window.confirm('Diese Datei wirklich löschen?')) return;
await API.delete(`/posts/${post.id}/media/${mediaId}`);
onUpdate(prev => ({ ...prev, media: (prev.media || []).filter(m => m.id !== mediaId) }));
onPostsChanged();
};
const files = [
...((post.media || []).map((m, i) => ({ key: m.id, label: `${m.type === 'video' ? 'Video' : 'Foto'} ${i + 1}`, url: m.url, type: m.type, comment: m.comment, selected: m.selected }))),
...(post.voice_path ? [{ key: 'voice', label: 'Sprachnachricht', url: post.voice_path, comment: post.voice_comment, selected: post.voice_selected }] : []),
];
const updateMedia = (mediaId, patch) => onUpdate(prev => ({
...prev,
media: (prev.media || []).map(m => m.id === mediaId ? { ...m, ...patch } : m),
}));
const updateVoice = patch => onUpdate(prev => ({ ...prev, ...patch }));
return (
{post.media && post.media.length > 0
? post.media.map(m => (
setLightbox(m)} style={{ height: '100%', width: 220, flexShrink: 0, display: 'block', background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
{m.type === 'video'
?
))
:
}
setLightbox(null)} />
fileInputRef.current && fileInputRef.current.click()} disabled={uploadingMedia} style={{ background: 'none', border: '1px dashed var(--border-strong)', borderRadius: 'var(--radius-sm)', color: 'var(--text-secondary)', fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700, padding: '10px 14px', cursor: uploadingMedia ? 'default' : 'pointer', width: '100%' }}>
{uploadingMedia ? 'Wird hochgeladen…' : '+ Datei hinzufügen'}
{post.voice_path && (
)}
{post.description || 'Keine Beschreibung.'}
{post.user_name} · {relTime(post.created_at)}
{ setZipping(true); try { await downloadPostZip(post); } finally { setZipping(false); } }} style={{ width: '100%' }}>
{files.length > 0 && (
Einzelne Dateien (nur Team)
{files.map(f => (
{ setEditingFile(f.key); setDraft(f.comment || ''); }}
onDraftChange={setDraft}
onCancelEdit={() => setEditingFile(null)}
onSaveComment={() => {
onFileMeta(post.id, { file: f.key, comment: draft });
f.key === 'voice' ? updateVoice({ voice_comment: draft }) : updateMedia(f.key, { comment: draft });
setEditingFile(null);
}}
onToggleSelected={() => {
const next = !f.selected;
onFileMeta(post.id, { file: f.key, selected: next });
f.key === 'voice' ? updateVoice({ voice_selected: next }) : updateMedia(f.key, { selected: next });
}}
onDelete={f.key === 'voice' ? null : () => removeMediaItem(f.key)}
onOpen={f.key === 'voice' ? null : () => setLightbox({ url: f.url, type: f.type })}
/>
))}
)}
{ if (!window.confirm('Diesen Beitrag wirklich freigeben?')) return; onSetStatus(post.id, { status: 'published' }); onClose(); } },
{ label: post.is_content ? 'Content-Markierung entfernen' : 'Für Content markieren', onClick: () => { onSetStatus(post.id, { is_content: !post.is_content }); onUpdate(prev => ({ ...prev, is_content: !prev.is_content })); } },
{ label: 'Archivieren', danger: true, onClick: () => { onSetStatus(post.id, { status: 'archived' }); onClose(); } },
{ label: 'Löschen', danger: true, onClick: () => { if (!window.confirm('Diesen Beitrag wirklich löschen?')) return; onDeletePost(post.id); onClose(); } },
]} />
);
}
function LocationsPanel({ projects, onProjectsChanged }) {
const [editingId, setEditingId] = React.useState(null);
const [draftName, setDraftName] = React.useState('');
const [busyId, setBusyId] = React.useState(null);
const [error, setError] = React.useState('');
const startEdit = p => { setEditingId(p.id); setDraftName(p.name); setError(''); };
const cancelEdit = () => { setEditingId(null); setDraftName(''); };
const saveRename = async id => {
if (!draftName.trim()) return;
setBusyId(id);
setError('');
try {
await API.patch(`/projects/${id}`, { name: draftName.trim() });
await onProjectsChanged();
setEditingId(null);
} catch (e) {
setError(e.message || 'Standort konnte nicht umbenannt werden.');
} finally {
setBusyId(null);
}
};
const remove = async p => {
if (!window.confirm(`Standort "${p.name}" wirklich löschen?`)) return;
setBusyId(p.id);
setError('');
try {
await API.delete(`/projects/${p.id}`);
await onProjectsChanged();
} catch (e) {
setError(e.message || 'Standort konnte nicht gelöscht werden.');
} finally {
setBusyId(null);
}
};
return (
{error &&
{error}
}
{projects.length === 0 &&
Keine Standorte vorhanden.
}
{projects.map(p => (
{editingId === p.id ? (
Abbrechen
saveRename(p.id)} disabled={busyId === p.id || !draftName.trim()}>{busyId === p.id ? '…' : 'Speichern'}
) : (
{p.name}
startEdit(p)} title="Umbenennen" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-tertiary)', display: 'flex', flexShrink: 0 }}>
remove(p)} disabled={busyId === p.id} title="Löschen" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', display: 'flex', flexShrink: 0 }}>
)}
))}
Lädt…
;
}
if (posts.length === 0) {
return Keine archivierten Beiträge.
;
}
return (
{posts.map(p => (
{p.media && p.media.length > 0 ?
:
}
{p.project_name}
{p.user_name} · {relTime(p.created_at)}
restore(p.id)}>
{restoringId === p.id ? '…' : 'Wiederherstellen'}
))}
Lädt…
;
}
if (posts.length === 0) {
return Keine gelöschten Beiträge.
;
}
return (
{posts.map(p => (
{p.media && p.media.length > 0 ?
:
}
{p.project_name}
{p.user_name} · gelöscht {relTime(p.deleted_at)}
restore(p.id)}>
{restoringId === p.id ? '…' : 'Wiederherstellen'}
))}
Eingehendes Material
{newCount} neue Beiträge zur Prüfung
{posts.length === 0 &&
Noch keine Beiträge eingegangen.
}
{posts.map(p => (
setActive(p)} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 14, cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 8 }}>
{p.media.length} }
{p.voice_path && {p.project_name}
{p.description}
{!!p.is_content && (
Für Content markiert
)}
))}
setActive(null)}>
{active && (
setActive(null)}
onSetStatus={onSetStatus}
onFileMeta={onFileMeta}
onUpdate={fn => setActive(a => fn(a))}
onPostsChanged={onPostsChanged}
onDeletePost={onDeletePost}
/>
)}
);
}
function UserDetailPanel({ user, onClose, onUpdateRole, onToggleActive, onResetPassword, onDeleteUser }) {
const [role, setRole] = React.useState(user.role);
const [newPassword, setNewPassword] = React.useState('');
const [saving, setSaving] = React.useState(false);
const [resetting, setResetting] = React.useState(false);
const [deleting, setDeleting] = React.useState(false);
const [notice, setNotice] = React.useState('');
React.useEffect(() => {
setRole(user.role);
setNewPassword('');
setNotice('');
}, [user.id]);
const roleOptions = [
{ value: 'techniker', label: 'Techniker' },
{ value: 'team', label: 'Team' },
{ value: 'admin', label: 'Admin' },
];
const saveRole = async () => {
setSaving(true);
try { await onUpdateRole(user.id, role); setNotice('Rolle gespeichert.'); }
finally { setSaving(false); }
};
const toggleActive = async () => {
setSaving(true);
try { await onToggleActive(user.id, !user.is_active); onClose(); }
finally { setSaving(false); }
};
const resetPassword = async () => {
if (newPassword.length < 6) { setNotice('Passwort muss mindestens 6 Zeichen haben.'); return; }
setResetting(true);
try { await onResetPassword(user.id, newPassword); setNewPassword(''); setNotice('Passwort zurückgesetzt.'); }
finally { setResetting(false); }
};
const removeUser = async () => {
if (!window.confirm(`"${user.name}" wirklich unwiderruflich löschen? Alle Beiträge dieses Nutzers werden dabei ebenfalls unwiderruflich gelöscht.`)) return;
setDeleting(true);
try { await onDeleteUser(user.id); onClose(); }
catch (e) { setNotice(e.message || 'Nutzer konnte nicht gelöscht werden.'); }
finally { setDeleting(false); }
};
return (
@{user.username} ·
{notice &&
{notice}
}
{saving ? 'Speichert…' : 'Rolle speichern'}
{resetting ? 'Setzt zurück…' : 'Passwort zurücksetzen'}
{user.is_active ? 'Nutzer deaktivieren' : 'Nutzer aktivieren'}
{deleting ? 'Löscht…' : 'Nutzer löschen'}
);
}
function AdminPanel({ user, onLogout, onOpenTrash, onManageLocations, onViewArchived, users, onCreateUser, onUpdateRole, onToggleActive, onResetPassword, onDeleteUser }) {
const [active, setActive] = React.useState(null);
const [name, setName] = React.useState('');
const [username, setUsername] = React.useState('');
const [password, setPassword] = React.useState('');
const [role, setRole] = React.useState('techniker');
const [creating, setCreating] = React.useState(false);
const [error, setError] = React.useState('');
const roleOptions = [
{ value: 'techniker', label: 'Techniker' },
{ value: 'team', label: 'Team' },
{ value: 'admin', label: 'Admin' },
];
const create = async () => {
setError('');
if (!name.trim() || !username.trim() || password.length < 6) {
setError('Name, Benutzername und ein Passwort mit mind. 6 Zeichen sind erforderlich.');
return;
}
setCreating(true);
try {
await onCreateUser({ name: name.trim(), username: username.trim(), password, role });
setName(''); setUsername(''); setPassword(''); setRole('techniker');
} catch (e) {
setError(e.message || 'Nutzer konnte nicht angelegt werden.');
} finally {
setCreating(false);
}
};
return (
{users.length === 0 &&
Lade Nutzer…
}
{users.map(u => (
setActive(u)} onKeyDown={e => { if (e.key === 'Enter') setActive(u); }} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 12, cursor: 'pointer', opacity: u.is_active ? 1 : 0.5 }}>
{u.name}
@{u.username}{!u.is_active ? ' · deaktiviert' : ''}
))}
setActive(null)}>
{active && (
setActive(null)} onUpdateRole={onUpdateRole} onToggleActive={onToggleActive} onResetPassword={onResetPassword} onDeleteUser={onDeleteUser} />
)}
);
}
function Sidebar({ user, view, screen, onSelectView, onSelectScreen, onOpenTrash, onManageLocations, onViewArchived, onLogout }) {
const brand = window.BRANDING || {};
const items = user.role === 'admin'
? [
{ key: 'tech', label: 'Techniker-Ansicht', icon: 'user', active: view === 'tech', onClick: () => onSelectView('tech') },
{ key: 'team', label: 'Team-Ansicht', icon: 'users', active: view === 'team', onClick: () => onSelectView('team') },
{ key: 'admin', label: 'Nutzerverwaltung', icon: 'shield', active: view === 'admin', onClick: () => onSelectView('admin') },
]
: user.role === 'techniker'
? [
{ key: 'dashboard', label: 'Meine Beiträge', icon: 'layout-grid', active: screen === 'dashboard', onClick: () => onSelectScreen('dashboard') },
{ key: 'upload', label: 'Neuer Beitrag', icon: 'plus', active: screen === 'upload', onClick: () => onSelectScreen('upload') },
]
: [
{ key: 'team', label: 'Eingehendes Material', icon: 'inbox', active: true, onClick: () => {} },
];
return (
{brand.appName || 'Field Content'}
{items.map(it => (
))}
{user.name}
{roleLabel(user.role)}
);
}
function App() {
const [session, setSession] = React.useState(() => {
try { return JSON.parse(localStorage.getItem('dtfc_session') || 'null'); } catch (e) { return null; }
});
const user = session && session.user;
const isDesktop = useIsDesktop();
const [projects, setProjects] = React.useState([]);
const [posts, setPosts] = React.useState([]);
const [adminUsers, setAdminUsers] = React.useState([]);
const [view, setView] = React.useState('tech');
const [screen, setScreen] = React.useState('dashboard');
const [trashOpen, setTrashOpen] = React.useState(false);
const [locationsOpen, setLocationsOpen] = React.useState(false);
const [archivedOpen, setArchivedOpen] = React.useState(false);
const logout = React.useCallback(() => {
localStorage.removeItem('dtfc_session');
API.setAuthToken(null);
setSession(null);
setView('tech');
}, []);
React.useEffect(() => { API.onUnauthorized = logout; }, [logout]);
React.useEffect(() => { if (session && session.token) API.setAuthToken(session.token); }, [session]);
// Gespeichertes Token beim Start validieren – ein 401 löst über API.onUnauthorized
// automatisch den Logout aus.
React.useEffect(() => {
if (session) API.get('/auth/me').catch(() => {});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const login = sessionObj => {
localStorage.setItem('dtfc_session', JSON.stringify(sessionObj));
API.setAuthToken(sessionObj.token);
setSession(sessionObj);
};
const loadProjects = () => API.get('/projects').then(setProjects).catch(() => {});
const loadPosts = () => API.get('/posts').then(setPosts).catch(() => {});
const loadAdminUsers = () => API.get('/users').then(setAdminUsers).catch(() => {});
React.useEffect(() => {
if (!user) return;
loadProjects();
loadPosts();
const iv = setInterval(loadPosts, 8000);
return () => clearInterval(iv);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user && user.id]);
const effectiveView = !user ? null : user.role === 'admin' ? view : user.role === 'team' ? 'team' : 'tech';
React.useEffect(() => {
if (user && user.role === 'admin' && effectiveView === 'admin') loadAdminUsers();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [user && user.role, effectiveView]);
if (!user) return
{!isDesktop && user.role === 'admin' && (
)}
{effectiveView === 'tech' && (user.role === 'admin' || user.role === 'techniker') && screen === 'dashboard' && (
setTrashOpen(true)} posts={posts} projects={projects} onNewUpload={() => setScreen('upload')}
onSaveEdit={(id, body) => API.patch(`/posts/${id}`, body).then(loadPosts)}
onDelete={id => API.delete(`/posts/${id}`).then(loadPosts)}
onPostsChanged={loadPosts}
onProjectsChanged={loadProjects} />
)}
{effectiveView === 'tech' && (user.role === 'admin' || user.role === 'techniker') && screen === 'upload' && (
setScreen('dashboard')} onSubmitted={() => { setScreen('dashboard'); loadPosts(); }} onProjectsChanged={loadProjects} />
)}
{effectiveView === 'team' && (user.role === 'admin' || user.role === 'team') && (
setTrashOpen(true)} onManageLocations={() => setLocationsOpen(true)} onViewArchived={() => setArchivedOpen(true)} posts={posts} onSetStatus={setStatus} onFileMeta={(id, body) => API.patch(`/posts/${id}/files`, body).then(loadPosts)} onPostsChanged={loadPosts} onDeletePost={id => API.delete(`/posts/${id}`).then(loadPosts)} />
)}
{effectiveView === 'admin' && user.role === 'admin' && (
setTrashOpen(true)}
onManageLocations={() => setLocationsOpen(true)}
onViewArchived={() => setArchivedOpen(true)}
users={adminUsers}
onCreateUser={data => API.postJSON('/users', data).then(loadAdminUsers)}
onUpdateRole={(id, role) => API.patch(`/users/${id}`, { role }).then(loadAdminUsers)}
onToggleActive={(id, isActive) => API.patch(`/users/${id}`, { is_active: isActive }).then(loadAdminUsers)}
onResetPassword={(id, password) => API.postJSON(`/users/${id}/reset-password`, { password })}
onDeleteUser={id => API.delete(`/users/${id}`).then(loadAdminUsers)}
/>
)}
{isDesktop && (
setTrashOpen(true)} onManageLocations={() => setLocationsOpen(true)} onViewArchived={() => setArchivedOpen(true)} onLogout={logout} />
)}
{mainContent}
setTrashOpen(false)}>
{trashOpen &&
setLocationsOpen(false)}>
{locationsOpen &&
setArchivedOpen(false)}>
{archivedOpen &&
}