elpatron/kapteins-daagbok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

feat: group freshwater, fuel, and greywater cards in collapsible Tanks section

Browse Source
This commit is contained in:
elpatron
2026-06-06 21:07:51 +02:00
parent e3cd89be5d
commit 9d2a19dbf8
6 changed files with 161 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/LogEntryEditor.tsx
+156 -127
View File
@@ -298,6 +298,7 @@ export default function LogEntryEditor({
const [eventsCollapsed, setEventsCollapsed] = useState(true) const [eventsCollapsed, setEventsCollapsed] = useState(true)
const [addEventFormCollapsed, setAddEventFormCollapsed] = useState(false) const [addEventFormCollapsed, setAddEventFormCollapsed] = useState(false)
const [tanksCollapsed, setTanksCollapsed] = useState(true)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
@@ -1718,141 +1719,169 @@ export default function LogEntryEditor({
</div> </div>
)} )}
{/* Section 2: Freshwater and Fuel Consumption */} {/* Section 2: Tanks (Freshwater, Fuel, and Greywater) */}
<div className="form-grid"> <div className="form-card">
{/* Freshwater card */} <div
<div className="form-card"> className="form-header mb-4 accordion-header"
<div className="form-header"> onClick={() => setTanksCollapsed(!tanksCollapsed)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
setTanksCollapsed(!tanksCollapsed)
}
}}
role="button"
aria-expanded={!tanksCollapsed}
tabIndex={0}
>
<div className="accordion-header-title">
<Compass size={20} className="form-icon" /> <Compass size={20} className="form-icon" />
<h3>{t('logs.freshwater')}</h3> <h3>{t('logs.tanks')}</h3>
</div>
<div className="consumption-grid">
<TankLiterInput
id="fw-morning"
label={t('logs.morning')}
value={fwMorning}
onChange={setFwMorning}
maxLiters={tankCapacities.freshwaterCapacityL}
disabled={saving || readOnly}
titleTooltip={tankCapacityTooltip}
/>
<TankLiterInput
id="fw-refilled"
label={t('logs.refilled')}
value={fwRefilled}
onChange={setFwRefilled}
maxLiters={fwRefilledMax}
disabled={saving || readOnly || fwRefilledNoCapacity}
titleTooltip={tankCapacityTooltip}
/>
<TankLiterInput
id="fw-evening"
label={t('logs.evening')}
value={fwEvening}
onChange={setFwEvening}
maxLiters={fwEveningMax}
disabled={saving || readOnly}
titleTooltip={tankCapacityTooltip}
/>
<div className="input-group">
<label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
<input
type="number"
className="input-text consumption-value"
value={fwConsumption}
readOnly
tabIndex={-1}
aria-readonly="true"
title={tankCapacityTooltip}
/>
</div>
</div> </div>
{tanksCollapsed ? (
<ChevronDown size={20} className="accordion-chevron" />
) : (
<ChevronUp size={20} className="accordion-chevron" />
)}
</div> </div>
{/* Fuel card */} {!tanksCollapsed && (
<div className="form-card"> <div className="form-grid" style={{ marginTop: '16px' }}>
<div className="form-header"> {/* Freshwater card */}
<Compass size={20} className="form-icon" /> <div className="form-card">
<h3>{t('logs.fuel')}</h3> <div className="form-header">
</div> <Compass size={20} className="form-icon" />
<div className="consumption-grid"> <h3>{t('logs.freshwater')}</h3>
<TankLiterInput </div>
id="fuel-morning" <div className="consumption-grid">
label={t('logs.morning')} <TankLiterInput
value={fuelMorning} id="fw-morning"
onChange={setFuelMorning} label={t('logs.morning')}
maxLiters={tankCapacities.fuelCapacityL} value={fwMorning}
disabled={saving || readOnly} onChange={setFwMorning}
titleTooltip={tankCapacityTooltip} maxLiters={tankCapacities.freshwaterCapacityL}
/> disabled={saving || readOnly}
<TankLiterInput titleTooltip={tankCapacityTooltip}
id="fuel-refilled" />
label={t('logs.refilled')} <TankLiterInput
value={fuelRefilled} id="fw-refilled"
onChange={setFuelRefilled} label={t('logs.refilled')}
maxLiters={fuelRefilledMax} value={fwRefilled}
disabled={saving || readOnly || fuelRefilledNoCapacity} onChange={setFwRefilled}
titleTooltip={tankCapacityTooltip} maxLiters={fwRefilledMax}
/> disabled={saving || readOnly || fwRefilledNoCapacity}
<TankLiterInput titleTooltip={tankCapacityTooltip}
id="fuel-evening" />
label={t('logs.evening')} <TankLiterInput
value={fuelEvening} id="fw-evening"
onChange={setFuelEvening} label={t('logs.evening')}
maxLiters={fuelEveningMax} value={fwEvening}
disabled={saving || readOnly} onChange={setFwEvening}
titleTooltip={tankCapacityTooltip} maxLiters={fwEveningMax}
/> disabled={saving || readOnly}
<div className="input-group"> titleTooltip={tankCapacityTooltip}
<label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label> />
<input <div className="input-group">
type="number" <label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
className="input-text consumption-value" <input
value={fuelConsumption} type="number"
readOnly className="input-text consumption-value"
tabIndex={-1} value={fwConsumption}
aria-readonly="true" readOnly
title={tankCapacityTooltip} tabIndex={-1}
/> aria-readonly="true"
title={tankCapacityTooltip}
/>
</div>
</div>
</div> </div>
<div className="input-group"> {/* Fuel card */}
<label title={tankCapacityTooltip}>{t('logs.fuel_per_motor_hour')}</label> <div className="form-card">
<input <div className="form-header">
type="text" <Compass size={20} className="form-icon" />
className="input-text consumption-value" <h3>{t('logs.fuel')}</h3>
value={ </div>
fuelPerMotorHour != null <div className="consumption-grid">
? `${formatFuelPerMotorHour(fuelPerMotorHour)} L/h` <TankLiterInput
: '—' id="fuel-morning"
} label={t('logs.morning')}
readOnly value={fuelMorning}
tabIndex={-1} onChange={setFuelMorning}
aria-readonly="true" maxLiters={tankCapacities.fuelCapacityL}
title={tankCapacityTooltip} disabled={saving || readOnly}
/> titleTooltip={tankCapacityTooltip}
/>
<TankLiterInput
id="fuel-refilled"
label={t('logs.refilled')}
value={fuelRefilled}
onChange={setFuelRefilled}
maxLiters={fuelRefilledMax}
disabled={saving || readOnly || fuelRefilledNoCapacity}
titleTooltip={tankCapacityTooltip}
/>
<TankLiterInput
id="fuel-evening"
label={t('logs.evening')}
value={fuelEvening}
onChange={setFuelEvening}
maxLiters={fuelEveningMax}
disabled={saving || readOnly}
titleTooltip={tankCapacityTooltip}
/>
<div className="input-group">
<label title={tankCapacityTooltip}>{t('logs.consumption')} (L)</label>
<input
type="number"
className="input-text consumption-value"
value={fuelConsumption}
readOnly
tabIndex={-1}
aria-readonly="true"
title={tankCapacityTooltip}
/>
</div>
<div className="input-group">
<label title={tankCapacityTooltip}>{t('logs.fuel_per_motor_hour')}</label>
<input
type="text"
className="input-text consumption-value"
value={
fuelPerMotorHour != null
? `${formatFuelPerMotorHour(fuelPerMotorHour)} L/h`
: '—'
}
readOnly
tabIndex={-1}
aria-readonly="true"
title={tankCapacityTooltip}
/>
</div>
</div>
</div>
{/* Greywater card */}
<div className="form-card">
<div className="form-header">
<Compass size={20} className="form-icon" />
<h3>{t('logs.greywater')}</h3>
</div>
<div className="consumption-grid">
<TankLiterInput
id="greywater-level"
label={t('logs.greywater_level')}
value={greywaterLevel}
onChange={setGreywaterLevel}
maxLiters={tankCapacities.greywaterCapacityL}
disabled={saving || readOnly}
titleTooltip={tankCapacityTooltip}
/>
</div>
</div> </div>
</div> </div>
</div> )}
{/* Greywater card */}
<div className="form-card">
<div className="form-header">
<Compass size={20} className="form-icon" />
<h3>{t('logs.greywater')}</h3>
</div>
<div className="consumption-grid">
<TankLiterInput
id="greywater-level"
label={t('logs.greywater_level')}
value={greywaterLevel}
onChange={setGreywaterLevel}
maxLiters={tankCapacities.greywaterCapacityL}
disabled={saving || readOnly}
titleTooltip={tankCapacityTooltip}
/>
</div>
</div>
</div> </div>
{/* Section 3: Event Journal Entries */} {/* Section 3: Event Journal Entries */}
client/src/i18n/locales/da.json
+1
View File
@@ -186,6 +186,7 @@
"departure": "Starthavn (rejse fra)", "departure": "Starthavn (rejse fra)",
"destination": "Destinationsport (til)", "destination": "Destinationsport (til)",
"route": "Rejse fra/til", "route": "Rejse fra/til",
"tanks": "Tanke",
"freshwater": "Ferskvand (liter)", "freshwater": "Ferskvand (liter)",
"fuel": "Treibstoff / Brændstof (liter)", "fuel": "Treibstoff / Brændstof (liter)",
"greywater": "Gråt vand (liter)", "greywater": "Gråt vand (liter)",
client/src/i18n/locales/de.json
+1
View File
@@ -186,6 +186,7 @@
"departure": "Start-Hafen (Reise von)", "departure": "Start-Hafen (Reise von)",
"destination": "Ziel-Hafen (nach)", "destination": "Ziel-Hafen (nach)",
"route": "Reise von/nach", "route": "Reise von/nach",
"tanks": "Tanks",
"freshwater": "Frischwasser (Liter)", "freshwater": "Frischwasser (Liter)",
"fuel": "Treibstoff / Fuel (Liter)", "fuel": "Treibstoff / Fuel (Liter)",
"greywater": "Grauwasser (Liter)", "greywater": "Grauwasser (Liter)",
client/src/i18n/locales/en.json
+1
View File
@@ -186,6 +186,7 @@
"departure": "Departure Port (von)", "departure": "Departure Port (von)",
"destination": "Destination Port (nach)", "destination": "Destination Port (nach)",
"route": "Route / Journey", "route": "Route / Journey",
"tanks": "Tanks",
"freshwater": "Freshwater (Liters)", "freshwater": "Freshwater (Liters)",
"fuel": "Fuel (Liters)", "fuel": "Fuel (Liters)",
"greywater": "Greywater (Liters)", "greywater": "Greywater (Liters)",
client/src/i18n/locales/nb.json
+1
View File
@@ -186,6 +186,7 @@
"departure": "Starthavn (reise fra)", "departure": "Starthavn (reise fra)",
"destination": "Destinasjonsport (til)", "destination": "Destinasjonsport (til)",
"route": "Reise fra/til", "route": "Reise fra/til",
"tanks": "Tanker",
"freshwater": "Ferskvann (liter)", "freshwater": "Ferskvann (liter)",
"fuel": "Drivstoff / Drivstoff (liter)", "fuel": "Drivstoff / Drivstoff (liter)",
"greywater": "Gråvann (liter)", "greywater": "Gråvann (liter)",
client/src/i18n/locales/sv.json
+1
View File
@@ -186,6 +186,7 @@
"departure": "Starthamn (resa från)", "departure": "Starthamn (resa från)",
"destination": "Destinationsport (till)", "destination": "Destinationsport (till)",
"route": "Resa från/till", "route": "Resa från/till",
"tanks": "Tankar",
"freshwater": "Färskvatten (liter)", "freshwater": "Färskvatten (liter)",
"fuel": "Treibstoff / Bränsle (liter)", "fuel": "Treibstoff / Bränsle (liter)",
"greywater": "Gråvatten (liter)", "greywater": "Gråvatten (liter)",