admin/logbuch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.4.0: Sonderführung, Zeiterfassung, Enter-Navigation, Objektsuche

Browse Source 
- Sonderführung: neues Feld 'Name/Gruppe' (DB-Spalte SonderName), in Liste sichtbar
- Wetter: Race-Condition behoben (API überschreibt DB-Werte beim Bearbeiten nicht mehr)
- Zeiterfassung: TimePicker5 ersetzt durch freie Texteingabe (TimeInput) mit Validierung
- Enter-Taste: navigiert zum nächsten Feld statt die Form abzuschicken; Luftdruck → zurück zu Art; Bemerkungen bleibt normal
- Objektsuche: Freitext-Suche im ObjektSelector, filtert nach Präfix (case-insensitive)
- UI-Anpassungen: kompakteres Layout (space-y-2, kleinere Abstände)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-05-04 08:50:51 +02:00
parent 743bebca2d
commit 8bff795247
9 changed files with 198 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/LogbuchForm.tsx
+67 -46
View File
@@ -1,12 +1,12 @@
'use client';
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import type { Kuppel, ArtFuehrung, BeoOption, SelectedObjekt, Wetter, LogbuchEintrag } from '@/types/logbuch';
import { ARTEN, ARTEN_MAP, artLabel } from '@/types/logbuch';
import BeoSelector from './BeoSelector';
import ObjektSelector from './ObjektSelector';
import CustomSelect from './CustomSelect';
import TimePicker5 from './TimePicker5';
import TimeInput from './TimeInput';
interface Props {
kuppel: Kuppel;
@@ -20,39 +20,10 @@ function toLocalDatetimeValue(isoOrDatetime: string): string {
return isoOrDatetime.slice(0, 16);
}
function snapTo5(value: string): string {
if (!value) return value;
// Fix 4-digit years that are actually < 100 (e.g. "0024" → "2024")
const fixed = value.replace(/^(\d{4})(-.+)$/, (_, y, rest) => {
const year = parseInt(y, 10);
return (year < 100 ? String(year + 2000) : y) + rest;
});
const d = new Date(fixed);
if (isNaN(d.getTime())) return value;
d.setMinutes(Math.round(d.getMinutes() / 5) * 5);
d.setSeconds(0);
const pad = (n: number) => String(n).padStart(2, '0');
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
}
function snapTimeTo5(time: string): string {
if (!time) return time;
const [hStr, mStr] = time.split(':');
const h = parseInt(hStr, 10);
const m = parseInt(mStr, 10);
if (isNaN(h) || isNaN(m)) return time;
const snappedM = Math.round(m / 5) * 5;
const finalH = snappedM >= 60 ? (h + 1) % 24 : h;
const finalM = snappedM >= 60 ? 0 : snappedM;
const pad = (n: number) => String(n).padStart(2, '0');
return `${pad(finalH)}:${pad(finalM)}`;
}
function nowLocalDatetime(): string {
const now = new Date();
const pad = (n: number) => String(n).padStart(2, '0');
const raw = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
return snapTo5(raw);
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
}
const NO_OBJEKTE_ARTEN: ArtFuehrung[] = ['BEOS', 'TD'];
@@ -66,11 +37,27 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
const [beos, setBeos] = useState<BeoOption[]>([currentUserBeo]);
const [objekte, setObjekte] = useState<SelectedObjekt[]>([]);
const [bemerkungen, setBemerkungen] = useState('');
const [sonderName, setSonderName] = useState('');
const [wetter, setWetter] = useState<Wetter>({ temp: 0, feuchte: 0, druck: 0 });
const [saving, setSaving] = useState(false);
const [error, setError] = useState('');
const [success, setSuccess] = useState(false);
const editEntryRef = useRef(editEntry);
editEntryRef.current = editEntry;
const formRef = useRef<HTMLFormElement>(null);
function focusNext(current: HTMLElement) {
if (!formRef.current) return;
const fields = Array.from(
formRef.current.querySelectorAll<HTMLElement>(
'input:not([disabled]), textarea:not([disabled]), #art-select'
)
);
const idx = fields.indexOf(current);
if (idx >= 0) fields[(idx + 1) % fields.length]?.focus();
}
const showObjekte = !NO_OBJEKTE_ARTEN.includes(artFuehrung);
const showBesucher = !NO_OBJEKTE_ARTEN.includes(artFuehrung);
const isSonne = artFuehrung === SONNE_ART;
@@ -78,7 +65,11 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
useEffect(() => {
fetch('/api/wetter')
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
.then((w: Wetter) => setWetter({ temp: w.temp, feuchte: Math.round(w.feuchte), druck: Math.round(w.druck) }))
.then((w: Wetter) => {
if (!editEntryRef.current) {
setWetter({ temp: w.temp, feuchte: Math.round(w.feuchte), druck: Math.round(w.druck) });
}
})
.catch(() => {});
}, []);
@@ -89,6 +80,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
setEnde(toLocalDatetimeValue(editEntry.Ende));
setBesucher(editEntry.Besucher ?? '');
setBemerkungen(editEntry.Bemerkungen ?? '');
setSonderName(editEntry.SonderName ?? '');
if (editEntry.WetterTemp !== null) {
setWetter({
temp: editEntry.WetterTemp ?? 0,
@@ -104,6 +96,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
setBeos([currentUserBeo]);
setObjekte([]);
setBemerkungen('');
setSonderName('');
setBesucher('');
}
}, [editEntry, currentUserBeo]);
@@ -151,6 +144,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
const body = {
Kuppel: kuppel,
ArtFuehrung: artFuehrung,
SonderName: artFuehrung === 'SF' ? sonderName : null,
Beginn: beginn,
Ende: ende,
Besucher: besucher === '' ? 0 : besucher,
@@ -188,17 +182,29 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
}
}
const inputCls = 'w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none';
const labelCls = 'block text-sm font-medium text-gray-700 mb-0.5';
const inputCls = 'w-full px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none';
const labelCls = 'block text-xs font-medium text-gray-700 mb-0.5';
return (
<form onSubmit={handleSubmit} className="space-y-3 max-w-2xl mx-auto border-2 border-gray-400 rounded-xl p-4 bg-white">
<form
ref={formRef}
onSubmit={handleSubmit}
onKeyDown={(e) => {
if (e.key !== 'Enter') return;
const tag = (e.target as HTMLElement).tagName;
if (tag === 'BUTTON' || tag === 'TEXTAREA') return;
e.preventDefault();
focusNext(e.target as HTMLElement);
}}
className="space-y-2 max-w-2xl mx-auto border-2 border-gray-400 rounded-xl p-3 bg-white"
>
{/* Art der Führung / Datum / Startzeit / Endzeit / Besucher — eine Zeile */}
<div className="flex flex-wrap gap-3 items-end">
<div className="flex-1 min-w-[160px]">
<label className={labelCls}>Art der Führung</label>
<CustomSelect
id="art-select"
placeholder={artLabel(artFuehrung)}
options={ARTEN.map((a) => ({ value: a, label: artLabel(a) }))}
onChange={(v) => setArtFuehrung(v as ArtFuehrung)}
@@ -215,12 +221,12 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
}}
required
className="px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
className="px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
/>
</div>
<div className="shrink-0">
<label className={labelCls}>Startzeit</label>
<TimePicker5
<TimeInput
value={beginn.slice(11, 16)}
onChange={(t) => {
setBeginn(beginn.slice(0, 10) + 'T' + t);
@@ -231,7 +237,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
</div>
<div className="shrink-0">
<label className={labelCls}>Endzeit</label>
<TimePicker5
<TimeInput
value={ende.slice(11, 16)}
onChange={(t) => setEnde(ende.slice(0, 10) + 'T' + t)}
className="w-24"
@@ -246,12 +252,27 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
onChange={(e) => setBesucher(e.target.value === '' ? '' : parseInt(e.target.value) || 0)}
min={0}
max={9999}
className="w-20 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
className="w-20 px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
/>
</div>
)}
</div>
{/* Name/Gruppe bei Sonderführung */}
{artFuehrung === 'SF' && (
<div>
<label className={labelCls}>Name / Gruppe</label>
<input
type="text"
value={sonderName}
onChange={(e) => setSonderName(e.target.value.slice(0, 200))}
maxLength={200}
placeholder="Name oder Gruppe der Sonderführung"
className="w-full px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
/>
</div>
)}
{/* BEOs */}
<div>
<label className={labelCls}>BEOs</label>
@@ -285,7 +306,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
value={bemerkungen}
onChange={(e) => setBemerkungen(e.target.value.slice(0, 500))}
rows={2}
className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none resize-y"
className="w-full px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none resize-y"
placeholder="Freier Text (max. 500 Zeichen)"
/>
</div>
@@ -300,7 +321,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
value={wetter.temp}
onChange={(e) => setWetter({ ...wetter, temp: parseFloat(e.target.value) || 0 })}
step="0.1"
className="w-1/3 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
className="w-1/3 px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
/>
</div>
<div className="flex flex-col items-center">
@@ -310,7 +331,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
value={wetter.feuchte}
onChange={(e) => setWetter({ ...wetter, feuchte: parseInt(e.target.value) || 0 })}
step="1"
className="w-1/3 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
className="w-1/3 px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
/>
</div>
<div className="flex flex-col items-end">
@@ -320,7 +341,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
value={wetter.druck}
onChange={(e) => setWetter({ ...wetter, druck: parseInt(e.target.value) || 0 })}
step="1"
className="w-1/3 px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
className="w-1/3 px-2 py-1 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
/>
</div>
</div>
@@ -342,7 +363,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
<button
type="submit"
disabled={saving}
className="w-full sm:w-auto px-6 py-2 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-base"
className="w-full sm:w-auto px-6 py-1 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 text-sm"
>
{saving ? 'Speichern...' : editEntry ? 'Änderungen speichern' : 'Eintrag speichern'}
</button>
@@ -350,7 +371,7 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
<button
type="button"
onClick={onSaved}
className="w-full sm:w-auto px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition-colors text-base"
className="w-full sm:w-auto px-6 py-1 bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium rounded-lg transition-colors text-sm"
>
Abbrechen
</button>