v1.4.0: Sonderführung, Zeiterfassung, Enter-Navigation, Objektsuche
- 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:
+5
-5
@@ -43,11 +43,11 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white py-2 px-2 sm:py-4 sm:px-4 print:p-0">
|
||||
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-6 bg-[#EEF4FF] print:max-w-none print:border-0 print:p-0 print:bg-white">
|
||||
<div className="min-h-screen bg-white py-1 px-2 sm:py-2 sm:px-4 print:p-0">
|
||||
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-4 bg-[#EEF4FF] print:max-w-none print:border-0 print:p-0 print:bg-white">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-start sm:items-center mb-4 gap-2 print:hidden">
|
||||
<div className="flex justify-between items-start sm:items-center mb-3 gap-2 print:hidden">
|
||||
<h1 className="text-xl sm:text-2xl font-bold leading-tight">
|
||||
<span className="hidden sm:inline">Sternwarte-Welzheim </span>
|
||||
Logbuch für {activeKuppel}-Kuppel
|
||||
@@ -63,7 +63,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Kuppel-Tabs */}
|
||||
<div className="flex gap-1 mb-4 border-b-2 border-gray-300 overflow-x-auto print:hidden">
|
||||
<div className="flex gap-1 mb-3 border-b-2 border-gray-300 overflow-x-auto print:hidden">
|
||||
{KUPPELN.map((k) => (
|
||||
<button
|
||||
key={k}
|
||||
@@ -81,7 +81,7 @@ export default function MainClient({ kuerzel, beoId, beoName }: Props) {
|
||||
</div>
|
||||
|
||||
{/* Eingabe/Liste-Tabs */}
|
||||
<div className="flex gap-1 mb-4 border-b border-gray-200 print:hidden">
|
||||
<div className="flex gap-1 mb-3 border-b border-gray-200 print:hidden">
|
||||
{(['eingabe', 'liste'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
|
||||
@@ -12,14 +12,13 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
|
||||
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { Kuppel, ArtFuehrung, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
|
||||
const { Kuppel, ArtFuehrung, SonderName, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
|
||||
|
||||
await getPool().execute(
|
||||
`UPDATE logbuch SET Kuppel=?, ArtFuehrung=?, Beginn=?, Ende=?, Besucher=?,
|
||||
Bemerkungen=?, WetterTemp=?, WetterFeuchte=?, WetterDruck=?
|
||||
WHERE ID=?`,
|
||||
'UPDATE logbuch SET Kuppel=?, ArtFuehrung=?, SonderName=?, Beginn=?, Ende=?, Besucher=?,' +
|
||||
' Bemerkungen=?, WetterTemp=?, WetterFeuchte=?, WetterDruck=? WHERE ID=?',
|
||||
[
|
||||
Kuppel, ArtFuehrung, Beginn, Ende,
|
||||
Kuppel, ArtFuehrung, SonderName || null, Beginn, Ende,
|
||||
Besucher ?? 0,
|
||||
Bemerkungen?.slice(0, 500) || null,
|
||||
Wetter?.temp ?? null,
|
||||
|
||||
@@ -8,7 +8,7 @@ const LIST_SQL =
|
||||
' l.ID, l.Kuppel, l.ArtFuehrung,' +
|
||||
" DATE_FORMAT(l.Beginn, '%Y-%m-%dT%H:%i') AS Beginn," +
|
||||
" DATE_FORMAT(l.Ende, '%Y-%m-%dT%H:%i') AS Ende," +
|
||||
' l.Besucher, l.Bemerkungen,' +
|
||||
' l.Besucher, l.Bemerkungen, l.SonderName,' +
|
||||
' l.WetterTemp, l.WetterFeuchte, l.WetterDruck,' +
|
||||
' l.created_by, l.created_at,' +
|
||||
" GROUP_CONCAT(DISTINCT bk.kuerzel ORDER BY bk.kuerzel SEPARATOR ', ') AS BEOs," +
|
||||
@@ -41,14 +41,14 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { Kuppel, ArtFuehrung, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
|
||||
const { Kuppel, ArtFuehrung, SonderName, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
|
||||
|
||||
const pool = getPool();
|
||||
const [result] = await pool.execute(
|
||||
'INSERT INTO logbuch (Kuppel, ArtFuehrung, Beginn, Ende, Besucher, Bemerkungen, WetterTemp, WetterFeuchte, WetterDruck, created_by)' +
|
||||
' VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
'INSERT INTO logbuch (Kuppel, ArtFuehrung, SonderName, Beginn, Ende, Besucher, Bemerkungen, WetterTemp, WetterFeuchte, WetterDruck, created_by)' +
|
||||
' VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
|
||||
[
|
||||
Kuppel, ArtFuehrung, Beginn, Ende,
|
||||
Kuppel, ArtFuehrung, SonderName || null, Beginn, Ende,
|
||||
Besucher ?? 0,
|
||||
Bemerkungen?.slice(0, 500) || null,
|
||||
Wetter?.temp ?? null,
|
||||
|
||||
@@ -13,9 +13,10 @@ interface Props {
|
||||
placeholder: string;
|
||||
onChange: (value: string) => void;
|
||||
keepOpen?: boolean;
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export default function CustomSelect({ options, placeholder, onChange, keepOpen = false }: Props) {
|
||||
export default function CustomSelect({ options, placeholder, onChange, keepOpen = false, id }: Props) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
@@ -37,9 +38,10 @@ export default function CustomSelect({ options, placeholder, onChange, keepOpen
|
||||
return (
|
||||
<div ref={ref} className="relative">
|
||||
<button
|
||||
id={id}
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="w-full flex items-center justify-between px-4 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-full flex items-center justify-between 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"
|
||||
>
|
||||
<span>{placeholder}</span>
|
||||
<svg
|
||||
|
||||
+67
-46
@@ -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>
|
||||
|
||||
@@ -105,7 +105,10 @@ export default function LogbuchList({ kuppel, refreshKey, onEdit, limit = 20, co
|
||||
<div>{formatTime(e.Ende)}</div>
|
||||
</td>
|
||||
)}
|
||||
<td className={cell}>{e.ArtFuehrung}</td>
|
||||
<td className={cell}>
|
||||
<div>{e.ArtFuehrung}</div>
|
||||
{e.SonderName && <div className="text-xs text-gray-500">{e.SonderName}</div>}
|
||||
</td>
|
||||
<td className={`${cell} text-center`}>{e.Besucher || ''}</td>
|
||||
<td className={cell}>{e.BEOs || '—'}</td>
|
||||
<td className={cell}>{e.Objekte || '—'}</td>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import type { ObjektOption, SelectedObjekt } from '@/types/logbuch';
|
||||
import CustomSelect from './CustomSelect';
|
||||
|
||||
interface Props {
|
||||
selected: SelectedObjekt[];
|
||||
@@ -11,8 +10,11 @@ interface Props {
|
||||
|
||||
export default function ObjektSelector({ selected, onChange }: Props) {
|
||||
const [all, setAll] = useState<ObjektOption[]>([]);
|
||||
const [search, setSearch] = useState('');
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
const [newName, setNewName] = useState('');
|
||||
const [showNewInput, setShowNewInput] = useState(false);
|
||||
const wrapperRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/objekte')
|
||||
@@ -21,14 +23,26 @@ export default function ObjektSelector({ selected, onChange }: Props) {
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleOutside(e: MouseEvent) {
|
||||
if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
}
|
||||
if (dropdownOpen) document.addEventListener('mousedown', handleOutside);
|
||||
return () => document.removeEventListener('mousedown', handleOutside);
|
||||
}, [dropdownOpen]);
|
||||
|
||||
const selectedNames = new Set(selected.map((o) => o.Name.toLowerCase()));
|
||||
const available = all.filter((o) => !selectedNames.has(o.Name.toLowerCase()));
|
||||
const filtered = search
|
||||
? available.filter((o) => o.Name.toLowerCase().startsWith(search.toLowerCase()))
|
||||
: available;
|
||||
|
||||
function add(value: string) {
|
||||
const obj = all.find((o) => o.ID === parseInt(value));
|
||||
if (obj && !selectedNames.has(obj.Name.toLowerCase())) {
|
||||
onChange([...selected, { ID: obj.ID, Name: obj.Name }]);
|
||||
}
|
||||
function add(obj: ObjektOption) {
|
||||
onChange([...selected, { ID: obj.ID, Name: obj.Name }]);
|
||||
setSearch('');
|
||||
setDropdownOpen(false);
|
||||
}
|
||||
|
||||
function addNew() {
|
||||
@@ -66,19 +80,35 @@ export default function ObjektSelector({ selected, onChange }: Props) {
|
||||
|
||||
<div className="flex gap-2">
|
||||
{available.length > 0 && (
|
||||
<div className="flex-1">
|
||||
<CustomSelect
|
||||
placeholder="+ Objekte hinzufügen"
|
||||
options={available.map((o) => ({ value: String(o.ID), label: o.Name }))}
|
||||
onChange={add}
|
||||
keepOpen
|
||||
<div ref={wrapperRef} className="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setDropdownOpen(true); }}
|
||||
onFocus={() => setDropdownOpen(true)}
|
||||
placeholder="Objekt suchen..."
|
||||
className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-900 focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
{dropdownOpen && filtered.length > 0 && (
|
||||
<div className="absolute z-50 left-0 right-0 mt-1 bg-white border-2 border-gray-400 rounded-lg shadow-lg max-h-60 overflow-y-auto">
|
||||
{filtered.map((o) => (
|
||||
<button
|
||||
key={o.ID}
|
||||
type="button"
|
||||
onClick={() => add(o)}
|
||||
className="w-full text-left px-4 py-2 text-sm text-gray-900 hover:bg-blue-50 active:bg-blue-100 border-b border-gray-100 last:border-0"
|
||||
>
|
||||
{o.Name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewInput((v) => !v)}
|
||||
className="px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-base text-gray-700 hover:bg-gray-50 whitespace-nowrap"
|
||||
className="px-4 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm text-gray-700 hover:bg-gray-50 whitespace-nowrap"
|
||||
>
|
||||
+ Neu
|
||||
</button>
|
||||
@@ -92,20 +122,20 @@ export default function ObjektSelector({ selected, onChange }: Props) {
|
||||
onChange={(e) => setNewName(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addNew(); } }}
|
||||
placeholder="Objektname eingeben"
|
||||
className="flex-1 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-base focus:border-blue-500 focus:outline-none"
|
||||
className="flex-1 px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
|
||||
autoFocus
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addNew}
|
||||
className="px-4 py-2 bg-green-600 text-white text-base rounded-lg hover:bg-green-700"
|
||||
className="px-4 py-2 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700"
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setShowNewInput(false); setNewName(''); }}
|
||||
className="px-4 py-2 bg-gray-200 text-gray-700 text-base rounded-lg hover:bg-gray-300"
|
||||
className="px-4 py-2 bg-gray-200 text-gray-700 text-sm rounded-lg hover:bg-gray-300"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
value: string; // "HH:MM"
|
||||
onChange: (value: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function isValid(t: string): boolean {
|
||||
if (!/^\d{1,2}:\d{2}$/.test(t)) return false;
|
||||
const [h, m] = t.split(':').map(Number);
|
||||
return h >= 0 && h <= 23 && m >= 0 && m <= 59;
|
||||
}
|
||||
|
||||
function normalize(t: string): string {
|
||||
const [h, m] = t.split(':').map(Number);
|
||||
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export default function TimeInput({ value, onChange, className = '' }: Props) {
|
||||
const [local, setLocal] = useState(value);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setLocal(value);
|
||||
setError(false);
|
||||
}, [value]);
|
||||
|
||||
function handleBlur() {
|
||||
if (isValid(local)) {
|
||||
const norm = normalize(local);
|
||||
setLocal(norm);
|
||||
setError(false);
|
||||
onChange(norm);
|
||||
} else {
|
||||
setError(true);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
<input
|
||||
type="text"
|
||||
value={local}
|
||||
onChange={(e) => { setLocal(e.target.value); setError(false); }}
|
||||
onBlur={handleBlur}
|
||||
placeholder="HH:MM"
|
||||
className={`w-full px-2 py-1 border-2 rounded-lg bg-white text-sm text-gray-900 font-mono text-center focus:outline-none ${
|
||||
error ? 'border-red-500 focus:border-red-500' : 'border-gray-400 focus:border-blue-500'
|
||||
}`}
|
||||
/>
|
||||
{error && (
|
||||
<p className="absolute left-0 top-full mt-0.5 text-xs text-red-600 whitespace-nowrap z-10">
|
||||
Ungültig (00:00 – 23:59)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -47,6 +47,7 @@ export interface LogbuchEintrag {
|
||||
ID: number;
|
||||
Kuppel: Kuppel;
|
||||
ArtFuehrung: ArtFuehrung;
|
||||
SonderName: string | null;
|
||||
Beginn: string;
|
||||
Ende: string;
|
||||
Besucher: number;
|
||||
|
||||
Reference in New Issue
Block a user