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

complex editor

Browse Source
This commit is contained in:
Seth Trowbridge 2025-11-04 11:29:19 -05:00
parent 11bc2e1d99
commit 697f8a2d7d
1 changed files with 103 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
app.js
View File

@ -105,16 +105,100 @@ function Parts(inParts, inPasses)
const deskRender = van.state(0);
/** @type {(part:TYPES.Part, pass:TYPES.Pass, closeHandler:()=>void)=>HTMLElement} */
function PartEditor(part, pass, closeHandler)
{
const partPass = part.pass?.get(pass);
const hist = van.state(false);
const edit = van.state(false);
const upper = ()=>{
if(partPass?.work.length)
{
return DOM.div(
DOM.button(
{
onclick()
{
hist.val=!hist.val;
}
}, ()=>(hist.val ? "hide" : "show")+" changes"
),
hist.val ? partPass.work.map(w=>{
const date = new Date(w[0]);
return DOM.div(`${date.getMonth()}/${date.getDate()}`, DOM.strong(w[1]), w[2].name);
}) : ""
);
}
else
{
return "";
}
}
const lower = ()=>
{
return DOM.div(
()=>{
return loggedIn.rawVal ? DOM.button(
{onclick(){edit.val = !edit.val;}},
()=>(edit.val ? "cancel" : "make") + " changes"
) : DOM.p("log in to make changes")
},
()=>{
const textarea = DOM.textarea()
return edit.val ? DOM.div(
textarea,
DOM.button({
onclick(){
if(loggedIn.rawVal && partPass)
{
blocking.val = true;
partPass.make(loggedIn.rawVal, textarea.value).then(()=>{
blocking.val = false;
//deskRender.val++;
})
}
else
{
return false;
}
}
}, "save changes")
) : ""
}
)
}
const self = DOM.div(
upper,
()=>DOM.button({onclick(e){e.stopPropagation(); closeHandler(this.parentElement)}}, "close"),
DOM.div(
()=>{
if(partPass)
{
return partPass.work.find((w)=>w[0] == partPass.time)?.[1] || ""
}
return "(no data yet)";
}
),
lower,
);
return self;
}
/** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
function Desks(inDesks)
{
return Div.PartGroup(
Object.entries(inDesks).map(([desk_id, desk])=>{
loggedIn.val;
//loggedIn.val;
deskRender.val;
console.log("reredering desk", desk.name);
//deskRender.val;
//console.log("reredering desk", desk.name);
if (loggedIn.val)
{
@ -177,28 +261,25 @@ function Desks(inDesks)
const partPass = part.pass.get(pass);
if(!partPass){ return null }
const latest = partPass.work.find(t=>t[0] == partPass.time)?.[1];
const attr = "data-editing"
function close(editor){
editor.remove();
this.setAttribute(attr, "false");
}
const attributes = {
onclick(){
loggedIn.rawVal && van.add(this, Input((str)=>{
if(loggedIn.rawVal)
{
blocking.val = true;
partPass.make(loggedIn.rawVal, str).then(()=>{
deskRender.val++;
blocking.val = false;
})
}
else
{
return false;
}
}));
const check = this.getAttribute(attr);
if(check !== "true")
{
this.setAttribute(attr, "true");
this.appendChild(PartEditor(part, pass, close.bind(this)));
}
}
};
if(latest)
{
attributes.class = Tag("PartGood")
@ -263,8 +344,7 @@ function Room(room_id, graphParts)
Div.Plain("Users:"),
Div.PartGroup(
Object.entries(graphParts.User).map(([user_id, user])=>{
return ()=>{
return Div.Part(
return Div.Part(
DOM.div.Plain(user.name),
()=>{
return DOM.button.Plain(
@ -274,36 +354,11 @@ function Room(room_id, graphParts)
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;