ui tweaks
This commit is contained in:
parent
810e530bd1
commit
1d527de26f
248
app.js
248
app.js
@ -59,45 +59,131 @@ 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);
|
||||
|
||||
const showDesks = van.state(true);
|
||||
|
||||
/** @type {(inParts:Record<string, TYPES.Part>)=>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<string, TYPES.Desk>)=>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
|
||||
|
||||
@ -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"],
|
||||
}
|
||||
})
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user