Adds some basic styling #5

Closed
Roflin wants to merge 1 commits from some-styling-work into gamenight-participants
7 changed files with 431 additions and 86 deletions

View File

@ -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",

View File

@ -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",

View File

@ -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;

View File

@ -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>
);
}
}

View File

@ -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

View File

@ -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>
</>
);
}

View File

@ -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>
);
}