Unified spelling and capitalization, started team editor

src/client/src/FrontPage.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
 import CreateTournament from "./createtournament.js";
-import TournamentOverview from "./tournamentoverview.js";
+import TournamentOverview from "./TournamentOverview.js";
 import TournamentManager from "./managetournament.js";
-import TournamentAnnouncement from "./tournamentannouncement";
-import TournamentMatches from "./tournamentmatches";
-import TeamEditor from "./teameditor";
+import TournamentAnnouncement from "./TournamentAnnouncement";
+import TournamentMatches from "./TournamentMatches";
+import TournamentTeams from "./TournamentTeams";
 import Appbar from './components/appbar';
 import { Button, Container, Typography, Box } from "@mui/material";
 import { Card, CardContent, CardMedia, Paper } from "@mui/material";
@@ -145,7 +145,7 @@ export default function App() {
         <Route path="/create" element={<CreateTournament />} />
         <Route path="/tournament/:tournamentId" element={<TournamentOverview />} />
         <Route path="/tournament/:tournamentId/manage" element={<TournamentManager />} />
-        <Route path="/tournament/:tournamentId/teams" element={<TeamEditor />} />
+        <Route path="/tournament/:tournamentId/teams" element={<TournamentTeams />} />
         <Route path="/tournament/matches" element={<TournamentMatches />} />
         <Route
           path="/tournament/manage/announcement"

src/client/src/TournamentTeams.js

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
+import Appbar from "./components/appbar";
+import { Button, TextField, Stack, MenuItem, InputLabel, Select, Container, TableContainer, Table, TableBody, TableHead, TableCell, TableRow, Paper, Typography} from "@mui/material";
+
+function showError(error) {
+  alert("Something went wrong. \n" + error);
+  console.error(error);
+}
+
+function TeamList(props) {
+
+  return (
+  <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
+  <div align="center" >
+  <h2><b>Teams:</b></h2>
+  {/* TODO: scroll denne menyen, eventuelt søkefelt */}
+      <Table aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Team Name</TableCell>
+            <TableCell align="right">Team Members</TableCell>
+            <TableCell align="center">Actions</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {props.teams.map((team) => (
+
+            <TableRow key={team.id}>
+              <TableCell component="th" scope="row"> <b>
+                {team.name}
+              </b></TableCell>
+              <TableCell align="right">{team.members}</TableCell>
+              <TableCell align="center">
+                <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setselectedTeamId(team.id)}>Edit</Button>
+                <Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {props.onDelete(team.id); }}>Delete</Button>
+              </TableCell>
+            </TableRow>
+
+          ))}
+        </TableBody>
+      </Table>
+  </div>
+  </Paper>
+  );
+}
+
+function PlayerList(props) {
+  // Something like https://react-list-editable.netlify.app/
+  return <h1>PlayerList coming...</h1>
+}
+
+function TeamEditor(props) {
+  const [team, setTeam] = React.useState({});
+  const [players, setPlayers] = React.useState([]);
+  React.useEffect(() => {
+    if (props.selectedTeamId === -1) {
+      setTeam({});
+      return;
+    }
+    fetch(process.env.REACT_APP_BACKEND_URL + `/api/team/${props.selectedTeamId}`)
+      .then(res => res.json())
+      .then(data => {
+        if (data.status !== "OK") {
+          showError(data);
+          return;
+        }
+        setTeam(data.data);
+      })
+      .catch(error => showError(error));
+  }, [props.selectedTeamId]);
+
+  function postEdit() {
+    let formData = new FormData();
+    formData.append("name", document.getElementById("teamNameInput").value);
+  }
+
+  if (props.selectedTeamId == -1 || !team) {
+    return (
+      <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
+        <div align="center" >
+          ... Create a new team or select one from the list above ...
+        </div>
+      </Paper>
+    )
+  }
+  
+  function nameInputChanged(event) {
+    setTeam({...team, name: event.target.value});
+  }
+
+  return (
+    <Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
+    <div align="center">
+      <h2><b>Edit Team:</b></h2>
+      <form>
+        <TextField id="teamNameInput" label="Team Name" value={team.name || ""} onChange={nameInputChanged} />
+        <PlayerList players={players} setPlayers={setPlayers} />
+      </form>
+      </div>
+    </Paper>
+  )
+}
+
+export default function TournamentTeams(props) {
+  const [teams, setTeams] = React.useState([]);
+  const [selectedTeamId, setselectedTeamId] = React.useState(-1);
+  const { tournamentId } = useParams();
+
+  React.useEffect(() => {
+    fetch(process.env.REACT_APP_BACKEND_URL + `/api/tournament/${tournamentId}/getTeams`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.status !== "OK") {
+          showError(data.data);
+        }
+        setTeams(data.data);
+        //setselectedTeamId(teams[0].id);
+      })
+      .catch((err) => showError(err));
+  }, []);
+  
+  return (
+    <>
+    <Appbar />
+    <div className="tournamentTeams">
+      <TeamList teams={teams} selectedTeamId={selectedTeamId} setselectedTeamId={setselectedTeamId} />
+      <TeamEditor teams={teams} selectedTeamId={selectedTeamId} />
+    </div>
+    </>
+  );
+}

