felixalb
/
asura-tmdb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added hooks for populating inputs in teameditor

This commit is contained in:
Kristoffer Longva Eriksen 2022-03-23 16:58:35 +01:00
parent 189a047bd2
commit 237ecac25a
1 changed files with 61 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/client/src/teameditor.js
View File

@ -1,28 +1,69 @@
import * as React from "react"; import * as React from "react";
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom"; import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Appbar from './components/appbar'; import Appbar from "./components/appbar";
import { Button, TextField, MenuItem, InputLabel, Select, Container, Slider } from '@mui/material' import {
Button,
function TeamList() { TextField,
let teams = {"team 1": ["tom", "eric", "gustav"], "team 2": ["emma", "mari", "ida"],"team 3": ["ola", "ole", "ost"],"team 4": ["christine", "kristine", "kristhine"]} MenuItem,
return (<div> InputLabel,
<ul> Select,
{Object.entries(teams).map(([team, players]) => <li key={team} ><button>{team}</button></li>)} Container,
</ul> Slider,
</div>) } from "@mui/material";
}
function TeamChanger() { function TeamChanger() {
return ( return (
<> <>
<form> <form>
<InputLabel htmlFor="teamInput">Team Name: </InputLabel> <InputLabel htmlFor="teamInput">Team Name: </InputLabel>
<TextField type="text" id="teamInput" variant="filled" label="Team Name:" /> <TextField
<InputLabel htmlFor="membersInput">Team Members: </InputLabel> type="text"
<TextField type="text" id="membersInput" variant="filled" label="Members:"/> id="teamInput"
</form> variant="filled"
</> label="Team Name:"
/>
<InputLabel htmlFor="membersInput">Team Members: </InputLabel>
<TextField
type="text"
id="membersInput"
variant="filled"
label="Members:"
/>
</form>
</>
);
}
function TeamList() {
let teams = {
"team 1": ["tom", "eric", "gustav"],
"team 2": ["emma", "mari", "ida"],
"team 3": ["ola", "ole", "ost"],
"team 4": ["christine", "kristine", "kristhine"],
};
const [teamInput, setteamInput] = React.useState("");
const [membersInput, setmembersInput] = React.useState("");
React.useEffect(() => {
document.getElementById("teamInput").value = teamInput;
document.getElementById("membersInput").value = membersInput;
});
return (
<div>
<ul>
{Object.entries(teams).map(([team, players]) => (
<li key={team}>
<button
onClick={() => {
setteamInput(team);
setmembersInput(players);
}}
>
{team}
</button>
</li>
))}
</ul>
</div>
); );
} }