app.js

@@ -1,8 +1,32 @@
 /** @import * as TYPES from "./graph/types.ts" */
 import * as FSHandle from "./store-directory-handle.js";
 
-import Styles from "./styles.js";
+const {Div, DOM} = Gale({
-const {DOM, Div, Tag} = Styles;
+    Title:{
+        padding:"2rem",
+        background: "blue",
+        color:"white"
+    },
+    Plain:{},
+    PartGroup:{
+        display: `flex`,
+        flexWrap: `wrap`
+    },
+    Part:{
+        border: `1px solid black`,
+        borderRadius: `5px`,
+        padding: `1rem`
+    },
+    BlockScreen:{
+        position: "fixed",
+        zIndex: "9999",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        background: "rgba(128, 128, 128, 0.5)"
+    }
+});
 
 async function PickHandle()
 {
@@ -20,21 +44,11 @@ async function LoadHandleFiles()
             const module = await import("./graph/room.js"+"?bust="+Math.random());
             /** @type {Record<string, TYPES.GraphParts>} */
             const read = module.default();
-
-            for(const roomKey in read)
-            {
-                const room = read[roomKey]
-                for(const pass in room.Pass)
-                {
-                    await room.Pass[pass].load();
-                }
-            }
-
             rooms.val = read;
         }
-        catch(e)
+        catch(_e)
         {
-            console.log("the handle exists, but the request failed. the service work must not be ready yet.", e)
+            console.log("the handle exists, but the request failed. the service work must not be ready yet.")
             rooms.val = {};
         }
     }
@@ -57,155 +71,116 @@ const loggedIn = van.state(false);
 
 const blocking = van.state(false);
 
-const showDesks = van.state(true, "desks");
+const showDesks = van.state(true);
 
-function Input(handler=(str)=>{})
+/** @type {(inParts:Record<string, TYPES.Part>)=>HTMLElement} */
+function Parts(inParts)
 {
-    const input = DOM.textarea({style:"vertical-align:text-top; width:500px; height:200px;"});
+    return Div.Plain(
+        Div.Plain("Parts"),
+        Div.PartGroup(
+            Object.entries(inParts).map(([part_id, part])=>{
 
-    let submitButton = Div.Plain(DOM.button({onclick(){
+                const work = []
-        handler(input.value);
+                for(const [pass, data] of part.pass)
-        input.value = "";
+                {
-        mountPoint.remove();
-    }}, "submit value"));
 
-    let cancelButton = DOM.button({onclick(){
+                    work.push(Div.Part(
-        input.value = "";
+                        DOM.h5(pass.name),
-        mountPoint.remove();
+                        DOM.p(data.time),
-    }}, "cancel")
+                        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
+                        )
+                    ))
+                }
 
-    const mountPoint = Div.Plain({onclick(e){e.stopPropagation();}}, input, cancelButton, submitButton);
+                return Div.Part(
-    return mountPoint;
+                    DOM.h3(part.name),
+                    ...work,
+                );
+
+            }),
+        )
+    )
 }
 
-/** @type {(inParts:Record<string, TYPES.Part>, inPasses:Record<string, TYPES.Pass>)=>HTMLElement} */
-function Parts(inParts, inPasses)
-{
-    const rows = [];
-    
-    const row = [DOM.th()]
-    for(const pass in inPasses)
-    {
-        row.push(DOM.th(inPasses[pass].name));
-    }
-    rows.push(DOM.thead(row));
-
-    Object.entries(inParts).map(([part_id, part])=>{
-
-        const row = [DOM.th(part.name)];
-        for(const [pass, data] of part.pass)
-        {
-            row.push(DOM.td.Part(data.work.map(w=>Div.Plain(w[1]) )))
-        }
-        rows.push(DOM.tr(row))
-    });
-
-    return DOM.table.GapVertical(rows);
-}
-
-const deskRender = van.state(0);
-
 /** @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)
-    return Div.PartGroup(
-        Object.entries(inDesks).map(([desk_id, desk])=>{
-
-            loggedIn.val;
-
-            deskRender.val;
-            console.log("reredering desk", desk.name);
-
-            if (loggedIn.val)
-            {
-                let userInRole = false;
-                for(const role of desk.role)
                 {
-                    if(role.user.includes(loggedIn.val))
+                    for(const role of desk.role)
                     {
-                        userInRole = true;
+                        if(!role.user.includes(loggedIn.val))
-                    }
+                        {
-                }
+                            return null;
-                if(!userInRole)
-                {
-                    return null;
-                }
-            }
-
-
-            /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:number[], type:"need"|"make")=>HTMLElement|null} */
-            const Iterator = (part, index, pass, dirty, type)=>{
-
-                const partPass = part.pass.get(pass);
-                if(partPass)
-                {
-                    const time = partPass.time;
-                    const latest = partPass.work.find(t=>t[0] == time);
-
-                    const attributes = {
-                        class: dirty.includes(index) ? Tag("DeskDirty") : "",
-                    };
-
-                    if(type == "make")
-                    {
-                        attributes.onclick=function(){
-                            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;
-                                }
-                                
-                            }));
                         }
                     }
-
-                    return DOM.td(
-                        Div.Part(
-                            attributes,
-                            latest?.[1] || ""
-                        )
-                    );
                 }
-                return null;
-            }
 
