176 lines
5.0 KiB
JavaScript
176 lines
5.0 KiB
JavaScript
/** @import * as TYPES from "./graph/types.ts" */
|
|
import * as FSHandle from "./store-directory-handle.js";
|
|
|
|
const {Div, DOM} = Gale({
|
|
Title:{
|
|
padding:"2rem",
|
|
background: "blue",
|
|
color:"white"
|
|
},
|
|
Plain:{},
|
|
PartGroup:{
|
|
display: `flex`,
|
|
flexWrap: `wrap`
|
|
},
|
|
Part:{
|
|
border: `1px solid black`,
|
|
borderRadius: `5px`,
|
|
padding: `1rem`
|
|
}
|
|
});
|
|
|
|
async function PickHandle()
|
|
{
|
|
handle = await showDirectoryPicker();
|
|
await FSHandle.setDirectoryHandle(handle);
|
|
await LoadHandleFiles();
|
|
}
|
|
async function LoadHandleFiles()
|
|
{
|
|
try
|
|
{
|
|
const module = await import("./data/room.js"+"?rand="+Math.random());
|
|
/** @type {Record<string, TYPES.GraphParts>} */
|
|
const read = module.default();
|
|
rooms.val = read;
|
|
}
|
|
catch(_e)
|
|
{
|
|
rooms.val = {};
|
|
}
|
|
}
|
|
/** @type {Van.State<Record<string, TYPES.GraphParts>>} */
|
|
const rooms = van.state({});
|
|
let handle = await FSHandle.getDirectoryHandle();
|
|
await LoadHandleFiles();
|
|
|
|
|
|
/** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */
|
|
function Room(room_id, graphParts)
|
|
{
|
|
const rerender = van.state(0);
|
|
return Div.Plain(
|
|
|
|
Div.Plain("Passes:"),
|
|
Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
|
|
return ()=>{
|
|
console.log("rerendering...", rerender.val)
|
|
return Div.Plain(
|
|
Div.Title(
|
|
DOM.div.Plain(pass.name),
|
|
DOM.span.Plain(pass.path),
|
|
),
|
|
()=>{
|
|
return DOM.button.Plain(
|
|
{async onclick(){
|
|
await pass[pass.live ? "dump" : "load"]();
|
|
rerender.val++
|
|
}},
|
|
pass.live ? "Dump" : "Load"
|
|
)
|
|
},
|
|
)
|
|
}
|
|
}),
|
|
|
|
Div.Plain("Parts"),
|
|
Div.PartGroup(
|
|
Object.entries(graphParts.Part).map(([part_id, part])=>{
|
|
|
|
return ()=>{
|
|
|
|
rerender.val;
|
|
|
|
const work = []
|
|
for(const [_pass_ref, data] of part.pass)
|
|
{
|
|
|
|
work.push(Div.Part(
|
|
DOM.h5("Pass:", _pass_ref.name),
|
|
DOM.p(data.time),
|
|
data.work.map(([time, data, user])=>Div.Plain(
|
|
DOM.span(time),
|
|
" ",
|
|
DOM.strong(data),
|
|
))
|
|
))
|
|
}
|
|
|
|
return Div.Part(
|
|
DOM.h3("Part:", part.name),
|
|
...work
|
|
);
|
|
}
|
|
|
|
}),
|
|
),
|
|
|
|
Div.Plain("Desks"),
|
|
Div.PartGroup(
|
|
Object.entries(graphParts.Desk).map(([desk_id, desk])=>{
|
|
|
|
return ()=>{
|
|
|
|
rerender.val;
|
|
|
|
/** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:TYPES.Flag)=>HTMLElement|null} */
|
|
const Iterator = (part, index, pass, dirty)=>{
|
|
|
|
const partPass = part.pass.get(pass);
|
|
if(partPass)
|
|
{
|
|
const time = partPass.time;
|
|
const latest = partPass.work.find(t=>t[0] == time);
|
|
|
|
|
|
return Div.Plain(
|
|
part.name,
|
|
DOM.p( dirty.need.includes(index) ? "Dirty" : "Good!" ),
|
|
Div.Part(
|
|
time, " ", latest?.[1] || ""
|
|
)
|
|
);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
const work = [];
|
|
for(const [pass, dirty] of desk.pass)
|
|
{
|
|
work.push(Div.Part(
|
|
DOM.h5("Pass:", pass.name),
|
|
Div.Part(
|
|
DOM.h4("Need:"),
|
|
desk.need.map((part, index)=>Iterator(part, index, pass, dirty))
|
|
),
|
|
Div.Part(
|
|
DOM.h4("Make:"),
|
|
desk.make.map((part, index)=>Iterator(part, index, pass, dirty))
|
|
)
|
|
))
|
|
}
|
|
|
|
return Div.Part(
|
|
DOM.h3("Desk:", desk.name),
|
|
work
|
|
)
|
|
}
|
|
|
|
}),
|
|
),
|
|
|
|
)
|
|
}
|
|
|
|
function App()
|
|
{
|
|
return Div.Plain(
|
|
DOM.button({onclick:PickHandle}, "Pick Directory"),
|
|
Object.entries(rooms.val).map(([room_id, graphParts])=>
|
|
Room(room_id, graphParts)
|
|
)
|
|
)
|
|
}
|
|
|
|
van.add(document.body, App);
|