start error ui

This commit is contained in:
Seth Trowbridge 2023-06-07 19:30:56 -04:00
parent 6c6220e5db
commit 3af4718cdb
4 changed files with 34 additions and 9 deletions

View File

@ -23,10 +23,11 @@ React.render(html`
<${UI.Controls}/> <${UI.Controls}/>
<${UI.Chart}> <${UI.Chart}>
<${UI.Audiogram}/> <${UI.Audiogram}/>
<div class="absolute bottom-0 right-0"><${UI.Display}/></div>
<//> <//>
</div> </div>
<${UI.Display}/>
</div> </div>
<//> <//>

View File

@ -148,6 +148,22 @@ export function Reducer(inState, inAction)
clone.Live = Reselect(clone); clone.Live = Reselect(clone);
} }
} }
else if (Name == "Errs")
{
clone.Errs = Data;
}
else if (Name == "Kill")
{
console.log(clone.Live.Test);
clone.Live.Test && clone.Live.Test.Plot.forEach(freq=>
{
freq.UserL = undefined;
freq.UserR = undefined;
});
clone.Draw["UserL"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
clone.Draw["UserR"] = Redraw(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
SaveTests(clone);
}
else if (Name == "ShowCursor") else if (Name == "ShowCursor")
{ {
clone.Show.Cursor = Data; clone.Show.Cursor = Data;
@ -245,6 +261,7 @@ export const Initial = Reducer(
Chan: { Min:0, Max:1, Value:0, Step:1 }, Chan: { Min:0, Max:1, Value:0, Step:1 },
Freq: { Min:2, Max:8, Value:3, Step:1 }, Freq: { Min:2, Max:8, Value:3, Step:1 },
Stim: { Min:-10, Max:120, Value:30, Step:5 }, Stim: { Min:-10, Max:120, Value:30, Step:5 },
Errs: 0,
Live: Live:
{ {
Test: undefined, Test: undefined,

View File

@ -3,7 +3,7 @@ import { html } from "htm";
import * as Store from "./store.js"; import * as Store from "./store.js";
import * as Tone from "./tone.js"; import * as Tone from "./tone.js";
/** @typedef {({children}:{children?:preact.ComponentChildren})=>preact.VNode} BasicElement */ /** @typedef {({children, classes}:{children?:preact.ComponentChildren, classes?:string})=>preact.VNode} BasicElement */
/** @type {({children, icon, light, disabled, inactive, onClick, classes}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void, classes?:string})=>preact.VNode} */ /** @type {({children, icon, light, disabled, inactive, onClick, classes}:{children:preact.VNode, icon?:preact.VNode, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void, classes?:string})=>preact.VNode} */
export function Button({children, icon, light, disabled, inactive, onClick, classes}) export function Button({children, icon, light, disabled, inactive, onClick, classes})
@ -58,10 +58,11 @@ export const Header =()=>
</select> </select>
</div> </div>
<div class="box-buttons w-full mt-2"> <div class="box-buttons w-full mt-2">
<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>None<//> <p>Patient Error:</p>
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Slight<//> <${Button} inactive=${State.Errs == 0.0} light=${State.Errs == 0.0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.0})}>None<//>
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Moderate<//> <${Button} inactive=${State.Errs == 0.1} light=${State.Errs == 0.1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.1})}>Slight<//>
<${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Severe<//> <${Button} inactive=${State.Errs == 0.3} light=${State.Errs == 0.3} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.3})}>Moderate<//>
<${Button} inactive=${State.Errs == 0.6} light=${State.Errs == 0.6} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Errs", Data:0.6})}>Severe<//>
</div> </div>
</div> </div>
@ -72,8 +73,11 @@ export const Header =()=>
<div class="h-full w-[${grade.Done/grade.Total*100}%] bg-earmark"></div> <div class="h-full w-[${grade.Done/grade.Total*100}%] bg-earmark"></div>
</div> </div>
<div class="text-sm">Accuracy: ${grade.Score}%</div> <div class="text-sm">Accuracy: ${grade.Score}%</div>
<${Button} disabled=${grade.Done == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over<//>
</div> </div>
</div> </div>
</div>`; </div>`;
} }
@ -323,7 +327,7 @@ export function Chart({children})
); );
} }
return html` return html`
<div class="relative w-full pb-[calc(55%+60px)] font(sans medium) text(xs) self-start"> <div class="relative w-full pb-[calc(55%+70px)] font(sans medium) text(xs) self-start">
<div class="absolute right-0 bottom-0 w-[calc(100%-60px)] h-[calc(100%-70px)] border(1 zinc-300)"> <div class="absolute right-0 bottom-0 w-[calc(100%-60px)] h-[calc(100%-70px)] border(1 zinc-300)">
<span class="block absolute top-[-65px] left-0 w-full text(sm center) font-black">Frequency in Hz</span> <span class="block absolute top-[-65px] left-0 w-full text(sm center) font-black">Frequency in Hz</span>
<span class="inline-block absolute top-[50%] left-[-50px] "> <span class="inline-block absolute top-[50%] left-[-50px] ">

5
ts/store.d.ts vendored
View File

@ -24,6 +24,7 @@ declare namespace Store {
Chan: Range; Chan: Range;
Freq: Range; Freq: Range;
Stim: Range; Stim: Range;
Errs: number;
Live: Context; Live: Context;
Draw: DrawChart; Draw: DrawChart;
Show: {Cursor:boolean, Answer:boolean} Show: {Cursor:boolean, Answer:boolean}
@ -36,9 +37,11 @@ declare namespace Store {
type ActionChan = { Name: "Chan"; Data: number }; type ActionChan = { Name: "Chan"; Data: number };
type ActionFreq = { Name: "Freq"; Data: number }; type ActionFreq = { Name: "Freq"; Data: number };
type ActionStim = { Name: "Stim"; Data: number }; type ActionStim = { Name: "Stim"; Data: number };
type ActionErrs = { Name: "Errs"; Data: number };
type ActionKill = { Name: "Kill"; Data: number };
type ActionShowCursor = {Name: "ShowCursor", Data:boolean}; type ActionShowCursor = {Name: "ShowCursor", Data:boolean};
type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean}; type ActionShowAnswer = {Name: "ShowAnswer", Data:boolean};
type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionShowCursor | ActionShowAnswer; type Action = ActionMark | ActionTest | ActionChan | ActionFreq | ActionStim | ActionErrs | ActionKill | ActionShowCursor | ActionShowAnswer;
type Reducer = (inState: State, inAction: Action) => State; type Reducer = (inState: State, inAction: Action) => State;
type ContextUpdater = (inState: State) => boolean; type ContextUpdater = (inState: State) => boolean;