forked from Roflin/gamenight
Adds some basic styling
This commit is contained in:
parent
9de8ffaa2d
commit
83a0b5ad9d
211
frontend/package-lock.json
generated
211
frontend/package-lock.json
generated
@ -13,9 +13,11 @@
|
||||
"@material-ui/icons": "^4.11.3",
|
||||
"@mui/icons-material": "^5.8.0",
|
||||
"@mui/material": "^5.8.0",
|
||||
"@mui/x-date-pickers": "^5.0.0-alpha.4",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.0.1",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"date-fns": "^2.28.0",
|
||||
"moment": "^2.29.3",
|
||||
"react": "^18.1.0",
|
||||
"react-datetime": "^3.1.1",
|
||||
@ -2176,6 +2178,75 @@
|
||||
"postcss-selector-parser": "^6.0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@date-io/core": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz",
|
||||
"integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
|
||||
},
|
||||
"node_modules/@date-io/date-fns": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz",
|
||||
"integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"date-fns": "^2.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@date-io/dayjs": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz",
|
||||
"integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"dayjs": "^1.8.17"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@date-io/luxon": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz",
|
||||
"integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"luxon": "^1.21.3 || ^2.x"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"luxon": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@date-io/moment": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz",
|
||||
"integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==",
|
||||
"dependencies": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"moment": "^2.24.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"moment": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@emotion/babel-plugin": {
|
||||
"version": "11.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
|
||||
@ -3158,6 +3229,61 @@
|
||||
"react": "^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-date-pickers": {
|
||||
"version": "5.0.0-alpha.4",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.4.tgz",
|
||||
"integrity": "sha512-bPEsVygOI5KvrySYzi4ujJlRr4uskM5hDpcV8JCafHtSNQjUMQmCDtQKpAd8rViKBCBQMK8vhpqmf8ShfiZpLA==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.2",
|
||||
"@date-io/date-fns": "^2.14.0",
|
||||
"@date-io/dayjs": "^2.14.0",
|
||||
"@date-io/luxon": "^2.14.0",
|
||||
"@date-io/moment": "^2.14.0",
|
||||
"@mui/utils": "^5.7.0",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"rifm": "^0.12.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/material": "^5.2.3",
|
||||
"@mui/system": "^5.2.3",
|
||||
"date-fns": "^2.25.0",
|
||||
"dayjs": "^1.10.7",
|
||||
"luxon": "^1.28.0 || ^2.0.0",
|
||||
"moment": "^2.29.1",
|
||||
"react": "^17.0.2 || ^18.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
},
|
||||
"date-fns": {
|
||||
"optional": true
|
||||
},
|
||||
"dayjs": {
|
||||
"optional": true
|
||||
},
|
||||
"luxon": {
|
||||
"optional": true
|
||||
},
|
||||
"moment": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -6477,6 +6603,18 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/date-fns": {
|
||||
"version": "2.28.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
|
||||
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==",
|
||||
"engines": {
|
||||
"node": ">=0.11"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/date-fns"
|
||||
}
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
|
||||
@ -14027,6 +14165,14 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/rifm": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
|
||||
"integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
@ -18003,6 +18149,43 @@
|
||||
"integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==",
|
||||
"requires": {}
|
||||
},
|
||||
"@date-io/core": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.14.0.tgz",
|
||||
"integrity": "sha512-qFN64hiFjmlDHJhu+9xMkdfDG2jLsggNxKXglnekUpXSq8faiqZgtHm2lsHCUuaPDTV6wuXHcCl8J1GQ5wLmPw=="
|
||||
},
|
||||
"@date-io/date-fns": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.14.0.tgz",
|
||||
"integrity": "sha512-4fJctdVyOd5cKIKGaWUM+s3MUXMuzkZaHuTY15PH70kU1YTMrCoauA7hgQVx9qj0ZEbGrH9VSPYJYnYro7nKiA==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
}
|
||||
},
|
||||
"@date-io/dayjs": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.14.0.tgz",
|
||||
"integrity": "sha512-4fRvNWaOh7AjvOyJ4h6FYMS7VHLQnIEeAV5ahv6sKYWx+1g1UwYup8h7+gPuoF+sW2hTScxi7PVaba2Jk/U8Og==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
}
|
||||
},
|
||||
"@date-io/luxon": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.14.0.tgz",
|
||||
"integrity": "sha512-KmpBKkQFJ/YwZgVd0T3h+br/O0uL9ZdE7mn903VPAG2ZZncEmaUfUdYKFT7v7GyIKJ4KzCp379CRthEbxevEVg==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
}
|
||||
},
|
||||
"@date-io/moment": {
|
||||
"version": "2.14.0",
|
||||
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.14.0.tgz",
|
||||
"integrity": "sha512-VsoLXs94GsZ49ecWuvFbsa081zEv2xxG7d+izJsqGa2L8RPZLlwk27ANh87+SNnOUpp+qy2AoCAf0mx4XXhioA==",
|
||||
"requires": {
|
||||
"@date-io/core": "^2.14.0"
|
||||
}
|
||||
},
|
||||
"@emotion/babel-plugin": {
|
||||
"version": "11.9.2",
|
||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
|
||||
@ -18667,6 +18850,23 @@
|
||||
"react-is": "^17.0.2"
|
||||
}
|
||||
},
|
||||
"@mui/x-date-pickers": {
|
||||
"version": "5.0.0-alpha.4",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.4.tgz",
|
||||
"integrity": "sha512-bPEsVygOI5KvrySYzi4ujJlRr4uskM5hDpcV8JCafHtSNQjUMQmCDtQKpAd8rViKBCBQMK8vhpqmf8ShfiZpLA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.17.2",
|
||||
"@date-io/date-fns": "^2.14.0",
|
||||
"@date-io/dayjs": "^2.14.0",
|
||||
"@date-io/luxon": "^2.14.0",
|
||||
"@date-io/moment": "^2.14.0",
|
||||
"@mui/utils": "^5.7.0",
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-transition-group": "^4.4.2",
|
||||
"rifm": "^0.12.1"
|
||||
}
|
||||
},
|
||||
"@nodelib/fs.scandir": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -21095,6 +21295,11 @@
|
||||
"whatwg-url": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"date-fns": {
|
||||
"version": "2.28.0",
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz",
|
||||
"integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "3.2.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
|
||||
@ -26473,6 +26678,12 @@
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
|
||||
"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
|
||||
},
|
||||
"rifm": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.1.tgz",
|
||||
"integrity": "sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==",
|
||||
"requires": {}
|
||||
},
|
||||
"rimraf": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||
|
||||
@ -8,9 +8,11 @@
|
||||
"@material-ui/icons": "^4.11.3",
|
||||
"@mui/icons-material": "^5.8.0",
|
||||
"@mui/material": "^5.8.0",
|
||||
"@mui/x-date-pickers": "^5.0.0-alpha.4",
|
||||
"@testing-library/jest-dom": "^5.16.4",
|
||||
"@testing-library/react": "^13.0.1",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"date-fns": "^2.28.0",
|
||||
"moment": "^2.29.3",
|
||||
"react": "^18.1.0",
|
||||
"react-datetime": "^3.1.1",
|
||||
|
||||
@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react';
|
||||
import MenuBar from './components/MenuBar';
|
||||
import Login from './components/Login';
|
||||
import Gamenights from './components/Gamenights';
|
||||
import AddGameNight from './components/AddGameNight';
|
||||
import Gamenight from './components/Gamenight';
|
||||
|
||||
const localStorageUserKey = 'user';
|
||||
@ -100,39 +99,42 @@ function App() {
|
||||
setUser(JSON.parse(localStorage.getItem(localStorageUserKey)));
|
||||
}, []);
|
||||
|
||||
let page;
|
||||
if(user === null) {
|
||||
return (
|
||||
page = (
|
||||
<div className="App">
|
||||
<Login onChange={handleLogin}/>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
|
||||
let mainview;
|
||||
if(activeGamenight === null) {
|
||||
mainview = <>
|
||||
<AddGameNight user={user} games={games} setFlash={setFlash} refetchGamenights={refetchGamenights} />
|
||||
mainview = (
|
||||
<Gamenights
|
||||
user={user}
|
||||
games={games}
|
||||
setFlash={setFlash}
|
||||
refetchGamenights={refetchGamenights}
|
||||
gamenights={gamenights}
|
||||
onSelectGamenight={(g) => setActiveGamenight(g)}/>
|
||||
</>
|
||||
)
|
||||
} else {
|
||||
mainview = <Gamenight
|
||||
mainview = (
|
||||
<Gamenight
|
||||
gamenight={activeGamenight}
|
||||
onDismis={dismissActiveGamenight}
|
||||
/>
|
||||
/>)
|
||||
}
|
||||
|
||||
return (
|
||||
page = (
|
||||
<>
|
||||
<MenuBar user={user} onLogout={onLogout} />
|
||||
{mainview}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return page;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import DateTime from 'react-datetime';
|
||||
import GameAdder from './GameAdder';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Button from '@mui/material/Button';
|
||||
import { DateTimePicker } from '@mui/x-date-pickers';
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
|
||||
import "react-datetime/css/react-datetime.css";
|
||||
import GameAdder from './GameAdder';
|
||||
|
||||
function AddGameNight(props) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
@ -68,29 +74,56 @@ function AddGameNight(props) {
|
||||
|
||||
if(expanded) {
|
||||
return (
|
||||
<div className="Add-GameNight">
|
||||
<form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
|
||||
<fieldset>
|
||||
<legend>Gamenight</legend>
|
||||
|
||||
<label for="gamename">Game name:</label>
|
||||
<input id="gamename" name="gamename" type="text"
|
||||
value={gameName}
|
||||
onChange={handleNameChange} />
|
||||
<label for="datetime">date:</label>
|
||||
<DateTime id="datetime" onChange={onDateChange} value={date} />
|
||||
|
||||
<GameAdder games={props.games} onChange={onGamesListChange}/>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<div className="Add-GameNight">
|
||||
<form autoComplete="off" onSubmit={e => { e.preventDefault(); }}>
|
||||
<fieldset>
|
||||
<legend>Gamenight</legend>
|
||||
|
||||
<button onClick={handleAddGamenight}>Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
<button onClick={() => setExpanded(false)}>Discard</button>
|
||||
</div>
|
||||
<TextField
|
||||
id="game-name"
|
||||
label="Name"
|
||||
variant="standard"
|
||||
value={gameName}
|
||||
onChange={handleNameChange}/>
|
||||
|
||||
<DateTimePicker
|
||||
label="Gamenight date and time"
|
||||
variant="standard"
|
||||
value={date}
|
||||
onChange={onDateChange}
|
||||
inputFormat="dd-MM-yyyy HH:mm"
|
||||
renderInput={(params) => <TextField {...params} />}/>
|
||||
|
||||
<GameAdder games={props.games} onChange={onGamesListChange}/>
|
||||
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="success"
|
||||
onClick={handleAddGamenight}>
|
||||
Create
|
||||
</Button>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => setExpanded(false)}>
|
||||
Discard
|
||||
</Button>
|
||||
</Stack>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<button onClick={() => setExpanded(true)}>Expand</button>
|
||||
<IconButton
|
||||
aria-label="add"
|
||||
color="success"
|
||||
onClick={(e) => setExpanded(true)}>
|
||||
<AddIcon />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,38 +1,76 @@
|
||||
import * as React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import ListSubheader from '@mui/material/ListSubheader';
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
|
||||
function Gamenight(props) {
|
||||
|
||||
let games = props.gamenight.game_list.map(g =>
|
||||
(
|
||||
<li>
|
||||
<span>{g.name}</span>
|
||||
</li>
|
||||
)
|
||||
);
|
||||
const [dense, setDense] = useState(true);
|
||||
|
||||
let participants = props.gamenight.participants.map(p =>
|
||||
(
|
||||
<li>
|
||||
<span>{p.username}</span>
|
||||
</li>
|
||||
)
|
||||
let games = props.gamenight.game_list.map(g =>
|
||||
(
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={g.name}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>{props.gamenight.name}</h3>
|
||||
<button onClick={(e) => props.onDismis()}>x</button>
|
||||
<span>{props.gamenight.datetime}</span>
|
||||
<h4>Games:</h4>
|
||||
<ul>
|
||||
{games}
|
||||
</ul>
|
||||
<h4>Participants:</h4>
|
||||
<ul>
|
||||
{participants}
|
||||
</ul>
|
||||
</div>
|
||||
let participants = props.gamenight.participants.map(p =>
|
||||
(
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={p.username}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<IconButton
|
||||
aria-label="back"
|
||||
onClick={(e) => props.onDismis()}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
|
||||
<Typography type="h3">
|
||||
{props.gamenight.name}
|
||||
</Typography>
|
||||
<Typography type="body1">
|
||||
When: {moment(props.gamenight.datetime).format('LL HH:mm')}
|
||||
</Typography>
|
||||
|
||||
<List
|
||||
dense={dense}
|
||||
aria-labelledby="games-subheader"
|
||||
subheader={
|
||||
<ListSubheader component="div" id="games-subheader">
|
||||
Games:
|
||||
</ListSubheader>
|
||||
}>
|
||||
{games}
|
||||
</List>
|
||||
<List
|
||||
dense={dense}
|
||||
aria-labelledby="participants-subheader"
|
||||
subheader={
|
||||
<ListSubheader component="div" id="participants-subheader">
|
||||
Participants:
|
||||
</ListSubheader>
|
||||
}>
|
||||
{participants}
|
||||
</List>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Gamenight
|
||||
|
||||
@ -1,8 +1,19 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import List from '@mui/material/List';
|
||||
import ListItem from '@mui/material/ListItem';
|
||||
import ListItemAvatar from '@mui/material/ListItemAvatar';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import GamesIcon from '@mui/icons-material/Games';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
|
||||
import AddGameNight from './AddGameNight';
|
||||
|
||||
function Gamenights(props) {
|
||||
const [dense, setDense] = React.useState(false);
|
||||
|
||||
const DeleteGameNight = (gameId) => {
|
||||
const DeleteGamenight = (gameId) => {
|
||||
if (props.user !== null) {
|
||||
let input = {
|
||||
game_id: gameId,
|
||||
@ -31,23 +42,52 @@ function Gamenights(props) {
|
||||
}
|
||||
}
|
||||
|
||||
let gamenights = props.gamenights.map(g =>
|
||||
(
|
||||
<li onClick={(e) => props.onSelectGamenight(g)}>
|
||||
<span>{g.name}</span>
|
||||
{(props.user.id === g.owner_id || props.user.role === "Admin") &&
|
||||
<button onClick={(e) => {
|
||||
let gamenights = props.gamenights.map(g => {
|
||||
let secondaryAction;
|
||||
if(props.user.id === g.owner_id || props.user.role === 'Admin') {
|
||||
secondaryAction = (
|
||||
<IconButton
|
||||
edge="end"
|
||||
aria-label="delete"
|
||||
color="error"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
DeleteGameNight(g.id, g.owner)}}>x</button>
|
||||
}
|
||||
</li>
|
||||
DeleteGamenight(g.id)
|
||||
}}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<ListItem
|
||||
component="nav"
|
||||
onClick={(e) => props.onSelectGamenight(g)}
|
||||
secondaryAction={
|
||||
secondaryAction
|
||||
}>
|
||||
<ListItemAvatar>
|
||||
<Avatar>
|
||||
<GamesIcon />
|
||||
</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={g.name}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<ul>
|
||||
{gamenights}
|
||||
</ul>
|
||||
<>
|
||||
<AddGameNight
|
||||
user={props.user}
|
||||
games={props.games}
|
||||
setFlash={props.setFlash}
|
||||
refetchGamenights={props.refetchGamenights} />
|
||||
<List dense={dense}>
|
||||
{gamenights}
|
||||
</List>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,18 +1,37 @@
|
||||
import React from 'react';
|
||||
import * as React from 'react';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Button from '@mui/material/Button';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
|
||||
function MenuBar(props) {
|
||||
return (
|
||||
<ul>
|
||||
<li>
|
||||
<a>Gamenight</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>User: {props.user.username}</a>
|
||||
</li>
|
||||
<li>
|
||||
<button onClick={props.onLogout}>Logout</button>
|
||||
</li>
|
||||
</ul>
|
||||
<AppBar position="static">
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
size="large"
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{ flexGrow: 1 }}>
|
||||
Gamenight!
|
||||
</Typography>
|
||||
<Button
|
||||
color="inherit"
|
||||
onClick={props.onLogout}>
|
||||
Logout
|
||||
</Button>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user