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

table layout started

Browse Source
This commit is contained in:
Seth Trowbridge 2025-11-01 15:55:24 -04:00
parent 1d527de26f
commit 396ad5b3c9
2 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app.js
View File

@ -1,32 +1,8 @@
/** @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`
},
BlockScreen:{
position: "fixed",
zIndex: "9999",
top: "0",
left: "0",
width: "100%",
height: "100%",
background: "rgba(128, 128, 128, 0.5)"
}
});
import Styles from "./styles.js";
const {DOM, Div, Tag} = Styles;
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(
part.name,
DOM.p( dirty.includes(index) ? "Dirty" : "Good!" ),
return DOM.td(
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(Div.Part(
DOM.h5(pass.name),
Div.Part(
DOM.h4("Need:"),
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))
)
work.push(DOM.tr(
DOM.td(pass.name),
desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need)),
DOM.td("->"),
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])=>{

35
styles.js Normal file
View File

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