diff --git a/src/app.js b/src/app.js index 16cc514..0fc1cdf 100644 --- a/src/app.js +++ b/src/app.js @@ -12,22 +12,52 @@ ShadowDOM.append(ShadowDiv); TW.Init(ShadowCSS, ShadowDiv); +const Controls =()=> +{ + const [State, Dispatch] = Store.Consumer(); + return html` +
+
Channel
+
${State.Chan.Value}
+ <${UI.Button} light=${State.Chan.Value == 0} inactive=${State.Chan.Value == 0} onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left + <${UI.Button} light=${State.Chan.Value == 1} inactive=${State.Chan.Value == 1} onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right +
+
+
Frequency
+
${Store.ColumnMapping[State.Freq.Value][0]}
+ <${UI.Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}>- + <${UI.Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}>+ +
+
+
Stimulus
+
${State.Stim.Value}
+ <${UI.Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}>- + <${UI.Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}>+ +
+
+
Mark
+ <${UI.Button} onClick=${()=>Dispatch({Name:"Mark", Data:true })}>Response + <${UI.Button} onClick=${()=>Dispatch({Name:"Mark", Data:false})}>No Response + <${UI.Button} onClick=${()=>Dispatch({Name:"Mark", Data:null })} disabled=${State.Live.Mark == undefined}>Clear +
+ `; +}; const Audiogram =()=> { const [State] = Store.Consumer(); - + /** @type {(inAmount:number)=>string} */ const Perc =(inAmount)=> (inAmount*100)+"%"; const testMarksL = State.Draw.TestL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`); + const userMarksL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false} classes=${State.Live.Mark == p.Mark ? "stroke-bold":""}/>`); const testMarksR = State.Draw.TestR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`); - const testLinesL = State.Draw.TestL.Paths.map( p=>html``); - const testLinesR = State.Draw.TestR.Paths.map( p=>html``); + const userMarksR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} classes=${State.Live.Mark == p.Mark ? "stroke-bold":""}/>`); - const userMarksL = State.Draw.UserL.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${false}/>`); - const userMarksR = State.Draw.UserR.Points.map(p=>html`<${UI.Mark} x=${Perc(p.X)} y=${Perc(p.Y)} response=${p.Mark.Resp} right=${true} />`); + const testLinesL = State.Draw.TestL.Paths.map( p=>html``); const userLinesL = State.Draw.UserL.Paths.map( p=>html``); + const testLinesR = State.Draw.TestR.Paths.map( p=>html``); const userLinesR = State.Draw.UserR.Paths.map( p=>html``); return html` @@ -39,10 +69,7 @@ const Audiogram =()=> React.render(html` <${Store.Provider}> - <${UI.Button} icon="+">hey! - <${UI.Button} light>Left - <${UI.Button} inactive>Right - <${UI.Button} disabled>Right + <${Controls}/> <${UI.Chart}> <${Audiogram}/> diff --git a/src/store.js b/src/store.js index fb80c3d..e15317a 100644 --- a/src/store.js +++ b/src/store.js @@ -55,8 +55,13 @@ export const Initial = Name: "Patient A Asymmetric Notch", Plot: [ - { Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, Resp: true } }, - { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, Resp: true } } + { Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } }, + { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }, + { Hz: 2000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }, + { Hz: 3000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }, + { Hz: 4000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }, + { Hz: 6000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }, + { Hz: 8000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } } ] } ] @@ -153,15 +158,16 @@ export function Reducer(inState, inAction) TestL: Congtiguous(clone.Live.Test, 0, clone.Stim, false), TestR: Congtiguous(clone.Live.Test, 1, clone.Stim, false) }; + clone.Live = {...clone.Live}; } else if (Name == "Mark") { if(clone.Live.Test && clone.Live.Freq) { clone.Live.Mark = MarkSet(clone.Live.Freq, clone.Chan.Value, Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined); - - clone.Draw = {...clone.Draw}; clone.Draw[clone.Chan.Value == 0 ? "UserL" : "UserR"] = Congtiguous(clone.Live.Test, clone.Chan.Value, clone.Stim, true); + clone.Live = {...clone.Live}; + clone.Draw = {...clone.Draw}; } } else if( Name=="Stim" || Name=="Chan" || Name=="Freq") @@ -175,6 +181,7 @@ export function Reducer(inState, inAction) { Update.Freq(clone); Update.Mark(clone); + clone.Live = {...clone.Live}; } } diff --git a/store.test.ts b/store.test.ts index 829a9d9..aa2b479 100644 --- a/store.test.ts +++ b/store.test.ts @@ -1,7 +1,34 @@ import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts"; import { Reducer, ColumnMapping, Initial } from "./src/store.js"; -let state = {...Initial}; +let state:Store.State = { + Chan: { Min:0, Max:1, Value:0, Step:1 }, + Freq: { Min:2, Max:8, Value:2, Step:1 }, + Stim: { Min:-10, Max:120, Value:30, Step:5 }, + Live: + { + Test: undefined, + Freq: undefined, + Mark: undefined + }, + Draw: + { + UserL:{Points:[], Paths:[]}, + UserR:{Points:[], Paths:[]}, + TestL:{Points:[], Paths:[]}, + TestR:{Points:[], Paths:[]} + }, + Tests: [ + { + Name: "Patient A Asymmetric Notch", + Plot: + [ + { Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, Resp: true } }, + { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, Resp: true } } + ] + } + ] +}; Deno.test("Initialize", async(t)=> {