diff --git a/install-and-build.sh b/install-and-build.sh index b12073e..74a3dfb 100644 --- a/install-and-build.sh +++ b/install-and-build.sh @@ -2,4 +2,3 @@ cd ./my-bois npm install sh build.sh - diff --git a/my-bois/src/components/Bois.css b/my-bois/src/components/Bois.css index 6ef06d9..a34b8d8 100644 --- a/my-bois/src/components/Bois.css +++ b/my-bois/src/components/Bois.css @@ -23,20 +23,6 @@ font-size: 5vmax; } -.Boi-centre-warning { - margin-top: 1em; - font-weight: 800; - font-size: 150%; -} - -.Boi-centre-info { - font-size: 80%; -} - -.Boi-centre-info td:first-child { - padding-right: 1ch; -} - .Boi-right { right: 0; bottom: 0; diff --git a/my-bois/src/components/Bois.jsx b/my-bois/src/components/Bois.jsx index a1af919..a36cb50 100644 --- a/my-bois/src/components/Bois.jsx +++ b/my-bois/src/components/Bois.jsx @@ -1,12 +1,12 @@ -import React, {useContext, useEffect, useMemo, useState} from 'react'; +import React, {useContext, useEffect, useState} from 'react'; import "./Bois.css"; import {StatusContext} from "./Contexts"; import {CalorieScore, CpmScore, DistanceScore, RpmScore, Timer} from "./Score"; import calculateDiff from "../helpers/diff"; import useKey from "../hooks/useKey"; -import {COLOR_VERY_BAD} from "../helpers/color"; import {Milestones} from "./Milestones"; +import {Info, InfoTable, StateFilter, Warning} from "./Misc"; const Boi = ({type, children}) => { return ( @@ -17,8 +17,8 @@ const Boi = ({type, children}) => { }; export const LeftBoi = () => { - const {prevLongDiff, workoutStatus, program} = useContext(StatusContext); - if (workoutStatus === null || program === null) { + const {prevLongDiff, workoutStatus, program, hidden} = useContext(StatusContext); + if (workoutStatus === null || program === null || hidden) { return null; } @@ -113,8 +113,7 @@ export const CentreBoi = () => { } }); - useKey("H", () => showHide()); - useKey("h", () => showHide()); + useKey(["H", "h"], () => showHide()); function showHide() { setHidden(!hidden); @@ -131,9 +130,7 @@ export const CentreBoi = () => { if (diff < 0) { return ( - - {diff} - + {diff} ); } else { @@ -142,51 +139,65 @@ export const CentreBoi = () => { } if (bikes === null || programs === null) { - return Laster inn...; + return Laster inn...; } + function currentOptionName() { + if (options === null) { + return ""; + } + + if (options[current] === void(0)) { + return ""; + } + + return options[current].name; + } + + console.log(state); + return ( - {state === "stopped" && ( -
Inaktiv
- )} - {state === "bike" && ( -
+ + Inaktiv + + + Velg sykkel (+/-):
- {options[current].name} -
- )} - {state === "program" && ( -
+ {currentOptionName()} + + + + Velg program (+/-):
- {options[current].name} -
- )} - {state === "connected" && ( - - - - - - - - - -
Enter:Start
Esc:Avslutt
- )} - {state === "unknown" && ( -
Noe gikk galt
- )} + {currentOptionName()} + + + + + + + Kobler til... + + + Abonnerer på WS... + + + Noe gikk galt! + ); }; export const RightBoi = () => { - const {milestones} = useContext(StatusContext); + const {milestones, hidden} = useContext(StatusContext); - if ((milestones || []).length === 0) { + if (hidden || (milestones || []).length === 0) { return null; } diff --git a/my-bois/src/components/Contexts.jsx b/my-bois/src/components/Contexts.jsx index 79f5c42..b9f2047 100644 --- a/my-bois/src/components/Contexts.jsx +++ b/my-bois/src/components/Contexts.jsx @@ -87,31 +87,29 @@ export const StatusContextProvider = ({children}) => { } socket.onmessage = ({data}) => { - onSocketMessage(workout, program, JSON.parse(data)); + const body = JSON.parse(data); + + if (typeof body.workout !== "undefined") { + setWorkout({...body.workout, ...workout}); + } + + if (typeof body.workoutStatusBackfill !== "undefined") { + body.workoutStatusBackfill.forEach(wsbf => { + setWorkoutStatus(wsbf); + msDispatch({type: "measure", payload: {...wsbf, program}}); + }); + } + + if (typeof body.workoutStatus !== "undefined") { + setWorkoutStatus(body.workoutStatus); + msDispatch({type: "measure", payload: {...body.workoutStatus, program}}); + } }; return () => { socket.onmessage = null; } - }, [socket, workout, program]); - - function onSocketMessage(myWorkout, program, body) { - if (typeof body.workout !== "undefined") { - setWorkout({...body.workout, ...myWorkout}); - } - - if (typeof body.workoutStatusBackfill !== "undefined") { - body.workoutStatusBackfill.forEach(wsbf => { - setWorkoutStatus(wsbf); - msDispatch({type: "measure", payload: {...wsbf, program}}); - }); - } - - if (typeof body.workoutStatus !== "undefined") { - setWorkoutStatus(body.workoutStatus); - msDispatch({type: "measure", payload: {...body.workoutStatus, program}}); - } - } + }, [socket, workout, program, msDispatch]); async function create(myProgram = null) { setWorkoutStatus(null); @@ -162,6 +160,7 @@ export const StatusContextProvider = ({children}) => { setBike, setProgram, create, resume, start, pause, stop, programs, bikes, + prevDiff, prevLongDiff, hidden, setHidden, }}> {children} diff --git a/my-bois/src/components/Milestones.jsx b/my-bois/src/components/Milestones.jsx index dcc416f..41ee904 100644 --- a/my-bois/src/components/Milestones.jsx +++ b/my-bois/src/components/Milestones.jsx @@ -6,14 +6,16 @@ import {colorByDiff} from "../helpers/color"; export const Milestones = ({milestones}) => ( - {milestones.map(milestone => )} + + {milestones.map(milestone => )} +
); const Milestone = ({minutes, calories, diff, prevDiff}) => ( - {minutes} - {calories} - {minutes % 5 === 0 ? diffString(diff) : ""} +  {minutes} +  {calories} +  {minutes % 5 === 0 ? diffString(diff) : ""} ); \ No newline at end of file diff --git a/my-bois/src/components/Misc.css b/my-bois/src/components/Misc.css new file mode 100644 index 0000000..96e1899 --- /dev/null +++ b/my-bois/src/components/Misc.css @@ -0,0 +1,13 @@ +.Warning { + margin-top: 1em; + font-weight: 800; + font-size: 150%; +} + +.Info { + font-size: 80%; +} + +.Info table td:first-child { + padding-right: 1ch; +} diff --git a/my-bois/src/components/Misc.jsx b/my-bois/src/components/Misc.jsx new file mode 100644 index 0000000..30e59d1 --- /dev/null +++ b/my-bois/src/components/Misc.jsx @@ -0,0 +1,35 @@ +import React from 'react'; +import {COLOR_VERY_BAD} from "../helpers/color"; + +import "./Misc.css"; + +const Filter = ({bool, children}) => bool ? <>{children} : null; + +export const StateFilter = ({current, required, children}) => ( + {children} +); + +export const Warning = ({children}) => ( +
+ {children} +
+); + +export const Info = ({children}) => ( +
+ {children} +
+); + +export const InfoTable = ({keyValuePairs}) => ( + + + {keyValuePairs.map(({key, value}) => ( + + + + + ))} +
{key}:{value}
+ +); diff --git a/my-bois/src/hooks/milestones.js b/my-bois/src/hooks/milestones.js index f552114..d7d77aa 100644 --- a/my-bois/src/hooks/milestones.js +++ b/my-bois/src/hooks/milestones.js @@ -22,7 +22,7 @@ function reducer(state, {type, payload}) { let newMilestones = milestones.filter(m => m.minutes !== minutes); newMilestones.push({ minutes, seconds, calories, diff, - prevDiff: isFive ? prevDiff : prevLongDiff + prevDiff: isFive ? prevLongDiff : prevDiff }); if (isFive) { diff --git a/my-bois/src/hooks/useKey.js b/my-bois/src/hooks/useKey.js index 80d8a88..f3d1712 100644 --- a/my-bois/src/hooks/useKey.js +++ b/my-bois/src/hooks/useKey.js @@ -2,8 +2,10 @@ import {useEffect} from "react"; export default function useKey(keyName, callback) { useEffect(() => { + const keys = Array.isArray(keyName) ? keyName : [keyName]; + const handler = function (ev) { - if (ev.key === keyName) { + if (keys.includes(ev.key)) { if (callback()) { ev.preventDefault(); }