diff --git a/js/app.js b/js/app.js index dde84a9..352ed35 100644 --- a/js/app.js +++ b/js/app.js @@ -23,7 +23,7 @@ React.render(html` <${UI.Controls}/> <${UI.Chart}> <${UI.Audiogram}/> -
+
<${UI.Display}/>
diff --git a/js/ui.js b/js/ui.js index 03117e3..d6fb464 100644 --- a/js/ui.js +++ b/js/ui.js @@ -44,40 +44,54 @@ export const Header =()=> const grade = State.Live.Test?.Done || {Marks:0, Total:0, Score:0}; /** @type {(e:Event)=>void} */ - const handleChange =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)}); + const handleChangeCondition =(e)=> Dispatch({Name:"Test", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)}); + /** @type {(e:Event)=>void} */ + const handleChangeReliability =(e)=> Dispatch({Name:"Errs", Data:parseInt(/** @type {HTMLSelectElement}*/(e.target).value)}); return html` -
+
-
-
- -
-
-

Patient Reliability:

- <${Button} inactive=${State.Errs == 0} light=${State.Errs == 0} classes="basis-[calc(50%-2px)] md:flex-1 lg:flex-[1.5] text-xs" classesActive="bg-green-600" onClick=${()=>Dispatch({Name:"Errs", Data:0})}>Perfect(Training Mode) - <${Button} inactive=${State.Errs == 1} light=${State.Errs == 1} classes="basis-[calc(50%-2px)] md:flex-1 font-bold text-xs" classesActive="bg-yellow-600" onClick=${()=>Dispatch({Name:"Errs", Data:1})}>Good - <${Button} inactive=${State.Errs == 2} light=${State.Errs == 2} classes="basis-[calc(50%-2px)] md:flex-1 font-bold text-xs" classesActive="bg-orange-700" onClick=${()=>Dispatch({Name:"Errs", Data:2})}>Reduced - <${Button} inactive=${State.Errs == 3} light=${State.Errs == 3} classes="basis-[calc(50%-2px)] md:flex-1 font-bold text-xs" classesActive="bg-red-800" onClick=${()=>Dispatch({Name:"Errs", Data:3})}>Poor +
+

Test Patient

+
+ +
+
+
+

Condition:

+ +
+
+
+
+

Reliability:

+ + +
+
+ +
-
-
-
Complete: ${grade.Marks} of ${grade.Total}
-
-
-
-
Accuracy: ${grade.Score}%
- <${Button} disabled=${grade.Marks == 0} classes="flex-1 text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over -
-
+ +
`; } @@ -85,17 +99,28 @@ export const Header =()=> export const Display =()=> { const [State, Dispatch] = Store.Consumer(); + const grade = State.Live.Test?.Done || {Marks:0, Total:0, Score:0}; return html` -
-
-
-

Toggle Overlay

- <${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 +
+
+
+

Display

+ <${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 +
+
+
+
+
Complete: ${grade.Marks} of ${grade.Total}
+
+
+
+
Accuracy: ${grade.Score}%
+ <${Button} disabled=${grade.Marks == 0} classes="text-xs" onClick=${()=>Dispatch({Name:"Kill", Data:0})}>Start Over +
-
`; }; @@ -142,14 +167,14 @@ export const Controls =()=>

Controls

-
+

Channel

<${Button} inactive=${State.Chan.Value == 0} light=${State.Chan.Value == 0} classes="flex-1 text-sm" onClick=${()=>Dispatch({Name:"Chan", Data:-1})}>Left <${Button} inactive=${State.Chan.Value == 1} light=${State.Chan.Value == 1} classes="flex-1 text-sm" onClick=${()=>Dispatch({Name:"Chan", Data:1})}>Right
-
+

Frequency ${Store.ColumnMapping[State.Freq.Value][0]} (Hz)

@@ -166,7 +191,7 @@ export const Controls =()=>
-
+

Hearing Level ${State.Stim.Value} (dBHL)

@@ -188,7 +213,7 @@ export const Controls =()=>

Tone

-
+
@@ -245,7 +270,7 @@ export const Controls =()=>

Thresholds

-
+
<${Button} onClick=${()=>Dispatch({Name:"Mark", Data:true })} @@ -315,8 +340,8 @@ export const Audiogram =()=> ${ State.Show.Cursor && html` - - + +