|
|
@@ -22,9 +22,19 @@ function ScaleCalibration({ device, weight, weightStable, rawAdc }: {
|
|
|
const { t } = useTranslation();
|
|
|
const [calibrating, setCalibrating] = useState(false);
|
|
|
const [calStep, setCalStep] = useState<'idle' | 'tare' | 'weight'>('idle');
|
|
|
- const [knownWeight, setKnownWeight] = useState(500);
|
|
|
+ const [knownWeight, setKnownWeight] = useState('500');
|
|
|
const [taring, setTaring] = useState(false);
|
|
|
|
|
|
+ const numpadPress = (key: string) => {
|
|
|
+ if (key === 'backspace') {
|
|
|
+ setKnownWeight((v) => v.slice(0, -1) || '');
|
|
|
+ } else if (key === '.' && !knownWeight.includes('.')) {
|
|
|
+ setKnownWeight((v) => v + '.');
|
|
|
+ } else if (key >= '0' && key <= '9') {
|
|
|
+ setKnownWeight((v) => (v === '0' ? key : v + key));
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
const handleTare = async () => {
|
|
|
setTaring(true);
|
|
|
try {
|
|
|
@@ -52,10 +62,11 @@ function ScaleCalibration({ device, weight, weightStable, rawAdc }: {
|
|
|
setCalibrating(false);
|
|
|
}
|
|
|
} else if (calStep === 'weight') {
|
|
|
- if (rawAdc === null) return;
|
|
|
+ const weightNum = parseFloat(knownWeight);
|
|
|
+ if (rawAdc === null || !weightNum || weightNum <= 0) return;
|
|
|
setCalibrating(true);
|
|
|
try {
|
|
|
- await spoolbuddyApi.setCalibrationFactor(device.device_id, knownWeight, rawAdc);
|
|
|
+ await spoolbuddyApi.setCalibrationFactor(device.device_id, weightNum, rawAdc);
|
|
|
setCalStep('idle');
|
|
|
} catch (e) {
|
|
|
console.error('Failed to calibrate:', e);
|
|
|
@@ -120,15 +131,26 @@ function ScaleCalibration({ device, weight, weightStable, rawAdc }: {
|
|
|
</div>
|
|
|
|
|
|
{calStep === 'weight' && (
|
|
|
- <div className="flex items-center gap-2">
|
|
|
+ <div className="space-y-2">
|
|
|
<label className="text-xs text-zinc-400">{t('spoolbuddy.settings.knownWeight', 'Known weight (g)')}</label>
|
|
|
- <input
|
|
|
- type="number"
|
|
|
- value={knownWeight}
|
|
|
- onChange={(e) => setKnownWeight(Number(e.target.value))}
|
|
|
- className="w-24 px-2 py-2 bg-zinc-900 border border-zinc-600 rounded text-sm text-zinc-100 focus:outline-none focus:border-green-500 min-h-[44px]"
|
|
|
- min={1}
|
|
|
- />
|
|
|
+ <div className="bg-zinc-900 border border-zinc-600 rounded px-3 py-2 text-right text-lg font-mono text-zinc-100 min-h-[44px]">
|
|
|
+ {knownWeight || '0'}<span className="text-zinc-500 ml-1">g</span>
|
|
|
+ </div>
|
|
|
+ <div className="grid grid-cols-4 gap-1.5">
|
|
|
+ {['7','8','9','backspace','4','5','6','.','1','2','3','0'].map((key) => (
|
|
|
+ <button
|
|
|
+ key={key}
|
|
|
+ onClick={() => numpadPress(key)}
|
|
|
+ className={`py-3 rounded-lg text-base font-medium transition-colors min-h-[48px] ${
|
|
|
+ key === 'backspace'
|
|
|
+ ? 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'
|
|
|
+ : 'bg-zinc-800 text-zinc-100 hover:bg-zinc-700 border border-zinc-700'
|
|
|
+ }`}
|
|
|
+ >
|
|
|
+ {key === 'backspace' ? '⌫' : key}
|
|
|
+ </button>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
)}
|
|
|
|