desk flip table

app.js

@@ -59,6 +59,25 @@ const blocking = van.state(false);
 
 const showDesks = van.state(true, "desks");
 
+function Input(handler=(str)=>{})
+{
+    const input = DOM.textarea({style:"vertical-align:text-top; width:500px; height:200px;"});
+    
+    let submitButton = Div.Plain(DOM.button({onclick(){
+        handler(input.value);
+        input.value = "";
+        mountPoint.remove();
+    }}, "submit value"));
+
+    let cancelButton = DOM.button({onclick(){
+        input.value = "";
+        mountPoint.remove();
+    }}, "cancel")
+
+    const mountPoint = Div.Plain({onclick(e){e.stopPropagation();}}, input, cancelButton, submitButton);
+    return mountPoint;
+}
+
 /** @type {(inParts:Record<string, TYPES.Part>, inPasses:Record<string, TYPES.Pass>)=>HTMLElement} */
 function Parts(inParts, inPasses)
 {
@@ -84,102 +103,193 @@ function Parts(inParts, inPasses)
     return DOM.table.GapVertical(rows);
 }
 
-//const deskRender = van.state(0);
+const deskRender = van.state(0);
 
-/** @type {(part:TYPES.Part, pass:TYPES.Pass, closeHandler:()=>void)=>HTMLElement} */
+/** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
-function PartEditor(part, pass, closeHandler)
+function Desks(inDesks)
 {
-    const partPass = part.pass?.get(pass);
 
-    const hist = van.state(false);
+    const passes = []
-    const edit = van.state(false);
+    for(const key in inDesks)
-
-    const upper = ()=>{
-        if(partPass?.work.length)
     {
-            return DOM.div(
+        const value = inDesks[key];
-                DOM.button(
+        for(const pass of value.pass.keys())
         {
-                        onclick()
+            passes.push(pass)
-                        {
-                            hist.val=!hist.val;
         }
-                    }, ()=>(hist.val ? "hide" : "show")+" changes"
+        break;
-                ),
+    }
-                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);
+    
-                }) : ""
+    const bodies = 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))
+                {
+                    userInRole = true;
+                }
+            }
+            if(!userInRole)
+            {
+                return null;
+            }
+        }
+
+
+        const columns = [
+            [
+                ...desk.need.map(part=>DOM.td(part.name)),
+                DOM.td(),
+                ...desk.make.map(part=>DOM.td(part.name))
+            ]
+        ];
+
+        for(const [pass, scan] of desk.pass)
+        {
+
+            // at least one but not all need fields are empty
+            const caution = scan.need_empty.length>0 && scan.need_empty.length<desk.need.length;
+            
+            columns.push(
+            [
+                ...desk.need.map((part, index, array)=>
+                {
+                    const partPass = part.pass.get(pass);
+                    if(!partPass){ return null }
+                    const latest = partPass.work.find(t=>t[0] == partPass.time)?.[1];
+
+                    const attributes = {};
+
+                    if(latest)
+                    {
+                        attributes.class = Tag("PartGood")
                     }
                     else
                     {
-            return "";
+                        attributes.class = caution ? Tag("PartCaution") : Tag("PartEmpty")
-        }
                     }
 
-    const lower = ()=>
+                    if(scan.need_dirty.includes(index))
                     {
-        return DOM.div(
+                        attributes.class = Tag("PartDirty")
-            ()=>{
+                    }
-                return loggedIn.rawVal ? DOM.button(
+
-                    {onclick(){edit.val = !edit.val;}},
+                    return DOM.td(
-                    ()=>(edit.val ? "cancel" : "make") + " changes"
+                        Div.Part(
-                ) : DOM.p("log in to make changes")
+                            attributes,
-            },
+                            latest
-            ()=>{
+                        )
-                const textarea = DOM.textarea()
+                    );
-                return edit.val ? DOM.div(
+                }),
-                    textarea,
+                DOM.td(Div.Icon("⇊")),
-                    DOM.button({
+                ...desk.make.map((part, index, array)=>
+                {
+                    const partPass = part.pass.get(pass);
+                    if(!partPass){ return null }
+                    const latest = partPass.work.find(t=>t[0] == partPass.time)?.[1];
+
+                    const attributes = {
                         onclick(){
-                            if(loggedIn.rawVal && partPass)
+                            loggedIn.rawVal && van.add(this, Input((str)=>{
+                                if(loggedIn.rawVal)
                                 {
                                     blocking.val = true;
-                                partPass.make(loggedIn.rawVal, textarea.value).then(()=>{
+                                    partPass.make(loggedIn.rawVal, str).then(()=>{
+                                        deskRender.val++;
                                         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)
+                    if(latest)
                     {
-                    return partPass.work.find((w)=>w[0] == partPass.time)?.[1] || ""
+                        attributes.class = Tag("PartGood")
                     }
-                return "(no data yet)";
+                    else
+                    {
+                        attributes.class = Tag("PartEmpty")
                     }
-        ),
+
-        lower,
+                    if( (desk.need.length==0 && !latest) || scan.make_dirty.includes(index))
+                    {
+                        
+                        if(!latest && caution)
+                        {
+                            attributes.class = Tag("PartCaution")
+                        }
+                        else
+                        {
+                            attributes.class = Tag("PartDirty");
+                        }
+                    }   
+
+                    return DOM.td(
+                        Div.Part(
+                            attributes,
+                            latest
+                        )
                     );
+                })
+            ])
+        }
 
-    return self;
-}
 
-/** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
+        console.log(columns[0]);
-function Desks(inDesks)
+
-{
+        return DOM.tbody(
-    return Div.PartGroup(
+            DOM.tr(
+                DOM.th.BodyHead({colSpan:columns.length}, desk.name)
+            ),
+            
+            (columns[0]).map((cell, rowInd, arr)=>{
+                return DOM.tr(
+                    columns.map((col, colInd)=>{
+                        return col[rowInd];
+                    })
+                );
+            }),
+
+            DOM.tr(DOM.td.BodySpacer()),
+        )
+
+
+    });
+
+    return DOM.table.GapVertical(
+        DOM.thead(
+            DOM.tr(
+                DOM.th(),
+                passes.map(pass => DOM.th(pass.name))
+            )
+        ),
+        bodies
+    )
+
+    const old = 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)
             {
@@ -221,7 +331,7 @@ function Desks(inDesks)
                         }
                         else
                         {
-                            attributes.class = Tag("PartEmpty")
+                            attributes.class = caution ? Tag("PartCaution") : Tag("PartEmpty")
                         }
 
                         if(scan.need_dirty.includes(index))
@@ -236,37 +346,34 @@ function Desks(inDesks)
                             )
                         );
                     }),
-                    DOM.td(
+                    DOM.td(Div.Icon("⇉")),
-                        Div.Icon("⇉"),
-                        scan.due_date ? Div.Part(
-                            scan.due_date.toLocaleDateString(),
-                            scan.due_date.toLocaleTimeString()
-                        ) : " "
-                    ),
                     desk.make.map((part, index, array)=>
                     {
                         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)=>{
-                                const check = this.getAttribute(attr);
+                                    if(loggedIn.rawVal)
-                                if(check !== "true")
                                     {
-                                    this.setAttribute(attr, "true");
+                                        blocking.val = true;
-                                    this.appendChild(PartEditor(part, pass, close.bind(this)));
+                                        partPass.make(loggedIn.rawVal, str).then(()=>{
+                                            deskRender.val++;
+                                            blocking.val = false;
+                                        })
                                     }
+                                    else
+                                    {
+                                        return false;
+                                    }
+                                    
+                                }));
                             }
                         };
                         
+
                         if(latest)
                         {
                             attributes.class = Tag("PartGood")
@@ -331,6 +438,7 @@ 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),
                         ()=>{
@@ -342,10 +450,35 @@ 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;

deep/mock-user-folder/graph/room.js

@@ -1,43 +0,0 @@
-//@ts-check
-import CreateAllRooms, {Room} from "../../graph/graph.js";
-
-const user = {
-    u1:"Seth T",
-    u4:"Sarah S",
-    u5:"Adam M",
-    u6:"Matt Y",
-    u7:"Seth F",
-    u8:"Brittany F"
-};
-
-export default CreateAllRooms({
-    room_01:Room({
-        user,
-        role:{
-              dev:["Development", "u1"],
-            write:["Writing", "u5"],
-            admin:["Admin", "u4"]
-        },
-        part:{
-            p1:["Page title"],
-            p2:["Page slug"],
-            p3:["Page preview"],
-            p4:["Page Project"],
-            p5:["Page Corrections", "loop"],
-        },
-        desk:{
-            d1:["Write page metas",   ["admin", "write"], {                }, "p1", "p2"],
-            d2:["Build Page preview", ["admin", "dev"  ], {p1:1, p2:1, p5:4}, "p3", "p4"],
-            d3:["Proof Page",         ["admin", "write"], {p3:1,           }, "p5"      ]
-        },
-        pass:{
-            pass_01:["January"],
-            //pass_02:["February"],
-            //pass_03:["March"],
-            //pass_04:["April"],
-            //pass_05:["May"],
-            //pass_06:["June"],
-            //pass_07:["July"],
-        }
-    })
-});

graph/graph.js

@@ -1,8 +1,6 @@
 /** @import * as TYPES from "./types.ts" */
 import * as FSAccess from "../store-directory-handle.js";
 
