diff --git a/.vscode/settings.json b/.vscode/settings.json
index db2b68f4590ffec707c286474aa1004c29a5709e..b02ef900e7a5db6b3da7e7593e38600b00b950bf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -40,5 +40,6 @@
},
"search.exclude": {
"**/env": true
- }
+ },
+ "python.pythonPath": "server\\env\\Scripts\\python.exe"
}
diff --git a/client/src/actions/types.ts b/client/src/actions/types.ts
index 6e9c098e3f10870a5fecc89e5e42fe83d38ef13b..512572bcf6f73dbbeb4c76fcdc1207b00333149a 100644
--- a/client/src/actions/types.ts
+++ b/client/src/actions/types.ts
@@ -32,5 +32,9 @@ export default {
SET_CITIES_TOTAL: 'SET_CITIES_TOTAL',
SET_CITIES_COUNT: 'SET_CITIES_COUNT',
SET_TYPES: 'SET_TYPES',
+ SET_MEDIA_ID: 'SET_MEDIA_ID',
+ SET_MEDIA_FILENAME: 'SET_MEDIA_ID',
+ SET_MEDIA_TYPE_ID: 'SET_MEDIA_TYPE_ID',
+ SET_MEDIA_USER_ID: 'SET_MEDIA_USER_ID',
SET_STATISTICS: 'SET_STATISTICS',
}
diff --git a/client/src/enum/ComponentTypes.ts b/client/src/enum/ComponentTypes.ts
index 8acb2fd91da2eba39dd935ddce1f0a8af9a59198..8567e1c82bba8eb42e0d8a705bb6179ce56ba118 100644
--- a/client/src/enum/ComponentTypes.ts
+++ b/client/src/enum/ComponentTypes.ts
@@ -1,5 +1,5 @@
export enum ComponentTypes {
Text = 1,
- Checkbox,
Image,
+ Checkbox,
}
diff --git a/client/src/interfaces/ApiModels.ts b/client/src/interfaces/ApiModels.ts
index 650814f11fe4bd135822dcdb97855c430dd750ca..347fdbfa514b3f2adb71c4d0c47b19a08fa99376 100644
--- a/client/src/interfaces/ApiModels.ts
+++ b/client/src/interfaces/ApiModels.ts
@@ -84,6 +84,7 @@ export interface Component {
export interface ImageComponent extends Component {
data: {
media_id: number
+ filename: string
}
}
diff --git a/client/src/interfaces/ApiRichModels.ts b/client/src/interfaces/ApiRichModels.ts
index ebc2f885fb15251dee86cc1c2d0c33e86166af8c..2388f8308ba8bfa38d4d5376040f937244f4cbd5 100644
--- a/client/src/interfaces/ApiRichModels.ts
+++ b/client/src/interfaces/ApiRichModels.ts
@@ -1,4 +1,4 @@
-import { Component, QuestionAlternative, QuestionAnswer, QuestionType } from './ApiModels'
+import { Component, Media, QuestionAlternative, QuestionAnswer, QuestionType } from './ApiModels'
export interface RichCompetition {
name: string
@@ -17,6 +17,7 @@ export interface RichSlide {
competition_id: number
components: Component[]
questions: RichQuestion[]
+ medias: Media[]
}
export interface RichTeam {
diff --git a/client/src/pages/admin/AdminPage.test.tsx b/client/src/pages/admin/AdminPage.test.tsx
index ab694cee23501ef51a644c1df30f36662d9d36f6..445373a032207faa3f546a0c480fb03a093b1529 100644
--- a/client/src/pages/admin/AdminPage.test.tsx
+++ b/client/src/pages/admin/AdminPage.test.tsx
@@ -40,7 +40,7 @@ it('renders admin view', () => {
},
}
;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
- if (path === '/misc/cities') return Promise.resolve(cityRes)
+ if (path === '/api/misc/cities') return Promise.resolve(cityRes)
else return Promise.resolve(rolesRes)
})
render(
diff --git a/client/src/pages/admin/competitions/CompetitionManager.test.tsx b/client/src/pages/admin/competitions/CompetitionManager.test.tsx
index f47d8045d4486bc3d33dac2d28a65ffdc3eb5298..7af04abb66bba7ded7655398f288cba1c62bf78b 100644
--- a/client/src/pages/admin/competitions/CompetitionManager.test.tsx
+++ b/client/src/pages/admin/competitions/CompetitionManager.test.tsx
@@ -47,7 +47,7 @@ it('renders competition manager', () => {
}
;(mockedAxios.get as jest.Mock).mockImplementation((path: string, params?: any) => {
- if (path === '/competitions/search') return Promise.resolve(compRes)
+ if (path === '/api/competitions/search') return Promise.resolve(compRes)
else return Promise.resolve(cityRes)
})
render(
diff --git a/client/src/pages/presentationEditor/components/Alternatives.tsx b/client/src/pages/presentationEditor/components/Alternatives.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e699d003f7f3433e2caf25a26185ad5141c6f694
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/Alternatives.tsx
@@ -0,0 +1,136 @@
+import { Checkbox, ListItem, ListItemText, withStyles } from '@material-ui/core'
+import { CheckboxProps } from '@material-ui/core/Checkbox'
+import { green, grey } from '@material-ui/core/colors'
+import CloseIcon from '@material-ui/icons/Close'
+import axios from 'axios'
+import React from 'react'
+import { getEditorCompetition } from '../../../actions/editor'
+import { useAppDispatch, useAppSelector } from '../../../hooks'
+import { QuestionAlternative } from '../../../interfaces/ApiModels'
+import { RichSlide } from '../../../interfaces/ApiRichModels'
+import { AddButton, Center, Clickable, SettingsList, TextInput, WhiteBackground } from './styled'
+
+type AlternativeProps = {
+ activeSlide: RichSlide
+ competitionId: string
+}
+
+const Alternatives = ({ activeSlide, competitionId }: AlternativeProps) => {
+ const dispatch = useAppDispatch()
+ const competition = useAppSelector((state) => state.editor.competition)
+ const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
+ const GreenCheckbox = withStyles({
+ root: {
+ color: grey[900],
+ '&$checked': {
+ color: green[600],
+ },
+ },
+ checked: {},
+ })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
+
+ const numberToBool = (num: number) => {
+ if (num === 0) return false
+ else return true
+ }
+
+ const updateAlternativeValue = async (alternative: QuestionAlternative) => {
+ if (activeSlide && activeSlide.questions[0]) {
+ let newValue: number
+ if (alternative.value === 0) {
+ newValue = 1
+ } else newValue = 0
+ await axios
+ .put(
+ `/api/competitions/${competitionId}/slides/${activeSlide?.id}/questions/${activeSlide?.questions[0].id}/alternatives/${alternative.id}`,
+ { value: newValue }
+ )
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+ }
+
+ const updateAlternativeText = async (alternative_id: number, newText: string) => {
+ if (activeSlide && activeSlide.questions[0]) {
+ await axios
+ .put(
+ `/api/competitions/${competitionId}/slides/${activeSlide?.id}/questions/${activeSlide?.questions[0].id}/alternatives/${alternative_id}`,
+ { text: newText }
+ )
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+ }
+
+ const addAlternative = async () => {
+ if (activeSlide && activeSlide.questions[0]) {
+ await axios
+ .post(
+ `/api/competitions/${competitionId}/slides/${activeSlide?.id}/questions/${activeSlide?.questions[0].id}/alternatives`,
+ { text: '', value: 0 }
+ )
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+ }
+
+ const handleCloseAnswerClick = async (alternative_id: number) => {
+ if (activeSlide && activeSlide.questions[0]) {
+ await axios
+ .delete(
+ `/api/competitions/${competitionId}/slides/${activeSlideId}/questions/${activeSlide?.questions[0].id}/alternatives/${alternative_id}`
+ )
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+ }
+
+ return (
+ <SettingsList>
+ <WhiteBackground>
+ <ListItem divider>
+ <Center>
+ <ListItemText
+ primary="Svarsalternativ"
+ secondary="(Fyll i rutan höger om textfältet för att markera korrekt svar)"
+ />
+ </Center>
+ </ListItem>
+ {activeSlide &&
+ activeSlide.questions[0] &&
+ activeSlide.questions[0].alternatives &&
+ activeSlide.questions[0].alternatives.map((alt) => (
+ <div key={alt.id}>
+ <ListItem divider>
+ <TextInput
+ id="outlined-basic"
+ defaultValue={alt.text}
+ onChange={(event) => updateAlternativeText(alt.id, event.target.value)}
+ variant="outlined"
+ />
+ <GreenCheckbox checked={numberToBool(alt.value)} onChange={() => updateAlternativeValue(alt)} />
+ <Clickable>
+ <CloseIcon onClick={() => handleCloseAnswerClick(alt.id)} />
+ </Clickable>
+ </ListItem>
+ </div>
+ ))}
+ <ListItem button onClick={addAlternative}>
+ <Center>
+ <AddButton variant="button">Lägg till svarsalternativ</AddButton>
+ </Center>
+ </ListItem>
+ </WhiteBackground>
+ </SettingsList>
+ )
+}
+
+export default Alternatives
diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx
deleted file mode 100644
index a655a30f0763524c61e81185065ab4974a15ae91..0000000000000000000000000000000000000000
--- a/client/src/pages/presentationEditor/components/CompetitionSettings.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-import ImageComponentDisplay from './ImageComponentDisplay'
-
-it('renders image component display', () => {
- render(
- <ImageComponentDisplay component={{ id: 0, x: 0, y: 0, w: 0, h: 0, type: 0, media_id: 0 }} />
- )
-})
diff --git a/client/src/pages/presentationEditor/components/ImageComponentDisplay.test.tsx b/client/src/pages/presentationEditor/components/ImageComponentDisplay.test.tsx
index b726023b8e6079e7a631c2be396857e9ca0ef4c1..9e78f8e13fd94cf36434ef63ed7504695208de1c 100644
--- a/client/src/pages/presentationEditor/components/ImageComponentDisplay.test.tsx
+++ b/client/src/pages/presentationEditor/components/ImageComponentDisplay.test.tsx
@@ -3,5 +3,11 @@ import React from 'react'
import ImageComponentDisplay from './ImageComponentDisplay'
it('renders competition settings', () => {
- render(<ImageComponentDisplay component={{ id: 0, x: 0, y: 0, w: 0, h: 0, media_id: 0, type: 2 }} />)
+ render(
+ <ImageComponentDisplay
+ component={{ id: 0, x: 0, y: 0, w: 0, h: 0, data: { media_id: 0, filename: '' }, type_id: 2 }}
+ width={0}
+ height={0}
+ />
+ )
})
diff --git a/client/src/pages/presentationEditor/components/ImageComponentDisplay.tsx b/client/src/pages/presentationEditor/components/ImageComponentDisplay.tsx
index cffba9e59afa4288f980b9b4d3833494a02ec7d9..7886a9b15899dfe4b790be9d3673591b4d1940d7 100644
--- a/client/src/pages/presentationEditor/components/ImageComponentDisplay.tsx
+++ b/client/src/pages/presentationEditor/components/ImageComponentDisplay.tsx
@@ -1,43 +1,20 @@
-import React, { useState } from 'react'
-import { Rnd } from 'react-rnd'
+import React from 'react'
import { ImageComponent } from '../../../interfaces/ApiModels'
-import { Position, Size } from '../../../interfaces/Components'
type ImageComponentProps = {
component: ImageComponent
+ width: number
+ height: number
}
-const ImageComponentDisplay = ({ component }: ImageComponentProps) => {
- const [currentPos, setCurrentPos] = useState<Position>({ x: component.x, y: component.y })
- const [currentSize, setCurrentSize] = useState<Size>({ w: component.w, h: component.h })
+const ImageComponentDisplay = ({ component, width, height }: ImageComponentProps) => {
return (
- <Rnd
- minWidth={50}
- minHeight={50}
- bounds="parent"
- onDragStop={(e, d) => {
- setCurrentPos({ x: d.x, y: d.y })
- }}
- size={{ width: currentSize.w, height: currentSize.h }}
- position={{ x: currentPos.x, y: currentPos.y }}
- onResize={(e, direction, ref, delta, position) => {
- setCurrentSize({
- w: ref.offsetWidth,
- h: ref.offsetHeight,
- })
- setCurrentPos(position)
- }}
- onResizeStop={() => {
- console.log('Skicka data till server')
- }}
- >
- <img
- src="https://365psd.com/images/previews/c61/cartoon-cow-52394.png"
- height={currentSize.h}
- width={currentSize.w}
- draggable={false}
- />
- </Rnd>
+ <img
+ src={`http://localhost:5000/static/images/${component.data.filename}`}
+ height={height}
+ width={width}
+ draggable={false}
+ />
)
}
diff --git a/client/src/pages/presentationEditor/components/Images.tsx b/client/src/pages/presentationEditor/components/Images.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0ac739bf440b56492009316b093f6e18e63ca988
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/Images.tsx
@@ -0,0 +1,137 @@
+import { ListItem, ListItemText, Typography } from '@material-ui/core'
+import CloseIcon from '@material-ui/icons/Close'
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import {
+ Center,
+ HiddenInput,
+ SettingsList,
+ AddImageButton,
+ ImportedImage,
+ WhiteBackground,
+ AddButton,
+ Clickable,
+ NoPadding,
+} from './styled'
+import axios from 'axios'
+import { getEditorCompetition } from '../../../actions/editor'
+import { RichSlide } from '../../../interfaces/ApiRichModels'
+import { ImageComponent, Media } from '../../../interfaces/ApiModels'
+import { useAppSelector } from '../../../hooks'
+
+type ImagesProps = {
+ activeSlide: RichSlide
+ competitionId: string
+}
+
+const Images = ({ activeSlide, competitionId }: ImagesProps) => {
+ 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)
+
+ const dispatch = useDispatch()
+
+ const uploadFile = async (formData: FormData) => {
+ // Uploads the file to the server and creates a Media object in database
+ // Returns media id
+ return await axios
+ .post(`/api/media/images`, formData)
+ .then((response) => {
+ dispatch(getEditorCompetition(competitionId))
+ return response.data as Media
+ })
+ .catch(console.log)
+ }
+
+ const handleFileSelected = async (e: React.ChangeEvent<HTMLInputElement>) => {
+ if (e.target.files !== null && e.target.files[0]) {
+ const files = Array.from(e.target.files)
+ const file = files[0]
+ const formData = new FormData()
+ formData.append('image', file)
+ const response = await uploadFile(formData)
+ if (response) {
+ const newComponent = createImageComponent(response)
+ }
+ }
+ }
+
+ const createImageComponent = async (media: Media) => {
+ const imageData = {
+ x: 0,
+ y: 0,
+ data: {
+ media_id: media.id,
+ filename: media.filename,
+ },
+ type_id: 2,
+ }
+ await axios
+ .post(`/api/competitions/${competitionId}/slides/${activeSlide?.id}/components`, imageData)
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+
+ const handleCloseimageClick = async (image: ImageComponent) => {
+ await axios
+ .delete(`/api/media/images/${image.data.media_id}`)
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+
+ await axios
+ .delete(`/api/competitions/${competitionId}/slides/${activeSlide?.id}/components/${image.id}`)
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+
+ const images = useAppSelector(
+ (state) =>
+ state.editor.competition.slides
+ .find((slide) => slide.id === state.editor.activeSlideId)
+ ?.components.filter((component) => component.type_id === 2) as ImageComponent[]
+ )
+
+ return (
+ <SettingsList>
+ <WhiteBackground>
+ <ListItem divider>
+ <Center>
+ <ListItemText primary="Bilder" />
+ </Center>
+ </ListItem>
+ {images &&
+ images.map((image) => (
+ <div key={image.id}>
+ <ListItem divider button>
+ <ImportedImage src={`http://localhost:5000/static/images/thumbnail_${image.data.filename}`} />
+ <Center>
+ <ListItemText primary={image.data.filename} />
+ </Center>
+ <CloseIcon onClick={() => handleCloseimageClick(image)} />
+ </ListItem>
+ </div>
+ ))}
+
+ <ListItem button>
+ <HiddenInput accept="image/*" id="contained-button-file" multiple type="file" onChange={handleFileSelected} />
+ <AddImageButton htmlFor="contained-button-file">
+ <AddButton variant="button">Lägg till bild</AddButton>
+ </AddImageButton>
+ </ListItem>
+ </WhiteBackground>
+ </SettingsList>
+ )
+}
+
+export default Images
diff --git a/client/src/pages/presentationEditor/components/RndComponent.tsx b/client/src/pages/presentationEditor/components/RndComponent.tsx
index 6302d3fcf50c68fcb232693aa0a3590999cc660f..02344a36aa223b245fe7170c9186ffa8b509e6dc 100644
--- a/client/src/pages/presentationEditor/components/RndComponent.tsx
+++ b/client/src/pages/presentationEditor/components/RndComponent.tsx
@@ -40,11 +40,20 @@ const RndComponent = ({ component }: ImageComponentProps) => {
return (
<TextComponentContainer
hover={hover}
- dangerouslySetInnerHTML={{ __html: (component as TextComponent).data.text }}
+ dangerouslySetInnerHTML={{
+ __html: `<div style="font-size: 24px;"> ${(component as TextComponent).data.text} </div>`,
+ }}
/>
)
case ComponentTypes.Image:
- return <ImageComponentDisplay key={component.id} component={component as ImageComponent} />
+ return (
+ <ImageComponentDisplay
+ key={component.id}
+ component={component as ImageComponent}
+ width={currentSize.w}
+ height={currentSize.h}
+ />
+ )
default:
break
}
diff --git a/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx b/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx
index a7a71e25921deb276cbaca2089d2ecbf58c8493c..a17569ec7b6e9e3ed665a294cc7b2b6f1da0be58 100644
--- a/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx
+++ b/client/src/pages/presentationEditor/components/SettingsPanel.test.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter } from 'react-router-dom'
import store from '../../../store'
import CompetitionSettings from './CompetitionSettings'
import SettingsPanel from './SettingsPanel'
+import SlideSettings from './SlideSettings'
it('renders settings panel', () => {
render(
@@ -28,5 +29,5 @@ it('renders slide settings tab', () => {
const tabs = wrapper.find('.MuiTabs-flexContainer')
expect(wrapper.find(CompetitionSettings).length).toEqual(1)
tabs.children().at(1).simulate('click')
- expect(wrapper.text().includes('2')).toBe(true) //TODO: check that SlideSettings exists
+ expect(wrapper.find(SlideSettings).length).toEqual(1)
})
diff --git a/client/src/pages/presentationEditor/components/SlideSettings.tsx b/client/src/pages/presentationEditor/components/SlideSettings.tsx
index 85fe3cc08419333f9bb94fc4b9fbc1094c1ec7f7..557e4809aa0f4aa5f1ff76d5d2e5dcd17bd16174 100644
--- a/client/src/pages/presentationEditor/components/SlideSettings.tsx
+++ b/client/src/pages/presentationEditor/components/SlideSettings.tsx
@@ -1,447 +1,51 @@
-import {
- Button,
- Checkbox,
- Dialog,
- DialogActions,
- DialogContent,
- DialogContentText,
- DialogTitle,
- Divider,
- FormControl,
- InputLabel,
- List,
- ListItem,
- ListItemText,
- MenuItem,
- Select,
- TextField,
- Typography,
-} from '@material-ui/core'
-import { CheckboxProps } from '@material-ui/core/Checkbox'
-import { green, grey } from '@material-ui/core/colors'
-import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
-import CloseIcon from '@material-ui/icons/Close'
-import axios from 'axios'
-import React, { useEffect, useState } from 'react'
+import { Divider, List, ListItem, ListItemText, TextField, Typography } from '@material-ui/core'
+import React, { useState } from 'react'
import { useParams } from 'react-router-dom'
-import { getEditorCompetition } from '../../../actions/editor'
-import { useAppDispatch, useAppSelector } from '../../../hooks'
-import { QuestionAlternative, TextComponent } from '../../../interfaces/ApiModels'
-import { HiddenInput, TextCard } from './styled'
-import TextComponentEdit from './TextComponentEdit'
-
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- textInputContainer: {
- '& > *': {
- margin: theme.spacing(1),
- width: '100%',
- background: 'white',
- },
- },
- textInput: {
- margin: theme.spacing(2),
- width: '87%',
- background: 'white',
- },
- textCenter: {
- textAlign: 'center',
- },
- center: {
- display: 'flex',
- justifyContent: 'center',
- background: 'white',
- },
- dropDown: {
- margin: theme.spacing(2),
- width: '87%',
- background: 'white',
- padding: 0,
- },
- clickableIcon: {
- cursor: 'pointer',
- background: 'white',
- },
- importedImage: {
- width: 70,
- height: 50,
- background: 'white',
- },
- whiteBackground: {
- background: 'white',
- },
- addButtons: {
- padding: 5,
- },
- panelList: {
- padding: 0,
- },
- addImageButton: {
- padding: 5,
- cursor: 'pointer',
- },
- })
-)
+import { useAppSelector } from '../../../hooks'
+import Alternatives from './Alternatives'
+import SlideType from './SlideType'
+import { Center, ImportedImage, SettingsList, SlidePanel } from './styled'
+import Timer from './Timer'
+import Images from './Images'
+import Texts from './Texts'
interface CompetitionParams {
id: string
}
const SlideSettings: React.FC = () => {
- const classes = useStyles()
const { id }: CompetitionParams = useParams()
- const dispatch = useAppDispatch()
- const competition = useAppSelector((state) => state.editor.competition)
- const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
+
const activeSlide = useAppSelector((state) =>
state.editor.competition.slides.find((slide) => slide && slide.id === state.editor.activeSlideId)
)
- const handleCloseAnswerClick = async (alternative_id: number) => {
- if (activeSlide && activeSlide.questions[0]) {
- await axios
- .delete(
- `/competitions/${id}/slides/${activeSlideId}/questions/${activeSlide?.questions[0].id}/alternatives/${alternative_id}`
- )
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- }
- }
-
- const texts = useAppSelector(
- (state) =>
- state.editor.competition.slides
- .find((slide) => slide.id === state.editor.activeSlideId)
- ?.components.filter((component) => component.type_id === 1) as TextComponent[]
- )
-
- 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)
-
- const updateSlideType = async () => {
- closeSlideTypeDialog()
- if (activeSlide) {
- if (activeSlide.questions[0] && activeSlide.questions[0].type_id !== selectedSlideType) {
- if (selectedSlideType === 0) {
- // Change slide type from a question type to information
- await axios
- .delete(`/api/competitions/${id}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`)
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- } else {
- // Change slide type from question type to another question type
- await axios
- .delete(`/api/competitions/${id}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`)
- .catch(console.log)
- await axios
- .post(`/api/competitions/${id}/slides/${activeSlide.id}/questions`, {
- name: 'Ny fråga',
- total_score: 0,
- type_id: selectedSlideType,
- slide_id: activeSlide.id,
- })
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- }
- } else if (selectedSlideType !== 0) {
- // Change slide type from information to a question type
- await axios
- .post(`/api/competitions/${id}/slides/${activeSlide.id}/questions`, {
- name: 'Ny fråga',
- total_score: 0,
- type_id: selectedSlideType,
- slide_id: activeSlide.id,
- })
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- }
- }
- }
-
- const updateAlternativeValue = async (alternative: QuestionAlternative) => {
- if (activeSlide && activeSlide.questions[0]) {
- let newValue: number
- if (alternative.value === 0) {
- newValue = 1
- } else newValue = 0
- console.log('newValue: ' + newValue)
- await axios
- .put(
- `/competitions/${id}/slides/${activeSlide?.id}/questions/${activeSlide?.questions[0].id}/alternatives/${alternative.id}`,
- { value: newValue }
- )
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- }
- }
-
- const updateAlternativeText = async (alternative_id: number, newText: string) => {
- if (activeSlide && activeSlide.questions[0]) {
- await axios
- .put(
- `/competitions/${id}/slides/${activeSlide?.id}/questions/${activeSlide?.questions[0].id}/alternatives/${alternative_id}`,
- { text: newText }
- )
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- }
- }
-
- const addAlternative = async () => {
- if (activeSlide && activeSlide.questions[0]) {
- await axios
- .post(
- `/api/competitions/${id}/slides/${activeSlide?.id}/questions/${activeSlide?.questions[0].id}/alternatives`,
- {
- text: '',
- value: 0,
- }
- )
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- }
- }
-
- const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
- if (e.target.files !== null && e.target.files[0]) {
- const files = Array.from(e.target.files)
- const file = files[0]
- const reader = new FileReader()
- reader.readAsDataURL(file)
- reader.onload = function () {
- console.log(reader.result)
- // TODO: Send image to back-end (remove console.log)
- }
- reader.onerror = function (error) {
- console.log('Error: ', error)
- }
- }
- }
-
- const handleAddText = async () => {
- if (activeSlide) {
- await axios.post(`/api/competitions/${id}/slides/${activeSlide?.id}/components`, {
- type_id: 1,
- data: { text: 'Ny text' },
- w: 315,
- h: 50,
- })
- dispatch(getEditorCompetition(id))
- }
- }
-
- const GreenCheckbox = withStyles({
- root: {
- color: grey[900],
- '&$checked': {
- color: green[600],
- },
- },
- checked: {},
- })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
-
- const updateTimer = async (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
- setTimer(+event.target.value)
- if (activeSlide) {
- await axios
- .put(`/api/competitions/${id}/slides/${activeSlide.id}`, { timer: event.target.value })
- .then(() => {
- dispatch(getEditorCompetition(id))
- })
- .catch(console.log)
- }
- }
- const [timer, setTimer] = useState<number | undefined>(0)
- useEffect(() => {
- setTimer(activeSlide?.timer)
- }, [activeSlide])
-
- // For "slide type" dialog
- const [selectedSlideType, setSelectedSlideType] = useState(0)
- const [slideTypeDialog, setSlideTypeDialog] = useState(false)
- const openSlideTypeDialog = (type_id: number) => {
- setSelectedSlideType(type_id)
- setSlideTypeDialog(true)
- }
- const closeSlideTypeDialog = () => {
- setSlideTypeDialog(false)
- }
-
- const numberToBool = (num: number) => {
- if (num === 0) return false
- else return true
- }
-
return (
- <div className={classes.textInputContainer}>
- <div className={classes.whiteBackground}>
- <FormControl variant="outlined" className={classes.dropDown}>
- <InputLabel>Sidtyp</InputLabel>
- <Select value={activeSlide?.questions[0]?.type_id || 0} label="Sidtyp" className={classes.panelList}>
- <MenuItem value={0}>
- <Typography variant="button" onClick={() => openSlideTypeDialog(0)}>
- Informationssida
- </Typography>
- </MenuItem>
- <MenuItem value={1}>
- <Typography variant="button" onClick={() => openSlideTypeDialog(1)}>
- Skriftlig fråga
- </Typography>
- </MenuItem>
- <MenuItem value={2}>
- <Typography variant="button" onClick={() => openSlideTypeDialog(2)}>
- Praktisk fråga
- </Typography>
- </MenuItem>
- <MenuItem value={3}>
- <Typography variant="button" onClick={() => openSlideTypeDialog(3)}>
- Flervalsfråga
- </Typography>
- </MenuItem>
- </Select>
- </FormControl>
- </div>
- <Dialog open={slideTypeDialog} onClose={closeSlideTypeDialog}>
- <DialogTitle className={classes.center} color="secondary">
- Varning!
- </DialogTitle>
- <DialogContent>
- <DialogContentText>
- Om du ändrar sidtypen kommer eventuella frågeinställningar gå förlorade. Det inkluderar: frågans namn, poäng
- och svarsalternativ.{' '}
- </DialogContentText>
- </DialogContent>
- <DialogActions>
- <Button onClick={closeSlideTypeDialog} color="secondary">
- Avbryt
- </Button>
- <Button onClick={updateSlideType} color="primary">
- Bekräfta
- </Button>
- </DialogActions>
- </Dialog>
+ <SlidePanel>
+ <SettingsList>
+ {activeSlide && <SlideType activeSlide={activeSlide} competitionId={id} />}
+ <Divider />
+ {activeSlide && <Timer activeSlide={activeSlide} competitionId={id} />}
+ </SettingsList>
- <ListItem>
- <TextField
- id="standard-number"
- variant="outlined"
- placeholder="Antal sekunder"
- helperText="Lämna blank för att inte använda timerfunktionen"
- label="Timer"
- type="number"
- onChange={updateTimer}
- value={timer || ''}
- />
- </ListItem>
+ {activeSlide && <Alternatives activeSlide={activeSlide} competitionId={id} />}
- <List className={classes.panelList}>
- <ListItem divider>
- <ListItemText
- className={classes.textCenter}
- primary="Svarsalternativ"
- secondary="(Fyll i rutan höger om textfältet för att markera korrekt svar)"
- />
- </ListItem>
- {activeSlide &&
- activeSlide.questions[0] &&
- activeSlide.questions[0].alternatives &&
- activeSlide.questions[0].alternatives.map((alt) => (
- <div key={alt.id}>
- <ListItem divider>
- <TextField
- className={classes.textInput}
- id="outlined-basic"
- defaultValue={alt.text}
- onChange={(event) => updateAlternativeText(alt.id, event.target.value)}
- variant="outlined"
- />
- <GreenCheckbox checked={numberToBool(alt.value)} onChange={() => updateAlternativeValue(alt)} />
- <CloseIcon className={classes.clickableIcon} onClick={() => handleCloseAnswerClick(alt.id)} />
- </ListItem>
- </div>
- ))}
- <ListItem className={classes.center} button onClick={addAlternative}>
- <Typography className={classes.addButtons} variant="button">
- Lägg till svarsalternativ
- </Typography>
- </ListItem>
- </List>
-
- <List className={classes.panelList}>
- <ListItem divider>
- <ListItemText className={classes.textCenter} primary="Text" />
- </ListItem>
- {texts &&
- texts.map((text) => (
- <TextCard elevation={4} key={text.id}>
- <TextComponentEdit component={text} />
+ {activeSlide && <Texts activeSlide={activeSlide} competitionId={id} />}
- <Divider />
- </TextCard>
- ))}
+ {activeSlide && <Images activeSlide={activeSlide} competitionId={id} />}
- <ListItem className={classes.center} button onClick={handleAddText}>
- <Typography className={classes.addButtons} variant="button">
- Lägg till text
- </Typography>
- </ListItem>
- </List>
-
- <List className={classes.panelList}>
- <ListItem divider>
- <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>
- <HiddenInput accept="image/*" id="contained-button-file" multiple type="file" onChange={handleFileSelected} />
-
- <label className={classes.addImageButton} htmlFor="contained-button-file">
- <Typography variant="button">Lägg till bild</Typography>
- </label>
+ <SettingsList>
+ <ListItem button>
+ <ImportedImage
+ 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"
+ />
+ <Center>
+ <ListItemText>Välj bakgrundsbild ...</ListItemText>
+ </Center>
</ListItem>
- </List>
-
- <ListItem 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}>Välj bakgrundsbild ...</ListItemText>
- </ListItem>
- </div>
+ </SettingsList>
+ </SlidePanel>
)
}
diff --git a/client/src/pages/presentationEditor/components/SlideType.tsx b/client/src/pages/presentationEditor/components/SlideType.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ba104fe6ce7088d6aec076359d9f3f1361de3262
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/SlideType.tsx
@@ -0,0 +1,137 @@
+import {
+ Button,
+ Dialog,
+ DialogActions,
+ DialogContent,
+ DialogContentText,
+ DialogTitle,
+ InputLabel,
+ ListItem,
+ MenuItem,
+ Select,
+ Typography,
+} from '@material-ui/core'
+import axios from 'axios'
+import React, { useState } from 'react'
+import { getEditorCompetition } from '../../../actions/editor'
+import { useAppDispatch } from '../../../hooks'
+import { RichSlide } from '../../../interfaces/ApiRichModels'
+import { Center, FormControlDropdown, SlideTypeInputLabel, WhiteBackground } from './styled'
+
+type SlideTypeProps = {
+ activeSlide: RichSlide
+ competitionId: string
+}
+
+const SlideType = ({ activeSlide, competitionId }: SlideTypeProps) => {
+ const dispatch = useAppDispatch()
+
+ // For "slide type" dialog
+ const [selectedSlideType, setSelectedSlideType] = useState(0)
+ const [slideTypeDialog, setSlideTypeDialog] = useState(false)
+ const openSlideTypeDialog = (type_id: number) => {
+ setSelectedSlideType(type_id)
+ setSlideTypeDialog(true)
+ }
+ const closeSlideTypeDialog = () => {
+ setSlideTypeDialog(false)
+ }
+
+ const updateSlideType = async () => {
+ closeSlideTypeDialog()
+ if (activeSlide) {
+ if (activeSlide.questions[0] && activeSlide.questions[0].type_id !== selectedSlideType) {
+ if (selectedSlideType === 0) {
+ // Change slide type from a question type to information
+ await axios
+ .delete(
+ `/api/competitions/${competitionId}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`
+ )
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ } else {
+ // Change slide type from question type to another question type
+ await axios
+ .delete(
+ `/api/competitions/${competitionId}/slides/${activeSlide.id}/questions/${activeSlide.questions[0].id}`
+ )
+ .catch(console.log)
+ await axios
+ .post(`/api/competitions/${competitionId}/slides/${activeSlide.id}/questions`, {
+ name: 'Ny fråga',
+ total_score: 0,
+ type_id: selectedSlideType,
+ })
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+ } else if (selectedSlideType !== 0) {
+ // Change slide type from information to a question type
+ await axios
+ .post(`/api/competitions/${competitionId}/slides/${activeSlide.id}/questions`, {
+ name: 'Ny fråga',
+ total_score: 0,
+ type_id: selectedSlideType,
+ })
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+ }
+ }
+ return (
+ <WhiteBackground>
+ <FormControlDropdown variant="outlined">
+ <SlideTypeInputLabel>Sidtyp</SlideTypeInputLabel>
+ <Select fullWidth={true} value={activeSlide?.questions[0]?.type_id || 0} label="Sidtyp">
+ <MenuItem value={0}>
+ <Typography variant="button" onClick={() => openSlideTypeDialog(0)}>
+ Informationssida
+ </Typography>
+ </MenuItem>
+ <MenuItem value={1}>
+ <Typography variant="button" onClick={() => openSlideTypeDialog(1)}>
+ Skriftlig fråga
+ </Typography>
+ </MenuItem>
+ <MenuItem value={2}>
+ <Typography variant="button" onClick={() => openSlideTypeDialog(2)}>
+ Praktisk fråga
+ </Typography>
+ </MenuItem>
+ <MenuItem value={3}>
+ <Typography variant="button" onClick={() => openSlideTypeDialog(3)}>
+ Flervalsfråga
+ </Typography>
+ </MenuItem>
+ </Select>
+ </FormControlDropdown>
+ <Dialog open={slideTypeDialog} onClose={closeSlideTypeDialog}>
+ <Center>
+ <DialogTitle color="secondary">Varning!</DialogTitle>
+ </Center>
+ <DialogContent>
+ <DialogContentText>
+ Om du ändrar sidtypen kommer eventuella frågeinställningar gå förlorade. Det inkluderar: frågans namn, poäng
+ och svarsalternativ.{' '}
+ </DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <Button onClick={closeSlideTypeDialog} color="secondary">
+ Avbryt
+ </Button>
+ <Button onClick={updateSlideType} color="primary">
+ Bekräfta
+ </Button>
+ </DialogActions>
+ </Dialog>
+ </WhiteBackground>
+ )
+}
+
+export default SlideType
diff --git a/client/src/pages/presentationEditor/components/TextComponentEdit.tsx b/client/src/pages/presentationEditor/components/TextComponentEdit.tsx
index c347bd5b6845c0413251907d514b31e825bd1e68..0a5c8522447c3111629ac179ce27532048d55c7a 100644
--- a/client/src/pages/presentationEditor/components/TextComponentEdit.tsx
+++ b/client/src/pages/presentationEditor/components/TextComponentEdit.tsx
@@ -57,15 +57,17 @@ const TextComponentEdit = ({ component }: ImageComponentProps) => {
init={{
height: '300px',
menubar: false,
+ fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt 120pt 144pt',
+ content_style: 'body {font-size: 24pt;}',
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount',
],
toolbar:
- 'undo redo save | fontselect | formatselect | bold italic backcolor | \
- alignleft aligncenter alignright alignjustify | \
- bullist numlist outdent indent | removeformat | help',
+ 'fontsizeselect | bold italic backcolor | help | \
+ fontselect | formatselect | undo redo | \
+ alignleft aligncenter alignright alignjustify bullist numlist outdent indent | removeformat |',
}}
onEditorChange={(a, e) => handleSaveText(a)}
/>
diff --git a/client/src/pages/presentationEditor/components/Texts.tsx b/client/src/pages/presentationEditor/components/Texts.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..22cde214c92bb64788b4f69d9993977c85fe981d
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/Texts.tsx
@@ -0,0 +1,61 @@
+import { Divider, ListItem, ListItemText, Typography } from '@material-ui/core'
+import React from 'react'
+import { useAppSelector } from '../../../hooks'
+import { TextComponent } from '../../../interfaces/ApiModels'
+import { RichSlide } from '../../../interfaces/ApiRichModels'
+import { AddButton, Center, SettingsList, TextCard } from './styled'
+import TextComponentEdit from './TextComponentEdit'
+import axios from 'axios'
+import { getEditorCompetition } from '../../../actions/editor'
+import { useDispatch } from 'react-redux'
+
+type TextsProps = {
+ activeSlide: RichSlide
+ competitionId: string
+}
+
+const Texts = ({ activeSlide, competitionId }: TextsProps) => {
+ const texts = useAppSelector(
+ (state) =>
+ state.editor.competition.slides
+ .find((slide) => slide.id === state.editor.activeSlideId)
+ ?.components.filter((component) => component.type_id === 1) as TextComponent[]
+ )
+
+ const dispatch = useDispatch()
+ const handleAddText = async () => {
+ if (activeSlide) {
+ await axios.post(`/api/competitions/${competitionId}/slides/${activeSlide?.id}/components`, {
+ type_id: 1,
+ data: { text: 'Ny text' },
+ w: 315,
+ h: 50,
+ })
+ dispatch(getEditorCompetition(competitionId))
+ }
+ }
+
+ return (
+ <SettingsList>
+ <ListItem divider>
+ <Center>
+ <ListItemText primary="Text" />
+ </Center>
+ </ListItem>
+ {texts &&
+ texts.map((text) => (
+ <TextCard elevation={4} key={text.id}>
+ <TextComponentEdit component={text} />
+ <Divider />
+ </TextCard>
+ ))}
+ <ListItem button onClick={handleAddText}>
+ <Center>
+ <AddButton variant="button">Lägg till text</AddButton>
+ </Center>
+ </ListItem>
+ </SettingsList>
+ )
+}
+
+export default Texts
diff --git a/client/src/pages/presentationEditor/components/Timer.tsx b/client/src/pages/presentationEditor/components/Timer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..124635f423df9d0bfcca20a9a02309c646cb3dca
--- /dev/null
+++ b/client/src/pages/presentationEditor/components/Timer.tsx
@@ -0,0 +1,53 @@
+import { ListItem, TextField } from '@material-ui/core'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import { getEditorCompetition } from '../../../actions/editor'
+import { useAppDispatch } from '../../../hooks'
+import { RichSlide } from '../../../interfaces/ApiRichModels'
+import { Center, WhiteBackground } from './styled'
+
+type TimerProps = {
+ activeSlide: RichSlide
+ competitionId: string
+}
+
+const Timer = ({ activeSlide, competitionId }: TimerProps) => {
+ const dispatch = useAppDispatch()
+ const updateTimer = async (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
+ setTimer(+event.target.value)
+ if (activeSlide) {
+ await axios
+ .put(`/api/competitions/${competitionId}/slides/${activeSlide.id}`, { timer: event.target.value })
+ .then(() => {
+ dispatch(getEditorCompetition(competitionId))
+ })
+ .catch(console.log)
+ }
+ }
+ const [timer, setTimer] = useState<number | undefined>(0)
+ useEffect(() => {
+ setTimer(activeSlide?.timer)
+ }, [activeSlide])
+ return (
+ <WhiteBackground>
+ <ListItem>
+ <Center>
+ <TextField
+ id="standard-number"
+ fullWidth={true}
+ variant="outlined"
+ placeholder="Antal sekunder"
+ helperText="Lämna blank för att inte använda timerfunktionen"
+ label="Timer"
+ type="number"
+ defaultValue={activeSlide?.timer || 0}
+ onChange={updateTimer}
+ value={timer}
+ />
+ </Center>
+ </ListItem>
+ </WhiteBackground>
+ )
+}
+
+export default Timer
diff --git a/client/src/pages/presentationEditor/components/styled.tsx b/client/src/pages/presentationEditor/components/styled.tsx
index 8bee7f0dc7291047771197af4d18f26c184f3f6c..a636d9d2d4d3f7faac3eef6166e5c07544c5a596 100644
--- a/client/src/pages/presentationEditor/components/styled.tsx
+++ b/client/src/pages/presentationEditor/components/styled.tsx
@@ -1,4 +1,15 @@
-import { Button, Card, Tab } from '@material-ui/core'
+import {
+ FormControl,
+ List,
+ Tab,
+ TextField,
+ Typography,
+ Button,
+ Card,
+ ListItem,
+ Select,
+ InputLabel,
+} from '@material-ui/core'
import styled from 'styled-components'
export const SettingsTab = styled(Tab)`
@@ -45,6 +56,80 @@ export const ToolbarPadding = styled.div`
padding-top: 55px;
`
+export const FormControlDropdown = styled(FormControl)`
+ width: 100%;
+ margin-top: 10px;
+ padding: 8px;
+ padding-left: 16px;
+ padding-right: 16px;
+`
+
+export const SlideTypeInputLabel = styled(InputLabel)`
+ width: 100%;
+ padding: 10px;
+ padding-left: 22px;
+`
+
+export const TextInput = styled(TextField)`
+ width: 87%;
+`
+
+export const NoPadding = styled.div`
+ padding: 0;
+ height: 100%;
+ width: 100%;
+`
+
+export const Center = styled.div`
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ height: 100%;
+ width: 100%;
+`
+
+export const SlidePanel = styled.div`
+ padding: 10px;
+ width: 100%;
+`
+
+export const WhiteBackground = styled.div`
+ background: white;
+`
+
+export const AddButton = styled(Typography)`
+ padding-left: 8px;
+ padding-right: 8px;
+ padding-top: 7px;
+ padding-bottom: 7px;
+`
+
+export const ImportedImage = styled.img`
+ width: 70px;
+ height: 50px;
+`
+
+export const Clickable = styled.div`
+ cursor: pointer;
+`
+
+export const AddImageButton = styled.label`
+ padding: 0;
+ cursor: 'pointer';
+ display: flex;
+ justify-content: center;
+ text-align: center;
+ height: 100%;
+ width: 100%;
+ cursor: pointer;
+`
+
+export const SettingsList = styled(List)`
+ margin-bottom: 10px;
+ padding: 0;
+ background: white;
+`
+
export const TextCard = styled(Card)`
margin-bottom: 15px;
margin-top: 10px;
@@ -62,5 +147,6 @@ interface TextComponentContainerProps {
export const TextComponentContainer = styled.div<TextComponentContainerProps>`
height: 100%;
width: 100%;
+ padding: ${(props) => (props.hover ? 0 : 1)}px;
border: solid ${(props) => (props.hover ? 1 : 0)}px;
`
diff --git a/client/src/reducers/allReducers.ts b/client/src/reducers/allReducers.ts
index 038b172e3e308af71d5762ade8a644b67d7992d2..90cb24144612c5a45f611ad99871c54c51969bbd 100644
--- a/client/src/reducers/allReducers.ts
+++ b/client/src/reducers/allReducers.ts
@@ -5,6 +5,7 @@ import citiesReducer from './citiesReducer'
import competitionLoginReducer from './competitionLoginReducer'
import competitionsReducer from './competitionsReducer'
import editorReducer from './editorReducer'
+import mediaReducer from './mediaReducer'
import presentationReducer from './presentationReducer'
import rolesReducer from './rolesReducer'
import searchUserReducer from './searchUserReducer'
@@ -24,6 +25,7 @@ const allReducers = combineReducers({
roles: rolesReducer,
searchUsers: searchUserReducer,
types: typesReducer,
+ media: mediaReducer,
statistics: statisticsReducer,
competitionLogin: competitionLoginReducer,
})
diff --git a/client/src/reducers/mediaReducer.ts b/client/src/reducers/mediaReducer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ad5f3b46547f2e9a20135537ff814b196ca22331
--- /dev/null
+++ b/client/src/reducers/mediaReducer.ts
@@ -0,0 +1,39 @@
+import { AnyAction } from 'redux'
+import Types from '../actions/types'
+
+interface MediaState {
+ id: number
+ filename: string
+ mediatype_id: number
+ user_id: number
+}
+const initialState: MediaState = {
+ id: 0,
+ filename: '',
+ mediatype_id: 1,
+ user_id: 0,
+}
+
+export default function (state = initialState, action: AnyAction) {
+ switch (action.type) {
+ case Types.SET_MEDIA_ID:
+ return { ...state, id: action.payload as number }
+ case Types.SET_MEDIA_FILENAME:
+ return {
+ ...state,
+ filename: action.payload as string,
+ }
+ case Types.SET_MEDIA_TYPE_ID:
+ return {
+ ...state,
+ mediatype_id: action.payload as number,
+ }
+ case Types.SET_MEDIA_USER_ID:
+ return {
+ ...state,
+ user_id: action.payload as number,
+ }
+ default:
+ return state
+ }
+}
diff --git a/server/app/database/controller/add.py b/server/app/database/controller/add.py
index 9ab17ce950184980a89c35b7cfe10a7182e36e2b..1f57f7d06c74d9a0fd9999c99a5108b1d59ad25f 100644
--- a/server/app/database/controller/add.py
+++ b/server/app/database/controller/add.py
@@ -2,10 +2,11 @@
This file contains functionality to add data to the database.
"""
-from sqlalchemy.orm.session import sessionmaker
+import os
+
import app.core.http_codes as codes
from app.core import db
-from app.database.controller import utils
+from app.database.controller import get, search, utils
from app.database.models import (
Blacklist,
City,
@@ -25,8 +26,12 @@ from app.database.models import (
User,
ViewType,
)
+from flask.globals import current_app
from flask_restx import abort
+from PIL import Image
from sqlalchemy import exc
+from sqlalchemy.orm import relation
+from sqlalchemy.orm.session import sessionmaker
def db_add(item):
@@ -97,6 +102,21 @@ def component(type_id, slide_id, data, x=0, y=0, w=0, h=0):
Adds a component to the slide at the specified coordinates with the
provided size and data .
"""
+ from app.apis.media import PHOTO_PATH
+
+ if type_id == 2: # 2 is image
+ item_image = get.one(Media, data["media_id"])
+ filename = item_image.filename
+ path = os.path.join(PHOTO_PATH, filename)
+ with Image.open(path) as im:
+ h = im.height
+ w = im.width
+
+ largest = max(w, h)
+ if largest > 600:
+ ratio = 600 / largest
+ w *= ratio
+ h *= ratio
return db_add(Component(slide_id, type_id, data, x, y, w, h))
diff --git a/server/app/database/controller/get.py b/server/app/database/controller/get.py
index db80924c6d51f1340bedebe3db31341863b21928..3e5e7f872c2866c70131dd1b4f1205c3bd131798 100644
--- a/server/app/database/controller/get.py
+++ b/server/app/database/controller/get.py
@@ -86,6 +86,12 @@ def slide_count(competition_id):
return Slide.query.filter(Slide.competition_id == competition_id).count()
+def slide_count(competition_id):
+ """ Gets the number of slides in the provided competition. """
+
+ return Slide.query.filter(Slide.competition_id == competition_id).count()
+
+
### Teams ###
def team(competition_id, team_id):
""" Gets the team object associated with the provided id and competition id. """
@@ -103,6 +109,8 @@ def team_list(competition_id):
return Team.query.join(Competition, join_competition).filter(filters).all()
+ return Team.query.join(Competition, join_competition).filter(filters).all()
+
### Questions ###
def question(competition_id, slide_id, question_id):
@@ -173,6 +181,14 @@ def question_alternative_list(competition_id, slide_id, question_id):
.all()
)
+ return (
+ QuestionAlternative.query.join(Competition, join_competition)
+ .join(Slide, join_slide)
+ .join(Question, join_question)
+ .filter(filters)
+ .all()
+ )
+
### Question Answers ###
def question_answer(competition_id, team_id, answer_id):
diff --git a/server/populate.py b/server/populate.py
index 9ca3c95e7f683decfac5e9f697d0cfdbff958e1e..cc19aa4cdd43190ac52c302f3029ade08b2a6c7a 100644
--- a/server/populate.py
+++ b/server/populate.py
@@ -1,3 +1,7 @@
+"""
+This file will reset and polulate the database with some data.
+"""
+
import random
import app.database.controller as dbc
@@ -100,6 +104,7 @@ if __name__ == "__main__":
app, _ = create_app("configmodule.DevelopmentConfig")
with app.app_context():
+
db.drop_all()
db.create_all()
_add_items()
diff --git a/server/tests/test_app.py b/server/tests/test_app.py
index 62d8655a648d2a60808f8b61b04b3e1e3b827692..199df387e878fdbbde759a80e6aa3d9ea486ea7d 100644
--- a/server/tests/test_app.py
+++ b/server/tests/test_app.py
@@ -1,3 +1,7 @@
+"""
+This file tests the api function calls.
+"""
+
import app.core.http_codes as codes
from app.database.models import Slide
diff --git a/server/tests/test_db.py b/server/tests/test_db.py
index 8f211473c14977634c5332874f455b954a2124cf..cf10329ce6a320fdceb89ae9eba82da9e6b17092 100644
--- a/server/tests/test_db.py
+++ b/server/tests/test_db.py
@@ -1,3 +1,7 @@
+"""
+This file tests the database controller functions.
+"""
+
import app.database.controller as dbc
from app.database.models import City, Media, MediaType, Role, User