-
-
- Save & Refresh
-
- onUpdate('display')}
- >
- Update Display
-
- onUpdate('controller')}
- >
- Update Controller
-
-
- Download Support Data
-
-
- Rebuild Shot History
- {rebuilding && (
- <>
-
- {rebuildProgress.current}/{rebuildProgress.total}
-
- )}
-
- )}
- {rebuilt && (
-
-
- )}
-
-
-
- {rebuilding && (
-
-
- {rebuildProgress.status === 'starting' ||
- rebuildProgress.status === 'scanning' ||
- rebuildProgress.total === 0
- ? 'Scanning shot history files...'
- : `Processing shot history files (${rebuildProgress.current}/${rebuildProgress.total})`}
-
-
-
0
- ? `${(rebuildProgress.current / rebuildProgress.total) * 100}%`
- : '30%',
- }}
- />
-
-
- )}
-
-
-
- );
-}
diff --git a/web/src/pages/Scales/index.jsx b/web/src/pages/Scales/index.jsx
deleted file mode 100644
index 0790d4bdb..000000000
--- a/web/src/pages/Scales/index.jsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import { useState, useEffect, useCallback } from 'preact/hooks';
-import { useQuery } from 'preact-fetching';
-import Card from '../../components/Card.jsx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faScaleBalanced } from '@fortawesome/free-solid-svg-icons/faScaleBalanced';
-import { machine } from '../../services/ApiService.js';
-import { Spinner } from '../../components/Spinner.jsx';
-import { faSignal } from '@fortawesome/free-solid-svg-icons/faSignal';
-import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
-import { faBatteryFull } from '@fortawesome/free-solid-svg-icons/faBatteryFull';
-import { faBatteryThreeQuarters } from '@fortawesome/free-solid-svg-icons/faBatteryThreeQuarters';
-import { faBatteryHalf } from '@fortawesome/free-solid-svg-icons/faBatteryHalf';
-import { faBatteryQuarter } from '@fortawesome/free-solid-svg-icons/faBatteryQuarter';
-import { faBatteryEmpty } from '@fortawesome/free-solid-svg-icons/faBatteryEmpty';
-
-// Pick an icon that roughly matches the fill level for a richer at-a-glance
-// read on the Scales page. The thresholds here are visual-only; the color
-// below is what actually conveys "pay attention" (≤9% red, ≤29% yellow).
-function batteryIcon(pct) {
- if (pct >= 87) return faBatteryFull;
- if (pct >= 62) return faBatteryThreeQuarters;
- if (pct >= 37) return faBatteryHalf;
- if (pct >= 12) return faBatteryQuarter;
- return faBatteryEmpty;
-}
-
-function batteryColorClass(pct) {
- if (pct <= 9) return 'text-error'; // critical — user must charge soon
- if (pct <= 29) return 'text-warning'; // heads-up
- return 'text-base-content/60'; // everyday — same tone as RSSI
-}
-
-export function Scales() {
- const [key, setKey] = useState(0);
- const [scaleData, setScaleData] = useState([]);
- const [isScanning, setIsScanning] = useState(false);
- const mode = machine.value.status.mode;
-
- useEffect(() => {
- const intervalHandle = setInterval(() => {
- setKey(Date.now().valueOf());
- }, 10000);
-
- return () => clearInterval(intervalHandle);
- }, []);
-
- const {
- isLoading,
- isError,
- data: fetchedScales = [],
- } = useQuery(`scales-${key}`, async () => {
- const response = await fetch(`/api/scales/list`);
- const data = await response.json();
- return data;
- });
-
- const {
- isInfoLoading,
- isInfoError,
- data: connectedScale = [],
- } = useQuery(`scale-info-${key}`, async () => {
- const response = await fetch(`/api/scales/info`);
- const data = await response.json();
- return data;
- });
-
- useEffect(() => {
- if (!connectedScale || fetchedScales.length === 0) {
- return;
- }
- const scales = connectedScale.connected ? [connectedScale] : fetchedScales;
- setScaleData(scales);
- }, [connectedScale, fetchedScales]);
-
- const onScan = useCallback(async () => {
- setIsScanning(true);
- try {
- await fetch('/api/scales/scan', {
- method: 'post',
- });
- // Refresh the data after scan
- setKey(Date.now().valueOf());
- } catch (error) {
- console.error('Scan failed:', error);
- } finally {
- setIsScanning(false);
- }
- }, [setIsScanning]);
-
- const onConnect = useCallback(async uuid => {
- try {
- const data = new FormData();
- data.append('uuid', uuid);
- await fetch('/api/scales/connect', {
- method: 'post',
- body: data,
- });
- // Refresh the data after connection
- setKey(Date.now().valueOf());
- } catch (error) {
- console.error('Connection failed:', error);
- }
- }, []);
-
- const loading = isLoading || isInfoLoading || isScanning;
-
- return (
- <>
-
-
Bluetooth Devices
-
- {mode > 0 && loading ? 'Scanning...' : 'Scan for Devices'}
- {mode > 0 && loading &&
-
-
-
-
- {mode === 0 && (
-
-
-
-
System in Standby
-
- Please put GaggiMate in Brew or Grind mode to use Bluetooth scales.
-
-
-
-
-
-
- Scales are automatically refreshed every 10 seconds. Use the scan button to discover
- new devices.
-
-
-
-
-
- );
-}
-
-function ScaleList(props) {
- const { isLoading, isInfoLoading, isError, isInfoError, scaleData, onConnect } = props;
- if (isError || isInfoError) {
- return (
-
- Error loading devices. Please try again.
-
- );
- }
- if (scaleData.length > 0) {
- return (
-
- {scaleData.map((scale, i) => (
-
-
-
-
-
-
{scale.name}
-
-
-
-
- )}
-
-
-
- {scale.connected ? (
-
Connected
- ) : (
-
onConnect(scale.uuid)}>
- Connect
-
- )}
-
-
-
- ))}
-
- );
- }
- return (
- <>
- {isLoading || isInfoLoading ? (
-
- Loading devices...
-
- ) : (
-
-
-
-
-
-
No scales found
-
- Click "Scan" to discover Bluetooth scales nearby
-
-
-
-
- )}
-
- );
-}