rendering started

app-gale.js

@@ -1,79 +0,0 @@
-/** @import * as TYPES from "./graph/types.ts" */
-import * as FSHandle from "./store-directory-handle.js";
-
-const {Div, DOM} = Gale({
-    Title:{
-        padding:"2rem",
-        background: "blue",
-        color:"white"
-    },
-    Plain:{}
-})
-
-/** @type {Van.State<Record<string, TYPES.GraphParts>>} */
-const rooms = van.state({});
-
-async function EvaluateHandle()
-{
-    try
-    {
-        const module = await import("./data/room.js"+"?rand="+Math.random());
-        /** @type {Record<string, TYPES.GraphParts>} */
-        const read = module.default();
-        console.log("rooms found:", read);
-        rooms.val = read;
-    }
-    catch(e)
-    {
-        console.log("rooms read error:", e);
-        rooms.val = {};
-    }
-}
-let handle = await FSHandle.getDirectoryHandle();
-EvaluateHandle();
-
-/** @type {(pass:TYPES.Pass, parts:TYPES.GraphParts)=>()=>HTMLElement} */
-function Pass(pass, parts)
-{
-    const rerender = van.state(0);
-    return ()=>{
-        console.log("rerendering...", rerender.val)
-        return Div.Plain(
-            Div.Title(
-                DOM.div.Plain(pass.name),
-                DOM.span.Plain(pass.path),
-            ),
-            ()=>{
-                return DOM.button.Plain(
-                    {async onclick(){
-                        await pass.load();
-                        rerender.val++
-                    }},
-                    pass.live ? "Dump" : "Load"
-                )
-            },
-
-        )
-    }
-}
-
-
-function App()
-{
-    return Div.Plain(
-        DOM.button({
-            async onclick(){
-                handle = await showDirectoryPicker();
-                await FSHandle.setDirectoryHandle(handle);
-                EvaluateHandle();
-            }
-        }, "Pick Directory"),
-        Object.entries(rooms.val).map(([room_id, graphParts])=>
-            Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
-                return Pass(pass, graphParts)
-            })
-        )
-    )
-}
-
-van.add(document.body, App);

app.js

