Statistikkblokk på Venstre/høyre

webui-react/src/hooks/storage.ts

@@ -0,0 +1,31 @@
+import {Dispatch, SetStateAction, useEffect, useState} from "react";
+
+function loadData<T>(key: string, defValue: T): T {
+  const newData = window.localStorage.getItem(`ykonsole2.${key}`);
+  if (newData === null) {
+    return defValue;
+  }
+
+  return JSON.parse(newData) as T;
+}
+
+export default function useLocalStorage<T>(key: string, defValue: T): [T, Dispatch<SetStateAction<T>>] {
+  const [data, setData] = useState(() => loadData(key, defValue));
+
+  useEffect(() => {
+    window.localStorage.setItem(`ykonsole2.${key}`, JSON.stringify(data));
+  }, [key, data]);
+
+  useEffect(() => {
+    const callback = () => {
+      setData(loadData(key, defValue));
+    };
+
+    window.addEventListener("storage", callback);
+    return () => {
+      window.removeEventListener("storage", callback);
+    };
+  }, [key, defValue]);
+
+  return [data, setData];
+}

webui-react/src/pages/IndexPage.tsx

@@ -17,12 +17,14 @@ import {colorOf, WorkoutStatus} from "../models/Workouts";
 import {faSpinner} from "@fortawesome/free-solid-svg-icons/faSpinner";
 import {useKey} from "../hooks/keyboard";
 import {Boi} from "../primitives/boi/Boi";
+import useLocalStorage from "../hooks/storage";
 
 export default function IndexPage(): JSX.Element {
   const {devices} = useContext(DeviceContext);
   const {programs} = useContext(ProgramContext);
   const {workouts, loadingWorkouts, expanded, showMoreWorkouts, refreshWorkouts} = useContext(WorkoutContext);
   const navigate = useNavigate();
+  const [statPos, setStatPos] = useLocalStorage<"left" | "right">("stats.position", "left");
 
   const isRunning = useMemo(() => workouts.some(w => w.status !== WorkoutStatus.Disconnected), [workouts]);
 
@@ -112,6 +114,18 @@ export default function IndexPage(): JSX.Element {
                 <BlobTextLine secondary>Legg til</BlobTextLine>
               </BlobText>
             </Blob>
+
+            <TitleLine>Plassering på statistikblokk</TitleLine>
+            <Blob onClick={() => setStatPos("left")} color={statPos === "left" ? "blue" : "gray"}>
+              <BlobText>
+                <BlobTextLine>Til venstre</BlobTextLine>
+              </BlobText>
+            </Blob>
+            <Blob onClick={() => setStatPos("right")} color={statPos === "right" ? "blue" : "gray"}>
+              <BlobText>
+                <BlobTextLine>Til høyre</BlobTextLine>
+              </BlobText>
+            </Blob>
           </PageFlexColumn>
         </PageFlexRow>
       </PageBody>

webui-react/src/pages/PlayPage.tsx

@@ -20,6 +20,7 @@ import MessageBoi from "./runtime/MessageBoi";
 import ProgramBoi from "./runtime/ProgramBoi";
 import MilestoneBoi from "./runtime/MilestoneBoi";
 import {useKpm} from "../hooks/kpm";
+import useLocalStorage from "../hooks/storage";
 
 function PlayPage(): JSX.Element {
   const {active, ready, ended, workout, reset, resume} = useContext(RuntimeContext);
@@ -178,6 +179,7 @@ function RunPlayPage(): JSX.Element {
   const {workout} = useContext(RuntimeContext);
   const lastState = useLastState();
   const kpm = useKpm();
+  const [statPos] = useLocalStorage<"left" | "right">("stats.position", "left");
 
   if (!workout || workout.status === WorkoutStatus.Created) {
     return <LoadingPage minimal/>;
@@ -187,7 +189,7 @@ function RunPlayPage(): JSX.Element {
     <Page title="YKonsole" background={"2046"}>
       <ControlsBoi/>
       {lastState && (
-        <Boi vertical="center" horizontal="left" style={{padding: "0.5vmax", paddingBottom: "0"}}>
+        <Boi vertical="center" horizontal={statPos} style={{padding: "0.5vmax", paddingBottom: "0"}}>
           <span style={{fontSize: "125%"}}>
             <FluffyValue raw={lastState} valueKey="time"/>
           </span>