diff --git a/src/PartyPage.css b/src/PartyPage.css index 2a88ac4..1e02e01 100644 --- a/src/PartyPage.css +++ b/src/PartyPage.css @@ -53,4 +53,33 @@ h2 { p { margin: 0.3em 0 0.3em 0; +} + +.feedback { + line-height: 3em; + text-align: center; +} + +input[type="radio"] { + display: none; +} + +input[type="radio"]+label { + font-size: larger; + cursor: pointer; + padding: 0 1em 0 1em; + border-right: 0.1em solid white; +} + +input[type="radio"]+label:hover { + text-shadow: 0 0 2em white; +} + +input[type="radio"]+label:last-of-type { + border-right: none; +} + +input[type="radio"]:checked+label { + color: #0f0; + text-shadow: 0 0 1em #0f0; } \ No newline at end of file diff --git a/src/PartyPage.tsx b/src/PartyPage.tsx index 56ac16b..f90a5b1 100644 --- a/src/PartyPage.tsx +++ b/src/PartyPage.tsx @@ -1,10 +1,11 @@ -import React, { useContext } from 'react'; +import React, { ChangeEvent, useContext, useState } from 'react'; import './PartyPage.css'; -import { PartyContext } from './PartyContext'; +import { APIEndPoint, PartyContext } from './PartyContext'; import MatrixBackground from './MatrixBackground'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faAngleDown, faCalendarDays, faLocationDot } from '@fortawesome/free-solid-svg-icons'; +import { modifySelfRequest, parseURI } from './partyApi'; const myDear = { "m": "lieber", @@ -18,6 +19,21 @@ export const PartyPage: React.FC = () => { const name = partyContext.self.name; const party = partyContext.party; + const [comingState, setComingState] = useState(partyContext.self.coming); + + // SAFETY: If this is undefined, the contextProvider already fails + // eslint-disable-next-line no-restricted-globals + const endpoint = parseURI(location.href) as APIEndPoint; + + const handleSelect = async (e: ChangeEvent) => { + const value = (e.target as HTMLInputElement).value; + if (value !== "yes" && value !== "no" && value !== "maybe") { + throw new Error("received invalid value?"); + } + const status = await modifySelfRequest(endpoint, { coming: value }); + setComingState(status.coming); + } + let coming: string; if (party.maybe_coming === 0) { // exact number @@ -58,9 +74,12 @@ export const PartyPage: React.FC = () => { Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start wärst :)

- - - + + + + + +
Mehr Infos