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>>} */
|
/** @type {Van.State<Record<string, TYPES.GraphParts>>} */
|
||||||
const rooms = van.state({});
|
const rooms = van.state({});
|
||||||
let handle = await FSHandle.getDirectoryHandle();
|
let handle = await FSHandle.getDirectoryHandle();
|
||||||
await LoadHandleFiles();
|
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>} */
|
/** @type {Van.State<TYPES.User|false>} */
|
||||||
const loggedIn = van.state(false);
|
const loggedIn = van.state(false);
|
||||||
|
|
||||||
const blocking = 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} */
|
/** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */
|
||||||
function Room(room_id, graphParts)
|
function Room(room_id, graphParts)
|
||||||
{
|
{
|
||||||
@ -110,9 +196,6 @@ function Room(room_id, graphParts)
|
|||||||
Div.PartGroup(
|
Div.PartGroup(
|
||||||
Object.entries(graphParts.User).map(([user_id, user])=>{
|
Object.entries(graphParts.User).map(([user_id, user])=>{
|
||||||
return ()=>{
|
return ()=>{
|
||||||
|
|
||||||
//rerender.val;
|
|
||||||
|
|
||||||
return Div.Part(
|
return Div.Part(
|
||||||
DOM.div.Plain(user.name),
|
DOM.div.Plain(user.name),
|
||||||
()=>{
|
()=>{
|
||||||
@ -152,104 +235,17 @@ function Room(room_id, graphParts)
|
|||||||
})
|
})
|
||||||
),
|
),
|
||||||
|
|
||||||
Div.Plain("Parts"),
|
()=>{
|
||||||
Div.PartGroup(
|
return DOM.button({onclick(){
|
||||||
Object.entries(graphParts.Part).map(([part_id, part])=>{
|
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
|
return blocking.val ? Div.BlockScreen() : null
|
||||||
|
|||||||
@ -6,7 +6,8 @@ export default Rooms({
|
|||||||
room_01:Room({
|
room_01:Room({
|
||||||
user:User,
|
user:User,
|
||||||
role:{
|
role:{
|
||||||
dev:["Development", "u1"]
|
dev:["Development", "u1"],
|
||||||
|
write:["Writing", "u2", "u3"],
|
||||||
},
|
},
|
||||||
part:{
|
part:{
|
||||||
p1:"Page title",
|
p1:"Page title",
|
||||||
@ -14,12 +15,13 @@ export default Rooms({
|
|||||||
p3:"Page preview",
|
p3:"Page preview",
|
||||||
},
|
},
|
||||||
desk:{
|
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"]
|
d2:["Build Page preview", ["dev"], "all", {p1:1, p2:1}, "p3"]
|
||||||
},
|
},
|
||||||
pass:{
|
pass:{
|
||||||
pass_01:["January"],
|
pass_01:["January"],
|
||||||
pass_02:["February"]
|
pass_02:["February"],
|
||||||
|
pass_03:["March"],
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue
Block a user