feat(logs): Kompass-Dial für Kurs- und Windeingabe
Ersetzt Textfelder für MgK, rwK und Wind durch einen mobilen Kompass-Ring, normalisiert Kurswinkel beim Speichern und führt Vitest mit Regressionstests für html lang ein. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -154,6 +154,176 @@ select.input-text {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.course-dial-section {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.course-dial-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.course-dial-tab {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--app-border-subtle);
|
||||
background: var(--app-btn-secondary-bg);
|
||||
color: var(--app-text-muted);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.course-dial-tab.is-active {
|
||||
background: var(--app-accent-bg);
|
||||
border-color: var(--app-accent-border);
|
||||
color: var(--app-accent-light);
|
||||
}
|
||||
|
||||
.course-dial-tab:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.course-dial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
max-width: 260px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.course-dial--sm {
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.course-dial--disabled {
|
||||
opacity: 0.65;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.course-dial__step-toolbar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.course-dial__step-btn {
|
||||
flex: 1;
|
||||
padding: 6px 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--app-border-subtle);
|
||||
background: var(--app-surface-alt);
|
||||
color: var(--app-text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.course-dial__step-btn.is-active {
|
||||
border-color: var(--app-accent-border);
|
||||
background: var(--app-accent-bg);
|
||||
color: var(--app-accent-light);
|
||||
}
|
||||
|
||||
.course-dial__ring-wrap {
|
||||
width: 100%;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.course-dial__svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.course-dial__track {
|
||||
fill: none;
|
||||
stroke: var(--app-border);
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.course-dial__tick {
|
||||
stroke: var(--app-text-subtle);
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.course-dial__label {
|
||||
fill: var(--app-text-muted);
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.course-dial__needle line {
|
||||
stroke: var(--app-accent-light);
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.course-dial__needle circle {
|
||||
fill: var(--app-accent-light);
|
||||
}
|
||||
|
||||
.course-dial__center {
|
||||
fill: var(--app-text);
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.course-dial__hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--app-text-muted);
|
||||
text-align: center;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.course-dial__input {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.course-dial__mode-toggle {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--app-accent-light);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.course-dial__needle {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.course-dial {
|
||||
max-width: min(72vw, 220px);
|
||||
}
|
||||
|
||||
.course-dial--sm {
|
||||
max-width: min(68vw, 200px);
|
||||
}
|
||||
|
||||
.course-dial__label {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.themed-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
@@ -0,0 +1,259 @@
|
||||
import { useCallback, useId, useMemo, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
type CourseOutputMode,
|
||||
type CourseStep,
|
||||
dialDegreesToStorageValue,
|
||||
formatCourseAngle,
|
||||
formatCourseDisplay,
|
||||
isCardinalDirection,
|
||||
loadCourseDialStep,
|
||||
parseCourseAngle,
|
||||
pointerAngleToDegrees,
|
||||
resolveCourseOutputMode,
|
||||
saveCourseDialStep,
|
||||
snapDegrees,
|
||||
valueToDialDegrees
|
||||
} from '../utils/courseAngle.js'
|
||||
|
||||
interface CourseDialInputProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
disabled?: boolean
|
||||
step?: CourseStep
|
||||
allowCardinal?: boolean
|
||||
displayMode?: 'degrees' | 'cardinal' | 'auto'
|
||||
size?: 'md' | 'sm'
|
||||
'aria-label': string
|
||||
id?: string
|
||||
}
|
||||
|
||||
const TICK_DEGREES = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
|
||||
|
||||
function polarPoint(degrees: number, radius: number): { x: number; y: number } {
|
||||
const rad = (degrees * Math.PI) / 180
|
||||
return {
|
||||
x: 100 + Math.sin(rad) * radius,
|
||||
y: 100 - Math.cos(rad) * radius
|
||||
}
|
||||
}
|
||||
|
||||
export default function CourseDialInput({
|
||||
value,
|
||||
onChange,
|
||||
disabled = false,
|
||||
step: stepProp,
|
||||
allowCardinal = false,
|
||||
displayMode = 'degrees',
|
||||
size = 'md',
|
||||
'aria-label': ariaLabel,
|
||||
id: idProp
|
||||
}: CourseDialInputProps) {
|
||||
const { t } = useTranslation()
|
||||
const generatedId = useId()
|
||||
const inputId = idProp ?? `${generatedId}-input`
|
||||
const svgRef = useRef<SVGSVGElement>(null)
|
||||
const [step, setStep] = useState<CourseStep>(() => stepProp ?? loadCourseDialStep())
|
||||
const [inputDraft, setInputDraft] = useState<string | null>(null)
|
||||
const [outputModeOverride, setOutputModeOverride] = useState<CourseOutputMode | null>(null)
|
||||
|
||||
const effectiveStep = stepProp ?? step
|
||||
const outputMode =
|
||||
outputModeOverride ??
|
||||
resolveCourseOutputMode(value, displayMode, allowCardinal)
|
||||
|
||||
const dialDegrees = useMemo(
|
||||
() => snapDegrees(valueToDialDegrees(value, allowCardinal), effectiveStep),
|
||||
[value, allowCardinal, effectiveStep]
|
||||
)
|
||||
|
||||
const centerLabel = useMemo(
|
||||
() => formatCourseDisplay(value, allowCardinal),
|
||||
[value, allowCardinal]
|
||||
)
|
||||
|
||||
const applyDegrees = useCallback(
|
||||
(degrees: number) => {
|
||||
onChange(dialDegreesToStorageValue(degrees, outputMode, effectiveStep))
|
||||
setInputDraft(null)
|
||||
},
|
||||
[onChange, outputMode, effectiveStep]
|
||||
)
|
||||
|
||||
const updateFromPointer = useCallback(
|
||||
(clientX: number, clientY: number) => {
|
||||
const svg = svgRef.current
|
||||
if (!svg || disabled) return
|
||||
const rect = svg.getBoundingClientRect()
|
||||
const cx = rect.left + rect.width / 2
|
||||
const cy = rect.top + rect.height / 2
|
||||
const raw = pointerAngleToDegrees(clientX, clientY, cx, cy)
|
||||
applyDegrees(raw)
|
||||
},
|
||||
[applyDegrees, disabled]
|
||||
)
|
||||
|
||||
const handlePointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
|
||||
if (disabled) return
|
||||
e.preventDefault()
|
||||
e.currentTarget.setPointerCapture(e.pointerId)
|
||||
updateFromPointer(e.clientX, e.clientY)
|
||||
}
|
||||
|
||||
const handlePointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
|
||||
if (disabled || !e.currentTarget.hasPointerCapture(e.pointerId)) return
|
||||
updateFromPointer(e.clientX, e.clientY)
|
||||
}
|
||||
|
||||
const handlePointerUp = (e: React.PointerEvent<SVGSVGElement>) => {
|
||||
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
|
||||
e.currentTarget.releasePointerCapture(e.pointerId)
|
||||
}
|
||||
}
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setInputDraft(e.target.value)
|
||||
}
|
||||
|
||||
const commitInput = () => {
|
||||
const draft = (inputDraft ?? value).trim()
|
||||
setInputDraft(null)
|
||||
if (!draft) {
|
||||
onChange('')
|
||||
return
|
||||
}
|
||||
if (allowCardinal && outputMode === 'cardinal' && isCardinalDirection(draft)) {
|
||||
onChange(draft.toUpperCase())
|
||||
return
|
||||
}
|
||||
const parsed = parseCourseAngle(draft)
|
||||
if (parsed === null) return
|
||||
onChange(formatCourseAngle(snapDegrees(parsed, effectiveStep)))
|
||||
}
|
||||
|
||||
const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
commitInput()
|
||||
return
|
||||
}
|
||||
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
const base = parseCourseAngle(value) ?? dialDegrees
|
||||
const delta = e.key === 'ArrowUp' ? effectiveStep : -effectiveStep
|
||||
applyDegrees(base + delta)
|
||||
}
|
||||
}
|
||||
|
||||
const handleStepChange = (next: CourseStep) => {
|
||||
if (stepProp !== undefined) return
|
||||
setStep(next)
|
||||
saveCourseDialStep(next)
|
||||
const parsed = parseCourseAngle(value)
|
||||
if (parsed !== null) {
|
||||
onChange(formatCourseAngle(snapDegrees(parsed, next)))
|
||||
}
|
||||
}
|
||||
|
||||
const toggleOutputMode = () => {
|
||||
const next: CourseOutputMode = outputMode === 'cardinal' ? 'degrees' : 'cardinal'
|
||||
setOutputModeOverride(next)
|
||||
const deg = valueToDialDegrees(value, allowCardinal)
|
||||
onChange(dialDegreesToStorageValue(deg, next, effectiveStep))
|
||||
}
|
||||
|
||||
const inputValue = inputDraft ?? value
|
||||
const sliderNow = dialDegrees
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`course-dial course-dial--${size}${disabled ? ' course-dial--disabled' : ''}`}
|
||||
>
|
||||
{!stepProp && (
|
||||
<div className="course-dial__step-toolbar" role="group" aria-label={ariaLabel}>
|
||||
{([1, 5, 10] as const).map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
className={`course-dial__step-btn${effectiveStep === s ? ' is-active' : ''}`}
|
||||
onClick={() => handleStepChange(s)}
|
||||
disabled={disabled}
|
||||
aria-pressed={effectiveStep === s}
|
||||
>
|
||||
{s === 1 ? t('logs.course_step_fine') : s === 5 ? t('logs.course_step_medium') : t('logs.course_step_coarse')}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className="course-dial__ring-wrap"
|
||||
role="slider"
|
||||
aria-label={ariaLabel}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={360}
|
||||
aria-valuenow={sliderNow}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className="course-dial__svg"
|
||||
viewBox="0 0 200 200"
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerUp}
|
||||
onPointerCancel={handlePointerUp}
|
||||
>
|
||||
<circle className="course-dial__track" cx="100" cy="100" r="88" />
|
||||
{TICK_DEGREES.map((deg) => {
|
||||
const inner = polarPoint(deg, 76)
|
||||
const outer = polarPoint(deg, 88)
|
||||
const label = polarPoint(deg, 64)
|
||||
return (
|
||||
<g key={deg}>
|
||||
<line className="course-dial__tick" x1={inner.x} y1={inner.y} x2={outer.x} y2={outer.y} />
|
||||
<text className="course-dial__label" x={label.x} y={label.y} textAnchor="middle" dominantBaseline="middle">
|
||||
{String(deg).padStart(3, '0')}
|
||||
</text>
|
||||
</g>
|
||||
)
|
||||
})}
|
||||
<g className="course-dial__needle" transform={`rotate(${dialDegrees} 100 100)`}>
|
||||
<line x1="100" y1="100" x2="100" y2="28" />
|
||||
<circle cx="100" cy="100" r="6" />
|
||||
</g>
|
||||
<text className="course-dial__center" x="100" y="100" textAnchor="middle" dominantBaseline="middle">
|
||||
{centerLabel}
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="course-dial__hint">{t('logs.course_dial_hint')}</p>
|
||||
|
||||
<input
|
||||
id={inputId}
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
className="input-text course-dial__input"
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
onBlur={commitInput}
|
||||
onKeyDown={handleInputKeyDown}
|
||||
disabled={disabled}
|
||||
placeholder={outputMode === 'cardinal' ? 'NW' : '180'}
|
||||
aria-label={ariaLabel}
|
||||
/>
|
||||
|
||||
{allowCardinal && displayMode === 'auto' && (
|
||||
<button
|
||||
type="button"
|
||||
className="course-dial__mode-toggle"
|
||||
onClick={toggleOutputMode}
|
||||
disabled={disabled}
|
||||
>
|
||||
{outputMode === 'cardinal' ? t('logs.wind_mode_degrees') : t('logs.wind_mode_cardinal')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -24,6 +24,8 @@ import {
|
||||
import type { SignatureValue } from '../types/signatures.js'
|
||||
import { buildLogEntryPayload, sortLogEventsByTime, normalizeLogEvent, logEventsEqual, currentLocalTimeHHMM, isValidTimeHHMM, type LogEventPayload } from '../utils/logEntryPayload.js'
|
||||
import EventTimeInput24h from './EventTimeInput24h.tsx'
|
||||
import CourseDialInput from './CourseDialInput.tsx'
|
||||
import { degreesToCardinal } from '../utils/courseAngle.js'
|
||||
import { hashEntryForSigning } from '../utils/entryCanonicalHash.js'
|
||||
import { signLogEntry } from '../services/entrySigning.js'
|
||||
import { getLogbookAccess } from '../services/logbookAccess.js'
|
||||
@@ -180,6 +182,7 @@ export default function LogEntryEditor({
|
||||
const [evGpsLng, setEvGpsLng] = useState('')
|
||||
const [evRemarks, setEvRemarks] = useState('')
|
||||
const [evLocationName, setEvLocationName] = useState('')
|
||||
const [activeCourseTab, setActiveCourseTab] = useState<'mgk' | 'rwk'>('mgk')
|
||||
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
@@ -814,10 +817,7 @@ export default function LogEntryEditor({
|
||||
|
||||
// Calculate wind compass direction sector
|
||||
if (wind?.deg !== undefined) {
|
||||
const deg = wind.deg
|
||||
const sectors = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']
|
||||
const index = Math.round(deg / 22.5) % 16
|
||||
setEvWindDirection(sectors[index])
|
||||
setEvWindDirection(degreesToCardinal(wind.deg))
|
||||
}
|
||||
|
||||
if (data.weather && Array.isArray(data.weather) && data.weather[0]) {
|
||||
@@ -1377,27 +1377,38 @@ export default function LogEntryEditor({
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<label>{t('logs.event_mgk')}</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. 180"
|
||||
className="input-text"
|
||||
value={evMgk}
|
||||
onChange={(e) => setEvMgk(e.target.value)}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-group">
|
||||
<label>{t('logs.event_rwk')}</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. 185"
|
||||
className="input-text"
|
||||
value={evRwk}
|
||||
onChange={(e) => setEvRwk(e.target.value)}
|
||||
<div className="input-group course-dial-section">
|
||||
<label>
|
||||
<Compass size={12} style={{ display: 'inline', marginRight: 4 }} />
|
||||
{t('logs.event_course_section')}
|
||||
</label>
|
||||
<div className="course-dial-tabs" role="tablist" aria-label={t('logs.event_course_section')}>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeCourseTab === 'mgk'}
|
||||
className={`course-dial-tab${activeCourseTab === 'mgk' ? ' is-active' : ''}`}
|
||||
onClick={() => setActiveCourseTab('mgk')}
|
||||
disabled={saving}
|
||||
>
|
||||
{t('logs.course_tab_mgk')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={activeCourseTab === 'rwk'}
|
||||
className={`course-dial-tab${activeCourseTab === 'rwk' ? ' is-active' : ''}`}
|
||||
onClick={() => setActiveCourseTab('rwk')}
|
||||
disabled={saving}
|
||||
>
|
||||
{t('logs.course_tab_rwk')}
|
||||
</button>
|
||||
</div>
|
||||
<CourseDialInput
|
||||
value={activeCourseTab === 'mgk' ? evMgk : evRwk}
|
||||
onChange={activeCourseTab === 'mgk' ? setEvMgk : setEvRwk}
|
||||
disabled={saving}
|
||||
aria-label={activeCourseTab === 'mgk' ? t('logs.event_mgk') : t('logs.event_rwk')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1476,15 +1487,16 @@ export default function LogEntryEditor({
|
||||
</div>
|
||||
|
||||
<div className="form-grid mb-4">
|
||||
<div className="input-group">
|
||||
<div className="input-group course-dial-section">
|
||||
<label>{t('logs.event_wind_direction')}</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. NNE"
|
||||
className="input-text"
|
||||
<CourseDialInput
|
||||
value={evWindDirection}
|
||||
onChange={(e) => setEvWindDirection(e.target.value)}
|
||||
onChange={setEvWindDirection}
|
||||
disabled={saving || weatherLoading}
|
||||
allowCardinal
|
||||
displayMode="auto"
|
||||
size="sm"
|
||||
aria-label={t('logs.event_wind_direction')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -190,6 +190,16 @@
|
||||
"event_time": "Uhrzeit",
|
||||
"event_mgk": "MgK Kurs",
|
||||
"event_rwk": "RwK Kurs",
|
||||
"event_course_section": "Kurs",
|
||||
"course_dial_hint": "Am Ring drehen oder Wert eingeben",
|
||||
"course_step_fine": "1°",
|
||||
"course_step_medium": "5°",
|
||||
"course_step_coarse": "10°",
|
||||
"course_tab_mgk": "MgK",
|
||||
"course_tab_rwk": "rwK",
|
||||
"course_invalid": "Ungültiger Kurs (0–360)",
|
||||
"wind_mode_cardinal": "Kardinal",
|
||||
"wind_mode_degrees": "Als Grad",
|
||||
"event_wind_direction": "Wind-Richtung",
|
||||
"event_wind_strength": "Windstärke",
|
||||
"event_sea_state": "Seegang",
|
||||
|
||||
@@ -190,6 +190,16 @@
|
||||
"event_time": "Time",
|
||||
"event_mgk": "MgK Course",
|
||||
"event_rwk": "RwK Course",
|
||||
"event_course_section": "Course",
|
||||
"course_dial_hint": "Drag the ring or enter a value",
|
||||
"course_step_fine": "1°",
|
||||
"course_step_medium": "5°",
|
||||
"course_step_coarse": "10°",
|
||||
"course_tab_mgk": "MgK",
|
||||
"course_tab_rwk": "rwK",
|
||||
"course_invalid": "Invalid course (0–360)",
|
||||
"wind_mode_cardinal": "Cardinal",
|
||||
"wind_mode_degrees": "As degrees",
|
||||
"event_wind_direction": "Wind Dir",
|
||||
"event_wind_strength": "Wind Str",
|
||||
"event_sea_state": "Sea State",
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import {
|
||||
cardinalToDegrees,
|
||||
degreesToCardinal,
|
||||
formatCourseAngle,
|
||||
isCardinalDirection,
|
||||
normalizeCourseAngleString,
|
||||
normalizeWindDirectionString,
|
||||
parseCourseAngle,
|
||||
pointerAngleToDegrees,
|
||||
snapDegrees
|
||||
} from './courseAngle.js'
|
||||
|
||||
describe('parseCourseAngle', () => {
|
||||
it('parses padded and plain degrees', () => {
|
||||
expect(parseCourseAngle('042')).toBe(42)
|
||||
expect(parseCourseAngle('185°')).toBe(185)
|
||||
expect(parseCourseAngle('360')).toBe(0)
|
||||
})
|
||||
|
||||
it('rejects invalid values', () => {
|
||||
expect(parseCourseAngle('999')).toBeNull()
|
||||
expect(parseCourseAngle('abc')).toBeNull()
|
||||
})
|
||||
|
||||
it('parses cardinal labels', () => {
|
||||
expect(parseCourseAngle('NW')).toBe(315)
|
||||
})
|
||||
})
|
||||
|
||||
describe('snapDegrees', () => {
|
||||
it('snaps to step', () => {
|
||||
expect(snapDegrees(47, 5)).toBe(45)
|
||||
expect(snapDegrees(358, 5)).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('cardinal helpers', () => {
|
||||
it('roundtrips cardinal through degrees', () => {
|
||||
expect(degreesToCardinal(225)).toBe('SW')
|
||||
expect(cardinalToDegrees('SW')).toBe(225)
|
||||
expect(isCardinalDirection('nne')).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('pointerAngleToDegrees', () => {
|
||||
it('returns 0 for north', () => {
|
||||
expect(pointerAngleToDegrees(100, 50, 100, 100)).toBe(0)
|
||||
})
|
||||
|
||||
it('returns 90 for east', () => {
|
||||
expect(Math.round(pointerAngleToDegrees(150, 100, 100, 100))).toBe(90)
|
||||
})
|
||||
})
|
||||
|
||||
describe('normalizeCourseAngleString', () => {
|
||||
it('keeps empty when allowed', () => {
|
||||
expect(normalizeCourseAngleString('', { allowEmpty: true })).toBe('')
|
||||
})
|
||||
|
||||
it('normalizes numeric course', () => {
|
||||
expect(normalizeCourseAngleString('042')).toBe('42')
|
||||
expect(formatCourseAngle(42, true)).toBe('042')
|
||||
})
|
||||
})
|
||||
|
||||
describe('normalizeWindDirectionString', () => {
|
||||
it('preserves cardinal wind', () => {
|
||||
expect(normalizeWindDirectionString('nw')).toBe('NW')
|
||||
})
|
||||
|
||||
it('normalizes degree wind', () => {
|
||||
expect(normalizeWindDirectionString('090')).toBe('90')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,160 @@
|
||||
export const CARDINAL_DIRECTIONS = [
|
||||
'N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE',
|
||||
'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'
|
||||
] as const
|
||||
|
||||
export type CardinalDirection = (typeof CARDINAL_DIRECTIONS)[number]
|
||||
export type CourseStep = 1 | 5 | 10
|
||||
|
||||
const CARDINAL_SET = new Set<string>(CARDINAL_DIRECTIONS)
|
||||
|
||||
export function isCardinalDirection(value: string): boolean {
|
||||
return CARDINAL_SET.has(value.trim().toUpperCase())
|
||||
}
|
||||
|
||||
export function cardinalToDegrees(label: string): number | null {
|
||||
const upper = label.trim().toUpperCase()
|
||||
const index = CARDINAL_DIRECTIONS.indexOf(upper as CardinalDirection)
|
||||
if (index < 0) return null
|
||||
return (index * 22.5) % 360
|
||||
}
|
||||
|
||||
export function degreesToCardinal(degrees: number): CardinalDirection {
|
||||
const normalized = ((degrees % 360) + 360) % 360
|
||||
const index = Math.round(normalized / 22.5) % 16
|
||||
return CARDINAL_DIRECTIONS[index]
|
||||
}
|
||||
|
||||
export function snapDegrees(degrees: number, step: CourseStep): number {
|
||||
const normalized = ((degrees % 360) + 360) % 360
|
||||
const snapped = Math.round(normalized / step) * step
|
||||
return snapped >= 360 ? 0 : snapped
|
||||
}
|
||||
|
||||
/** 0° = north, clockwise (maritime compass). */
|
||||
export function pointerAngleToDegrees(
|
||||
clientX: number,
|
||||
clientY: number,
|
||||
centerX: number,
|
||||
centerY: number
|
||||
): number {
|
||||
const dx = clientX - centerX
|
||||
const dy = centerY - clientY
|
||||
const radians = Math.atan2(dx, dy)
|
||||
let degrees = (radians * 180) / Math.PI
|
||||
if (degrees < 0) degrees += 360
|
||||
return degrees
|
||||
}
|
||||
|
||||
export function parseCourseAngle(value: string): number | null {
|
||||
const trimmed = value.trim().replace(/°/g, '')
|
||||
if (!trimmed) return null
|
||||
|
||||
const cardinalDeg = cardinalToDegrees(trimmed)
|
||||
if (cardinalDeg !== null) return Math.round(cardinalDeg)
|
||||
|
||||
if (!/^\d{1,3}$/.test(trimmed)) return null
|
||||
const degrees = parseInt(trimmed, 10)
|
||||
if (Number.isNaN(degrees)) return null
|
||||
if (degrees === 360) return 0
|
||||
if (degrees < 0 || degrees > 360) return null
|
||||
return degrees
|
||||
}
|
||||
|
||||
export function formatCourseAngle(degrees: number, pad = false): string {
|
||||
const normalized = ((Math.round(degrees) % 360) + 360) % 360
|
||||
const text = String(normalized)
|
||||
return pad ? text.padStart(3, '0') : text
|
||||
}
|
||||
|
||||
export function normalizeCourseAngleString(
|
||||
value: string,
|
||||
options?: { allowEmpty?: boolean }
|
||||
): string {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return options?.allowEmpty ? '' : ''
|
||||
|
||||
if (isCardinalDirection(trimmed)) {
|
||||
return trimmed.toUpperCase()
|
||||
}
|
||||
|
||||
const parsed = parseCourseAngle(trimmed)
|
||||
if (parsed === null) return trimmed
|
||||
return formatCourseAngle(parsed)
|
||||
}
|
||||
|
||||
export function normalizeWindDirectionString(value: string): string {
|
||||
const trimmed = value.trim()
|
||||
if (!trimmed) return ''
|
||||
|
||||
if (isCardinalDirection(trimmed)) {
|
||||
return trimmed.toUpperCase()
|
||||
}
|
||||
|
||||
const parsed = parseCourseAngle(trimmed)
|
||||
if (parsed === null) return trimmed
|
||||
return formatCourseAngle(parsed)
|
||||
}
|
||||
|
||||
export function valueToDialDegrees(value: string, allowCardinal = false): number {
|
||||
const parsed = parseCourseAngle(value)
|
||||
if (parsed !== null) return parsed
|
||||
if (allowCardinal && isCardinalDirection(value)) {
|
||||
return cardinalToDegrees(value) ?? 0
|
||||
}
|
||||
return 0
|
||||
}
|
||||
|
||||
export type CourseOutputMode = 'degrees' | 'cardinal'
|
||||
|
||||
export function resolveCourseOutputMode(
|
||||
value: string,
|
||||
displayMode: 'degrees' | 'cardinal' | 'auto',
|
||||
allowCardinal: boolean
|
||||
): CourseOutputMode {
|
||||
if (!allowCardinal || displayMode === 'degrees') return 'degrees'
|
||||
if (displayMode === 'cardinal') return 'cardinal'
|
||||
return isCardinalDirection(value) ? 'cardinal' : 'degrees'
|
||||
}
|
||||
|
||||
export function dialDegreesToStorageValue(
|
||||
degrees: number,
|
||||
mode: CourseOutputMode,
|
||||
step: CourseStep
|
||||
): string {
|
||||
const snapped = snapDegrees(degrees, step)
|
||||
if (mode === 'cardinal') return degreesToCardinal(snapped)
|
||||
return formatCourseAngle(snapped)
|
||||
}
|
||||
|
||||
export function formatCourseDisplay(
|
||||
value: string,
|
||||
allowCardinal: boolean
|
||||
): string {
|
||||
if (!value.trim()) return '—'
|
||||
if (allowCardinal && isCardinalDirection(value)) return value.toUpperCase()
|
||||
const parsed = parseCourseAngle(value)
|
||||
if (parsed === null) return value
|
||||
return `${formatCourseAngle(parsed, true)}°`
|
||||
}
|
||||
|
||||
const STEP_STORAGE_KEY = 'kaptein-course-dial-step'
|
||||
|
||||
export function loadCourseDialStep(): CourseStep {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(STEP_STORAGE_KEY)
|
||||
if (raw === '5') return 5
|
||||
if (raw === '10') return 10
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
return 1
|
||||
}
|
||||
|
||||
export function saveCourseDialStep(step: CourseStep): void {
|
||||
try {
|
||||
sessionStorage.setItem(STEP_STORAGE_KEY, String(step))
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import type { i18n as I18nInstance } from 'i18next'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import { resolveIntlLocale } from './dateTimeFormat.js'
|
||||
import { initSeo, normalizeSeoLang, updatePageSeo } from './seo.js'
|
||||
|
||||
const HTML_LANG = /^de|en$/
|
||||
|
||||
function createMockI18n(language: string): I18nInstance {
|
||||
return {
|
||||
isInitialized: true,
|
||||
language,
|
||||
t: (key: string) => key,
|
||||
on: vi.fn()
|
||||
} as unknown as I18nInstance
|
||||
}
|
||||
|
||||
describe('normalizeSeoLang', () => {
|
||||
it.each([
|
||||
['de', 'de'],
|
||||
['de-DE', 'de'],
|
||||
['en', 'en'],
|
||||
['en-US', 'en'],
|
||||
['en-GB', 'en']
|
||||
] as const)('maps %s to short code %s', (input, expected) => {
|
||||
expect(normalizeSeoLang(input)).toBe(expected)
|
||||
})
|
||||
})
|
||||
|
||||
describe('updatePageSeo html lang', () => {
|
||||
beforeEach(() => {
|
||||
document.documentElement.lang = 'de'
|
||||
window.history.replaceState({}, '', '/')
|
||||
})
|
||||
|
||||
it.each([
|
||||
['de', 'de'],
|
||||
['en', 'en'],
|
||||
['en-GB', 'en']
|
||||
] as const)('sets html lang to %s when i18n language is %s', (i18nLanguage, expectedLang) => {
|
||||
initSeo(createMockI18n(i18nLanguage))
|
||||
updatePageSeo()
|
||||
|
||||
expect(document.documentElement.lang).toBe(expectedLang)
|
||||
expect(document.documentElement.lang).toMatch(HTML_LANG)
|
||||
})
|
||||
})
|
||||
|
||||
describe('resolveIntlLocale', () => {
|
||||
it('uses full BCP 47 tags for Intl formatting only', () => {
|
||||
expect(resolveIntlLocale('de')).toBe('de-DE')
|
||||
expect(resolveIntlLocale('en')).toBe('en-GB')
|
||||
})
|
||||
|
||||
it('does not reuse Intl locale tags for html lang', () => {
|
||||
const intlLocale = resolveIntlLocale('en')
|
||||
const htmlLang = normalizeSeoLang('en')
|
||||
|
||||
expect(intlLocale).toBe('en-GB')
|
||||
expect(htmlLang).toBe('en')
|
||||
expect(htmlLang).not.toBe(intlLocale)
|
||||
})
|
||||
})
|
||||
@@ -1,3 +1,8 @@
|
||||
import {
|
||||
normalizeCourseAngleString,
|
||||
normalizeWindDirectionString
|
||||
} from './courseAngle.js'
|
||||
|
||||
export interface LogEventPayload {
|
||||
time: string
|
||||
mgk: string
|
||||
@@ -79,10 +84,10 @@ export function normalizeLogEvent(event: Partial<LogEventPayload> | Record<strin
|
||||
const timeRaw = String(e.time ?? '').trim()
|
||||
const normalized: LogEventPayload = {
|
||||
time: parseTimeToHHMM(timeRaw) ?? (timeRaw.length >= 5 ? timeRaw.slice(0, 5) : timeRaw),
|
||||
mgk: '',
|
||||
rwk: '',
|
||||
mgk: normalizeCourseAngleString(String(e.mgk ?? ''), { allowEmpty: true }),
|
||||
rwk: normalizeCourseAngleString(String(e.rwk ?? ''), { allowEmpty: true }),
|
||||
windPressure: '',
|
||||
windDirection: '',
|
||||
windDirection: normalizeWindDirectionString(String(e.windDirection ?? '')),
|
||||
windStrength: '',
|
||||
seaState: '',
|
||||
weatherIcon: '',
|
||||
@@ -96,7 +101,7 @@ export function normalizeLogEvent(event: Partial<LogEventPayload> | Record<strin
|
||||
remarks: ''
|
||||
}
|
||||
for (const key of LOG_EVENT_FIELDS) {
|
||||
if (key === 'time') continue
|
||||
if (key === 'time' || key === 'mgk' || key === 'rwk' || key === 'windDirection') continue
|
||||
normalized[key] = String(e[key] ?? '').trim()
|
||||
}
|
||||
return normalized
|
||||
|
||||
Reference in New Issue
Block a user