From fa383c34dd134109e614d210c55a34b3c8f7b5e9 Mon Sep 17 00:00:00 2001
From: Emil Wahlqvist <emiwa210@student.liu.se>
Date: Fri, 2 Apr 2021 17:47:48 +0000
Subject: [PATCH] Resolve "Add presentation slide settings"
---
.../components/SettingsPanel.tsx | 3 +-
.../components/SlideSettings.test.tsx | 7 +
.../components/SlideSettings.tsx | 191 ++++++++++++++++++
3 files changed, 200 insertions(+), 1 deletion(-)
create mode 100644 client/src/pages/presentationEditor/components/SlideSettings.test.tsx
create mode 100644 client/src/pages/presentationEditor/components/SlideSettings.tsx
diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
index 1eb1b40e..97301c25 100644
--- a/client/src/pages/presentationEditor/components/SettingsPanel.tsx
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.tsx
@@ -2,6 +2,7 @@ import { Tabs } from '@material-ui/core'
import AppBar from '@material-ui/core/AppBar'
import React from 'react'
import CompetitionSettings from './CompetitionSettings'
+import SlideSettings from './SlideSettings'
import { SettingsTab } from './styled'
interface TabPanelProps {
@@ -13,7 +14,7 @@ function TabContent(props: TabPanelProps) {
if (activeTab === 0) {
return <CompetitionSettings />
} else if (activeTab === 1) {
- return <div>2</div>
+ return <SlideSettings />
}
return <div>3</div>
}
diff --git a/client/src/pages/presentationEditor/components/SlideSettings.test.tsx b/client/src/pages/presentationEditor/components/SlideSettings.test.tsx
new file mode 100644
index 00000000..4099e130
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/SlideSettings.test.tsx
@@ -0,0 +1,7 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+import SlideSettings from './SlideSettings'
+
+it('renders slide settings', () => {
+ render(<SlideSettings />)
+})
diff --git a/client/src/pages/presentationEditor/components/SlideSettings.tsx b/client/src/pages/presentationEditor/components/SlideSettings.tsx
new file mode 100644
index 00000000..9441f908
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/SlideSettings.tsx
@@ -0,0 +1,191 @@
+import {
+ Button,
+ Checkbox,
+ Divider,
+ FormControl,
+ Grid,
+ InputLabel,
+ List,
+ ListItem,
+ ListItemText,
+ MenuItem,
+ Select,
+ TextField,
+ Typography,
+} from '@material-ui/core'
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import CloseIcon from '@material-ui/icons/Close'
+import MoreHorizOutlinedIcon from '@material-ui/icons/MoreHorizOutlined'
+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',
+ },
+ slideTypeSelection: {
+ margin: theme.spacing(2),
+ width: '87%',
+ },
+ clickableIcon: {
+ cursor: 'pointer',
+ },
+ importedImage: {
+ width: 70,
+ height: 50,
+ },
+ })
+)
+
+const SlideSettings: React.FC = () => {
+ const classes = useStyles()
+
+ const [slideTypeSelected, selectSlideType] = React.useState('')
+ const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
+ selectSlideType(event.target.value as string)
+ }
+
+ const answerList = [
+ { id: 'answer1', name: 'Svar 1' },
+ { id: 'answer2', name: 'Svar 2' },
+ ]
+ const handleCloseAnswerClick = (id: string) => {
+ setAnswers(answers.filter((item) => item.id !== id)) //Will not be done like this when api is used
+ }
+ const [answers, setAnswers] = useState(answerList)
+
+ const textList = [
+ { id: 'text1', name: 'Text 1' },
+ { id: 'text2', name: 'Text 2' },
+ ]
+ const handleCloseTextClick = (id: string) => {
+ setTexts(texts.filter((item) => item.id !== id)) //Will not be done like this when api is used
+ }
+ const [texts, setTexts] = useState(textList)
+
+ const pictureList = [
+ { id: 'picture1', name: 'Picture1.jpeg' },
+ { id: 'picture2', name: 'Picture2.jpeg' },
+ ]
+ const handleClosePictureClick = (id: string) => {
+ setPictures(pictures.filter((item) => item.id !== id)) //Will not be done like this when api is used
+ }
+ const [pictures, setPictures] = useState(pictureList)
+
+ return (
+ <div className={classes.textInputContainer}>
+ <FormControl variant="outlined" className={classes.slideTypeSelection}>
+ <InputLabel id="slide-type-selection-label">Sidtyp</InputLabel>
+ <Select value={slideTypeSelected} label="Sidtyp" defaultValue="informationSlide" onChange={handleChange}>
+ <MenuItem value="informationSlide">
+ <Button>Informationssida</Button>
+ </MenuItem>
+ <MenuItem value="textQuestion">
+ <Button>Skriftlig fråga</Button>
+ </MenuItem>
+ <MenuItem value="practicalQuestion">
+ <Button>Praktisk fråga</Button>
+ </MenuItem>
+ <MenuItem value="multipleChoiceQuestion">
+ <Button>Flervalsfråga</Button>
+ </MenuItem>
+ </Select>
+ </FormControl>
+ <Divider />
+
+ <Grid container spacing={0} justify="space-evenly" alignItems="center">
+ <Grid item>
+ <Typography variant="subtitle2">Timer (s):</Typography>
+ </Grid>
+ <Divider orientation="vertical" flexItem />
+ <Grid item>
+ <TextField margin="dense" id="outlined-basic" label="Antal sekunder" variant="outlined" />
+ </Grid>
+ </Grid>
+ <Divider />
+
+ <List>
+ <Divider />
+ <ListItem>
+ <ListItemText
+ className={classes.textCenter}
+ primary="Svarsalternativ"
+ secondary="(Fyll i rutan höger om textfältet för att markera korrekt svar)"
+ />
+ </ListItem>
+ {answers.map((answer) => (
+ <div key={answer.id}>
+ <ListItem divider>
+ <TextField className={classes.textInput} id="outlined-basic" label={answer.name} variant="outlined" />
+ <Checkbox color="default" />
+ <CloseIcon className={classes.clickableIcon} onClick={() => handleCloseAnswerClick(answer.id)} />
+ </ListItem>
+ </div>
+ ))}
+ <ListItem className={classes.center} button>
+ <Button>Lägg till svarsalternativ</Button>
+ </ListItem>
+ </List>
+ <Divider />
+
+ <List>
+ <Divider />
+ <ListItem>
+ <ListItemText className={classes.textCenter} primary="Text" />
+ </ListItem>
+ {texts.map((text) => (
+ <div key={text.id}>
+ <ListItem divider>
+ <TextField className={classes.textInput} id="outlined-basic" label={text.name} variant="outlined" />
+ <MoreHorizOutlinedIcon className={classes.clickableIcon} />
+ <CloseIcon className={classes.clickableIcon} onClick={() => handleCloseTextClick(text.id)} />
+ </ListItem>
+ </div>
+ ))}
+ <ListItem className={classes.center} button>
+ <Button>Lägg till text</Button>
+ </ListItem>
+ </List>
+ <Divider />
+
+ <List>
+ <Divider />
+ <ListItem>
+ <ListItemText className={classes.textCenter} primary="Bilder" />
+ </ListItem>
+ {pictures.map((picture) => (
+ <div key={picture.id}>
+ <ListItem divider button>
+ <img
+ id="temp source, todo: add image source to elements of pictureList"
+ src="https://i1.wp.com/stickoutmedia.se/wp-content/uploads/2021/01/placeholder-3.png?ssl=1"
+ className={classes.importedImage}
+ />
+ <ListItemText className={classes.textCenter} primary={picture.name} />
+ <CloseIcon onClick={() => handleClosePictureClick(picture.id)} />
+ </ListItem>
+ </div>
+ ))}
+ <ListItem className={classes.center} button>
+ <Button>Lägg till bild</Button>
+ </ListItem>
+ </List>
+ </div>
+ )
+}
+
+export default SlideSettings
--
GitLab