diff --git a/js/app.js b/js/app.js index fcc2b29..e232f32 100644 --- a/js/app.js +++ b/js/app.js @@ -15,17 +15,19 @@ TW.Init(ShadowCSS, ShadowDiv); React.render(html` <${Store.Provider}> -
- <${UI.Select}/> -
+
+ <${UI.Header}/> + +
<${UI.Controls}/> - -
<${UI.Chart}> <${UI.Audiogram}/>
+ <${UI.Display}/> + +
`, ShadowDiv); \ No newline at end of file diff --git a/js/ui.js b/js/ui.js index 17b955e..d28ffd7 100644 --- a/js/ui.js +++ b/js/ui.js @@ -36,7 +36,7 @@ export function Button({children, icon, light, disabled, inactive, onClick, clas } /** @type {BasicElement} */ -export const Select =()=> +export const Header =()=> { const [State, Dispatch] = Store.Consumer(); const grade = Store.Grade(State.Live.Test); @@ -45,23 +45,28 @@ export const Select =()=> const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)}); return html` -
-
-
- -
+
+ +
+
-
-
Select Test
-
- ${State.Test.map((t, i)=>html``)}
+
+ <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>None + <${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.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Moderate + <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Severe +
-
-
Progress
-
+ +
+
Complete: ${grade.Done} of ${grade.Total}
@@ -69,15 +74,24 @@ export const Select =()=>
Accuracy: ${grade.Score}%
-
-
Display
-
+
`; +} + +/** @type {BasicElement} */ +export const Display =()=> +{ + const [State, Dispatch] = Store.Consumer(); + return html` +
+
+
<${Button} light=${State.Show.Cursor} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowCursor", Data:!State.Show.Cursor})}>Cursor <${Button} light=${State.Show.Answer} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"ShowAnswer", Data:!State.Show.Answer})}>Answer
-
`; -} +
+ `; +}; /** @type {BasicElement} */ export const Controls =()=> @@ -109,135 +123,134 @@ export const Controls =()=> const classTitle = "flex-1 text-sm" return html` -
-
-
-
Channel
+
+
+
- <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left - <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right + <${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left Ear + <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right Ear
-
- -
-
-
-
Frequency
-
-
${Store.ColumnMapping[State.Freq.Value][0]} Hz
- <${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}> - - <${Glyph.Minus}/> - - - <${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}> - - <${Glyph.Plus}/> - - -
-
-
-
Stimulus
-
-
${State.Stim.Value} dbHL
- <${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}> - - <${Glyph.Minus}/> - - - <${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}> - - <${Glyph.Plus}/> - - -
-
-
- - - - - - - ${playGet == 2 && html``} - - - - - - - - - - - - - - - - - - - - -
-
- <${Button} - classes="w-full flex-1 self-center" - onClick=${()=>playSet(1)} - disabled=${playGet==1} - icon=${html` - - `} - > - Present Tone +
+
+
${Store.ColumnMapping[State.Freq.Value][0]} Hz
+ <${Button} disabled=${State.Freq.Value == State.Freq.Min} onClick=${()=>Dispatch({Name:"Freq", Data:-1})}> + + <${Glyph.Minus}/> + -
- <${Button} onClick=${()=>{pulsedSet(true )}} light=${pulsedGet } inactive${pulsedGet } classes="flex-1 text(center xs)">Pulsed - <${Button} onClick=${()=>{pulsedSet(false)}} light=${!pulsedGet} inactive${!pulsedGet} classes="flex-1 text(center xs)">Continuous + <${Button} disabled=${State.Freq.Value == State.Freq.Max} onClick=${()=>Dispatch({Name:"Freq", Data:1})}> + + <${Glyph.Plus}/> + + +
+
+
+
+
${State.Stim.Value} dbHL
+ <${Button} disabled=${State.Stim.Value == State.Stim.Min} onClick=${()=>Dispatch({Name:"Stim", Data:-1})}> + + <${Glyph.Minus}/> + + + <${Button} disabled=${State.Stim.Value == State.Stim.Max} onClick=${()=>Dispatch({Name:"Stim", Data:1})}> + + <${Glyph.Plus}/> + + +
+
+ +
+ +
+
+
+
+ <${Button} + classes="w-full flex-1 self-center" + onClick=${()=>playSet(1)} + disabled=${playGet==1} + icon=${html` + + `} + > + Present Tone + +
+ <${Button} onClick=${()=>{pulsedSet(true )}} light=${pulsedGet } inactive${pulsedGet } classes="flex-1 text(center xs)">Pulsed + <${Button} onClick=${()=>{pulsedSet(false)}} light=${!pulsedGet} inactive${!pulsedGet} classes="flex-1 text(center xs)">Continuous +
+ + + + + + + ${playGet == 2 && html``} + + + + + + + + + + + + + + + + + + + +
-
-
Threshold
-
- <${Button} - onClick=${()=>Dispatch({Name:"Mark", Data:true })} - classes="text-md w-full" - icon=${html` +
+
+
+ <${Button} + onClick=${()=>Dispatch({Name:"Mark", Data:true })} + classes="text-md w-full" + icon=${html` + + <${State.Chan.Value ? Glyph.O : Glyph.X}/> + `} + > + Accept + + <${Button} + onClick=${()=>Dispatch({Name:"Mark", Data:false})} + classes="text-sm w-full" + icon=${html` + + <${State.Chan.Value ? Glyph.O : Glyph.X}> + <${Glyph.Arrow}/> + + `} + > + No Response + + <${Button} + icon=${html` - <${State.Chan.Value ? Glyph.O : Glyph.X}/> - `} - > - Accept - - <${Button} - onClick=${()=>Dispatch({Name:"Mark", Data:false})} - classes="text-sm w-full" - icon=${html` - - <${State.Chan.Value ? Glyph.O : Glyph.X}> - <${Glyph.Arrow}/> - - `} - > - No Response - - <${Button} - icon=${html` - - <${Glyph.Null}/> - - `} - onClick=${()=>Dispatch({Name:"Mark", Data:null })} - classes="text-sm w-full" - disabled=${State.Live.Mark == undefined} - > - Clear - + <${Glyph.Null}/> + + `} + onClick=${()=>Dispatch({Name:"Mark", Data:null })} + classes="text-sm w-full" + disabled=${State.Live.Mark == undefined} + > + Clear + +
@@ -310,8 +323,8 @@ export function Chart({children}) ); } return html` -
-
+
+
Frequency in Hz diff --git a/ts/store.test.ts b/ts/store.test.ts index 39c1ccd..7c29953 100644 --- a/ts/store.test.ts +++ b/ts/store.test.ts @@ -1,5 +1,5 @@ import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts"; -import { Reducer, ColumnMapping, Initial } from "./src/store.js"; +import { Reducer, ColumnMapping, Initial } from "../js/store.js"; let state:Store.State = { Chan: { Min:0, Max:1, Value:0, Step:1 },