Resolve "Add presentation editor"

client/.eslintrc

@@ -24,4 +24,4 @@
       "prettier/prettier": ["warn"]
     }
   }
-  
+  
\ No newline at end of file

client/src/App.tsx

 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,
+    },
   },
 })
 

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} />

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>

client/src/pages/presentationEditor/PresentationEditorPage.css

+.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

client/src/pages/presentationEditor/PresentationEditorPage.tsx

-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

client/src/pages/presentationEditor/components/CompetitionSettings.tsx

+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

client/src/pages/presentationEditor/components/SettingsPanel.tsx

+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