@@ -0,0 +1,175 @@
+/** @import * as TYPES from "./graph/types.ts" */
+import * as FSHandle from "./store-directory-handle.js";
+
+const {Div, DOM} = Gale({
+    Title:{
+        padding:"2rem",
+        background: "blue",
+        color:"white"
+    },
+    Plain:{},
+    PartGroup:{
+        display: `flex`,
+        flexWrap: `wrap`
+    },
+    Part:{
+        border: `1px solid black`,
+        borderRadius: `5px`,
+        padding: `1rem`
+    }
+});
+
+async function PickHandle()
+{
+    handle = await showDirectoryPicker();
+    await FSHandle.setDirectoryHandle(handle);
+    await LoadHandleFiles();
+}
+async function LoadHandleFiles()
+{
+    try
+    {
+        const module = await import("./data/room.js"+"?rand="+Math.random());
+        /** @type {Record<string, TYPES.GraphParts>} */
+        const read = module.default();
+        rooms.val = read;
+    }
+    catch(_e)
+    {
+        rooms.val = {};
+    }
+}
+/** @type {Van.State<Record<string, TYPES.GraphParts>>} */
+const rooms = van.state({});
+let handle = await FSHandle.getDirectoryHandle();
+await LoadHandleFiles();
+
+
+/** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */
+function Room(room_id, graphParts)
+{
+    const rerender = van.state(0);
+    return Div.Plain(
+
+        Div.Plain("Passes:"),
+        Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
+            return ()=>{
+                console.log("rerendering...", rerender.val)
+                return Div.Plain(
+                    Div.Title(
+                        DOM.div.Plain(pass.name),
+                        DOM.span.Plain(pass.path),
+                    ),
+                    ()=>{
+                        return DOM.button.Plain(
+                            {async onclick(){
+                                await pass[pass.live ? "dump" : "load"]();
+                                rerender.val++
+                            }},
+                            pass.live ? "Dump" : "Load"
+                        )
+                    },
+                )
+            }
+        }),
+
+        Div.Plain("Parts"),
+        Div.PartGroup(
+            Object.entries(graphParts.Part).map(([part_id, part])=>{
+
+                return ()=>{
+
+                    rerender.val;
+
+                    const work = []
+                    for(const [_pass_ref, data] of part.pass)
+                    {
+
+                        work.push(Div.Part(
+                            DOM.h5("Pass:", _pass_ref.name),
+                            DOM.p(data.time),
+                            data.work.map(([time, data, user])=>Div.Plain(
+                                DOM.span(time),
+                                " ",
+                                DOM.strong(data),
+                            ))
+                        ))
+                    }
+
+                    return Div.Part(
+                        DOM.h3("Part:", part.name),
+                        ...work
+                    );
+                }
+
+            }),
+        ),
+
+        Div.Plain("Desks"),
+        Div.PartGroup(
+            Object.entries(graphParts.Desk).map(([desk_id, desk])=>{
+
+                return ()=>{
+
+                    rerender.val;
+
+                    /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:TYPES.Flag)=>HTMLElement|null} */
+                    const Iterator = (part, index, pass, dirty)=>{
+
+                        const partPass = part.pass.get(pass);
+                        if(partPass)
+                        {
+                            const time = partPass.time;
+                            const latest = partPass.work.find(t=>t[0] == time);
+
+
+                            return Div.Plain(
+                                part.name,
+                                DOM.p( dirty.need.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:", pass.name),
+                            Div.Part(
+                                DOM.h4("Need:"),
+                                desk.need.map((part, index)=>Iterator(part, index, pass, dirty))
+                            ),
+                            Div.Part(
+                                DOM.h4("Make:"),
+                                desk.make.map((part, index)=>Iterator(part, index, pass, dirty))
+                            )
+                        ))
+                    }
+
+                    return Div.Part(
+                        DOM.h3("Desk:", desk.name),
+                        work
+                    )
+                }
+
+            }),
+        ),
+
+    )
+}
+
+function App()
+{
+    return Div.Plain(
+        DOM.button({onclick:PickHandle}, "Pick Directory"),
+        Object.entries(rooms.val).map(([room_id, graphParts])=>
+            Room(room_id, graphParts)
+        )
+    )
+}
+
+van.add(document.body, App);

graph/types.ts

@@ -1,9 +1,10 @@
 export type User = {name:string, desk:Set<Desk>};
 export type Role = {name:string, user:User[]};
-export type Desk = {name:string, need:Part[], time:number[], make:Part[], pass:Map<Pass, {need:number[], make:number[]}>, mode:string, role:Role[]};
+export type Desk = {name:string, need:Part[], time:number[], make:Part[], pass:Map<Pass, Flag>, mode:string, role:Role[]};
-export type Work = [time:number, data:string, user:User];
 export type Pass = {name:string, path:string, live:boolean, load:()=>Promise<void>, dump:()=>void};
 export type Part = {name:string, pass:Map<Pass, {time:number, work:Work[], make:(user:User, data:string)=>void}>, need:Desk[], make:Desk[]};
+export type Work = [time:number, data:string, user:User];
+export type Flag = {need:number[], make:number[]}
 
 export type GraphBuilder=
 <

index.html

@@ -12,6 +12,6 @@
             .catch(err => console.error('Service Worker registration failed:', err));
         }
     </script>
-    <script type="module" src="https://treetopflyer.github.io/gale/boot.js?entry=/app-gale.js"></script>
+    <script type="module" src="https://treetopflyer.github.io/gale/boot.js?entry=/app.js"></script>
 </body>
 </html>

mock-user-folder/data/user.js

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

mock-user-folder/room/room_01/pass_01/u1.json

@@ -3,6 +3,7 @@
     [
         [123, "data"],
         [456, "more data"],
-        [789, "even more data"]
+        [789, "even more data"],
+        [101112, "even more data"]
     ]
 }

mock-user-folder/room/room_01/pass_02/u3.json

@@ -1,8 +1,8 @@
 {
     "p1":
     [
-        [123, "data"],
+        [123456, "data"],
-        [456, "more data"],
+        [4562358723, "more data"],
-        [789, "even more data"]
+        [789235072367, "even more data"]
     ]
 }