Verified Commit 80d61881 authored by insert's avatar insert

Work on main interface.

parent bf958a48
......@@ -41,4 +41,9 @@
-->
</body>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<style>
.MuiAutocomplete-popup {
z-index: 9000;
}
</style>
</html>
import React, { useState, Fragment, createContext } from 'react';
import React, { useContext, useState, Fragment } from 'react';
import Login from './pages/Login';
import { Typography, CssBaseline, Container, makeStyles } from '@material-ui/core';
import { fetchUserInfo, UserInfo } from './api/info';
import { Container, Typography, List, ListItem, ListItemText, ListItemIcon, Card, CardActions, Button, Tooltip, Dialog, AppBar, Toolbar, IconButton, Slide, TextField, DialogContent, DialogActions } from '@material-ui/core';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { TransitionProps } from '@material-ui/core/transitions/transition';
import { useStyles, UserContext } from './Loader';
export const UserContext = createContext<UserInfo>({} as any),
useStyles = makeStyles(theme => (
{
'@global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%',
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}
));
import AddIcon from '@material-ui/icons/Add';
import DoneIcon from '@material-ui/icons/Done';
import EditIcon from '@material-ui/icons/Edit';
import CloseIcon from '@material-ui/icons/Close';
import DeleteIcon from '@material-ui/icons/Delete';
import { SubjectIcon } from './util/Icon';
const App = () => {
const classes = useStyles();
const Transition = React.forwardRef<unknown, TransitionProps>(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});
let [ userInfo, setUserInfo ] = useState<UserInfo>({} as any);
let [ status, setStatus ] = useState(0);
if (status === 0) {
setStatus(1);
fetchUserInfo()
.then(res => {
setUserInfo(res);
setStatus(3);
})
.catch(err => setStatus(2));
}
if (status < 2) {
return (
<Container component="main" maxWidth="xs">
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Loading Edupack...
</Typography>
</div>
</Container>
);
}
export default () => {
let classes = useStyles(),
userInfo = useContext(UserContext);
if (status < 3) {
return (
<Login />
);
}
let [ active, setActive ] = useState(-1);
let [ open, setOpen ] = useState(false);
const handleClose = () => setOpen(false);
return (
<UserContext.Provider value={userInfo}>
<Fragment>
<Container component="main" maxWidth="xs">
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Hello, {userInfo.givenName}!
</Typography>
<Typography variant="overline">
your assignments
<Tooltip title="Add a new assignment." aria-label="add a new assignment">
<AddIcon
style={{ marginLeft: 8, position: 'relative', top: 1 }}
fontSize="inherit"
onClick={() => setOpen(true)}
/>
</Tooltip>
</Typography>
<List>
{
[
[ 'subject', 'you have to do thing' ],
[ 'physics', 'yes time' ],
[ 'chemistry', 'make explode' ],
[ 'chemistry', 'and do page -8' ],
[ 'geography', 'delete' ],
[ 'product design', 'im going to saw you in half' ]
].map((x, i) =>
<Fragment>
<ListItem button
onClick={() => active === i ? setActive(-1) : setActive(i)}>
<ListItemIcon>
<SubjectIcon subject={x[0]} />
</ListItemIcon>
<ListItemText
primary={x[0]}
secondary={x[1]}
/>
</ListItem>
{
active === i &&
<Card style={{ boxShadow: 'none' }}>
<CardActions>
<Button
startIcon={<DoneIcon />}
size="small">
done
</Button>
<Button
startIcon={<EditIcon />}
size="small">
edit
</Button>
<Button
startIcon={<DeleteIcon />}
size="small">
delete
</Button>
</CardActions>
</Card>
}
</Fragment>
)
}
</List>
</div>
</Container>
</UserContext.Provider>
);
}
export default () => {
return (
<Fragment>
<CssBaseline />
<App />
<Dialog
open={open}
onClose={handleClose}
TransitionComponent={Transition}
fullWidth>
<AppBar className={classes.appBar}>
<Toolbar>
<IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
<CloseIcon />
</IconButton>
<Typography variant="h6" className={classes.title}>
Edit an assignment
</Typography>
</Toolbar>
</AppBar>
<DialogContent>
<Container fixed>
<TextField
margin="normal"
required
id="title"
label="Title"
name="title"
autoComplete="title"
autoFocus
fullWidth
/>
<Autocomplete
freeSolo
options={[ 'english', 'mathematics', 'biology', 'physics', 'chemistry', 'computer science', 'history', 'geography', 'economics', 'psychology', 'religious studies', 'art', 'music', 'drama', 'textiles', 'food tech', 'product design' ]}
renderInput={params =>
<TextField {...params} label="Subject" margin="normal" fullWidth />
}
/>
<TextField
margin="normal"
required
id="description"
label="Description"
name="description"
autoComplete="description"
fullWidth
/>
</Container>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Save
</Button>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
</DialogActions>
</Dialog>
</Fragment>
);
}
};
\ No newline at end of file
import React, { useState, Fragment, createContext } from 'react';
import Login from './pages/Login';
import { Typography, CssBaseline, Container, makeStyles } from '@material-ui/core';
import { fetchUserInfo, UserInfo } from './api/info';
import App from './App';
export const UserContext = createContext<UserInfo>({} as any),
useStyles = makeStyles(theme => (
{
'@global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
appBar: {
position: 'relative',
backgroundColor: theme.palette.grey[800],
},
title: {
marginLeft: theme.spacing(2),
flex: 1,
},
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%',
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}
));
const Loader = () => {
const classes = useStyles();
let [ userInfo, setUserInfo ] = useState<UserInfo>({} as any);
let [ status, setStatus ] = useState(0);
if (status === 0) {
setStatus(1);
fetchUserInfo()
.then(res => {
setUserInfo(res);
setStatus(3);
})
.catch(err => setStatus(2));
}
if (status < 2) {
return (
<Container component="main" maxWidth="xs">
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Loading Edupack...
</Typography>
</div>
</Container>
);
}
if (status < 3) {
return (
<Login />
);
}
return (
<UserContext.Provider value={userInfo}>
<App />
</UserContext.Provider>
);
}
export default () => {
return (
<Fragment>
<CssBaseline />
<Loader />
</Fragment>
);
}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Loader from './Loader';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Loader />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
......
import React, { useState } from 'react';
import { Container, CssBaseline, Avatar, Typography, TextField, Button, makeStyles, Tooltip, Box, Link, SnackbarContent, Snackbar, IconButton } from '@material-ui/core';
import { Container, CssBaseline, Avatar, Typography, TextField, Button, Tooltip, Box, Link, Snackbar, IconButton } from '@material-ui/core';
import BookIcon from '@material-ui/icons/Book';
import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
import CloseIcon from '@material-ui/icons/Close';
import loginWithGoogle from './lwg.svg';
import { useStyles } from '../App';
import { useStyles } from '../Loader';
const ErrorMap = {
db_fail: 'There was a problem with the database.',
......
import React from 'react';
import { useTheme } from '@material-ui/core';
import Icon from '@mdi/react';
import { mdiAtomVariant, mdiNotebookOutline, mdiBookOpen, mdiCalculatorVariant, mdiMicroscope, mdiFlask, mdiDesktopClassic, mdiBookOpenPageVariant, mdiEarth, mdiCashMultiple, mdiBrain, mdiChristianity, mdiPaletteOutline, mdiMusicNote, mdiDramaMasks, mdiHanger, mdiSilverwareForkKnife, mdiCircularSaw } from '@mdi/js';
const SubjectIcons: { [key: string]: string } = {
'english': mdiBookOpenPageVariant,
'mathematics': mdiCalculatorVariant,
'biology': mdiMicroscope,
'physics': mdiAtomVariant,
'chemistry': mdiFlask,
'computer science': mdiDesktopClassic,
'history': mdiBookOpen,
'geography': mdiEarth,
'economics': mdiCashMultiple,
'psychology': mdiBrain,
'religious studies': mdiChristianity,
'art': mdiPaletteOutline,
'music': mdiMusicNote,
'drama': mdiDramaMasks,
'textiles': mdiHanger,
'food tech': mdiSilverwareForkKnife,
'product design': mdiCircularSaw,
};
export function SubjectIcon(props: { subject: string, }) {
let theme = useTheme(),
icon = SubjectIcons[props.subject] || mdiNotebookOutline;
return (
<Icon path={icon}
title={props.subject}
size={1}
color={theme.palette.text.secondary}
spin={props.subject === 'physics'}
/>
);
}
\ No newline at end of file
......@@ -1122,6 +1122,16 @@
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/[email protected]^4.0.0-alpha.30":
version "4.0.0-alpha.30"
resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.30.tgz#94811ec57e0d31610816999fb00c7438e2b4ae90"
integrity sha512-O+QQoYKy5o3z4CMd3rrbe5kSY4LAA5oPOFeum0JX4tMdV/frpAB86nGSNbs09cqunBtB0IplNBoKTla+NWLhqw==
dependencies:
"@babel/runtime" "^7.4.4"
"@material-ui/utils" "^4.5.2"
clsx "^1.0.4"
prop-types "^15.7.2"
"@material-ui/[email protected]^4.5.2":
version "4.5.2"
resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.5.2.tgz#95ac4641a3daed5ee9cc91af1e224d39efafbecb"
......@@ -1169,6 +1179,16 @@
prop-types "^15.7.2"
react-is "^16.8.6"
"@mdi/[email protected]^4.5.95":
version "4.5.95"
resolved "https://registry.yarnpkg.com/@mdi/js/-/js-4.5.95.tgz#f9d12c03b9f848001c82fbdcd1aa445a6c9c8d67"
integrity sha512-zQ6LqK/B61/ASwoR26AauCLfNc6u/SyTwsnWF0WLcSIh+oe+A7rQbioYT3eSsQch1gC+1Ejk8YDfD7gDk0FUXg==
"@mdi/[email protected]^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@mdi/react/-/react-1.2.1.tgz#24279784e080728e953f3c1a71f49c64031dee47"
integrity sha512-1IRIVCT07vlLmaZjVtGfyfwCMivg/tCtPj0+r1BKrkoh9z4xLf+M1TD0LhjJPO+4+O0ibW+xrNRvf+boRRtX9A==
"@mrmlnc/[email protected]^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
......@@ -2669,7 +2689,7 @@ [email protected]^4.0.1:
kind-of "^6.0.2"
shallow-clone "^3.0.0"
[email protected]^1.0.2:
[email protected]^1.0.2, [email protected]^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
......@@ -6492,6 +6512,11 @@ [email protected]^4.0.0:
mimic-fn "^2.0.0"
p-is-promise "^2.0.0"
"[email protected]>=3.1.1 <6":
version "5.1.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
[email protected]^0.4.0, [email protected]^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
......@@ -8641,6 +8666,19 @@ [email protected]^4.3.0:
loose-envify "^1.4.0"
prop-types "^15.6.2"
[email protected]^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
[email protected]^1.8.5:
version "1.8.5"
resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
dependencies:
"@babel/runtime" "^7.0.0"
memoize-one ">=3.1.1 <6"
[email protected]^16.11.0:
version "16.11.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.11.0.tgz#d294545fe62299ccee83363599bf904e4a07fdbb"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment