-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #163 from HackHPI/feature/activate-registration
Feature/activate registration
- Loading branch information
Showing
14 changed files
with
29,762 additions
and
577 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,113 @@ | ||
| 'use client' | ||
| import {Box, Button, Card, Container, Stack, Typography} from "@mui/material"; | ||
| import {TypeAnimation} from "react-type-animation"; | ||
| import Countdown from "./Countdown.jsx"; | ||
| import {CalendarMonthOutlined, Camera, CameraAlt, LocationOn} from "@mui/icons-material"; | ||
| import {useEffect, useState} from "react"; | ||
| import {MeshContainer} from "./MeshContainer/MeshContainer"; | ||
| "use client"; | ||
| import { Button, Card, Container, Stack, Typography } from "@mui/material"; | ||
| import { TypeAnimation } from "react-type-animation"; | ||
| import { Article, CalendarMonthOutlined } from "@mui/icons-material"; | ||
| import { useEffect, useState } from "react"; | ||
| import { MeshContainer } from "./MeshContainer/MeshContainer"; | ||
|
|
||
| function LandingImage() { | ||
| const [timeLeft, setTimeLeft] = useState(calculateTimeDiff()); | ||
|
|
||
| const [timeLeft, setTimeLeft] = useState(calculateTimeDiff()) | ||
| function calculateTimeDiff() { | ||
| return new Date(new Date(2025, 2, 21) - new Date()); | ||
| } | ||
|
|
||
| function calculateTimeDiff() { | ||
| return new Date(new Date(2025, 2, 21) - new Date()) | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| const i = setInterval(() => { | ||
| setTimeLeft(calculateTimeDiff()) | ||
| }, 1000); | ||
| return () => clearInterval(i); | ||
| }, []); //dependency, if end changes remount | ||
|
|
||
| return ( | ||
| <MeshContainer> | ||
|
|
||
| <Container sx={{height: "100%", width: "100%", display: "flex", flexDirection: "column", justifyContent: "space-around", minHeight: "60vh"}}> | ||
| <img src={"/HackHPI_white.svg"} width={"150rem"} alt={"HackHPI Logo"}/> | ||
| <div> | ||
| <Typography sx={{color: "white"}} variant={"h2"} component={"h1"}> | ||
| Medical Edition | ||
| </Typography> | ||
| <Typography variant={"h4"} component={"h2"}> | ||
| <TypeAnimation | ||
| preRenderFirstString={true} | ||
| sequence={[ | ||
| 500, | ||
| 'For better', | ||
| 500, | ||
| 'For better health', // initially rendered starting point | ||
| 1000, | ||
| 'For better diagnosis', // initially rendered starting point, | ||
| 1000, | ||
| 'For better treatments', // initially rendered starting point | ||
| 1000, | ||
| `See you in ${Math.round(timeLeft / (24 * 60 * 60 * 1000))} Days!`, | ||
| 10000, | ||
| ]} | ||
| speed={50} | ||
| repeat={Infinity} | ||
| /> | ||
| </Typography> | ||
| </div> | ||
| <Stack direction={"row"} spacing={3} useFlexGap flexWrap="wrap"> | ||
| <Button | ||
| variant={"contained"} | ||
| sx={{ | ||
| borderWidth: "1rem", | ||
| width: "13rem", | ||
| height: "3.5rem", | ||
| fontSize: "1rem", | ||
| }} | ||
| color={"primary"} | ||
| startIcon={<CameraAlt/>} | ||
| onClick={() => document.getElementById("images").scrollIntoView({ | ||
| behavior: "smooth", | ||
| block: "start", | ||
| inline: "nearest" | ||
| })} | ||
| > | ||
| Images | ||
| </Button> | ||
| <Card sx={{height: "3.5rem", justifyContent: "center", display: "flex"}}> | ||
| <Stack direction={"row"} alignItems={"center"} display={"flex"} | ||
| sx={{height: "100%", paddingRight: "1.25rem", paddingLeft: "1.25rem",}} spacing={2}> | ||
| <CalendarMonthOutlined sx={{fontSize: "1.5rem", color: "text.disabled"}}/> | ||
| <Typography sx={{fontSize: "1rem"}} color={"text.disabled"} noWrap> | ||
| 21th - 22th March 2025 | ||
| </Typography> | ||
| </Stack> | ||
| </Card> | ||
| </Stack> | ||
| </Container> | ||
| </MeshContainer> | ||
| ) | ||
| useEffect(() => { | ||
| const i = setInterval(() => { | ||
| setTimeLeft(calculateTimeDiff()); | ||
| }, 1000); | ||
| return () => clearInterval(i); | ||
| }, []); //dependency, if end changes remount | ||
|
|
||
| return ( | ||
| <MeshContainer> | ||
| <Container | ||
| sx={{ | ||
| height: "100%", | ||
| width: "100%", | ||
| display: "flex", | ||
| flexDirection: "column", | ||
| justifyContent: "space-around", | ||
| minHeight: "60vh", | ||
| }} | ||
| > | ||
| <img src={"/HackHPI_white.svg"} width={"150rem"} alt={"HackHPI Logo"} /> | ||
| <div> | ||
| <Typography sx={{ color: "white" }} variant={"h2"} component={"h1"}> | ||
| Medical Edition | ||
| </Typography> | ||
| <Typography variant={"h4"} component={"h2"}> | ||
| <TypeAnimation | ||
| preRenderFirstString={true} | ||
| sequence={[ | ||
| 500, | ||
| "For better", | ||
| 500, | ||
| "For better health", // initially rendered starting point | ||
| 1000, | ||
| "For better diagnosis", // initially rendered starting point, | ||
| 1000, | ||
| "For better treatments", // initially rendered starting point | ||
| 1000, | ||
| `See you in ${Math.round(timeLeft / (24 * 60 * 60 * 1000))} Days!`, | ||
| 10000, | ||
| ]} | ||
| speed={50} | ||
| repeat={Infinity} | ||
| /> | ||
| </Typography> | ||
| </div> | ||
| <Stack direction={"row"} spacing={3} useFlexGap flexWrap="wrap"> | ||
| <Button | ||
| variant={"contained"} | ||
| sx={{ | ||
| borderWidth: "1rem", | ||
| width: "13rem", | ||
| height: "3.5rem", | ||
| fontSize: "1rem", | ||
| }} | ||
| color={"primary"} | ||
| startIcon={<Article />} | ||
| onClick={() => | ||
| document.getElementById("signupForm").scrollIntoView({ | ||
| behavior: "smooth", | ||
| block: "start", | ||
| inline: "nearest", | ||
| }) | ||
| } | ||
| > | ||
| Registration | ||
| </Button> | ||
| <Card | ||
| sx={{ height: "3.5rem", justifyContent: "center", display: "flex" }} | ||
| > | ||
| <Stack | ||
| direction={"row"} | ||
| alignItems={"center"} | ||
| display={"flex"} | ||
| sx={{ | ||
| height: "100%", | ||
| paddingRight: "1.25rem", | ||
| paddingLeft: "1.25rem", | ||
| }} | ||
| spacing={2} | ||
| > | ||
| <CalendarMonthOutlined | ||
| sx={{ fontSize: "1.5rem", color: "text.disabled" }} | ||
| /> | ||
| <Typography | ||
| sx={{ fontSize: "1rem" }} | ||
| color={"text.disabled"} | ||
| noWrap | ||
| > | ||
| 21th - 22th March 2025 | ||
| </Typography> | ||
| </Stack> | ||
| </Card> | ||
| </Stack> | ||
| </Container> | ||
| </MeshContainer> | ||
| ); | ||
| } | ||
|
|
||
| export default LandingImage | ||
| export default LandingImage; |
117 changes: 117 additions & 0 deletions
117
src/components/Registration/GroupManager/GroupManager.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import { | ||
| Box, | ||
| Button, | ||
| Divider, | ||
| Grid, | ||
| Stack, | ||
| TextField, | ||
| Typography, | ||
| } from "@mui/material"; | ||
| import { LoadingButton } from "@mui/lab"; | ||
| import {useEffect, useMemo, useState} from "react"; | ||
| import { GroupRest } from "../../../rest/GroupRest"; | ||
|
|
||
| export function GroupManager(props) { | ||
| const [loadingNewTeam, setLoadingNewTeam] = useState(false); | ||
| const [fetchingExistingTeam, setFetchingExistingTeam] = useState(false); | ||
| const [group, setGroup] = useState(false); | ||
| const [groupInput, setGroupInput] = useState(""); | ||
| const [groupInputError, setGroupInputError] = useState(false); | ||
| const groupRest = useMemo(() => new GroupRest(), []); | ||
|
|
||
|
|
||
| function createNewGroup() { | ||
| setLoadingNewTeam(true); | ||
| setGroupInputError(false) | ||
| groupRest.createGroup(props.eventId).then((response) => { | ||
| setLoadingNewTeam(false); | ||
| setGroup(response.data); | ||
| }); | ||
| } | ||
|
|
||
| function getGroup() { | ||
| setFetchingExistingTeam(true); | ||
| setGroupInputError(false) | ||
| groupRest | ||
| .getGroup(props.eventId, groupInput) | ||
| .then((response) => { | ||
| setFetchingExistingTeam(false); | ||
| setGroup(response.data); | ||
| }) | ||
| .catch((error) => { | ||
| setFetchingExistingTeam(false); | ||
| setGroupInput(""); | ||
| setGroupInputError(true); | ||
| }); | ||
| } | ||
|
|
||
| useEffect(() => { | ||
| props.onGroupChange(group) | ||
| }, [group]); | ||
|
|
||
| function renderGroupSelection() { | ||
| return ( | ||
| <Box sx={{ pt: 5, pb: 5 }}> | ||
| <Stack direction="row" spacing={2}> | ||
| <TextField | ||
| fullWidth | ||
| label={"Enter team name (e.g. chalk-increase-vague)"} | ||
| value={groupInput} | ||
| onChange={(event) => setGroupInput(event.target.value)} | ||
| error={groupInputError} | ||
| helperText={ | ||
| groupInputError ? "Did not find specified group" : undefined | ||
| } | ||
| /> | ||
| <LoadingButton | ||
| variant={"outlined"} | ||
| disabled={loadingNewTeam} | ||
| loading={fetchingExistingTeam} | ||
| onClick={getGroup} | ||
| > | ||
| Join | ||
| </LoadingButton> | ||
| </Stack> | ||
| <Divider sx={{ pt: 2, pb: 2 }}> or </Divider> | ||
| <Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}> | ||
| <LoadingButton | ||
| variant={"outlined"} | ||
| color={"primary"} | ||
| onClick={createNewGroup} | ||
| loading={loadingNewTeam} | ||
| disabled={fetchingExistingTeam} | ||
| > | ||
| Create new Team | ||
| </LoadingButton> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| function renderGroup() { | ||
| return ( | ||
| <Box sx={{ pt: 5, pb: 5 }}> | ||
| <Typography gutterBottom>You are assigned to the group</Typography> | ||
| <Typography sx={{ fontWeight: 800, pb: 3 }} variant={"h5"}> | ||
| {group.phrase} | ||
| </Typography> | ||
| <Button variant="outlined" onClick={() => setGroup(null)}> | ||
| Reset Group | ||
| </Button> | ||
|
|
||
| <Typography sx={{ pt: 4 }}> | ||
| share this name to your team members | ||
| </Typography> | ||
| <Typography color={"text.secondary"}> | ||
| This is not your actual team name at the event | ||
| </Typography> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Grid item md={12} xs={12}> | ||
| {group ? renderGroup() : renderGroupSelection()} | ||
| </Grid> | ||
| ); | ||
| } |
Oops, something went wrong.