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

Compare commits

base: partypages:309db89f5959674a387c634b51a1b4b54b73aafb
Branches Tags
partypages:main
..
compare: partypages:e9df7f557fc225357d2cde93bbfb0e090b7540b3
Branches Tags
partypages:main

No commits in common. "309db89f5959674a387c634b51a1b4b54b73aafb" and "e9df7f557fc225357d2cde93bbfb0e090b7540b3" have entirely different histories.
309db89f59 ... e9df7f557f

2 changed files with 17 additions and 40 deletions
Show Stats Expand all files Collapse all files

4
src/AdminUI.css
View File

@ -246,11 +246,7 @@ dialog > div label {
text-align: center;
}
&.heading> div {
overflow: hidden;
background-color: #b6b6b6;
text-align: center;
}
}
#dialog-edit-user input.invalid {
color: red;
}

51
src/AdminUI.tsx
View File

@ -1,7 +1,7 @@
import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
import './AdminUI.css';
import { createGuestRequest, createPartyRequest, deleteGuestRequest, deletePartyRequest, listGuestsRequest, listPartyRequest, modifyGuestRequest, parseToken, setAllowedExtras } from './partyAdminApi';
import { GrammaticalGender, Person, RequestCreateGuest, ResponseCreateParty, ResponseListGuests, ResponseListParties, AllowedExtraLengths } from './partyAdminApiTypes';
import { GrammaticalGender, Person, RequestCreateGuest, ResponseCreateParty, ResponseListGuests, ResponseListParties } from './partyAdminApiTypes';
export const AdminUI: React.FC = () => {
@ -12,6 +12,7 @@ export const AdminUI: React.FC = () => {
const adminToken = useMemo(() => parseToken(location.href) ?? "", []);
const loadPartyList = useCallback(async () => {
console.log("load party list");
const listPartyResponse = await listPartyRequest(adminToken);
if (selectedParty === undefined)
setSelectedParty(listPartyResponse.length > 0 ? 0 : undefined);
@ -98,14 +99,14 @@ export const AdminUI: React.FC = () => {
: null}
<dialog id="dialog-edit-party">
<div>
<h1>Edit Parties</h1>
<span className="lg">Edit Parties</span>
<div className="dialog-party-table">
{partyList.map((p, i)=> <Fragment key={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)} />
<button onClick={() => updateExtras(p.name)}>update</button>
</Fragment>)}
</>)}
</div>
<span className="danger-hint">To delete a party, enter <pre>deletethis</pre> and press update!</span>
<div className="dialog-bottom">
@ -119,7 +120,7 @@ export const AdminUI: React.FC = () => {
<div>
{editUserData ?
<>
<h1>{"_id" in editUserData ? `Editing ${editUserData.name}` : "New Invitation"}</h1>
<span className="lg">{"_id" in editUserData ? `Editing ${editUserData.name}` : "New Invitation"}</span>
<div className="dialog-person-table">
<label htmlFor="edit-token">Token</label>
<input type="text" id="edit-token" value={editUserData.token} onChange={(e) => { setEditUserData({ ...editUserData, token: e.target.value }) }} />
@ -144,9 +145,6 @@ export const AdminUI: React.FC = () => {
<option value="f">f</option>
<option value="d">d</option>
</select>
{selectedParty !== undefined && partyList[selectedParty] ?
<ExtraDataTable value={editUserData} setEditUserData={setEditUserData} allowed_extra={partyList[selectedParty].allowed_extra} />
:null}
</div>
</>
: "Hab keine user data bekommen."}
@ -185,23 +183,6 @@ export const AdminUI: React.FC = () => {
</>
};
export const ExtraDataTable : React.FC<{
value: RequestCreateGuest | Person,
setEditUserData: React.Dispatch<React.SetStateAction<RequestCreateGuest | Person | undefined>>,
allowed_extra: AllowedExtraLengths }
> = ({value: editUserData, setEditUserData, allowed_extra}) => {
return <>
<h2 style={{gridColumn:"1/span 2", textAlign: "center"}} >Extras</h2>
{Object.entries(allowed_extra).map(([extra, maxLen], index) =>
<Fragment key={index}>
<label htmlFor={`edit-extra-${extra}`}>{extra}</label>
<input className={((editUserData.extra[extra]??"").length > maxLen ? "invalid" : "")} type="text" id={`edit-extra-${extra}`} value={editUserData.extra[extra]} onChange={(e) => { setEditUserData({ ...editUserData, extra: {...editUserData.extra, [extra]: e.target.value}}) }} />
</Fragment>
)}
</>;
}
export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string, editUser: (user: RequestCreateGuest) => void }> = ({ party, adminToken, editUser }) => {
const [guests, setGuests] = useState<ResponseListGuests>([]);
@ -252,8 +233,8 @@ export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string,
<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
<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>
@ -261,8 +242,8 @@ export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string,
<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 onContextMenu={(e) => { e.preventDefault(); exportPartyLink(guest); }} onClick={() => editUser(guest)}><ExtraTable party={party} guest={guest} /></div>
: null}
<div ><ExtraTable party={party} guest={guest} onContextMenu={(e) => { e.preventDefault(); exportPartyLink(guest); }} onClick={() => editUser(guest)}/></div>
: null}
</Fragment>
)}
</div>
@ -280,10 +261,10 @@ export const PartyUI: React.FC<{ party: ResponseCreateParty, adminToken: string,
};
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>
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>
}