-export const noop = "no-op";
-
 /** @type {TYPES.GraphBuilder} */
 export function Room({user, role, part, desk, pass})
 {
@@ -34,9 +32,8 @@ export function Room({user, role, part, desk, pass})
     const PartList = part;
     for(let partId in part)
     {
-        const [name, loop] = part[partId];
+        const name = part[partId];
-
+        PartList[partId] = /** @type {TYPES.Part} */({name, id:partId, need:[], make:[], pass:new Map()});
-        PartList[partId] = /** @type {TYPES.Part} */({name, id:partId, need:[], make:[], pass:new Map(), loop:loop});
     }
 
 // mutate desks
@@ -45,7 +42,7 @@ export function Room({user, role, part, desk, pass})
     const DeskList = desk;
     for(let deskId in desk)
     {
-        const [name, roleIDs, needObj, ...makePartIDs] = desk[deskId];
+        const [name, roleIDs, mode, needObj, ...makePartIDs] = desk[deskId];
         /** @type {TYPES.Part[]}*/ const need =[];
         /** @type {number[]}*/ const time =[];
 
@@ -53,6 +50,7 @@ export function Room({user, role, part, desk, pass})
         const deskObj = {
             name,
             id:deskId,
+            mode,
             need,
             time,
             make:[],
@@ -162,7 +160,6 @@ export function Room({user, role, part, desk, pass})
                                 {
                                     passCheck.time = latest;
                                 }
-                                //payload.sort()
                                 passCheck.work = /** @type {TYPES.Work[]}*/(payload);
                             }
 
@@ -228,87 +225,32 @@ const Scan =(desk, pass)=>
     let makeMin = Infinity;
     let needMax = -Infinity;
 
-    // added for estimation
-    let estMin = Infinity;
-    let estMax = -Infinity;
-    let estSum = 0;
-
-/*
-
-Loop parts:
-- always considered clean when the leading value is a no-op
-- as a need, considered clean when empty
-
-*/
-
-    /** @type {(part:TYPES.Part)=>[time:number, value:string|undefined, part:TYPES.Part]} */
-    const lookup =(part)=>
-    {
-        const partPass = part.pass.get(pass);
-        const partPassTime = partPass?.time || 0;
-        const partPassValue = partPass?.work.find(t=>t[0] == partPassTime)?.[1];
-        return [partPassTime, partPassValue, part];
-    }
-
     // update needMax
     for(let i=0; i<desk.need.length; i++)
     {
-        const [time, value, part] = lookup(desk.need[i]);
+        const part = desk.need[i];
-
+        const partPassTime = part.pass.get(pass)?.time || 0;
-        if(part.loop)
+        if(partPassTime > needMax) needMax = partPassTime;
-        {
+        if(!partPassTime) emptyNeed.push(i)
-            if(!value || value == noop)
-            {
-                continue;
-            }
     }
 
-        if(time > needMax) needMax = time;
+    // update makeMin AND dirty check makes
-        if(!time) emptyNeed.push(i);
-    }
-
-    // update makeMin AND dirtyMakes
     for(let i=0; i<desk.make.length; i++)
     {
-        const [time] = lookup(desk.make[i]);
+        const part = desk.make[i];
-
+        const partPassTime = part.pass.get(pass)?.time || 0;
-        if(time < makeMin) makeMin = time;
+        if(partPassTime < makeMin) makeMin = partPassTime;
-        if(time < needMax) dirtyMake.push(i);
+        if(partPassTime < needMax) dirtyMake.push(i);
-        if(!time) emptyMake.push(i) 
+        if(!partPassTime) emptyMake.push(i)
-
     }
 
-    // dirtyNeeds
+    // dirty check needs
     for(let i=0; i<desk.need.length; i++)
     {
-        const [time, value, part] = lookup(desk.need[i]);
+        const part = desk.need[i];
-
+        const partPassTime = part.pass.get(pass)?.time || 0;
-        if(part.loop)
+        if(partPassTime > makeMin) dirtyNeed.push(i);
-        {
-            if(!value || value == noop)
-            {
-                continue;
-            }
     }
     
-        if(time > makeMin)
+    desk.pass.set(pass, {need_dirty:dirtyNeed, make_dirty:dirtyMake, need_empty:emptyNeed, make_empty:emptyMake})
-        {
-            dirtyNeed.push(i);
-
-            // estimation
-            if(time < estMin) estMin = time;
-            const allottedTime = desk.time[i] * 1000 * 60 * 60;
-            const projectedTime = time + allottedTime;
-            estSum += allottedTime;
-            if(projectedTime > estMax) estMax = projectedTime;
-        }
-    }
-    
-    estSum += estMin;
-    let stamp = estSum;
-    if(estMax > estSum)
-    {
-        stamp = estMax;
-    }
-    desk.pass.set(pass, {need_dirty:dirtyNeed, make_dirty:dirtyMake, need_empty:emptyNeed, make_empty:emptyMake, due_date:isFinite(stamp) ? new Date(stamp) : undefined})
 };

graph/types.ts

@@ -1,17 +1,17 @@
 export type User = {name:string, id:string, desk:Set<Desk>};
 export type Role = {name:string, id:string, user:User[]};
-export type Desk = {name:string, id:string, need:Part[], time:number[], make:Part[], pass:Map<Pass, Scan>, role:Role[]};
+export type Desk = {name:string, id:string, need:Part[], time:number[], make:Part[], pass:Map<Pass, Scan>, mode:string, role:Role[]};
 export type Pass = {name:string, id:string, path:string, live:boolean, load:()=>Promise<void>, dump:()=>void};
-export type Part = {name:string, id:string, pass:Map<Pass, {time:number, work:Work[], make:(user:User, data:string)=>Promise<void>}>, need:Desk[], make:Desk[], loop?:boolean};
+export type Part = {name:string, id:string, pass:Map<Pass, {time:number, work:Work[], make:(user:User, data:string)=>Promise<void>}>, need:Desk[], make:Desk[]};
 export type Work = [time:number, data:string, user:User];
-export type Scan = {need_dirty:number[], make_dirty:number[], need_empty:number[], make_empty:number[], due_date?:Date}
+export type Scan = {need_dirty:number[], make_dirty:number[], need_empty:number[], make_empty:number[]}
 
 export type GraphBuilder=
 <
     Users extends Record<string, string>,
     Roles extends Record<string, [ name:string, ...users:Array<keyof Users>]>,
-    Parts extends Record<string, [ name:string, loop?:"loop"] >,
+    Parts extends Record<string, string>,
-    Desks extends Record<string, [ name:string, roles:Array<keyof Roles>, need:Partial<Record<keyof Parts, number>>, ...make:Array<keyof Parts>]>,
+    Desks extends Record<string, [ name:string, roles:Array<keyof Roles>, mode:"all"|"one", need:Partial<Record<keyof Parts, number>>, ...make:Array<keyof Parts>]>,
 >
 (
     params:{

mock-user-folder/graph/room.js

@@ -19,25 +19,23 @@ export default CreateAllRooms({
             admin:["Admin", "u4"]
         },
         part:{
-            p1:["Page title"],
+            p1:"Page title",
-            p2:["Page slug"],
+            p2:"Page slug",
-            p3:["Page preview"],
+            p3:"Page preview",
-            p4:["Page Project"],
+            p4:"Page Project",
-            p5:["Page Corrections", "loop"],
         },
         desk:{
-            d1:["Write page metas",   ["admin", "write"], {                }, "p1", "p2"],
+            d1:["Write page metas",   ["admin", "write"], "all", {},           "p1", "p2"],
-            d2:["Build Page preview", ["admin", "dev"  ], {p1:1, p2:1, p5:1}, "p3", "p4"],
+            d2:["Build Page preview", ["admin", "dev"],   "all", {p1:1, p2:1}, "p3", "p4"]
-            d3:["Proof Page",         ["admin", "write"], {p3:1,           }, "p5"      ]
         },
         pass:{
             pass_01:["January"],
-            //pass_02:["February"],
+            pass_02:["February"],
-            //pass_03:["March"],
+            pass_03:["March"],
-            //pass_04:["April"],
+            pass_04:["April"],
-            //pass_05:["May"],
+            pass_05:["May"],
-            //pass_06:["June"],
+            pass_06:["June"],
-            //pass_07:["July"],
+            pass_07:["July"],
         }
     })
 });

