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

feat(sails): support configuring available sails list in VesselForm and interactive sails selector in LogEntryEditor

Browse Source
This commit is contained in:
elpatron
2026-05-28 12:44:30 +02:00
parent 19082dcae1
commit e85beba2bc
5 changed files with 275 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.css
+122
View File
@@ -1516,3 +1516,125 @@ body:has(.theme-cupertino) {
gap: 16px;
width: 100%;
}
/* Sails List UI */
.sails-section {
grid-column: span 2;
border-top: 1px solid #1e293b;
padding-top: 20px;
margin-top: 10px;
}
.sails-section h3 {
font-size: 16px;
color: #fbbf24;
margin: 0 0 8px 0;
}
.sails-section p.help-text {
font-size: 13px;
color: #64748b;
margin: 0 0 12px 0;
}
.sails-badges-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.sail-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(30, 41, 59, 0.7);
border: 1px solid #334155;
color: #e2e8f0;
padding: 6px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 500;
}
.sail-badge button.remove-btn {
background: none;
border: none;
color: #94a3b8;
cursor: pointer;
display: flex;
align-items: center;
padding: 0;
margin: 0;
transition: color 0.2s ease;
}
.sail-badge button.remove-btn:hover {
color: #ef4444;
}
.no-sails-msg {
color: #64748b;
font-size: 14px;
font-style: italic;
}
.add-sail-form {
display: flex;
gap: 10px;
max-width: 400px;
}
/* Event Editor Interactive Sails Picker */
.sails-picker-container {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.sails-picker-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.sail-pill {
background: rgba(30, 41, 59, 0.5);
border: 1px solid #334155;
color: #94a3b8;
padding: 4px 10px;
border-radius: 15px;
font-size: 12px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
}
.sail-pill:hover {
border-color: #fbbf24;
color: #fbbf24;
}
.sail-pill.active {
background: rgba(251, 191, 36, 0.15);
border-color: #fbbf24;
color: #fbbf24;
}
.sail-pill.motor-pill {
border-color: #38bdf8;
color: #38bdf8;
}
.sail-pill.motor-pill:hover {
border-color: #7dd3fc;
color: #7dd3fc;
}
.sail-pill.motor-pill.active {
background: rgba(56, 189, 248, 0.15);
border-color: #38bdf8;
color: #38bdf8;
}
client/src/components/LogEntryEditor.tsx
+69 -1
View File
@@ -44,12 +44,13 @@ interface LogEvent {
}
export default function LogEntryEditor({ entryId, logbookId, onBack }: LogEntryEditorProps) {
const { t } = useTranslation()
const { t, i18n } = useTranslation()
const { showAlert } = useDialog()
// General details state
const [date, setDate] = useState('')
const [dayOfTravel, setDayOfTravel] = useState('')
const [yachtSails, setYachtSails] = useState<string[]>([])
const [departure, setDeparture] = useState('')
const [destination, setDestination] = useState('')
@@ -120,6 +121,27 @@ export default function LogEntryEditor({ entryId, logbookId, onBack }: LogEntryE
setFuelConsumption(cons >= 0 ? String(cons) : '0')
}, [fuelMorning, fuelRefilled, fuelEvening])
// Load Yacht Sails
useEffect(() => {
async function loadYachtSails() {
try {
const masterKey = getActiveMasterKey()
if (!masterKey) return
const yacht = await db.yachts.get(logbookId)
if (yacht) {
const decrypted = await decryptJson(yacht.encryptedData, yacht.iv, yacht.tag, masterKey)
if (decrypted && decrypted.sails && Array.isArray(decrypted.sails)) {
setYachtSails(decrypted.sails)
}
}
} catch (err) {
console.error('Failed to load yacht sails in editor:', err)
}
}
loadYachtSails()
}, [logbookId])
// Load entry details
useEffect(() => {
async function loadEntry() {
@@ -324,6 +346,33 @@ export default function LogEntryEditor({ entryId, logbookId, onBack }: LogEntryE
}
}
const defaultSails = i18n.language === 'de'
? ['Großsegel', 'Genua', 'Fock', 'Spinnaker', 'Gennaker']
: ['Mainsail', 'Genoa', 'Jib', 'Spinnaker', 'Gennaker']
const toggleSailOrMotor = (item: string) => {
let currentItems = evSailsOrMotor
.split(/\s*(?:\+|\bplus\b|,)\s*/i)
.map(s => s.trim())
.filter(Boolean)
if (currentItems.some(s => s.toLowerCase() === item.toLowerCase())) {
currentItems = currentItems.filter(s => s.toLowerCase() !== item.toLowerCase())
} else {
currentItems.push(item)
}
setEvSailsOrMotor(currentItems.join(' + '))
}
const isItemActive = (item: string) => {
const currentItems = evSailsOrMotor
.split(/\s*(?:\+|\bplus\b|,)\s*/i)
.map(s => s.trim().toLowerCase())
.filter(Boolean)
return currentItems.includes(item.toLowerCase())
}
const handleAddEvent = (e: React.FormEvent) => {
e.preventDefault()
if (!evTime) return
@@ -912,6 +961,25 @@ export default function LogEntryEditor({ entryId, logbookId, onBack }: LogEntryE
onChange={(e) => setEvSailsOrMotor(e.target.value)}
disabled={saving}
/>
<div className="sails-picker-container">
<div className="sails-picker-pills">
{(yachtSails.length > 0 ? yachtSails : defaultSails).map((sail) => (
<span
key={sail}
className={`sail-pill ${isItemActive(sail) ? 'active' : ''}`}
onClick={() => toggleSailOrMotor(sail)}
>
{sail}
</span>
))}
<span
className={`sail-pill motor-pill ${isItemActive(t('logs.motor_propulsion')) ? 'active' : ''}`}
onClick={() => toggleSailOrMotor(t('logs.motor_propulsion'))}
>
{t('logs.motor_propulsion')}
</span>
</div>
</div>
</div>
<div className="input-group">
client/src/components/VesselForm.tsx
+70 -2
View File
@@ -4,7 +4,7 @@ import { db } from '../services/db.js'
import { getActiveMasterKey } from '../services/auth.js'
import { encryptJson, decryptJson } from '../services/crypto.js'
import { syncLogbook } from '../services/sync.js'
import { Ship, Save, Check } from 'lucide-react'
import { Ship, Save, Check, Plus, X } from 'lucide-react'
interface VesselFormProps {
logbookId: string
@@ -20,6 +20,8 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
const [callSign, setCallSign] = useState('')
const [atis, setAtis] = useState('')
const [mmsi, setMmsi] = useState('')
const [sails, setSails] = useState<string[]>([])
const [newSailName, setNewSailName] = useState('')
const [loading, setLoading] = useState(false)
const [saving, setSaving] = useState(false)
@@ -48,6 +50,7 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
setCallSign(decrypted.callSign || '')
setAtis(decrypted.atis || '')
setMmsi(decrypted.mmsi || '')
setSails(decrypted.sails || [])
}
}
} catch (err: any) {
@@ -61,6 +64,18 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
loadVessel()
}, [logbookId])
const handleAddSail = () => {
const trimmed = newSailName.trim()
if (trimmed && !sails.includes(trimmed)) {
setSails([...sails, trimmed])
}
setNewSailName('')
}
const handleRemoveSail = (indexToRemove: number) => {
setSails(sails.filter((_, idx) => idx !== indexToRemove))
}
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setSaving(true)
@@ -79,7 +94,8 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
registrationNumber: registrationNumber.trim(),
callSign: callSign.trim(),
atis: atis.trim(),
mmsi: mmsi.trim()
mmsi: mmsi.trim(),
sails: sails
}
// E2E encrypt
@@ -226,6 +242,58 @@ export default function VesselForm({ logbookId }: VesselFormProps) {
disabled={saving}
/>
</div>
<div className="sails-section">
<h3>{t('vessel.sails_list')}</h3>
<p className="help-text">{t('vessel.sails_help')}</p>
<div className="sails-badges-grid">
{sails.length === 0 ? (
<span className="no-sails-msg">{t('vessel.no_sails')}</span>
) : (
sails.map((sail, idx) => (
<span key={idx} className="sail-badge">
{sail}
<button
type="button"
className="remove-btn"
onClick={() => handleRemoveSail(idx)}
disabled={saving}
>
<X size={14} />
</button>
</span>
))
)}
</div>
<div className="add-sail-form">
<input
type="text"
className="input-text"
placeholder={t('vessel.sail_name_placeholder')}
value={newSailName}
onChange={(e) => setNewSailName(e.target.value)}
disabled={saving}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleAddSail();
}
}}
/>
<button
type="button"
className="btn secondary"
onClick={handleAddSail}
disabled={saving || !newSailName.trim()}
style={{ width: 'auto' }}
>
<Plus size={16} />
{t('vessel.add_sail')}
</button>
</div>
</div>
</div>
<div className="form-actions">
client/src/i18n/locales/de.json
+7 -1
View File
@@ -41,7 +41,12 @@
"save": "Schiffsdaten speichern",
"saving": "Wird gespeichert...",
"saved": "Schiffsdaten erfolgreich gespeichert!",
"loading": "Schiffsdaten werden geladen..."
"loading": "Schiffsdaten werden geladen...",
"sails_list": "Besegelung (vorhandene Segel)",
"sails_help": "Tragen Sie hier die Segel ein, die an Eurem Schiff zur Verfügung stehen (z. B. Großsegel, Genua, Fock).",
"add_sail": "Segel hinzufügen",
"sail_name_placeholder": "z. B. Großsegel",
"no_sails": "Keine Segel hinterlegt."
},
"logs": {
"title": "Logbuch-Journal",
@@ -85,6 +90,7 @@
"event_wind_pressure": "Luftdruck (hPa)",
"event_heel": "Krängung (°)",
"event_sails": "Segelführung / Motor",
"motor_propulsion": "Maschinenfahrt",
"event_distance": "Distanz (sm)",
"export_csv": "CSV herunterladen",
"share_csv": "CSV teilen",
client/src/i18n/locales/en.json
+7 -1
View File
@@ -41,7 +41,12 @@
"save": "Save Vessel Data",
"saving": "Saving...",
"saved": "Vessel details saved successfully!",
"loading": "Loading vessel details..."
"loading": "Loading vessel details...",
"sails_list": "Sails (Available Sails)",
"sails_help": "List the sails available on your vessel (e.g. Mainsail, Genoa, Jib).",
"add_sail": "Add Sail",
"sail_name_placeholder": "e.g. Mainsail",
"no_sails": "No sails defined."
},
"logs": {
"title": "Logbook Journal",
@@ -85,6 +90,7 @@
"event_wind_pressure": "Barometer (hPa)",
"event_heel": "Heel Angle (°)",
"event_sails": "Sails / Motor Status",
"motor_propulsion": "Engine Propulsion",
"event_distance": "Distance (nm)",
"export_csv": "Download CSV",
"share_csv": "Share CSV",