diff --git a/app.js b/app.js index 0649f4e..7bb7a1f 100644 --- a/app.js +++ b/app.js @@ -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)=>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;