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

v1.2.0: Formular-Redesign und Listen-Verbesserungen

Browse Source 
- Eingabe: alle 5 Felder (Führung, Datum, Start, Ende, Besucher) in einer Zeile
- Eingabe: Datum einmalig, Start- und Endzeit getrennt
- Führungsarten: Kürzel werden nur in DB gespeichert, Anzeige als Klartext
- Liste: Datum und Zeit getrennt in eigenen Spalten
- Hintergrundfarbe #EEF4FF auf Login- und Passwort-Seite übertragen
- Alle Inputfelder gleich hoch (text-sm durchgehend)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Reinhard X. Fürst
2026-05-01 11:00:19 +02:00
parent 7055fd0229
commit 50719322c8
7 changed files with 77 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
components/LogbuchForm.tsx
View File

@@ -2,7 +2,7 @@
import { useEffect, useState } from 'react';
import type { Kuppel, ArtFuehrung, BeoOption, SelectedObjekt, Wetter, LogbuchEintrag } from '@/types/logbuch';
import { ARTEN, ARTEN_MAP } from '@/types/logbuch';
import { ARTEN, ARTEN_MAP, artLabel } from '@/types/logbuch';
import BeoSelector from './BeoSelector';
import ObjektSelector from './ObjektSelector';
import CustomSelect from './CustomSelect';
@@ -194,64 +194,51 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
return (
<form onSubmit={handleSubmit} className="space-y-3 max-w-2xl mx-auto border-2 border-gray-400 rounded-xl p-4 bg-white">
{/* Art der Führung — volle Breite */}
<div>
<label className={labelCls}>Art der Führung</label>
<CustomSelect
placeholder={`${artFuehrung} — ${ARTEN_MAP[artFuehrung]}`}
options={ARTEN.map((a) => ({ value: a, label: `${a} — ${ARTEN_MAP[a]}` }))}
onChange={(v) => setArtFuehrung(v as ArtFuehrung)}
/>
</div>
{/* Beginn / Ende / Besucher */}
<div className="flex flex-col sm:flex-row gap-3 sm:items-end">
<div className="w-full sm:flex-1">
<label className={labelCls}>Beginn</label>
<div className="flex gap-2">
<input
type="date"
value={beginn.slice(0, 10)}
onChange={(e) => {
if (!e.target.value) return;
setBeginn(e.target.value + 'T' + (beginn.slice(11, 16) || '00:00'));
setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
}}
required
className="flex-1 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"
/>
<TimePicker5
value={beginn.slice(11, 16)}
onChange={(t) => {
setBeginn(beginn.slice(0, 10) + 'T' + t);
setEnde(ende.slice(0, 10) + 'T' + t);
}}
className="w-24"
/>
</div>
{/* 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
placeholder={artLabel(artFuehrung)}
options={ARTEN.map((a) => ({ value: a, label: artLabel(a) }))}
onChange={(v) => setArtFuehrung(v as ArtFuehrung)}
/>
</div>
<div className="w-full sm:flex-1">
<label className={labelCls}>Ende</label>
<div className="flex gap-2">
<input
type="date"
value={ende.slice(0, 10)}
onChange={(e) => {
if (!e.target.value) return;
setEnde(e.target.value + 'T' + (ende.slice(11, 16) || '00:00'));
}}
required
className="flex-1 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"
/>
<TimePicker5
value={ende.slice(11, 16)}
onChange={(t) => setEnde(ende.slice(0, 10) + 'T' + t)}
className="w-24"
/>
</div>
<div className="shrink-0">
<label className={labelCls}>Datum</label>
<input
type="date"
value={beginn.slice(0, 10)}
onChange={(e) => {
if (!e.target.value) return;
setBeginn(e.target.value + 'T' + (beginn.slice(11, 16) || '00:00'));
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"
/>
</div>
<div className="shrink-0">
<label className={labelCls}>Startzeit</label>
<TimePicker5
value={beginn.slice(11, 16)}
onChange={(t) => {
setBeginn(beginn.slice(0, 10) + 'T' + t);
setEnde(ende.slice(0, 10) + 'T' + t);
}}
className="w-24"
/>
</div>
<div className="shrink-0">
<label className={labelCls}>Endzeit</label>
<TimePicker5
value={ende.slice(11, 16)}
onChange={(t) => setEnde(ende.slice(0, 10) + 'T' + t)}
className="w-24"
/>
</div>
{showBesucher && (
<div className="sm:shrink-0">
<div className="shrink-0">
<label className={labelCls}>Besucher</label>
<input
type="number"
@@ -259,7 +246,7 @@ 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-base focus:border-blue-500 focus:outline-none"
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"
/>
</div>
)}