service-worker.js

@@ -29,13 +29,8 @@ async function Interceptor(event)
     const text = await FSAccess.Read(handle, parts);
     if(text)
     {
-      console.log("successful intercept:", pathname);
         return new Response(text, options);
     }
-    else
-    {
-      console.log("failed intercept:", pathname);
-    }
 
   }
 

styles.js

@@ -14,8 +14,8 @@ export default Gale({
         color:"white",
         borderRadius:"2rem",
         fontWeight:"bolder",
-        padding:"0 0.8rem",
+        padding:"0.5rem 0.8rem",
-        margin:"0 1rem"
+        textAlign:"center",
     },
     Part:{
         border: `1px solid black`,
@@ -39,6 +39,14 @@ export default Gale({
         background:"yellow",
         color:"black",
     },
+    BodyHead:{
+        textAlign:"left",
+        padding:"1rem 0 1rem 0",
+    },
+    BodySpacer:{
+        textAlign:"left",
+        padding:"1rem 0 1rem 0",
+    },
     BlockScreen:{
         position: "fixed",
         zIndex: "9999",
@@ -59,6 +67,6 @@ export default Gale({
     },
     GapVertical:{
         borderCollapse:"separate",
-        borderSpacing:"2rem 0.2rem",
+        borderSpacing:"3rem 0.2rem",
     }
 });