983 refactor improve aquapath UI layout and add fan speed configuration page

electron/src/machines/aquapath/aquapath1/Aquapath1ControlPage.tsx

@@ -6,7 +6,9 @@
 import { useAquapath1 } from "./useAquapath";
 import { SelectionGroup } from "@/control/SelectionGroup";
 import { EditValue } from "@/control/EditValue";
+import { Badge } from "@/components/ui/badge";
 import { Label } from "@/control/Label";
+import { HeatingZone } from "../../extruder/HeatingZone";
 
 export function Aquapath1ControlPage() {
   const {
@@ -16,8 +18,12 @@
     back_flow,
     front_temperature,
     back_temperature,
-    front_temp_reservoir,
-    back_temp_reservoir,
+    front_revolutions,
+    back_revolutions,
+    front_power,
+    back_power,
+    front_total_energy,
+    back_total_energy,
     setAquapathMode,
     setFrontTemperature,
     setBackTemperature,
@@ -29,111 +35,55 @@
   const backTargetTemperature =
     state?.temperature_states?.back.target_temperature ?? 0;
 
+  const frontCurrentTemperature =
+    state?.temperature_states?.front.temperature ?? 0;
+  const backCurrentTemperature =
+    state?.temperature_states?.back.temperature ?? 0;
+
+  const frontCoolingBoundary =
+    frontTargetTemperature + (state?.tolerance_states.front.cooling ?? 0);
+  const frontHeatingBoundary =
+    frontTargetTemperature - (state?.tolerance_states.front.heating ?? 0);
+  const backCoolingBoundary =
+    backTargetTemperature + (state?.tolerance_states.back.cooling ?? 0);
+  const backHeatingBoundary =
+    backTargetTemperature - (state?.tolerance_states.back.heating ?? 0);
+
   const frontTargetFlow = state?.flow_states.front.should_flow ?? false;
   const backTargetFlow = state?.flow_states.back.should_flow ?? false;
 
   return (
     <Page>
       <ControlGrid columns={2}>
-        <ControlCard title="Flow Measurements">
-          <div className="grid grid-cols-2 gap-6">
-            <div className="flex flex-col gap-8">
+        <ControlCard title="Reservoir 1">
+          <div className="grid grid-rows-5 gap-4">
+            <div className="flex flex-row">
               <TimeSeriesValueNumeric
-                label="Flow 1"
+                label="Flow"
                 unit="l/min"
                 timeseries={front_flow}
                 renderValue={(value) => value.toFixed(1)}
               />
             </div>
 
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-row">
               <TimeSeriesValueNumeric
-                label="Flow 2"
-                unit="l/min"
-                timeseries={back_flow}
-                renderValue={(value) => value.toFixed(1)}
-              />
-            </div>
-          </div>
-
-          <div className="mt-8">
-            <Label label="Pump 1">
-              <SelectionGroup<"On" | "Off">
-                value={frontTargetFlow ? "On" : "Off"}
-                orientation="vertical"
-                className="grid h-full grid-cols-2 gap-2"
-                options={{
-                  Off: {
-                    children: "Off",
-                    icon: "lu:CirclePause",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                  On: {
-                    children: "On",
-                    icon: "lu:CirclePlay",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                }}
-                onChange={(value) => {
-                  if (value == "On") {
-                    setFrontFlow(true);
-                  } else {
-                    setFrontFlow(false);
-                  }
-                }}
-              />
-            </Label>
-
-            <Label label="Pump 2">
-              <SelectionGroup<"On" | "Off">
-                value={backTargetFlow ? "On" : "Off"}
-                orientation="vertical"
-                className="grid h-full grid-cols-2 gap-2"
-                options={{
-                  Off: {
-                    children: "Off",
-                    icon: "lu:CirclePause",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                  On: {
-                    children: "On",
-                    icon: "lu:CirclePlay",
-                    isActiveClassName: "bg-green-600",
-                    className: "h-full",
-                  },
-                }}
-                onChange={(value) => {
-                  if (value == "On") {
-                    setBackFlow(true);
-                  } else {
-                    setBackFlow(false);
-                  }
-                }}
-              />
-            </Label>
-          </div>
-        </ControlCard>
-
-        <ControlCard title="Temperature Measurements">
-          <div className="grid grid-cols-2 gap-6">
-            <div className="flex flex-col gap-8">
-              <TimeSeriesValueNumeric
-                label="Reservoir 1"
+                label="Temperature"
                 unit="C"
                 timeseries={front_temperature}
                 renderValue={(value) => value.toFixed(1)}
               />
-              <Label label="Set Reservoir 1 Target Temperature">
+            </div>
+
+            <div className="flex flex-row gap-4">
+              <Label label="Set Target Temperature">
                 <EditValue
-                  title="Set Reservoir 1 Target Temperature"
+                  title="Set Target Temperature"
+                  min={0}
                   value={frontTargetTemperature}
+                  max={80}
                   unit="C"
                   step={0.1}
-                  min={0.0}
-                  max={80.0}
                   renderValue={(value) => value.toFixed(1)}
                   onChange={(val) => {
                     setFrontTemperature(val);
@@ -143,23 +93,88 @@
                   }
                 />
               </Label>
+
+              {frontCurrentTemperature < frontHeatingBoundary &&
+                (state?.flow_states.front.flow ?? 0) > 0 && (
+                  <Badge variant="default">
+                    Power: {front_power.current?.value} W<br />
+                    Total: {front_total_energy.current?.value} kWh
+                  </Badge>
+                )}
+              {frontCurrentTemperature > frontCoolingBoundary &&
+                frontTargetFlow &&
+                (state?.flow_states.front.flow ?? 0) && (
+                  <Badge variant="secondary">Cooling</Badge>
+                )}
+            </div>
+
+            <div className="flex flex-row">
+              <TimeSeriesValueNumeric
+                label="Revolution Speed"
+                unit="%"
+                timeseries={front_revolutions}
+                renderValue={(value) => value.toFixed(1)}
+              />
+            </div>
+
+            <div className="flex flex-row">
+              <Label label="Pump">
+                <SelectionGroup<"On" | "Off">
+                  value={frontTargetFlow ? "On" : "Off"}
+                  orientation="vertical"
+                  className="grid h-full grid-cols-2 gap-2"
+                  options={{
+                    Off: {
+                      children: "Off",
+                      icon: "lu:CirclePause",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                    On: {
+                      children: "On",
+                      icon: "lu:CirclePlay",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                  }}
+                  onChange={(value) => {
+                    setFrontFlow(value == "On");
+                  }}
+                />
+              </Label>
+            </div>
+          </div>
+        </ControlCard>
+
+        <ControlCard title="Reservoir 2">
+          <div className="grid grid-rows-4 gap-4">
+            <div className="flex flex-row">
+              <TimeSeriesValueNumeric
+                label="Flow"
+                unit="l/min"
+                timeseries={back_flow}
+                renderValue={(value) => value.toFixed(1)}
+              />
             </div>
 
-            <div className="flex flex-col gap-8">
+            <div className="flex flex-row">
               <TimeSeriesValueNumeric
-                label="Reservoir 2"
+                label="Temperature"
                 unit="C"
                 timeseries={back_temperature}
                 renderValue={(value) => value.toFixed(1)}
               />
-              <Label label="Set Reservoir 2 Target Temperature">
+            </div>
+
+            <div className="flex flex-row gap-4">
+              <Label label="Set Target Temperature">
                 <EditValue
-                  title="Set Reservoir 2 Target Temperature"
+                  title="Set Target Temperature"
+                  min={0}
                   value={backTargetTemperature}
+                  max={80}
                   unit="C"
                   step={0.1}
-                  min={0.0}
-                  max={80.0}
                   renderValue={(value) => value.toFixed(1)}
                   onChange={(val) => {
                     setBackTemperature(val);
@@ -169,6 +184,56 @@
                   }
                 />
               </Label>
+
+              {backCurrentTemperature < backHeatingBoundary &&
+                backTargetFlow &&
+                (state?.flow_states.front.flow ?? 0) && (
+                  <Badge variant="default">
+                    Power: {back_power.current?.value} W<br />
+                    Total: {back_total_energy.current?.value} kWh
+                  </Badge>
+                )}
+              {backCurrentTemperature > backCoolingBoundary &&
+                frontTargetFlow &&
+                (state?.flow_states.front.flow ?? 0) && (
+                  <Badge variant="secondary">Cooling</Badge>
+                )}
+            </div>
+
+            <div className="flex flex-row">
+              <TimeSeriesValueNumeric
+                label="Revolution Speed"
+                unit="%"
+                timeseries={back_revolutions}
+                renderValue={(value) => value.toFixed(1)}
+              />
+            </div>
+
+            <div className="flex flex-row">
+              <Label label="Pump">
+                <SelectionGroup<"On" | "Off">
+                  value={backTargetFlow ? "On" : "Off"}
+                  orientation="vertical"
+                  className="grid h-full grid-cols-2 gap-2"
+                  options={{
+                    Off: {
+                      children: "Off",
+                      icon: "lu:CirclePause",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                    On: {
+                      children: "On",
+                      icon: "lu:CirclePlay",
+                      isActiveClassName: "bg-green-600",
+                      className: "h-full",
+                    },
+                  }}
+                  onChange={(value) => {
+                    setBackFlow(value == "On");
+                  }}
+                />
+              </Label>
             </div>
           </div>
         </ControlCard>

electron/src/machines/aquapath/aquapath1/Aquapath1Page.tsx

@@ -20,6 +20,12 @@ export function Aquapath1Page() {
           icon: "lu:ChartSpline",
           activeLink: "graphs",
         },
+        {
+          link: "settings",
+          title: "Config",
+          icon: "lu:Settings",
+          activeLink: "settings",
+        },
       ]}
     />
   );