table layout started

app.js

@@ -1,32 +1,8 @@
 /** @import * as TYPES from "./graph/types.ts" */
 import * as FSHandle from "./store-directory-handle.js";
 
-const {Div, DOM} = Gale({
+import Styles from "./styles.js";
-    Title:{
+const {DOM, Div, Tag} = Styles;
-        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()
 {
@@ -71,7 +47,7 @@ const loggedIn = van.state(false);
 
 const blocking = van.state(false);
 
-const showDesks = van.state(true);
+const showDesks = van.state(true, "desks");
 
 /** @type {(inParts:Record<string, TYPES.Part>)=>HTMLElement} */
 function Parts(inParts)
@@ -145,11 +121,10 @@ function Desks(inDesks)
                         const time = partPass.time;
                         const latest = partPass.work.find(t=>t[0] == time);
 
-                        return Div.Plain(
+                        return DOM.td(
-                            part.name,
-                            DOM.p( dirty.includes(index) ? "Dirty" : "Good!" ),
                             Div.Part(
-                                time, " ", latest?.[1] || ""
+                                {class: dirty.includes(index) ? Tag("DeskDirty") : ""},
+                                latest?.[1] || ""
                             )
                         );
                     }
@@ -159,23 +134,25 @@ function Desks(inDesks)
                 const work = [];
                 for(const [pass, dirty] of desk.pass)
                 {
-                    
+                    work.push(DOM.tr(
-                    work.push(Div.Part(
+                        DOM.td(pass.name),
-                        DOM.h5(pass.name),
+                        desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need)),
-                        Div.Part(
+                        DOM.td("->"),
-                            DOM.h4("Need:"),
+                        desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make))
-                            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(
+                return Div.DeskContainer(
                     DOM.h3(desk.name),
-                    work
+                    DOM.table(
+                        DOM.thead(
+                            DOM.th(),
+                            desk.need.map((part, index)=>DOM.th(part.name)),
+                            DOM.th(),
+                            desk.make.map((part, index)=>DOM.th(part.name))
+                        ),
+                        work
+                    )
                 )
 
 
@@ -211,6 +188,7 @@ function Room(room_id, graphParts)
             })
         ),
 
+
         Div.Plain("Passes:"),
         Div.PartGroup(
             Object.entries(graphParts.Pass).map(([pass_id, pass])=>{

styles.js

@@ -0,0 +1,35 @@
+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"
+    }
+});