Skip to content
Snippets Groups Projects
Commit 9e24180b authored by Albin Henriksson's avatar Albin Henriksson
Browse files

Merge branch 'dev' of...

Merge branch 'dev' of https://gitlab.liu.se/tddd96-grupp11/teknikattan-scoring-system into 187-disable-timer-when-info-slide
parents c71e7275 6afcf518
No related branches found
No related tags found
1 merge request!152Resolve "Disable timer when info slide"
......@@ -5,17 +5,25 @@ import {
DialogContent,
DialogContentText,
DialogTitle,
IconButton,
ListItem,
ListItemText,
TextField,
} from '@material-ui/core'
import CloseIcon from '@material-ui/icons/Close'
import EditIcon from '@material-ui/icons/Edit'
import axios from 'axios'
import React, { useState } from 'react'
import { getEditorCompetition } from '../../../actions/editor'
import { useAppDispatch, useAppSelector } from '../../../hooks'
import { Center, Clickable } from './styled'
import { AddButton, SettingsList } from './styled'
import CloseIcon from '@material-ui/icons/Close'
import { RichTeam } from '../../../interfaces/ApiRichModels'
import { AddButton, Center, SettingsList } from './styled'
interface TeamEditState {
open: boolean
variant?: 'Edit' | 'Add'
team?: RichTeam
}
type TeamsProps = {
competitionId: string
......@@ -24,23 +32,26 @@ type TeamsProps = {
const Teams = ({ competitionId }: TeamsProps) => {
const dispatch = useAppDispatch()
const competition = useAppSelector((state) => state.editor.competition)
const addTeam = async () => {
setAddTeamOpen(false)
await axios
.post(`/api/competitions/${competitionId}/teams`, { name: selectedTeamName })
.then(() => {
dispatch(getEditorCompetition(competitionId))
})
.catch(console.log)
const editTeam = async () => {
if (editTeamState.variant === 'Add') {
await axios
.post(`/api/competitions/${competitionId}/teams`, { name: selectedTeamName })
.then(() => {
dispatch(getEditorCompetition(competitionId))
})
.catch(console.log)
} else if (editTeamState.team) {
await axios
.put(`/api/competitions/${competitionId}/teams/${editTeamState.team.id}`, { name: selectedTeamName })
.then(() => {
dispatch(getEditorCompetition(competitionId))
})
.catch(console.log)
}
setEditTeamState({ open: false })
}
// For "add team" dialog
const [addTeamOpen, setAddTeamOpen] = useState(false)
const openAddTeam = () => {
setAddTeamOpen(true)
}
const closeAddTeam = () => {
setAddTeamOpen(false)
}
const [editTeamState, setEditTeamState] = useState<TeamEditState>({ open: false })
let selectedTeamName = ''
const updateSelectedTeamName = (event: React.ChangeEvent<{ value: string }>) => {
selectedTeamName = event.target.value
......@@ -67,28 +78,37 @@ const Teams = ({ competitionId }: TeamsProps) => {
<div key={team.id}>
<ListItem divider>
<ListItemText primary={team.name} />
<Clickable>
<CloseIcon onClick={() => removeTeam(team.id)} />
</Clickable>
<IconButton size="small" onClick={() => setEditTeamState({ variant: 'Edit', open: true, team })}>
<EditIcon />
</IconButton>
<IconButton size="small" onClick={() => removeTeam(team.id)}>
<CloseIcon />
</IconButton>
</ListItem>
</div>
))}
<ListItem button onClick={openAddTeam}>
<ListItem button onClick={() => setEditTeamState({ variant: 'Add', open: true })}>
<Center>
<AddButton variant="button">Lägg till lag</AddButton>
</Center>
</ListItem>
<Dialog open={addTeamOpen} onClose={closeAddTeam}>
<DialogTitle>Lägg till lag</DialogTitle>
<Dialog open={editTeamState.open} onClose={() => setEditTeamState({ open: false })}>
<DialogTitle>
{editTeamState.variant === 'Edit' && editTeamState.team
? `Redigera lagnamn för lag ${editTeamState.team.name}`
: 'Lägg till lag'}
</DialogTitle>
<DialogContent>
<DialogContentText>Skriv namnet på laget och klicka sedan på bekräfta.</DialogContentText>
<DialogContentText>
Skriv {editTeamState.variant === 'Edit' ? 'det nya' : ''} namnet på laget och klicka sedan på bekräfta.
</DialogContentText>
<TextField autoFocus margin="dense" label="Lagnamn" fullWidth onChange={updateSelectedTeamName} />
</DialogContent>
<DialogActions>
<Button onClick={closeAddTeam} color="secondary">
<Button onClick={() => setEditTeamState({ open: false })} color="secondary">
Avbryt
</Button>
<Button onClick={addTeam} color="primary">
<Button onClick={editTeam} color="primary">
Bekräfta
</Button>
</DialogActions>
......
......@@ -27,7 +27,8 @@ import { Alert } from '@material-ui/lab'
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { useHistory } from 'react-router-dom'
import { useAppSelector } from '../../hooks'
import { logoutCompetition } from '../../actions/competitionLogin'
import { useAppDispatch, useAppSelector } from '../../hooks'
import { socketConnect, socketEndPresentation, socketSync } from '../../sockets'
import SlideDisplay from '../presentationEditor/components/SlideDisplay'
import { Center } from '../presentationEditor/components/styled'
......@@ -89,7 +90,7 @@ const OperatorViewPage: React.FC = () => {
const competitionName = useAppSelector((state) => state.presentation.competition.name)
//const fullScreen = useMediaQuery(theme.breakpoints.down('sm'))
const dispatch = useAppDispatch()
const classes = useStyles()
const teams = useAppSelector((state) => state.presentation.competition.teams)
const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null)
......@@ -140,8 +141,7 @@ const OperatorViewPage: React.FC = () => {
const endCompetition = () => {
setOpen(false)
socketEndPresentation()
history.push('/admin/competition-manager')
window.location.reload(false) // TODO: fix this, we "need" to refresh site to be able to run the competition correctly again
dispatch(logoutCompetition('Operator'))
}
const getCodes = async () => {
......@@ -287,22 +287,26 @@ const OperatorViewPage: React.FC = () => {
{<div style={{ minHeight: 128 }} />}
<OperatorFooter position="fixed">
<Tooltip title="Föregående sida" arrow>
<OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="primary">
<ChevronLeftIcon fontSize="large" />
</OperatorButton>
<div>
<OperatorButton onClick={handleSetPrevSlide} variant="contained" disabled={isFirstSlide} color="primary">
<ChevronLeftIcon fontSize="large" />
</OperatorButton>
</div>
</Tooltip>
{slideTimer !== null && (
<Tooltip title="Starta timer" arrow>
<OperatorButton
onClick={handleStartTimer}
variant="contained"
disabled={timer.value !== null && !timer.enabled}
color="primary"
>
<TimerIcon fontSize="large" />
<Timer disableText />
</OperatorButton>
<div>
<OperatorButton
onClick={handleStartTimer}
variant="contained"
disabled={timer.value !== null && !timer.enabled}
color="primary"
>
<TimerIcon fontSize="large" />
<Timer disableText />
</OperatorButton>
</div>
</Tooltip>
)}
......@@ -320,9 +324,11 @@ const OperatorViewPage: React.FC = () => {
</Tooltip>
<Tooltip title="Nästa sida" arrow>
<OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="primary">
<ChevronRightIcon fontSize="large" />
</OperatorButton>
<div>
<OperatorButton onClick={handleSetNextSlide} variant="contained" disabled={isLastSlide} color="primary">
<ChevronRightIcon fontSize="large" />
</OperatorButton>
</div>
</Tooltip>
</OperatorFooter>
......
......@@ -50,7 +50,7 @@ const Timer = ({ disableText }: TimerProps) => {
)
}, [timer.enabled, slideTimer])
return <div>{`${!disableText ? 'Tid kvar:' : ''} ${Math.round(remainingTimer / 1000)}`}</div>
return <>{`${!disableText ? 'Tid kvar:' : ''} ${Math.round(remainingTimer / 1000)}`}</>
}
export default Timer
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment