complex editor

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<string, TYPES.Desk>)=>HTMLElement} */
 function Desks(inDesks)
 {
     return Div.PartGroup(
         Object.entries(inDesks).map(([desk_id, desk])=>{
 
-            loggedIn.val;
+            //loggedIn.val;
 
-            deskRender.val;
+            //deskRender.val;
-            console.log("reredering desk", desk.name);
+            //console.log("reredering desk", desk.name);
 
             if (loggedIn.val)
             {
@@ -178,27 +262,24 @@ function Desks(inDesks)
                         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,7 +344,6 @@ function Room(room_id, graphParts)
         Div.Plain("Users:"),
         Div.PartGroup(
             Object.entries(graphParts.User).map(([user_id, user])=>{
-                return ()=>{
                 return Div.Part(
                         DOM.div.Plain(user.name),
                         ()=>{
@@ -275,35 +355,10 @@ function Room(room_id, graphParts)
                             )
                         },
                 )
-                }
+
             })
         ),
 
-
-//        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;