desk status started

app.js

@@ -108,9 +108,6 @@ const deskRender = van.state(0);
 /** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
 function Desks(inDesks)
 {
-
-    
-
     return Div.PartGroup(
         Object.entries(inDesks).map(([desk_id, desk])=>{
 
@@ -135,9 +132,10 @@ function Desks(inDesks)
                 }
             }
 
+            let emptyCount = 0;
 
-            /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:number[], type:"need"|"make")=>HTMLElement|null} */
-            const Iterator = (part, index, pass, dirty, type)=>{
+            /** @type {(part:TYPES.Part, index:number, array:TYPES.Part[], pass:TYPES.Pass, dirty:number[], type:"need"|"make")=>HTMLElement|null} */
+            const Iterator = (part, index, array, pass, dirty, type)=>{
 
                 const partPass = part.pass.get(pass);
                 if(partPass)
@@ -145,10 +143,19 @@ function Desks(inDesks)
                     const time = partPass.time;
                     const latest = partPass.work.find(t=>t[0] == time);
 
+                    if(type == "need")
+                    {
+                        if(!latest)
+                        {
+                            emptyCount++;
+                        }
+                    }
+
                     const attributes = {
-                        class: dirty.includes(index) ? Tag("DeskDirty") : "",
+                        class: dirty.includes(index) ? Tag("DeskDirty") : (type == "need"&&!latest) ? Tag("PartEmpty") : ""
                     };
 
+
                     if(type == "make")
                     {
                         attributes.onclick=function(){
@@ -183,22 +190,33 @@ function Desks(inDesks)
             const work = [];
             for(const [pass, dirty] of desk.pass)
             {
+                emptyCount = 0;
+
+                const need = desk.need.map((part, index, array)=>Iterator(part, index, array, pass, dirty.need, "need"));
+                if(desk.need.length == 0 || emptyCount == 0)
+                {
+
+                }
+
                 work.push(DOM.tr(
                     DOM.td(pass.name),
-                    desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need, "need")),
+                    need,
                     DOM.td("->"),
-                    desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make, "make"))
+                    desk.make.map((part, index, array)=>Iterator(part, index, array, pass, dirty.make, "make"))
                 ))
             }
 
             return Div.DeskContainer(
                 DOM.h3(desk.name),
                 DOM.table.GapHorizontal(
+
                     DOM.thead(
-                        DOM.th(),
-                        desk.need.map((part, index)=>DOM.th(part.name)),
-                        DOM.th(),
-                        desk.make.map((part, index)=>DOM.th(part.name))
+                        DOM.tr(
+                            DOM.th(),
+                            desk.need.map((part, index)=>DOM.th(part.name)),
+                            DOM.th(),
+                            desk.make.map((part, index)=>DOM.th(part.name))
+                        )
                     ),
                     work
                 )

mock-user-folder/graph/room.js

@@ -2,9 +2,12 @@
 import CreateAllRooms, {Room} from "../../graph/graph.js";
 
 const user = {
-    u1:"Seth Trowbridge",
-    u4:"Sarah Sharp",
-    u5:"Adam Marshall",
+    u1:"Seth T",
+    u4:"Sarah S",
+    u5:"Adam M",
+    u6:"Matt Y",
+    u7:"Seth F",
+    u8:"Brittany F"
 }
 
 export default CreateAllRooms({

styles.js

@@ -14,6 +14,9 @@ export default Gale({
         borderRadius: `5px`,
         padding: `1rem`
     },
+    PartEmpty:{
+        background:"gray"
+    },
     BlockScreen:{
         position: "fixed",
         zIndex: "9999",
@@ -30,14 +33,14 @@ export default Gale({
     },
     DeskDirty:{
         background:"tomato",
-        color:"white"
+        color:"white",
     },
     GapHorizontal:{
         borderCollapse:"separate",
-        borderSpacing:"0 2rem"
+        borderSpacing:"0 2rem",
     },
     GapVertical:{
         borderCollapse:"separate",
-        borderSpacing:"2rem 0.2rem"
+        borderSpacing:"2rem 0.2rem",
     }
 });