From 1d527de26f36a90a66738971703ccc71c8626bd1 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Sat, 1 Nov 2025 15:03:57 -0400 Subject: [PATCH] ui tweaks --- app.js | 248 ++++++++++++++++----------------- mock-user-folder/graph/room.js | 8 +- 2 files changed, 127 insertions(+), 129 deletions(-) diff --git a/app.js b/app.js index 9ae2776..ffdea68 100644 --- a/app.js +++ b/app.js @@ -59,45 +59,131 @@ async function LoadHandleFiles() } } - /** @type {Van.State>} */ const rooms = van.state({}); let handle = await FSHandle.getDirectoryHandle(); await LoadHandleFiles(); -/** @type {(path:string[], part:string, time:number, data:string)=>void} */ -async function WRITE(path, part, time, data) -{ - const fileHandle = await FSHandle.Dig(handle, path, true); - if(fileHandle) - { - const file = await fileHandle.getFile(); - const text = await file.text(); - let json = {}; - if(text) - { - json = JSON.parse(text); - } - let partProp = json[part]; - if(!partProp) - { - partProp = []; - json[part] = partProp; - } - partProp.push([time, data]); - const writeable = await fileHandle.createWritable(); - await writeable.write(JSON.stringify(json, null, 2)); - await writeable.close(); - } - -} /** @type {Van.State} */ const loggedIn = van.state(false); const blocking = van.state(false); +const showDesks = van.state(true); + +/** @type {(inParts:Record)=>HTMLElement} */ +function Parts(inParts) +{ + return Div.Plain( + Div.Plain("Parts"), + Div.PartGroup( + Object.entries(inParts).map(([part_id, part])=>{ + + const work = [] + for(const [pass, data] of part.pass) + { + + work.push(Div.Part( + DOM.h5(pass.name), + DOM.p(data.time), + data.work.map(([time, data, user])=>Div.Plain( + DOM.span(time), + " ", + DOM.strong(data), + )), + Div.Plain( + loggedIn.val ? DOM.button({onclick(){ + blocking.val = true; + loggedIn.val && data.make(loggedIn.val, "NEW").then(()=>{ + blocking.val = false; + }); + }}, "Add work!") + : null + ) + )) + } + + return Div.Part( + DOM.h3(part.name), + ...work, + ); + + }), + ) + ) +} + +/** @type {(inDesks:Record)=>HTMLElement} */ +function Desks(inDesks) +{ + return Div.Plain( + Div.Plain("Desks"), + Div.PartGroup( + Object.entries(inDesks).map(([desk_id, desk])=>{ + + loggedIn.val; + + if(loggedIn.val) + { + for(const role of desk.role) + { + if(!role.user.includes(loggedIn.val)) + { + return null; + } + } + } + + /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:number[])=>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.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.name), + Div.Part( + DOM.h4("Need:"), + desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need)) + ), + Div.Part( + DOM.h4("Make:"), + desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make)) + ) + )) + } + + return Div.Part( + DOM.h3(desk.name), + work + ) + + + }), + ) + ) +} + /** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */ function Room(room_id, graphParts) { @@ -110,9 +196,6 @@ function Room(room_id, graphParts) Div.PartGroup( Object.entries(graphParts.User).map(([user_id, user])=>{ return ()=>{ - - //rerender.val; - return Div.Part( DOM.div.Plain(user.name), ()=>{ @@ -152,104 +235,17 @@ function Room(room_id, graphParts) }) ), - Div.Plain("Parts"), - Div.PartGroup( - Object.entries(graphParts.Part).map(([part_id, part])=>{ + ()=>{ + return DOM.button({onclick(){ + showDesks.val = !showDesks.val; + }}, showDesks.val ? "Show Parts" : "Show Desks") + }, - return ()=>{ + ()=>{ + rerender.val; + return showDesks.val ? Desks(graphParts.Desk) : Parts(graphParts.Part); + }, - rerender.val; - - const work = [] - for(const [pass, data] of part.pass) - { - - work.push(Div.Part( - DOM.h5(pass.name), - DOM.p(data.time), - data.work.map(([time, data, user])=>Div.Plain( - DOM.span(time), - " ", - DOM.strong(data), - )), - Div.Plain( - loggedIn.val ? DOM.button({onclick(){ - if(loggedIn.val) - { - blocking.val = true; - data.make(loggedIn.val, "NEW").then(()=>{ - blocking.val = false; - rerender.val++; - }); - } - }}, "Add work!") - : null - ) - )) - } - - return Div.Part( - DOM.h3(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:number[])=>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.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.name), - Div.Part( - DOM.h4("Need:"), - desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need)) - ), - Div.Part( - DOM.h4("Make:"), - desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make)) - ) - )) - } - - return Div.Part( - DOM.h3(desk.name), - work - ) - } - - }), - ), ()=>{ return blocking.val ? Div.BlockScreen() : null diff --git a/mock-user-folder/graph/room.js b/mock-user-folder/graph/room.js index 250a33b..a830e3d 100644 --- a/mock-user-folder/graph/room.js +++ b/mock-user-folder/graph/room.js @@ -6,7 +6,8 @@ export default Rooms({ room_01:Room({ user:User, role:{ - dev:["Development", "u1"] + dev:["Development", "u1"], + write:["Writing", "u2", "u3"], }, part:{ p1:"Page title", @@ -14,12 +15,13 @@ export default Rooms({ p3:"Page preview", }, desk:{ - d1:["Write page metas", ["dev"], "all", {}, "p1", "p2"], + d1:["Write page metas", ["write"], "all", {}, "p1", "p2"], d2:["Build Page preview", ["dev"], "all", {p1:1, p2:1}, "p3"] }, pass:{ pass_01:["January"], - pass_02:["February"] + pass_02:["February"], + pass_03:["March"], } }) }); \ No newline at end of file