Implement extraData visualizer

src/AdminUI.css

@@ -76,11 +76,15 @@
 
 .guests {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr auto auto;
-  gap: 5px 0px;
+  &.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.extra>div:nth-child(10n+6),
-.guests>div:nth-child(8n+6),
+.guests.extra>div:nth-child(10n+7),
-.guests>div:nth-child(8n+7),
+.guests.extra>div:nth-child(10n+8),
-.guests>div:nth-child(8n+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 {
@@ -219,3 +235,18 @@ dialog > div label {
   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;
+  }
+}

src/AdminUI.tsx

@@ -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>
@@ -249,3 +259,12 @@ export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string,
         </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>
+}