rouggy/OpsLog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

up

Browse Source
This commit is contained in:
Gregory Salaun
2026-06-07 21:44:49 +02:00
parent 3dd9620cca
commit 6542504a4b
14 changed files with 585 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/WinkeyerPanel.tsx
+27 -24
View File
@@ -1,5 +1,5 @@
import { useEffect, useState } from 'react';
import { Radio, Square, Send, Plug, Power, RefreshCw, X } from 'lucide-react';
import { Radio, Square, Send, Plug, Power, RefreshCw, X, ChevronUp, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
@@ -51,8 +51,14 @@ export function WinkeyerPanel({
}: Props) {
const [cwText, setCwText] = useState('');
const [speed, setSpeed] = useState(wpm);
// Step the speed (compact +/- control replaces the old slider).
const changeSpeed = (delta: number) => {
const w = Math.max(5, Math.min(50, speed + delta));
setSpeed(w);
onSetSpeed(w);
};
// Keep the local speed slider in sync when the device/config changes it.
// Keep the local speed in sync when the device/config changes it.
useEffect(() => { setSpeed(status.connected ? status.wpm || wpm : wpm); }, [status.wpm, status.connected, wpm]);
const connected = status.connected;
@@ -113,24 +119,10 @@ export function WinkeyerPanel({
</Button>
</div>
<div className="flex flex-col gap-2 px-3 pb-2 min-h-0 overflow-y-auto">
{/* Speed */}
<div className="flex flex-col gap-1.5 px-3 pb-2 min-h-0 overflow-y-auto">
{/* Live transmitted text (echoed by the keyer) + compact speed stepper. */}
<div className="flex items-center gap-2">
<Label className="text-xs w-12 shrink-0">Speed</Label>
<input
type="range" min={5} max={50} value={speed}
onChange={(e) => setSpeed(parseInt(e.target.value, 10))}
onMouseUp={() => onSetSpeed(speed)}
onTouchEnd={() => onSetSpeed(speed)}
disabled={!connected}
className="flex-1 accent-primary"
/>
<span className="font-mono text-sm font-bold w-14 text-right">{speed} wpm</span>
</div>
{/* Live transmitted text (echoed by the keyer as it sends). */}
<div className="flex items-center gap-2">
<Label className="text-xs w-12 shrink-0">TX</Label>
<Label className="text-xs w-8 shrink-0">TX</Label>
<div className={cn(
'flex-1 min-w-0 h-8 rounded-md border border-border bg-muted/30 px-2.5 flex items-center font-mono text-sm tracking-wide truncate',
status.busy ? 'text-emerald-700' : 'text-muted-foreground',
@@ -138,6 +130,17 @@ export function WinkeyerPanel({
{sent || <span className="opacity-50">—</span>}
{status.busy && <span className="ml-0.5 animate-pulse">▌</span>}
</div>
{/* Speed: number + up/down arrows (replaces the slider, saves height). */}
<div className="flex items-center gap-1 shrink-0 h-8 rounded-md border border-border bg-muted/20 pl-2 pr-1" title="CW speed (WPM)">
<span className="font-mono text-sm font-bold tabular-nums">{speed}</span>
<span className="text-[9px] text-muted-foreground">wpm</span>
<div className="flex flex-col -my-0.5">
<button type="button" disabled={!connected} onClick={() => changeSpeed(+1)} title="Faster"
className="text-muted-foreground hover:text-foreground leading-none disabled:opacity-40"><ChevronUp className="size-3.5" /></button>
<button type="button" disabled={!connected} onClick={() => changeSpeed(-1)} title="Slower"
className="text-muted-foreground hover:text-foreground leading-none disabled:opacity-40"><ChevronDown className="size-3.5" /></button>
</div>
</div>
</div>
{/* CW text */}
@@ -169,8 +172,8 @@ export function WinkeyerPanel({
</Button>
</div>
{/* Macro buttons F1… */}
<div className="grid grid-cols-3 gap-1.5">
{/* Macro buttons F1… — single-line (F-key + label) to keep the panel short. */}
<div className="grid grid-cols-3 gap-1">
{macros.map((m, i) => (
<button
key={i}
@@ -179,12 +182,12 @@ export function WinkeyerPanel({
disabled={!connected}
title={m.text}
className={cn(
'flex flex-col items-start rounded-md border border-border px-2 py-1 text-left transition-colors',
'flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-left transition-colors',
connected ? 'hover:border-primary/60 hover:bg-accent/40' : 'opacity-50 cursor-not-allowed',
)}
>
<span className="text-[10px] font-mono text-primary font-semibold">F{i + 1}</span>
<span className="text-xs font-medium truncate w-full">{m.label || `Macro ${i + 1}`}</span>
<span className="text-[10px] font-mono text-primary font-semibold shrink-0">F{i + 1}</span>
<span className="text-xs font-medium truncate">{m.label || `Macro ${i + 1}`}</span>
</button>
))}
</div>