Various UX improvements and bug fixes
- Fix mustChangePassword session flag for users with pw=NULL - Add PrF (Private Führung) as new ArtFuehrung type - Split datetime-local into separate date + TimePicker5 (5-min steps, auto-repeat) - Responsive Beginn/Ende layout: stacked on mobile, inline on desktop - Sort BEOs alphabetically by Kürzel in selector - Title shows active kuppel; hide user display in header - Selected BEOs show Kürzel only (name stays in dropdown) - Session timeout reduced to 1 hour - Add CLAUDE.md Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,6 +6,7 @@ import { ARTEN, ARTEN_MAP } from '@/types/logbuch';
|
||||
import BeoSelector from './BeoSelector';
|
||||
import ObjektSelector from './ObjektSelector';
|
||||
import CustomSelect from './CustomSelect';
|
||||
import TimePicker5 from './TimePicker5';
|
||||
|
||||
interface Props {
|
||||
kuppel: Kuppel;
|
||||
@@ -19,24 +20,39 @@ function toLocalDatetimeValue(isoOrDatetime: string): string {
|
||||
return isoOrDatetime.slice(0, 16);
|
||||
}
|
||||
|
||||
function snapTo15(value: string): string {
|
||||
function snapTo5(value: string): string {
|
||||
if (!value) return value;
|
||||
const d = new Date(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;
|
||||
const rem = d.getMinutes() % 15;
|
||||
if (rem !== 0) {
|
||||
d.setMinutes(d.getMinutes() + (15 - rem));
|
||||
d.setSeconds(0);
|
||||
}
|
||||
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 snapTo15(raw);
|
||||
return snapTo5(raw);
|
||||
}
|
||||
|
||||
const NO_OBJEKTE_ARTEN: ArtFuehrung[] = ['BEOS', 'TD'];
|
||||
@@ -188,32 +204,51 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Beginn / Ende / Besucher — eine Zeile */}
|
||||
<div className="flex flex-wrap gap-3 items-end">
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* 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>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={beginn}
|
||||
onChange={(e) => setBeginn(snapTo15(e.target.value))}
|
||||
required
|
||||
step={900}
|
||||
className="w-full px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<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 focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<TimePicker5
|
||||
value={beginn.slice(11, 16)}
|
||||
onChange={(t) => setBeginn(beginn.slice(0, 10) + 'T' + t)}
|
||||
className="w-24"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="w-full sm:flex-1">
|
||||
<label className={labelCls}>Ende</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={ende}
|
||||
onChange={(e) => setEnde(snapTo15(e.target.value))}
|
||||
required
|
||||
step={900}
|
||||
className="w-full px-2 py-2 border-2 border-gray-400 rounded-lg bg-white text-sm focus:border-blue-500 focus:outline-none"
|
||||
/>
|
||||
<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 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>
|
||||
{showBesucher && (
|
||||
<div className="shrink-0">
|
||||
<div className="sm:shrink-0">
|
||||
<label className={labelCls}>Besucher</label>
|
||||
<input
|
||||
type="number"
|
||||
|
||||
Reference in New Issue
Block a user