SethTrowbridge/work-graph-simple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rendering started

Browse Source
This commit is contained in:
Seth Trowbridge 2025-10-31 13:15:53 -04:00
parent 4faccb4785
commit 8ade5f5703
7 changed files with 186 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app-gale.js
View File

@ -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);

175
app.js Normal file
View File

@ -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);

5
graph/types.ts
View File

@ -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 Work = [time:number, data:string, user:User];
export type Desk = {name:string, need:Part[], time:number[], make:Part[], pass:Map<Pass, Flag>, mode:string, role:Role[]};
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=
<

2
index.html
View File

@ -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>

3
mock-user-folder/data/user.js
View File

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

3
mock-user-folder/room/room_01/pass_01/u1.json
View File

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

6
mock-user-folder/room/room_01/pass_02/u3.json
View File

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