diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 50c3ae52999721aa27be54cae1cc7cd67084a0ce..47a746f2943a29a065ccca408658c2eaa00006c1 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
@@ -30,6 +30,7 @@ import {
SlideListItem,
ToolBarContainer,
ViewButton,
+ ViewButtonClicked,
ViewButtonGroup,
} from './styled'
@@ -91,6 +92,7 @@ const PresentationEditorPage: React.FC = () => {
const { competitionId }: CompetitionParams = useParams()
const dispatch = useAppDispatch()
const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
+ const activeViewTypeId = useAppSelector((state) => state.editor.activeViewTypeId)
const competition = useAppSelector((state) => state.editor.competition)
const competitionLoading = useAppSelector((state) => state.editor.loading)
useEffect(() => {
@@ -166,7 +168,9 @@ const PresentationEditorPage: React.FC = () => {
const [checkbox, setCheckbox] = useState(false)
const viewTypes = useAppSelector((state) => state.types.viewTypes)
+ const [activeViewTypeName, setActiveViewTypeName] = useState('')
const changeView = (clickedViewTypeName: string) => {
+ setActiveViewTypeName(clickedViewTypeName)
const clickedViewTypeId = viewTypes.find((viewType) => viewType.name === clickedViewTypeName)?.id
if (clickedViewTypeId) {
dispatch(setEditorViewId(clickedViewTypeId))
@@ -190,10 +194,20 @@ const PresentationEditorPage: React.FC = () => {
<Typography className={classes.alignCheckboxText} variant="button">
Applicera ändringar på samtliga vyer
</Typography>
- <ViewButton variant="contained" color="secondary" onClick={() => changeView('Audience')}>
+ <ViewButton
+ activeView={activeViewTypeName === 'Audience'}
+ variant="contained"
+ color="secondary"
+ onClick={() => changeView('Audience')}
+ >
Åskådarvy
</ViewButton>
- <ViewButton variant="contained" color="secondary" onClick={() => changeView('Team')}>
+ <ViewButton
+ activeView={activeViewTypeName === 'Team'}
+ variant="contained"
+ color="secondary"
+ onClick={() => changeView('Team')}
+ >
Deltagarvy
</ViewButton>
</ViewButtonGroup>
@@ -255,7 +269,7 @@ const PresentationEditorPage: React.FC = () => {
<Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}>
<InnerContent>
- <SlideDisplay editor />
+ <SlideDisplay variant="editor" activeViewTypeId={activeViewTypeId} />
</InnerContent>
</Content>
<Menu
diff --git a/client/src/pages/presentationEditor/components/SlideDisplay.tsx b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
index 6ddb38ef12d2957ffc85defe1bcf725557a79e65..b2ca9233e253dd5963ec53fbd8534398632409ab 100644
--- a/client/src/pages/presentationEditor/components/SlideDisplay.tsx
+++ b/client/src/pages/presentationEditor/components/SlideDisplay.tsx
@@ -1,4 +1,3 @@
-import { Button, Typography } from '@material-ui/core'
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
import { getTypes } from '../../../actions/typesAction'
import { useAppDispatch, useAppSelector } from '../../../hooks'
@@ -8,12 +7,13 @@ import { SlideEditorContainer, SlideEditorContainerRatio, SlideEditorPaper } fro
type SlideDisplayProps = {
//Prop to distinguish between editor and active competition
- editor?: boolean | undefined
+ variant: 'editor' | 'presentation'
+ activeViewTypeId: number
}
-const SlideDisplay = ({ editor }: SlideDisplayProps) => {
+const SlideDisplay = ({ variant, activeViewTypeId }: SlideDisplayProps) => {
const components = useAppSelector((state) => {
- if (editor)
+ if (variant === 'editor')
return state.editor.competition.slides.find((slide) => slide.id === state.editor.activeSlideId)?.components
return state.presentation.competition.slides.find((slide) => slide.id === state.presentation.slide.id)?.components
})
@@ -43,21 +43,29 @@ const SlideDisplay = ({ editor }: SlideDisplayProps) => {
<SlideEditorContainerRatio>
<SlideEditorPaper ref={editorPaperRef}>
{components &&
- components.map((component) => {
- if (editor)
+ components
+ .filter((component) => component.view_type_id === activeViewTypeId)
+ .map((component) => {
+ if (variant === 'editor')
+ return (
+ <RndComponent
+ height={height}
+ width={width}
+ key={component.id}
+ component={component}
+ scale={scale}
+ />
+ )
return (
- <RndComponent height={height} width={width} key={component.id} component={component} scale={scale} />
+ <PresentationComponent
+ height={height}
+ width={width}
+ key={component.id}
+ component={component}
+ scale={scale}
+ />
)
- return (
- <PresentationComponent
- height={height}
- width={width}
- key={component.id}
- component={component}
- scale={scale}
- />
- )
- })}
+ })}
</SlideEditorPaper>
</SlideEditorContainerRatio>
</SlideEditorContainer>
diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx
index bc83d2fa8fec821d1058aab1ed2af5114d0d00d2..a76075c4631f6c2d38777e0e1ee631eeec4d94b8 100644
--- a/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx
+++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/Images.tsx
@@ -96,17 +96,19 @@ const Images = ({ activeViewTypeId, activeSlide, competitionId }: ImagesProps) =
</Center>
</ListItem>
{images &&
- images.map((image) => (
- <div key={image.id}>
- <ListItem divider button>
- <ImportedImage src={`http://localhost:5000/static/images/thumbnail_${image.media?.filename}`} />
- <Center>
- <ListItemText primary={image.media?.filename} />
- </Center>
- <CloseIcon onClick={() => handleCloseimageClick(image)} />
- </ListItem>
- </div>
- ))}
+ images
+ .filter((image) => image.view_type_id === activeViewTypeId)
+ .map((image) => (
+ <div key={image.id}>
+ <ListItem divider button>
+ <ImportedImage src={`http://localhost:5000/static/images/thumbnail_${image.media?.filename}`} />
+ <Center>
+ <ListItemText primary={image.media?.filename} />
+ </Center>
+ <CloseIcon onClick={() => handleCloseimageClick(image)} />
+ </ListItem>
+ </div>
+ ))}
<ListItem button style={{ padding: 0 }}>
<HiddenInput accept="image/*" id="contained-button-file" multiple type="file" onChange={handleFileSelected} />
diff --git a/client/src/pages/presentationEditor/components/slideSettingsComponents/Texts.tsx b/client/src/pages/presentationEditor/components/slideSettingsComponents/Texts.tsx
index b1e9fa9b68e517615bb2b73029b108724c752183..03656614e3076e6048984e70b7ddd0ae711a492d 100644
--- a/client/src/pages/presentationEditor/components/slideSettingsComponents/Texts.tsx
+++ b/client/src/pages/presentationEditor/components/slideSettingsComponents/Texts.tsx
@@ -44,12 +44,14 @@ const Texts = ({ activeViewTypeId, activeSlide, competitionId }: TextsProps) =>
</Center>
</ListItem>
{texts &&
- texts.map((text) => (
- <TextCard elevation={4} key={text.id}>
- <TextComponentEdit component={text} />
- <Divider />
- </TextCard>
- ))}
+ texts
+ .filter((text) => text.view_type_id === activeViewTypeId)
+ .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>
diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx
index d1f05d6bf18de2eccc6b486fb6e94701acce3b5c..ea266c5e03b1517d522674136182fb22f2e3c8f2 100644
--- a/client/src/pages/presentationEditor/styled.tsx
+++ b/client/src/pages/presentationEditor/styled.tsx
@@ -7,8 +7,18 @@ export const ToolBarContainer = styled(Toolbar)`
padding-left: 0;
`
-export const ViewButton = styled(Button)`
+interface ViewButtonProps {
+ activeView: boolean
+}
+
+export const ViewButton = styled(Button)<ViewButtonProps>`
+ margin-right: 8px;
+ background: ${(props) => (props.activeView ? '#5a0017' : undefined)};
+`
+
+export const ViewButtonClicked = styled(Button)`
margin-right: 8px;
+ background: #5a0017;
`
export const ViewButtonGroup = styled.div`
diff --git a/client/src/pages/views/AudienceViewPage.tsx b/client/src/pages/views/AudienceViewPage.tsx
index 8d58a364e6d4688da1b0dcff5290a60486250de1..d03f3367499b9820ad35d646feedda3821928dcc 100644
--- a/client/src/pages/views/AudienceViewPage.tsx
+++ b/client/src/pages/views/AudienceViewPage.tsx
@@ -1,16 +1,15 @@
+import { Typography } from '@material-ui/core'
import React from 'react'
+import { useAppSelector } from '../../hooks'
import SlideDisplay from '../presentationEditor/components/SlideDisplay'
-import PresentationComponent from './components/PresentationComponent'
-import mockedAxios from 'axios'
const AudienceViewPage: React.FC = () => {
- const res = {
- data: {},
+ const viewTypes = useAppSelector((state) => state.types.viewTypes)
+ const activeViewTypeId = viewTypes.find((viewType) => viewType.name === 'Audience')?.id
+ if (activeViewTypeId) {
+ return <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />
}
- ;(mockedAxios.get as jest.Mock).mockImplementation(() => {
- return Promise.resolve(res)
- })
- return <SlideDisplay />
+ return <Typography>Error: Åskådarvyn kunde inte laddas</Typography>
}
export default AudienceViewPage
diff --git a/client/src/pages/views/JudgeViewPage.tsx b/client/src/pages/views/JudgeViewPage.tsx
index de5abe40f2b3a194a1120963c30ad3ba5907ea4e..f72c052db601d0c346cf8937f58114d173662841 100644
--- a/client/src/pages/views/JudgeViewPage.tsx
+++ b/client/src/pages/views/JudgeViewPage.tsx
@@ -46,6 +46,8 @@ const JudgeViewPage = ({ competitionId, code }: JudgeViewPageProps) => {
const history = useHistory()
const dispatch = useAppDispatch()
const [activeSlideIndex, setActiveSlideIndex] = useState<number>(0)
+ const viewTypes = useAppSelector((state) => state.types.viewTypes)
+ const activeViewTypeId = viewTypes.find((viewType) => viewType.name === 'Judge')?.id
const teams = useAppSelector((state) => state.presentation.competition.teams)
const slides = useAppSelector((state) => state.presentation.competition.slides)
const handleSelectSlide = (index: number) => {
@@ -114,7 +116,7 @@ const JudgeViewPage = ({ competitionId, code }: JudgeViewPageProps) => {
<div style={{ height: 64 }} />
<Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}>
<InnerContent>
- <SlideDisplay />
+ {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
</InnerContent>
</Content>
</div>
diff --git a/client/src/pages/views/ParticipantViewPage.tsx b/client/src/pages/views/ParticipantViewPage.tsx
index ffee1ee11857e875314f847fbd3aca58d6bdd9db..0c4db2c0e932bb4f75b4b0bf632ee4efa432f6ce 100644
--- a/client/src/pages/views/ParticipantViewPage.tsx
+++ b/client/src/pages/views/ParticipantViewPage.tsx
@@ -9,6 +9,8 @@ import { useAppSelector } from '../../hooks'
const ParticipantViewPage: React.FC = () => {
const history = useHistory()
const code = useAppSelector((state) => state.presentation.code)
+ const viewTypes = useAppSelector((state) => state.types.viewTypes)
+ const activeViewTypeId = viewTypes.find((viewType) => viewType.name === 'Participant')?.id
useEffect(() => {
//hides the url so people can't sneak peak
history.push('participant')
@@ -19,7 +21,7 @@ const ParticipantViewPage: React.FC = () => {
}, [])
return (
<ParticipantContainer>
- <SlideDisplay />
+ {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
</ParticipantContainer>
)
}
diff --git a/client/src/pages/views/PresenterViewPage.tsx b/client/src/pages/views/PresenterViewPage.tsx
index f221f5a9b6e612243f626e0fafd490ee02d619e8..6c853a60938a4f8dcd3ac8323d219635fc5f2a92 100644
--- a/client/src/pages/views/PresenterViewPage.tsx
+++ b/client/src/pages/views/PresenterViewPage.tsx
@@ -61,6 +61,8 @@ const PresenterViewPage: React.FC = () => {
const presentation = useAppSelector((state) => state.presentation)
const history = useHistory()
const dispatch = useAppDispatch()
+ const viewTypes = useAppSelector((state) => state.types.viewTypes)
+ const activeViewTypeId = viewTypes.find((viewType) => viewType.name === 'Presenter')?.id
useEffect(() => {
dispatch(getPresentationCompetition(id))
@@ -137,7 +139,7 @@ const PresenterViewPage: React.FC = () => {
<div style={{ height: 0, paddingTop: 120 }} />
<PresenterContent>
<PresenterInnerContent>
- <SlideDisplay />
+ {activeViewTypeId && <SlideDisplay variant="presentation" activeViewTypeId={activeViewTypeId} />}
</PresenterInnerContent>
</PresenterContent>
<div style={{ height: 0, paddingTop: 140 }} />