desk flip table

app.js

@@ -108,7 +108,182 @@ const deskRender = van.state(0);
 /** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
 function Desks(inDesks)
 {
-    return Div.PartGroup(
+
+    const passes = []
+    for(const key in inDesks)
+    {
+        const value = inDesks[key];
+        for(const pass of value.pass.keys())
+        {
+            passes.push(pass)
+        }
+        break;
+    }
+
+
+    
+    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
+                    {
+                        attributes.class = caution ? Tag("PartCaution") : Tag("PartEmpty")
+                    }
+
+                    if(scan.need_dirty.includes(index))
+                    {
+                        attributes.class = Tag("PartDirty")
+                    }
+
+                    return DOM.td(
+                        Div.Part(
+                            attributes,
+                            latest
+                        )
+                    );
+                }),
+                DOM.td(Div.Icon("⇊")),
+                ...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(){
+                            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;
+                                }
+                                
+                            }));
+                        }
+                    };
+                    
+
+                    if(latest)
+                    {
+                        attributes.class = Tag("PartGood")
+                    }
+                    else
+                    {
+                        attributes.class = Tag("PartEmpty")
+                    }
+
+                    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
+                        )
+                    );
+                })
+            ])
+        }
+
+
+        console.log(columns[0]);
+
+        return DOM.tbody(
+            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;
@@ -234,7 +409,7 @@ function Desks(inDesks)
             return Div.DeskContainer(
                 DOM.h3(desk.name),
                 DOM.table.GapHorizontal(
-
+                    
                     DOM.thead(
                         DOM.tr(
                             DOM.th(),

styles.js

@@ -14,8 +14,8 @@ export default Gale({
         color:"white",
         borderRadius:"2rem",
         fontWeight:"bolder",
-        padding:"0 0.8rem",
-        margin:"0 1rem"
+        padding:"0.5rem 0.8rem",
+        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",
     }
 });