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

input controls

Browse Source
This commit is contained in:
Seth Trowbridge 2025-11-02 13:47:12 -05:00
parent 396ad5b3c9
commit f47ab32d68
4 changed files with 181 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
app.js
View File

@ -20,11 +20,21 @@ async function LoadHandleFiles()
const module = await import("./graph/room.js"+"?bust="+Math.random()); const module = await import("./graph/room.js"+"?bust="+Math.random());
/** @type {Record<string, TYPES.GraphParts>} */ /** @type {Record<string, TYPES.GraphParts>} */
const read = module.default(); const read = module.default();
for(const roomKey in read)
{
const room = read[roomKey]
for(const pass in room.Pass)
{
await room.Pass[pass].load();
}
}
rooms.val = read; rooms.val = read;
} }
catch(_e) catch(e)
{ {
console.log("the handle exists, but the request failed. the service work must not be ready yet.") console.log("the handle exists, but the request failed. the service work must not be ready yet.", e)
rooms.val = {}; rooms.val = {};
} }
} }
@ -49,71 +59,85 @@ const blocking = van.state(false);
const showDesks = van.state(true, "desks"); const showDesks = van.state(true, "desks");
/** @type {(inParts:Record<string, TYPES.Part>)=>HTMLElement} */ function Input(handler=(str)=>{})
function Parts(inParts)
{ {
return Div.Plain( const input = DOM.textarea({style:"vertical-align:text-top; width:500px; height:200px;"});
Div.Plain("Parts"),
Div.PartGroup( let submitButton = Div.Plain(DOM.button({onclick(){
handler(input.value);
input.value = "";
mountPoint.remove();
}}, "submit value"));
let cancelButton = DOM.button({onclick(){
input.value = "";
mountPoint.remove();
}}, "cancel")
const mountPoint = Div.Plain({onclick(e){e.stopPropagation();}}, input, cancelButton, submitButton);
return mountPoint;
}
/** @type {(inParts:Record<string, TYPES.Part>, inPasses:Record<string, TYPES.Pass>)=>HTMLElement} */
function Parts(inParts, inPasses)
{
const rows = [];
const row = [DOM.th()]
for(const pass in inPasses)
{
row.push(DOM.th(inPasses[pass].name));
}
rows.push(DOM.thead(row));
Object.entries(inParts).map(([part_id, part])=>{ Object.entries(inParts).map(([part_id, part])=>{
const work = [] const row = [DOM.th(part.name)];
for(const [pass, data] of part.pass) for(const [pass, data] of part.pass)
{ {
row.push(DOM.td.Part(data.work.map(w=>Div.Plain(w[1]) )))
work.push(Div.Part( }
DOM.h5(pass.name), rows.push(DOM.tr(row))
DOM.p(data.time),
data.work.map(([time, data, user])=>Div.Plain(
DOM.span(time),
" ",
DOM.strong(data),
)),
Div.Plain(
loggedIn.val ? DOM.button({onclick(){
blocking.val = true;
loggedIn.val && data.make(loggedIn.val, "NEW").then(()=>{
blocking.val = false;
}); });
}}, "Add work!")
: null return DOM.table.GapVertical(rows);
)
))
} }
return Div.Part( const deskRender = van.state(0);
DOM.h3(part.name),
...work,
);
}),
)
)
}
/** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */ /** @type {(inDesks:Record<string, TYPES.Desk>)=>HTMLElement} */
function Desks(inDesks) function Desks(inDesks)
{ {
return Div.Plain(
Div.Plain("Desks"),
Div.PartGroup(
return Div.PartGroup(
Object.entries(inDesks).map(([desk_id, desk])=>{ Object.entries(inDesks).map(([desk_id, desk])=>{
loggedIn.val; loggedIn.val;
deskRender.val;
console.log("reredering desk", desk.name);
if (loggedIn.val) if (loggedIn.val)
{ {
let userInRole = false;
for(const role of desk.role) for(const role of desk.role)
{ {
if(!role.user.includes(loggedIn.val)) if(role.user.includes(loggedIn.val))
{
userInRole = true;
}
}
if(!userInRole)
{ {
return null; return null;
} }
} }
}
/** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:number[])=>HTMLElement|null} */
const Iterator = (part, index, pass, dirty)=>{ /** @type {(part:TYPES.Part, index:number, pass:TYPES.Pass, dirty:number[], type:"need"|"make")=>HTMLElement|null} */
const Iterator = (part, index, pass, dirty, type)=>{
const partPass = part.pass.get(pass); const partPass = part.pass.get(pass);
if(partPass) if(partPass)
@ -121,9 +145,34 @@ function Desks(inDesks)
const time = partPass.time; const time = partPass.time;
const latest = partPass.work.find(t=>t[0] == time); const latest = partPass.work.find(t=>t[0] == time);
const attributes = {
class: dirty.includes(index) ? Tag("DeskDirty") : "",
};
if(type == "make")
{
attributes.onclick=function(){
loggedIn.rawVal && van.add(this, Input((str)=>{
if(loggedIn.rawVal)
{
blocking.val = true;
partPass.make(loggedIn.rawVal, str).then(()=>{
deskRender.val++;
blocking.val = false;
})
}
else
{
return false;
}
}));
}
}
return DOM.td( return DOM.td(
Div.Part( Div.Part(
{class: dirty.includes(index) ? Tag("DeskDirty") : ""}, attributes,
latest?.[1] || "" latest?.[1] || ""
) )
); );
@ -136,15 +185,15 @@ function Desks(inDesks)
{ {
work.push(DOM.tr( work.push(DOM.tr(
DOM.td(pass.name), DOM.td(pass.name),
desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need)), desk.need.map((part, index)=>Iterator(part, index, pass, dirty.need, "need")),
DOM.td("->"), DOM.td("->"),
desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make)) desk.make.map((part, index)=>Iterator(part, index, pass, dirty.make, "make"))
)) ))
} }
return Div.DeskContainer( return Div.DeskContainer(
DOM.h3(desk.name), DOM.h3(desk.name),
DOM.table( DOM.table.GapHorizontal(
DOM.thead( DOM.thead(
DOM.th(), DOM.th(),
desk.need.map((part, index)=>DOM.th(part.name)), desk.need.map((part, index)=>DOM.th(part.name)),
@ -158,7 +207,6 @@ function Desks(inDesks)
}), }),
) )
)
} }
/** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */ /** @type {(room_id:string, graphParts:TYPES.GraphParts)=>HTMLElement} */
@ -189,29 +237,29 @@ function Room(room_id, graphParts)
), ),
Div.Plain("Passes:"), // Div.Plain("Passes:"),
Div.PartGroup( // Div.PartGroup(
Object.entries(graphParts.Pass).map(([pass_id, pass])=>{ // Object.entries(graphParts.Pass).map(([pass_id, pass])=>{
return ()=>{ // return ()=>{
console.log("rerendering...", rerender.rawVal); // console.log("rerendering...", rerender.rawVal);
//
rerender.val; // rerender.val;
//
return Div.Part( // return Div.Part(
DOM.div.Plain(pass.name), // DOM.div.Plain(pass.name),
()=>{ // ()=>{
return DOM.button.Plain( // return DOM.button.Plain(
{async onclick(){ // {async onclick(){
await pass[pass.live ? "dump" : "load"](); // await pass[pass.live ? "dump" : "load"]();
rerender.val++ // rerender.val++
}}, // }},
pass.live ? "Dump" : "Load" // pass.live ? "Dump" : "Load"
) // )
}, // },
) // )
} // }
}) // })
), // ),
()=>{ ()=>{
return DOM.button({onclick(){ return DOM.button({onclick(){
@ -221,7 +269,7 @@ function Room(room_id, graphParts)
()=>{ ()=>{
rerender.val; rerender.val;
return showDesks.val ? Desks(graphParts.Desk) : Parts(graphParts.Part); return showDesks.val ? Desks(graphParts.Desk) : Parts(graphParts.Part, graphParts.Pass);
}, },

20
mock-user-folder/graph/room.js
View File

@ -1,13 +1,19 @@
//@ts-check //@ts-check
import Rooms, {Room} from "../../graph/graph.js"; import CreateAllRooms, {Room} from "../../graph/graph.js";
import User from "./user.js";
export default Rooms({ const user = {
u1:"Seth Trowbridge",
u4:"Sarah Sharp",
u5:"Adam Marshall",
}
export default CreateAllRooms({
room_01:Room({ room_01:Room({
user:User, user,
role:{ role:{
dev:["Development", "u1"], dev:["Development", "u1"],
write:["Writing", "u2", "u3"], write:["Writing", "u5"],
admin:["Admin", "u4"]
}, },
part:{ part:{
p1:"Page title", p1:"Page title",
@ -15,8 +21,8 @@ export default Rooms({
p3:"Page preview", p3:"Page preview",
}, },
desk:{ desk:{
d1:["Write page metas", ["write"], "all", {}, "p1", "p2"], d1:["Write page metas", ["admin", "write"], "all", {}, "p1", "p2"],
d2:["Build Page preview", ["dev"], "all", {p1:1, p2:1}, "p3"] d2:["Build Page preview", ["admin", "dev"], "all", {p1:1, p2:1}, "p3" ]
}, },
pass:{ pass:{
pass_01:["January"], pass_01:["January"],

5
mock-user-folder/graph/user.js
View File

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

8
styles.js
View File

@ -31,5 +31,13 @@ export default Gale({
DeskDirty:{ DeskDirty:{
background:"tomato", background:"tomato",
color:"white" color:"white"
},
GapHorizontal:{
borderCollapse:"separate",
borderSpacing:"0 2rem"
},
GapVertical:{
borderCollapse:"separate",
borderSpacing:"2rem 0.2rem"
} }
}); });