src/client/src/createtournament.js

@@ -130,18 +130,7 @@ function TournamentForm(props) {
           <option value={64}>64</option>
           <option value={128}>128</option>
         </select>
-        <Slider
-          aria-label="Teams"
-          defaultValue={1}
-          // value={value}
-          // onChange={console.log(value)}
-          valueLabelDisplay="auto"
-          step={1}
-          marks
-          min={1}
-          max={7}
-          id="max-teams-slider"
-          >
+        <Slider aria-label="Teams" defaultValue={1} valueLabelDisplay="auto" step={1} marks min={1} max={7} id="max-teams-slider" >
         </Slider>
 
         {/* go brrrr */}

src/client/src/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import App from "./frontpage.js";
+import App from "./FrontPage.js";
 import theme from './components/theme';
 import { ThemeProvider } from "@emotion/react";
 

src/client/src/managetournament.js

@@ -15,19 +15,19 @@ let submitChanges = curryTournamentId => event => {
   let tournamentStartDate = document.getElementById("editStartDate").value;
   let tournamentEndDate = document.getElementById("editEndDate").value;
 
-  if (!tournamentName || tournamentName == "") {
+  if (!tournamentName || tournamentName === "") {
     alert("Tournament name cannot be empty");
     return;
   }
-  if (!tournamentDescription || tournamentDescription == "") {
+  if (!tournamentDescription || tournamentDescription === "") {
     alert("Tournament description cannot be empty");
     return;
   }
-  if (!tournamentStartDate || tournamentStartDate == "") {
+  if (!tournamentStartDate || tournamentStartDate === "") {
     alert("Tournament start date cannot be empty");
     return;
   }
-  if (!tournamentEndDate || tournamentEndDate == "") {
+  if (!tournamentEndDate || tournamentEndDate === "") {
     alert("Tournament end date cannot be empty");
     return;
   }
@@ -88,7 +88,7 @@ function ManageTournament(props) {
         document.getElementById("editStartDate").value = data.data.startTime.slice(0, 16);
         document.getElementById("editEndDate").value = data.data.endTime.slice(0, 16);
       })
-      .catch((err) => console.log(err.message));
+      .catch((err) => showError(err));
   }, []);
 
   return (

src/client/src/teameditor.js

@@ -1,100 +0,0 @@
-import * as React from "react";
-import { BrowserRouter as Router, Link, Route, Routes, useParams } from "react-router-dom";
-import Appbar from "./components/appbar";
-import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider} from "@mui/material";
-
-function TeamChanger() {
-  return (
-    <>
-      <form>
-        <InputLabel htmlFor="teamInput">Team Name: </InputLabel>
-        <TextField
-          type="text"
-          id="teamInput"
-          variant="filled"
-          label="Team Name:"
-        />
-        <InputLabel htmlFor="membersInput">Team Members: </InputLabel>
-        <TextField
-          type="text"
-          id="membersInput"
-          variant="filled"
-          label="Members:"
-        />
-        <br />
-        <button>Save Team</button>
-      </form>
-    </>
-  );
-}
-var teams = {
-  "team 1": ["tom", "eric", "gustav"],
-  "team 2": ["emma", "mari", "ida"],
-  "team 3": ["ola", "ole", "ost"],
-  "team 4": ["christine", "kristine", "kristhine"],
-};
-function TeamList(props) {
-  const [teamInput, setteamInput] = React.useState("");
-  const [membersInput, setmembersInput] = React.useState("");
-  React.useEffect(() => {
-    document.getElementById("teamInput").value = teamInput;
-    document.getElementById("membersInput").value = membersInput;
-  });
-  return (
-    <>
-    <div>
-      Registered teams:
-      <ul>
-        {Object.entries(teams).map(([team, players]) => (
-          <li key={team}>
-            <button
-              onClick={() => {
-                setteamInput(team);
-                setmembersInput(players);
-              }}>
-              {team}
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>,
-    <div>
-    Remove team:{" "}
-    <select>
-      {Object.entries(teams).map(([team, players]) => (
-        <option value={team}>{team}</option>
-      ))}
-    </select>
-    <button>Remove</button>
-  </div>
-  <Link to={`/`}>
-    {/* Link to {props.tournament.id} when teams can be fetched */}
-      <button>Save and Exit</button>
-  </Link>
-  </>
-  );
-}
-
-// function TeamRemover() {
-//   return (
-//     'lol'
-//   );
-// }
-
-// function Save_Button() {
-//   return (
-//     'lol'
-//   );
-// }
-
-export default function TeamEditor() {
-  return (
-    <>
-      <Appbar />
-      <TeamChanger />
-      <TeamList />
-      {/* <TeamRemover />
-      <Save_Button /> */}
-    </>
-  );
-}