diff --git a/src/client/src/managetournament.js b/src/client/src/managetournament.js index 038b83d..d21f783 100644 --- a/src/client/src/managetournament.js +++ b/src/client/src/managetournament.js @@ -1,27 +1,91 @@ import * as React from "react"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { AlertContainer, alert } from "react-custom-alert"; -import Appbar from './components/appbar'; -import SaveButton from "./components/savebutton"; -import { useParams } from 'react-router-dom' +import Appbar from "./components/appbar"; +import { useParams } from "react-router-dom"; +import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider} from "@mui/material"; -import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider } from '@mui/material' +function submitChanges(event) { + event.preventDefault(); + //TODO use refs to get values + let tournamentName = document.getElementById("editName").value; + let tournamentDescription = document.getElementById("editDesc").value; + let tournamentImageFile = document.getElementById("editImage").files[0]; + let tournamentStartDate = document.getElementById("editStartDate").value; + let tournamentEndDate = document.getElementById("editEndDate").value; + + if (!tournamentName || tournamentName == "") { + alert("Tournament name cannot be empty"); + return; + } + if (!tournamentDescription || tournamentDescription == "") { + alert("Tournament description cannot be empty"); + return; + } + if (!tournamentStartDate || tournamentStartDate == "") { + alert("Tournament start date cannot be empty"); + return; + } + if (!tournamentEndDate || tournamentEndDate == "") { + alert("Tournament end date cannot be empty"); + return; + } + + if (tournamentStartDate > tournamentEndDate) { + alert("Tournament start date cannot be after end date"); + return; + } + let today = new Date(); + if (tournamentStartDate < today || tournamentEndDate < today) { + alert("Tournament start and end date must be after today"); + return; + } + + let formData = new FormData(); + formData.append("name", tournamentName); + formData.append("description", tournamentDescription); + // formData.append("image", tournamentImageFile); + formData.append("startDate", tournamentStartDate); + formData.append("endDate", tournamentEndDate); + // formData.append("teamLimit", tournamentMaxTeams); + let body = new URLSearchParams(formData); + + fetch(process.env.REACT_APP_BACKEND_URL + "/api/tournament/create", { + method: "POST", + body: body, + }) + .then((response) => response.json()) + .then((data) => { + if (data.status == "OK") { + alert("Tournament managed successfully"); + window.location.href = "/"; + } else { + showError(data.data); + } + }) + .catch((error) => showError(error)); +} function ManageTournament(props) { let [tournamentInfo, setTournamentInfo] = React.useState([]); React.useEffect(() => { console.log(props.tournamentId); - fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${props.tournamentId}`) - .then(res => res.json()) - .then(data => { - + fetch( + process.env.REACT_APP_BACKEND_URL + + `/api/tournament/${props.tournamentId}` + ) + .then((res) => res.json()) + .then((data) => { if (data.status !== "OK") { showError(data.data); } - + setTournamentInfo(data.data); document.getElementById("editName").value = data.data.name; + document.getElementById("editDesc").value = data.data.description; + document.getElementById("editStartDate").value = data.data.startTime; + document.getElementById("editEndDate").value = data.data.endTime; }) .catch((err) => console.log(err.message)); }, []); @@ -30,28 +94,36 @@ function ManageTournament(props) { <>
- Edit name: - - Edit description: - - - Edit image: -
- +
+ + Edit Start Time: + + + Edit End Time: + + - - - Edit Start Time: - - - Edit End Time: -
@@ -61,7 +133,9 @@ function ManageTournament(props) { function AnnounceButton(props) { return ( - + ); } @@ -82,21 +156,25 @@ function InviteButton(props) { const alertSuccess = () => alert({ message: "Copied to clipboard.", type: "success" }); return ( - ); } export default function TournamentManager(props) { - const { tournamentId } = useParams() + const { tournamentId } = useParams(); return ( <> - );