-            const work = [];
+                /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:number[])=>HTMLElement|null} */
-            for(const [pass, dirty] of desk.pass)
+                const Iterator = (part, index, pass, dirty)=>{
-            {
-                work.push(DOM.tr(
-                    DOM.td(pass.name),
-                    desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need, "need")),
-                    DOM.td("->"),
-                    desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make, "make"))
-                ))
-            }
 
-            return Div.DeskContainer(
+                    const partPass = part.pass.get(pass);
-                DOM.h3(desk.name),
+                    if(partPass)
-                DOM.table.GapHorizontal(
+                    {
-                    DOM.thead(
+                        const time = partPass.time;
-                        DOM.th(),
+                        const latest = partPass.work.find(t=>t[0] == time);
-                        desk.need.map((part, index)=>DOM.th(part.name)),
+
-                        DOM.th(),
+                        return Div.Plain(
-                        desk.make.map((part, index)=>DOM.th(part.name))
+                            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
                 )
-            )
 
 
-        }),
+            }),
+        )
     )
 }
 
@@ -236,30 +211,29 @@ function Room(room_id, graphParts)
             })
         ),
 
+        Div.Plain("Passes:"),
+        Div.PartGroup(
+            Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
+                return ()=>{
+                    console.log("rerendering...", rerender.rawVal);
 
-//        Div.Plain("Passes:"),
+                    rerender.val;
-//        Div.PartGroup(
+
-//            Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
+                    return Div.Part(
-//                return ()=>{
+                        DOM.div.Plain(pass.name),
-//                    console.log("rerendering...", rerender.rawVal);
+                        ()=>{
-//
+                            return DOM.button.Plain(
-//                    rerender.val;
+                                {async onclick(){
-//
+                                    await pass[pass.live ? "dump" : "load"]();
-//                    return Div.Part(
+                                    rerender.val++
-//                        DOM.div.Plain(pass.name),
+                                }},
-//                        ()=>{
+                                pass.live ? "Dump" : "Load"
-//                            return DOM.button.Plain(
+                            )
-//                                {async onclick(){
+                        },
-//                                    await pass[pass.live ? "dump" : "load"]();
+                    )
-//                                    rerender.val++
+                }
-//                                }},
+            })
-//                                pass.live ? "Dump" : "Load"
+        ),
-//                            )
-//                        },
-//                    )
-//                }
-//            })
-//        ),
 
         ()=>{
             return DOM.button({onclick(){
@@ -269,7 +243,7 @@ function Room(room_id, graphParts)
 
         ()=>{
             rerender.val;
-            return showDesks.val ? Desks(graphParts.Desk) : Parts(graphParts.Part, graphParts.Pass);
+            return showDesks.val ? Desks(graphParts.Desk) : Parts(graphParts.Part);
         },
 
 

mock-user-folder/graph/room.js

@@ -1,19 +1,13 @@
 //@ts-check
-import CreateAllRooms, {Room} from "../../graph/graph.js";
+import Rooms, {Room} from "../../graph/graph.js";
+import User from "./user.js";
 
-const user = {
+export default Rooms({
-    u1:"Seth Trowbridge",
-    u4:"Sarah Sharp",
-    u5:"Adam Marshall",
-}
-
-export default CreateAllRooms({
     room_01:Room({
-        user,
+        user:User,
         role:{
             dev:["Development", "u1"],
-            write:["Writing", "u5"],
+            write:["Writing", "u2", "u3"],
-            admin:["Admin", "u4"]
         },
         part:{
             p1:"Page title",
@@ -21,8 +15,8 @@ export default CreateAllRooms({
             p3:"Page preview",
         },
         desk:{
-            d1:["Write page metas",   ["admin", "write"], "all", {},           "p1", "p2"],
+            d1:["Write page metas", ["write"], "all", {}, "p1", "p2"],
-            d2:["Build Page preview", ["admin", "dev"],   "all", {p1:1, p2:1}, "p3"      ]
+            d2:["Build Page preview", ["dev"], "all", {p1:1, p2:1}, "p3"]
         },
         pass:{
             pass_01:["January"],

mock-user-folder/graph/user.js

@@ -0,0 +1,5 @@
+export default {
+    u1:"seth",
+    u2:"seth2",
+    u3:"seth3"
+}

styles.js

@@ -1,43 +0,0 @@
-export default Gale({
-    Title:{
-        padding:"2rem",
-        background: "blue",
-        color:"white"
-    },
-    Plain:{},
-    PartGroup:{
-        display: `flex`,
-        flexWrap: `wrap`
-    },
-    Part:{
-        border: `1px solid black`,
-        borderRadius: `5px`,
-        padding: `1rem`
-    },
-    BlockScreen:{
-        position: "fixed",
-        zIndex: "9999",
-        top: "0",
-        left: "0",
-        width: "100%",
-        height: "100%",
-        background: "rgba(128, 128, 128, 0.5)"
-    },
-    DeskContainer:{
-        border: `1px solid black`,
-        borderRadius: `5px`,
-        padding: `1rem`
-    },
-    DeskDirty:{
-        background:"tomato",
-        color:"white"
-    },
-    GapHorizontal:{
-        borderCollapse:"separate",
-        borderSpacing:"0 2rem"
-    },
-    GapVertical:{
-        borderCollapse:"separate",
-        borderSpacing:"2rem 0.2rem"
-    }
-});