diff --git a/client/.eslintrc b/client/.eslintrc
index 9234ebf1b6fb8a53273828cac3e34e84285748b1..9f14e433b46b516e8adc6b26ece87084adb3e3bb 100644
--- a/client/.eslintrc
+++ b/client/.eslintrc
@@ -24,4 +24,4 @@
"prettier/prettier": ["warn"]
}
}
-
\ No newline at end of file
+
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 60e4ee38d107148d84f03bc76821e7fd0138099d..c80013fd85ff12b484ae7abd705fab9b1befe608 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,4 +1,5 @@
import { createMuiTheme, ThemeProvider } from '@material-ui/core'
+import { teal } from '@material-ui/core/colors'
import React from 'react'
import './App.css'
import Main from './Main'
@@ -8,6 +9,9 @@ const theme = createMuiTheme({
primary: {
main: '#6200EE',
},
+ secondary: {
+ main: teal.A400,
+ },
},
})
diff --git a/client/src/Main.tsx b/client/src/Main.tsx
index 5ad533a6203b5dc1399fa89381bb13d3a35180a6..568d101035f8b71b088af01616c4e8ea8101140a 100644
--- a/client/src/Main.tsx
+++ b/client/src/Main.tsx
@@ -14,7 +14,7 @@ const Main = () => {
<Switch>
<Route exact path="/" component={LoginPage} />
<Route path="/admin" component={AdminPage} />
- <Route path="/competition-id=:id" component={PresentationEditorPage} />
+ <Route path="/editor/competition-id=:id" component={PresentationEditorPage} />
<Route exact path="/view" component={ViewSelectPage} />
<Route exact path="/view/participant" component={ParticipantViewPage} />
<Route exact path="/view/judge" component={JudgeViewPage} />
diff --git a/client/src/pages/admin/components/CompetitionManager.tsx b/client/src/pages/admin/components/CompetitionManager.tsx
index b2a717e30fe5b0595f6ebb3143387988a9476d7b..a85378ab083930051dd595db5c74b411f49d6bb3 100644
--- a/client/src/pages/admin/components/CompetitionManager.tsx
+++ b/client/src/pages/admin/components/CompetitionManager.tsx
@@ -176,7 +176,7 @@ const CompetitionManager: React.FC = (props) => {
.map((row) => (
<TableRow key={row.name}>
<TableCell scope="row">
- <Button color="primary" component={Link} to={`/competition-id=${row.id}`}>
+ <Button color="primary" component={Link} to={`/editor/competition-id=${row.id}`}>
{row.name}
</Button>
</TableCell>
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.css b/client/src/pages/presentationEditor/PresentationEditorPage.css
new file mode 100644
index 0000000000000000000000000000000000000000..2d3d142b16b81330816316bb5993360e286abbf2
--- /dev/null
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.css
@@ -0,0 +1,23 @@
+.toolbar-container {
+ display:flex;
+ justify-content: space-between;
+}
+
+.view-button {
+ margin-right: 8px;
+}
+
+.view-button-group {
+ display: flex;
+ flex-direction: row;
+}
+
+.slide-list-item {
+ text-align: center !important;
+ height: 60px;
+}
+
+.right-drawer-tab {
+ height: 64px;
+ min-width: 130px !important;
+}
\ No newline at end of file
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index e5f1366ef74167317e53f52b8ed9b804ce6531f0..c48e89582f00bb5906e09bf16fe557d7be54282d 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
@@ -1,14 +1,128 @@
-import { Typography } from '@material-ui/core'
+import { Button, Divider, Typography } from '@material-ui/core'
+import AppBar from '@material-ui/core/AppBar'
+import CssBaseline from '@material-ui/core/CssBaseline'
+import Drawer from '@material-ui/core/Drawer'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemText from '@material-ui/core/ListItemText'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import Toolbar from '@material-ui/core/Toolbar'
import React from 'react'
import { useParams } from 'react-router-dom'
+import SettingsPanel from './components/SettingsPanel'
+import './PresentationEditorPage.css'
+
+function createSlide(name: string) {
+ return { name }
+}
+
+const slides = [
+ createSlide('Sida 1'),
+ createSlide('Sida 2'),
+ createSlide('Sida 3'),
+ createSlide('Sida 4'),
+ createSlide('Sida 5'),
+ createSlide('Sida 6'),
+ createSlide('Sida 7'),
+]
+const leftDrawerWidth = 150
+const rightDrawerWidth = 390
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ root: {
+ display: 'flex',
+ },
+ appBar: {
+ width: `calc(100% - ${rightDrawerWidth}px)`,
+ marginLeft: leftDrawerWidth,
+ marginRight: rightDrawerWidth,
+ },
+ leftDrawer: {
+ width: leftDrawerWidth,
+ flexShrink: 0,
+ position: 'relative',
+ zIndex: 1,
+ },
+ rightDrawer: {
+ width: rightDrawerWidth,
+ flexShrink: 0,
+ },
+ leftDrawerPaper: {
+ width: leftDrawerWidth,
+ },
+ rightDrawerPaper: {
+ width: rightDrawerWidth,
+ },
+ // necessary for content to be below app bar
+ toolbar: theme.mixins.toolbar,
+ content: {
+ flexGrow: 1,
+ backgroundColor: theme.palette.background.default,
+ padding: theme.spacing(3),
+ },
+ })
+)
interface CompetitionParams {
id: string
}
const PresentationEditorPage: React.FC = (props) => {
+ const classes = useStyles()
const params: CompetitionParams = useParams()
- return <Typography variant="h1">tävling: {params.id}</Typography>
+ return (
+ <div className={classes.root}>
+ <CssBaseline />
+ <AppBar position="fixed" className={classes.appBar}>
+ <Toolbar className="toolbar-container">
+ <Typography variant="h6" noWrap>
+ Tävling nr: {params.id}
+ </Typography>
+ <div className="view-button-group">
+ <Button className="view-button" variant="contained" color="secondary">
+ Åskådarvy
+ </Button>
+ <Button className="view-button" variant="contained" color="secondary">
+ Deltagarvy
+ </Button>
+ <Button className="view-button" variant="contained" color="secondary">
+ Domarvy
+ </Button>
+ </div>
+ </Toolbar>
+ </AppBar>
+ <Drawer
+ className={classes.leftDrawer}
+ variant="permanent"
+ classes={{
+ paper: classes.leftDrawerPaper,
+ }}
+ anchor="left"
+ >
+ <div className={classes.toolbar} />
+ <Divider />
+ <List>
+ {slides.map((slide, index) => (
+ <ListItem className="slide-list-item" divider button key={slide.name}>
+ <ListItemText primary={slide.name} />
+ </ListItem>
+ ))}
+ </List>
+ </Drawer>
+ <div className={classes.toolbar} />
+ <Drawer
+ className={classes.rightDrawer}
+ variant="permanent"
+ classes={{
+ paper: classes.rightDrawerPaper,
+ }}
+ anchor="right"
+ >
+ <SettingsPanel></SettingsPanel>
+ </Drawer>
+ </div>
+ )
}
export default PresentationEditorPage
diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..724786349bf514c3bee7c2f48ec3ca64adec0b96
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
@@ -0,0 +1,70 @@
+import { Button, Divider, List, ListItem, ListItemText, TextField } from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import CloseIcon from '@material-ui/icons/Close'
+import React, { useState } from 'react'
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ textInputContainer: {
+ '& > *': {
+ margin: theme.spacing(1),
+ width: '100%',
+ },
+ },
+ textInput: {
+ margin: theme.spacing(2),
+ width: '87%',
+ },
+ textCenter: {
+ textAlign: 'center',
+ },
+ center: {
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ })
+)
+interface TeamListItemProps {
+ name: string
+}
+
+const CompetitionSettings: React.FC = (props) => {
+ const classes = useStyles()
+ const initialList = [
+ { id: '1', name: 'Lag1' },
+ { id: '2', name: 'Lag2' },
+ { id: '3', name: 'Lag3' },
+ ]
+ const handleClick = (id: string) => {
+ setTeams(teams.filter((item) => item.id !== id)) //Will not be done like this when api is used
+ }
+ const [teams, setTeams] = useState(initialList)
+ return (
+ <div className={classes.textInputContainer}>
+ <form noValidate autoComplete="off">
+ <TextField className={classes.textInput} id="outlined-basic" label="Tävlingsnamn" variant="outlined" />
+ <Divider />
+ <TextField className={classes.textInput} id="outlined-basic" label="Stad" variant="outlined" />
+ </form>
+ <List>
+ <Divider />
+ <ListItem>
+ <ListItemText className={classes.textCenter} primary="Lag" />
+ </ListItem>
+ {teams.map((team) => (
+ <div key={team.id}>
+ <ListItem divider button>
+ <ListItemText primary={team.name} />
+ <CloseIcon onClick={() => handleClick(team.id)} />
+ </ListItem>
+ </div>
+ ))}
+ <ListItem className={classes.center} button>
+ <Button>Lägg till lag</Button>
+ </ListItem>
+ </List>
+ </div>
+ )
+}
+
+export default CompetitionSettings
diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..946befe71e75a33d80eafe0067a4238f641059f1
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
@@ -0,0 +1,36 @@
+import { Tab, Tabs } from '@material-ui/core'
+import AppBar from '@material-ui/core/AppBar'
+import React from 'react'
+import CompetitionSettings from './CompetitionSettings'
+
+interface TabPanelProps {
+ activeTab: number
+}
+
+function TabContent(props: TabPanelProps) {
+ const { activeTab } = props
+ if (activeTab === 0) {
+ return <CompetitionSettings />
+ } else if (activeTab === 1) {
+ return <div>2</div>
+ }
+ return <div>3</div>
+}
+
+const SettingsPanel: React.FC = (props) => {
+ const [activeTab, setActiveTab] = React.useState(0)
+ return (
+ <div>
+ <AppBar position="static">
+ <Tabs value={activeTab} onChange={(event, val) => setActiveTab(val)} aria-label="simple tabs example">
+ <Tab className="right-drawer-tab" label="Tävling" />
+ <Tab className="right-drawer-tab" label="Sida" />
+ <Tab className="right-drawer-tab" label="Stil" />
+ </Tabs>
+ </AppBar>
+ <TabContent activeTab={activeTab} />
+ </div>
+ )
+}
+
+export default SettingsPanel