partypages/admin-ui
2
0
Fork 0
generated from partypages/party-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement extraData visualizer
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Dominic Zimmer 2026-01-03 19:07:57 +01:00
parent 5a52d88f77
commit e9df7f557f
2 changed files with 63 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/AdminUI.css
View File

@ -76,11 +76,15 @@
.guests {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 5px 0px;
grid-template-columns: 1fr 1fr auto auto;
&.extra {
grid-template-columns: 1fr 1fr auto auto 1fr;
}
gap: 8px 8px;
overflow: auto;
}
.guests .header {
width: 100%;
background-color: unset!important;
justify-self: center;
justify-content: center;
@ -108,23 +112,35 @@ span.lg {
}
.guests > div {
background-color: lightgrey!important ;
padding: 8px;
cursor: pointer;
overflow: auto;
}
.guests>div:nth-child(8n+5),
.guests>div:nth-child(8n+6),
.guests>div:nth-child(8n+7),
.guests>div:nth-child(8n+8) {
.guests.extra>div:nth-child(10n+6),
.guests.extra>div:nth-child(10n+7),
.guests.extra>div:nth-child(10n+8),
.guests.extra>div:nth-child(10n+9),
.guests.extra>div:nth-child(10n+10) {
background-color: #c5c5c5!important;
}
.guests.extra>div:nth-child(10n+11),
.guests.extra>div:nth-child(10n+12),
.guests.extra>div:nth-child(10n+13)
.guests.extra>div:nth-child(10n+14)
.guests.extra>div:nth-child(10n+15) {
background-color: #dedede!important;
}
.guests>div:nth-child(8n+9),
.guests>div:nth-child(8n+10),
.guests>div:nth-child(8n+11),
.guests>div:nth-child(8n+12) {
background-color: #c5c5c5!important;
}
.guests>div:nth-child(8n+13),
.guests>div:nth-child(8n+14)
.guests>div:nth-child(8n+15)
.guests>div:nth-child(8n+16) {
background-color: #dedede!important;
;
}
.partyname {
@ -218,4 +234,19 @@ dialog > div label {
.coming-maybe {
font-style: italic;
color: blue;
}
}
.extraTable {
display: grid;
grid-template-columns: repeat(var(--num-columns), 1fr);
height: 100%;
width: 100%;
gap: 5px;
&> div {
background-color: #e8e8e8;
text-align: center;
}
&.heading> div {
background-color: #b6b6b6;
text-align: center;
}
}

25
src/AdminUI.tsx
View File

@ -101,7 +101,7 @@ export const AdminUI: React.FC = () => {
<div>
<span className="lg">Edit Parties</span>
<div className="dialog-party-table">
{partyList.map((p, i)=> <>
{partyList.map((p, _i)=> <>
<b>{p.name}</b>
<label htmlFor={`edit-keys-${p.name}`}>ExtraData:</label>
<input type="text" id={`payload-${p.name}`} defaultValue={JSON.stringify(p.allowed_extra)} />
@ -218,9 +218,12 @@ export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string,
], [guests]);
const genderstring = `${genderCount[0]} ${genderCount[1]} ${genderCount[2] !== 0 ? genderCount[2] : ""}`;
const numExtraColumns = Object.keys(party.allowed_extra).length;
const hasExtras = numExtraColumns > 0;
return <>
<div>
<div className="guests">
<div className={hasExtras ? "guests extra" : "guests"}>
<div className="header"><span className="lg">Token </span></div>
<div className="header"><span className="lg">Name </span></div>
<div className="header"><span className="lg">Gender</span><div>{genderstring}</div></div>
@ -229,11 +232,18 @@ export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string,
<span>{confirmations[1]}</span>
<span>{confirmations[2]}</span>
</div></div>
{ hasExtras ?
<div className="header"><span className="lg">Extras</span><div className="extraTable heading" style={{"--num-columns": numExtraColumns} as React.CSSProperties}>{Object.keys(party.allowed_extra).map((k,i) => <div key={i}>{k}</div>)}</div></div>
:null
}
{guests.map((guest, index) => <Fragment key={index}>
<div className="guestname" onContextMenu={(e) => { e.preventDefault(); exportPartyLink(guest); }} onClick={() => editUser(guest)}>{guest.token}</div>
<div className={`coming-${guest.coming}`} onContextMenu={(e) => { e.preventDefault(); exportPartyLink(guest); }} onClick={() => editUser(guest)}>{guest.name}</div>
<div onContextMenu={(e) => { e.preventDefault(); exportPartyLink(guest); }} onClick={() => editUser(guest)}>{guest.grammatical_gender}</div>
<div onContextMenu={(e) => { e.preventDefault(); exportPartyLink(guest); }} onClick={() => editUser(guest)}>{guest.coming ?? "?"}</div>
{hasExtras ?
<div ><ExtraTable party={party} guest={guest} onContextMenu={(e) => { e.preventDefault(); exportPartyLink(guest); }} onClick={() => editUser(guest)}/></div>
: null}
</Fragment>
)}
</div>
@ -248,4 +258,13 @@ export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string,
</span>
</div>
</>;
};
};
export const ExtraTable : React.FC<{guest: Person, party: ResponseCreateParty} & React.HTMLProps<HTMLDivElement>> = ({guest, party}) => {
const numExtraColumns = Object.keys(party.allowed_extra).length;
return <div className="extraTable" style={{"--num-columns": numExtraColumns} as React.CSSProperties}>
{Object.keys(party.allowed_extra).map((k, i) => <div key={i}>
{guest.extra[k]?? ""}
</div>)}
</div>
}