|
|
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 {Milestones} from "./Milestones"; import {Info, InfoTable, StateFilter, Warning} from "./Misc";
const Boi = ({type, children}) => { return ( <div className={`Boi Boi-${type}`}> {children} </div> ) };
export const LeftBoi = () => { const {prevLongDiff, workoutStatus, program, hidden} = useContext(StatusContext); if (workoutStatus === null || program === null || hidden) { return null; }
const {minutes, seconds, calories, distance, rpm} = workoutStatus; const diff = calculateDiff(program, minutes, seconds, calories); const cpm = calories / (minutes + (seconds / 60));
return ( <Boi type="left"> <Timer minutes={minutes} seconds={seconds}/> <CalorieScore calories={calories} diff={diff} prevDiff={prevLongDiff}/> <DistanceScore distance={distance}/> <RpmScore rpm={rpm}/> <CpmScore cpm={cpm}/> </Boi> ); };
export const CentreBoi = () => { const { state, program, setProgram, bike, setBike, bikes, programs, start, pause, stop, create, workoutStatus, hidden, setHidden, } = useContext(StatusContext); const [options, setOptions] = useState(null); const [current, setCurrent] = useState(0);
useEffect(() => { if (bikes === null && programs === null) { return; }
setOptions(state === "bike" ? bikes : programs); }, [state, bike, program, bikes, programs]);
useKey("-", () => { if (options === null) { return false; }
if (current > 0) { setCurrent(current - 1); } else { setCurrent(options.length - 1); }
return true; });
useKey("+", () => { if (options === null) { return false; }
if (current < options.length - 1) { setCurrent(current + 1); } else { setCurrent(0); }
return true; });
useKey("Enter", () => { if (state === "bike") { setBike(options[current]);
return true; } else if (state === "program") { setProgram(options[current]); create(options[current]);
return true; } else if (state === "connected") { start();
return true; } else if (state === "started") { pause();
return true; }
return false; });
useKey("Escape", () => { if (state === "connected") { stop();
return true; } });
useKey(["H", "h"], () => showHide());
function showHide() { setHidden(!hidden); }
if (hidden) { return null; }
if (state === "started" && workoutStatus !== null) { const {minutes, seconds, calories} = workoutStatus; const diff = calculateDiff(program, minutes, seconds, calories);
if (diff < 0) { return ( <Boi type="centre"> <Warning>{diff}</Warning> </Boi> ); } else { return null; } }
if (bikes === null || programs === null) { return <Boi type="centre"><Info>Laster inn...</Info></Boi>; }
function currentOptionName() { if (options === null) { return ""; }
if (options[current] === void(0)) { return ""; }
return options[current].name; }
console.log(state);
return ( <Boi type="centre"> <StateFilter current={state} required="stopped"> <Info>Inaktiv</Info> </StateFilter> <StateFilter current={state} required="bike"> <Info> Velg sykkel (+/-): <br/> <b>{currentOptionName()}</b> </Info> </StateFilter> <StateFilter current={state} required="program"> <Info> Velg program (+/-): <br/> <b>{currentOptionName()}</b> </Info> </StateFilter> <StateFilter current={state} required="connected"> <InfoTable keyValuePairs={[ {key: "Enter", value: "Start"}, {key: "Escape", value: "Avslutt"}, ]}/> </StateFilter> <StateFilter current={state} required="disconnected"> <Info>Kobler til...</Info> </StateFilter> <StateFilter current={state} required="started"> <Info>Abonnerer på WS...</Info> </StateFilter> <StateFilter current={state} required="unknown"> <Info>Noe gikk galt!</Info> </StateFilter> </Boi> ); };
export const RightBoi = () => { const {milestones, hidden} = useContext(StatusContext);
if (hidden || (milestones || []).length === 0) { return null; }
return ( <Boi type="right"> <Milestones milestones={milestones.sort((i, j) => j.minutes - i.minutes)}/> </Boi> ); };
|