feature/layout-updates #1
45
src/app.js
45
src/app.js
@ -12,22 +12,52 @@ ShadowDOM.append(ShadowDiv);
|
|||||||
|
|
||||||
TW.Init(ShadowCSS, ShadowDiv);
|
TW.Init(ShadowCSS, ShadowDiv);
|
||||||
|
|
||||||
|
const Controls =()=>
|
||||||
|
{
|
||||||
|
const [State, Dispatch] = Store.Consumer();
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="flex">
|
||||||
|
<div>Channel</div>
|
||||||
|
<div>${State.Chan.Value}</div>
|
||||||
|
<${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<//>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div>Frequency</div>
|
||||||
|
<div>${Store.ColumnMapping[State.Freq.Value][0]}</div>
|
||||||
|
<${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})}>+<//>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div>Stimulus</div>
|
||||||
|
<div>${State.Stim.Value}</div>
|
||||||
|
<${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})}>+<//>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<div>Mark</div>
|
||||||
|
<${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<//>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
};
|
||||||
|
|
||||||
const Audiogram =()=>
|
const Audiogram =()=>
|
||||||
{
|
{
|
||||||
const [State] = Store.Consumer();
|
const [State] = Store.Consumer();
|
||||||
|
|
||||||
/** @type {(inAmount:number)=>string} */ const Perc =(inAmount)=> (inAmount*100)+"%";
|
/** @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 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 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`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
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 testLinesR = State.Draw.TestR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
|
||||||
|
|
||||||
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 testLinesL = State.Draw.TestL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
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 userLinesL = State.Draw.UserL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
const userLinesL = State.Draw.UserL.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
|
const testLinesR = State.Draw.TestR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
const userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
const userLinesR = State.Draw.UserR.Paths.map( p=>html`<line class="opacity-60" x1=${Perc(p.Head.X)} y1=${Perc(p.Head.Y)} x2=${Perc(p.Tail.X)} y2=${Perc(p.Tail.Y)} />`);
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
@ -39,10 +69,7 @@ const Audiogram =()=>
|
|||||||
|
|
||||||
React.render(html`
|
React.render(html`
|
||||||
<${Store.Provider}>
|
<${Store.Provider}>
|
||||||
<${UI.Button} icon="+">hey!<//>
|
<${Controls}/>
|
||||||
<${UI.Button} light>Left<//>
|
|
||||||
<${UI.Button} inactive>Right<//>
|
|
||||||
<${UI.Button} disabled>Right<//>
|
|
||||||
<${UI.Chart}>
|
<${UI.Chart}>
|
||||||
<${Audiogram}/>
|
<${Audiogram}/>
|
||||||
<//>
|
<//>
|
||||||
|
15
src/store.js
15
src/store.js
@ -55,8 +55,13 @@ export const Initial =
|
|||||||
Name: "Patient A Asymmetric Notch",
|
Name: "Patient A Asymmetric Notch",
|
||||||
Plot:
|
Plot:
|
||||||
[
|
[
|
||||||
{ Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true }, UserL: { Stim: 55, Resp: true }, UserR: { Stim: 50, 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 }, UserL: { Stim: 50, Resp: true }, UserR: { Stim: 30, 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),
|
TestL: Congtiguous(clone.Live.Test, 0, clone.Stim, false),
|
||||||
TestR: Congtiguous(clone.Live.Test, 1, clone.Stim, false)
|
TestR: Congtiguous(clone.Live.Test, 1, clone.Stim, false)
|
||||||
};
|
};
|
||||||
|
clone.Live = {...clone.Live};
|
||||||
}
|
}
|
||||||
else if (Name == "Mark")
|
else if (Name == "Mark")
|
||||||
{
|
{
|
||||||
if(clone.Live.Test && clone.Live.Freq)
|
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.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.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")
|
else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
|
||||||
@ -175,6 +181,7 @@ export function Reducer(inState, inAction)
|
|||||||
{
|
{
|
||||||
Update.Freq(clone);
|
Update.Freq(clone);
|
||||||
Update.Mark(clone);
|
Update.Mark(clone);
|
||||||
|
clone.Live = {...clone.Live};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,34 @@
|
|||||||
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
|
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 "./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)=>
|
Deno.test("Initialize", async(t)=>
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user