fix(logs): 24h-Uhrzeit per Dropdown und konsistentes html lang
Ersetzt natives type=time (AM/PM je nach System) durch Stunde/Minute-Auswahl, wandelt 12h-Werte beim Laden um und stellt html lang auf de/en zurück. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
import { useId, useMemo } from 'react'
|
||||
import { joinTimeHHMM, splitTimeHHMM } from '../utils/logEntryPayload.js'
|
||||
|
||||
const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'))
|
||||
const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
|
||||
|
||||
interface EventTimeInput24hProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
disabled?: boolean
|
||||
'aria-label'?: string
|
||||
}
|
||||
|
||||
export default function EventTimeInput24h({
|
||||
value,
|
||||
onChange,
|
||||
disabled = false,
|
||||
'aria-label': ariaLabel
|
||||
}: EventTimeInput24hProps) {
|
||||
const baseId = useId()
|
||||
const { hours, minutes } = useMemo(() => splitTimeHHMM(value), [value])
|
||||
|
||||
return (
|
||||
<div className="time-input-24h">
|
||||
<select
|
||||
id={`${baseId}-hours`}
|
||||
className="input-text time-input-24h__select"
|
||||
value={hours}
|
||||
onChange={(e) => onChange(joinTimeHHMM(e.target.value, minutes))}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel ? `${ariaLabel} (h)` : undefined}
|
||||
>
|
||||
{HOURS.map((hour) => (
|
||||
<option key={hour} value={hour}>
|
||||
{hour}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="time-input-24h__sep" aria-hidden="true">
|
||||
:
|
||||
</span>
|
||||
<select
|
||||
id={`${baseId}-minutes`}
|
||||
className="input-text time-input-24h__select"
|
||||
value={minutes}
|
||||
onChange={(e) => onChange(joinTimeHHMM(hours, e.target.value))}
|
||||
disabled={disabled}
|
||||
aria-label={ariaLabel ? `${ariaLabel} (min)` : undefined}
|
||||
>
|
||||
{MINUTES.map((minute) => (
|
||||
<option key={minute} value={minute}>
|
||||
{minute}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -22,8 +22,8 @@ import {
|
||||
hasAnySignature
|
||||
} from '../utils/signatures.js'
|
||||
import type { SignatureValue } from '../types/signatures.js'
|
||||
import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, logEventsEqual, currentLocalTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
|
||||
import { resolveIntlLocale } from '../utils/dateTimeFormat.js'
|
||||
import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, logEventsEqual, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
|
||||
import EventTimeInput24h from './EventTimeInput24h.tsx'
|
||||
import { hashEntryForSigning } from '../utils/entryCanonicalHash.js'
|
||||
import { signLogEntry } from '../services/entrySigning.js'
|
||||
import { getLogbookAccess } from '../services/logbookAccess.js'
|
||||
@@ -927,7 +927,7 @@ export default function LogEntryEditor({
|
||||
|
||||
const handleSaveEvent = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (readOnly || !evTime) return
|
||||
if (readOnly || !isValidTimeHHMM(evTime)) return
|
||||
|
||||
const eventData = buildEventFromForm()
|
||||
const isEdit = editingEventIndex !== null
|
||||
@@ -1369,13 +1369,11 @@ export default function LogEntryEditor({
|
||||
<Clock size={12} style={{ display: 'inline', marginRight: 4 }} />
|
||||
{t('logs.event_time')} *
|
||||
</label>
|
||||
<input
|
||||
type="time"
|
||||
className="input-text"
|
||||
lang={resolveIntlLocale(i18n.language)}
|
||||
<EventTimeInput24h
|
||||
value={evTime}
|
||||
onChange={(e) => setEvTime(e.target.value)}
|
||||
onChange={setEvTime}
|
||||
disabled={saving}
|
||||
aria-label={t('logs.event_time')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1613,7 +1611,7 @@ export default function LogEntryEditor({
|
||||
type="button"
|
||||
className="btn secondary"
|
||||
onClick={handleSaveEvent}
|
||||
disabled={saving || !evTime}
|
||||
disabled={saving || !isValidTimeHHMM(evTime)}
|
||||
style={{ width: 'auto', padding: '10px 20px', display: 'flex' }}
|
||||
>
|
||||
{editingEventIndex !== null ? <Save size={16} /> : <Plus size={16} />}
|
||||
|
||||
Reference in New Issue
Block a user