diff --git a/package.json b/package.json index e9f6b3b..48178b8 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -10,6 +13,7 @@ "@types/node": "^16.11.64", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", + "fortawesome": "^0.0.1-security", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/PartyPage.tsx b/src/PartyPage.tsx index 8ca2536..5e2d2bc 100644 --- a/src/PartyPage.tsx +++ b/src/PartyPage.tsx @@ -1,27 +1,121 @@ -import React, { useContext } from 'react'; -import logo from './logo.svg'; +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", + "f": "liebe", + "d": "liebes", +}; export const PartyPage: React.FC = () => { const partyContext = useContext(PartyContext); - - return
-
- logo -

- Edit src/PartyPage.tsx and save to reload. -

- - Learn React - - Hello {partyContext.self.name} -
+ const dear = myDear[partyContext.self.grammatical_gender]; + 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 + if (party.definitely_coming === 0) { + coming = "Bisher hat noch niemand zugesagt." + } else if (party.definitely_coming === 1) { + coming = "Bisher hat ein Gast zugesagt." + } else { + coming = `Es haben schon ${party.definitely_coming} Gäste zugesagt.` + } + } else { + // inexact + if (party.definitely_coming === 0 && party.maybe_coming === 1) { + coming = "Bisher hat ein Gast vorläufig zugesagt." + } else if (party.definitely_coming === 0) { + coming = `Bisher haben ${party.maybe_coming} Gäste vorläufig zugesagt.` + } else { + coming = `Nach den bisherigen Zusagen kommen ${party.definitely_coming} bis ${party.definitely_coming + party.maybe_coming} Gäste.` + } + } + + return
+
+
+
+

Hallo {dear} {name},

+

+ am 16. Dezember wird die Heizung der Universität das letzte Mal angeschaltet... + Diese Chance, Energie zu schnorren, wollen wir ein letztes Mal nutzen. +

+

+ Das wollen wir (Kai, Dominic, Jesko) uns natürlich nicht entgehen lassen. + Also veranstalten wir eine mega krasse LAN-Party. + {coming} +

+

+ Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start wärst :) +

+
+ + + + + + +
+
+ Mehr Infos + +
+
+
+

Wann und Wo?

+

+ 29. Oktober, 19:00 bis 31. Oktober irgendwann. +

+

+ Mainzer Str. 28, 66111 Saarbrücken +

+

+ Ja, der 30. ist ein Sonntag. + Am 1. 11. ist aber Allerheiligen, also bietet es sich an am 31. nen Brückentag zu machen. + So hat man dann auch genug Zeit um nach den 25+ Stunden ordentlich auszuschlafen. +

+

Alter ernsthaft 25 Stunden?

+

+ Prinzipiell ja. + Wer möchte kann sich aber gerne auf eine unserer beiden Couches zurückziehen, + oder eine Luftmatratze mitbringen, oder vorher gehen, oder später dazukommen, + oder zwischendurch nach Hause fahren... +

+

Und was wenn ich Hunger bekomme?

+

+ Wir werden ein Curry, Chili o.Ä. kochen. + Bring aber auch gerne Snacks, Getränke, Knoblauchdip oder Kuchen mit :) +

+

Aber wo soll ich mein Auto hinstellen?

+

+ Am Waldhaus gibt es einen kostenlosen Parkplatz. + Wenn du mit dem Auto kommst sag Bescheid, wir planen uns dort zu treffen und dann mit einem Auto auf Kai's Premium-Parkplatz direkt neben der WG fahren. +

+
+
}; \ No newline at end of file diff --git a/src/partyApi.ts b/src/partyApi.ts index 77b87f6..6d2aa0d 100644 --- a/src/partyApi.ts +++ b/src/partyApi.ts @@ -1,16 +1,21 @@ import { APIEndPoint, PartyStatus, SelfStatus, UpdatableSelfStatus } from "./PartyContext"; export const parseURI = (uri: string): APIEndPoint | undefined => { - const x = uri.match(/https?:\/\/(?.+)\.party\.leafbla\.de\/(?.+)/); + // const x = uri.match(/https?:\/\/(?.+)\.party\.leafbla\.de\/(?.+)/); + const x = uri.match(/https?:\/\/[^\/]+\/(?.+)/); if (x === null || x.groups === undefined) return; - const partyName = x.groups["partyName"]; + // const partyName = x.groups["partyName"]; + const partyName = "xmas"; const token = x.groups["token"]; if (!partyName || !token) return; return { partyName, token }; }; const apiUrl = (apiEndPoint : APIEndPoint): string => { - return `https://party.leafbla.de/api/${apiEndPoint.partyName}/${apiEndPoint.token}`; + + let a = `https://party.leafbla.de/api/${apiEndPoint.partyName}/${apiEndPoint.token}`; + console.log(a); + return a; }; export const getSelfStatusRequest = async (apiEndpoint: APIEndPoint): Promise => {