rendering

app.js

@@ -1,3 +1,5 @@
+/** @import * as TYPES from "./types.ts" */
+
 import * as FSHandle from "./store-directory-handle.js";
 
 /** @type {(type:string, attributes?:Record<string, string>, ...children:Array<string|HTMLElement>)=>HTMLElement} */
@@ -39,32 +41,15 @@ async function ReloadAndRedraw(errorAction = ()=>{})
     }
     button.setAttribute("disabled", true);
     button.innerText = "loading...";
+
     const module = await import("./data/room.js"+"?rand="+Math.random());
+    /** @type {Record<string, TYPES.GraphParts>} */
     const rooms = module.default();
     button.innerText = "change directory";
     console.log("rooms loaded:", rooms);
 
-    Object.entries(rooms).forEach(([roomID, roomData])=>
+    Redraw(rooms);
-    {
-      const listPass = H("ul");
-      Object.entries(roomData.Pass).forEach(([passID, passData])=>{
-        listPass.appendChild(H("li", {}, 
-          H("button", { onclick()
-            {
-              passData.load();
-              console.log(roomData);
-              globalThis.ROOM=roomData;
-            } }, passData.name)
-        ))
-      });
 
-      listRoom.appendChild(
-        H("li", {},
-          H("div", {}, roomID),
-          listPass
-        )
-      );
-    })
   }
   catch(e)
   {
@@ -75,6 +60,53 @@ async function ReloadAndRedraw(errorAction = ()=>{})
 }
 
 
+function Redraw(rooms)
+{
+  Object.entries(rooms).forEach(([roomID, roomData])=>
+  {
+    const listPass = H("ul");
+    Object.entries(roomData.Pass).forEach(([passID, passData])=>{
+
+      listPass.appendChild(H("li", {}, 
+        H("button", { onclick:async()=>
+          {
+            await passData.load();
+            globalThis.ROOM=roomData;
+            Redraw(rooms)
+          } }, passData.name),
+      ))
+    });
+
+    
+    const listPart = H("ul");
+    Object.entries(roomData.Part).forEach(([partId, partData])=>{
+
+      const listWork = H("dl");
+
+      partData.pass.entries().forEach(([pass, passMapper])=>{
+        listWork.appendChild(H("dt", {}, pass.name))
+        passMapper.work.forEach((w)=>{
+          listWork.appendChild(H("dd", {}, w.join(" ")))
+        })
+      })
+
+      listPart.appendChild(H("li", {}, 
+        H("h2", {}, partData.name),
+        listWork
+      ));
+    })
+
+    listRoom.innerHTML = "";
+    listRoom.appendChild(
+      H("li", {},
+        H("div", {}, roomID),
+        listPass,
+        H("div", {}, listPart)
+      )
+    );
+  })
+}
+
 await ReloadAndRedraw();
 
 button.addEventListener("click", async()=>

graph.js

@@ -151,6 +151,7 @@ function Builder({user, role, part, desk, pass}, folderName)
                     }
 
                 }
+                console.log("load complete", PartList);
 
                 // update the graph
                 Object.values(DeskList).forEach((deskObj)=>Scan(deskObj, passObj));

types.ts

@@ -23,7 +23,9 @@ export type GraphBuilder=
     },
     folderName:string
 )
-=>{
+=>GraphParts
+
+export type GraphParts = {
     Desk:Record<string, Desk>,
     Part:Record<string, Part>,
     User:Record<string, User>,
@@ -35,7 +37,7 @@ export type MassDscription=
 (
     params:Record<string, Parameters<GraphBuilder>[0]>
 )
-=>()=>Record<string, ReturnType<GraphBuilder>>
+=>()=>Record<string, GraphParts>
 
 export type UserPassFile = Record<string, Array<[time:number, data:string, user?:User]>>