SethTrowbridge/work-graph-simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui tweaks

Browse Source
This commit is contained in:
Seth Trowbridge 2025-11-01 15:03:57 -04:00
parent 810e530bd1
commit 1d527de26f
2 changed files with 127 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
app.js
View File

@ -59,106 +59,27 @@ async function LoadHandleFiles()
}
}
/** @type {Van.State<Record<string, TYPES.GraphParts>>} */
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<TYPES.User|false>} */
const loggedIn = van.state(false);
const blocking = van.state(false);
/** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */
function Room(room_id, graphParts)
const showDesks = van.state(true);
/** @type {(inParts:Record<string, TYPES.Part>)=>HTMLElement} */
function Parts(inParts)
{
const rerender = van.state(0);
blocking.val;
return Div.Plain(
Div.Plain("Users:"),
Div.PartGroup(
Object.entries(graphParts.User).map(([user_id, user])=>{
return ()=>{
//rerender.val;
return Div.Part(
DOM.div.Plain(user.name),
()=>{
return DOM.button.Plain(
{onclick(){
loggedIn.val = (loggedIn.val == user) ? false : user;
}},
loggedIn.val == user ? "this is me" : "impersonate"
)
},
)
}
})
),
Div.Plain("Passes:"),
Div.PartGroup(
Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
return ()=>{
console.log("rerendering...", rerender.rawVal);
rerender.val;
return Div.Part(
DOM.div.Plain(pass.name),
()=>{
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;
Object.entries(inParts).map(([part_id, part])=>{
const work = []
for(const [pass, data] of part.pass)
@ -174,14 +95,10 @@ function Room(room_id, graphParts)
)),
Div.Plain(
loggedIn.val ? DOM.button({onclick(){
if(loggedIn.val)
{
blocking.val = true;
data.make(loggedIn.val, "NEW").then(()=>{
loggedIn.val && data.make(loggedIn.val, "NEW").then(()=>{
blocking.val = false;
rerender.val++;
});
}
}}, "Add work!")
: null
)
@ -192,18 +109,32 @@ function Room(room_id, graphParts)
DOM.h3(part.name),
...work,
);
}
}),
),
)
)
}
/** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
function Desks(inDesks)
{
return Div.Plain(
Div.Plain("Desks"),
Div.PartGroup(
Object.entries(graphParts.Desk).map(([desk_id, desk])=>{
Object.entries(inDesks).map(([desk_id, desk])=>{
return ()=>{
loggedIn.val;
rerender.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)=>{
@ -246,11 +177,76 @@ function Room(room_id, graphParts)
DOM.h3(desk.name),
work
)
}
}),
)
)
}
/** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */
function Room(room_id, graphParts)
{
const rerender = van.state(0);
blocking.val;
return Div.Plain(
Div.Plain("Users:"),
Div.PartGroup(
Object.entries(graphParts.User).map(([user_id, user])=>{
return ()=>{
return Div.Part(
DOM.div.Plain(user.name),
()=>{
return DOM.button.Plain(
{onclick(){
loggedIn.val = (loggedIn.val == user) ? false : user;
}},
loggedIn.val == user ? "this is me" : "impersonate"
)
},
)
}
})
),
Div.Plain("Passes:"),
Div.PartGroup(
Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
return ()=>{
console.log("rerendering...", rerender.rawVal);
rerender.val;
return Div.Part(
DOM.div.Plain(pass.name),
()=>{
return DOM.button.Plain(
{async onclick(){
await pass[pass.live ? "dump" : "load"]();
rerender.val++
}},
pass.live ? "Dump" : "Load"
)
},
)
}
})
),
()=>{
return DOM.button({onclick(){
showDesks.val = !showDesks.val;
}}, showDesks.val ? "Show Parts" : "Show Desks")
},
()=>{
rerender.val;
return showDesks.val ? Desks(graphParts.Desk) : Parts(graphParts.Part);
},
()=>{
return blocking.val ? Div.BlockScreen() : null
}

8
mock-user-folder/graph/room.js
View File

@ -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"],
}
})
});