Pull dev

README.md

-![coverage report](https://gitlab.liu.se/tddd96-grupp11/teknikattan-scoring-system/badges/dev/coverage.svg?job=client:test&key_text=Client+Coverage&key_width=110)
-![coverage report](https://gitlab.liu.se/tddd96-grupp11/teknikattan-scoring-system/badges/dev/coverage.svg?job=server:test&key_text=Server+Coverage&key_width=115)
-
-
-
-
 # Scoring system for Teknikåttan
 
 This is the scoring system for Teknikåttan!

client/src/enum/ComponentTypes.ts

 export enum ComponentTypes {
   Text = 1,
   Image,
-  QuestionAlternative,
+  Question,
 }

client/src/interfaces/ApiModels.ts

@@ -94,6 +94,16 @@ export interface TextComponent extends Component {
   font: string
 }
 
-export interface QuestionAlternativeComponent extends Component {
+export interface QuestionComponent extends Component {
+  id: number
+  x: number
+  y: number
+  w: number
+  h: number
+  slide_id: number
+  type_id: number
+  view_type_id: number
+  text: string
+  media: Media
   question_id: number
 }

client/src/pages/admin/competitions/CompetitionManager.tsx

@@ -131,6 +131,7 @@ const CompetitionManager: React.FC = (props: any) => {
     }
   }
 
+  /** Start the competition by redirecting with URL with Code */
   const handleStartCompetition = () => {
     const operatorCode = codes.find((code) => code.view_type_id === 4)?.code
     if (operatorCode) {
@@ -138,6 +139,7 @@ const CompetitionManager: React.FC = (props: any) => {
     }
   }
 
+  /** Fetch all the connection codes from the server */
   const getCodes = async (id: number) => {
     await axios
       .get(`/api/competitions/${id}/codes`)
@@ -147,6 +149,7 @@ const CompetitionManager: React.FC = (props: any) => {
       .catch(console.log)
   }
 
+  /** Fetch all the teams from the server that is connected to a specific competition*/
   const getTeams = async (id: number) => {
     await axios
       .get(`/api/competitions/${id}/teams`)
@@ -159,6 +162,7 @@ const CompetitionManager: React.FC = (props: any) => {
       })
   }
 
+  /** Fetch the copetition name from the server */
   const getCompetitionName = async () => {
     await axios
       .get(`/api/competitions/${activeId}`)
@@ -198,16 +202,18 @@ const CompetitionManager: React.FC = (props: any) => {
     return typeName
   }
 
+  /** Handles the opening of the code dialog box */
   const handleOpenDialog = async () => {
     await getCompetitionName()
     setDialogIsOpen(true)
   }
-
+  /** Handles the closing of the code dialog box */
   const handleCloseDialog = () => {
     setDialogIsOpen(false)
     setAnchorEl(null)
   }
 
+  /** Function that copies an existing competition */
   const handleDuplicateCompetition = async () => {
     if (activeId) {
       await axios

client/src/pages/admin/dashboard/Dashboard.tsx

@@ -6,6 +6,11 @@ import NumberOfCompetitions from './components/NumberOfCompetitions'
 import NumberOfRegions from './components/NumberOfRegions'
 import NumberOfUsers from './components/NumberOfUsers'
 
+/**
+ * This is the first page that is shown after a user logs in. It shows som statistics about the site.
+ *
+ */
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {

client/src/pages/admin/dashboard/components/CurrentUser.tsx

@@ -2,6 +2,8 @@ import { Box, Typography } from '@material-ui/core'
 import React from 'react'
 import { useAppSelector } from '../../../../hooks'
 
+/** This component show information about the currently logged in user */
+
 const CurrentUser: React.FC = () => {
   const currentUser = useAppSelector((state: { user: { userInfo: any } }) => state.user.userInfo)
   return (

client/src/pages/admin/dashboard/components/NumberOfCompetitions.tsx

@@ -2,6 +2,8 @@ import { Box, Typography } from '@material-ui/core'
 import React from 'react'
 import { useAppSelector } from '../../../../hooks'
 
+/** Shows how many competitions is on the system */
+
 const NumberOfCompetitions: React.FC = () => {
   const competitions = useAppSelector((state) => state.statistics.competitions)
 

client/src/pages/admin/dashboard/components/NumberOfRegions.tsx

@@ -3,6 +3,8 @@ import React, { useEffect } from 'react'
 import { getCities } from '../../../../actions/cities'
 import { useAppDispatch, useAppSelector } from '../../../../hooks'
 
+/** Shows how many regions is on the system */
+
 const NumberOfRegions: React.FC = () => {
   const regions = useAppSelector((state) => state.statistics.regions)
   const dispatch = useAppDispatch()

client/src/pages/admin/dashboard/components/NumberOfUsers.tsx

@@ -3,6 +3,8 @@ import React, { useEffect } from 'react'
 import { getSearchUsers } from '../../../../actions/searchUser'
 import { useAppDispatch, useAppSelector } from '../../../../hooks'
 
+/** Shows how many users are on the system */
+
 const NumberOfUsers: React.FC = () => {
   const usersTotal = useAppSelector((state) => state.statistics.users)
   const dispatch = useAppDispatch()

client/src/pages/admin/regions/AddRegion.tsx

@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 type formType = FormModel<AddCityModel>
 
+/** add a region form with some constraints. */
 const schema: Yup.SchemaOf<formType> = Yup.object({
   model: Yup.object()
     .shape({

client/src/pages/admin/regions/Regions.tsx

@@ -14,6 +14,9 @@ import { getCities } from '../../../actions/cities'
 import { useAppDispatch, useAppSelector } from '../../../hooks'
 import { RemoveMenuItem, TopBar } from '../styledComp'
 import AddRegion from './AddRegion'
+
+/** shows all the regions in a list */
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     table: {

client/src/pages/admin/users/AddUser.tsx

+/** Add a user component */
+
 import { Button, FormControl, InputLabel, MenuItem, Popover, TextField } from '@material-ui/core'
 import PersonAddIcon from '@material-ui/icons/PersonAdd'
 import { Alert, AlertTitle } from '@material-ui/lab'
@@ -16,6 +18,7 @@ type formType = FormModel<AddUserModel>
 const noRoleSelected = 'Välj roll'
 const noCitySelected = 'Välj stad'
 
+/** Form when adding a user with some constraints */
 const userSchema: Yup.SchemaOf<formType> = Yup.object({
   model: Yup.object()
     .shape({

client/src/pages/login/LoginPage.tsx

+/** This is the login page, it contains two child components, one is
+ *   to log in as an admin, the other is to connect to a competition using a code
+ */
+
 import { AppBar, Tab, Tabs } from '@material-ui/core'
 import React from 'react'
 import AdminLogin from './components/AdminLogin'

client/src/pages/login/components/AdminLogin.tsx

+/** Component that handles the log in when a user is an admin */
+
 import { Button, TextField, Typography } from '@material-ui/core'
 import { Alert, AlertTitle } from '@material-ui/lab'
 import { Formik, FormikHelpers } from 'formik'

client/src/pages/login/components/CompetitionLogin.tsx

+/** Component that handles the log in when a user connects to a competition through a code */
+
 import { Button, TextField, Typography } from '@material-ui/core'
 import { Alert, AlertTitle } from '@material-ui/lab'
 import { Formik } from 'formik'
@@ -38,7 +40,7 @@ const CompetitionLogin: React.FC = () => {
   const handleCompetitionSubmit = async (values: CompetitionLoginFormModel) => {
     dispatch(loginCompetition(values.model.code, history, true))
   }
-  
+
   return (
     <Formik
       initialValues={competitionInitialValues}

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

+import { Card, Divider, ListItem, Typography } from '@material-ui/core'
+import React from 'react'
+import { useAppSelector } from '../../../hooks'
+import AnswerMultiple from './answerComponents/AnswerMultiple'
+import AnswerSingle from './answerComponents/AnswerSingle'
+import AnswerText from './answerComponents/AnswerText'
+import { Center } from './styled'
+
+type QuestionComponentProps = {
+  variant: 'editor' | 'presentation'
+}
+
+const QuestionComponentDisplay = ({ variant }: QuestionComponentProps) => {
+  const activeSlide = useAppSelector((state) => {
+    if (variant === 'editor')
+      return state.editor.competition.slides.find((slide) => slide.id === state.editor.activeSlideId)
+    return state.presentation.competition.slides.find((slide) => slide.id === state.presentation.slide?.id)
+  })
+
+  const timer = activeSlide?.timer
+  const total_score = activeSlide?.questions[0].total_score
+  const questionName = activeSlide?.questions[0].name
+
+  const questionTypeId = activeSlide?.questions[0].type_id
+  const questionTypeName = useAppSelector(
+    (state) => state.types.questionTypes.find((qType) => qType.id === questionTypeId)?.name
+  )
+
+  const getAlternatives = () => {
+    switch (questionTypeName) {
+      case 'Text':
+        if (activeSlide) {
+          return <AnswerText activeSlide={activeSlide} competitionId={activeSlide.competition_id.toString()} />
+        }
+        return
+
+      case 'Practical':
+        return
+
+      case 'Multiple':
+        if (activeSlide) {
+          return (
+            <AnswerMultiple
+              variant={variant}
+              activeSlide={activeSlide}
+              competitionId={activeSlide.competition_id.toString()}
+            />
+          )
+        }
+        return
+
+      case 'Single':
+        if (activeSlide) {
+          return (
+            <AnswerSingle
+              variant={variant}
+              activeSlide={activeSlide}
+              competitionId={activeSlide.competition_id.toString()}
+            />
+          )
+        }
+        return
+
+      default:
+        break
+    }
+  }
+
+  return (
+    <Card style={{ maxHeight: '100%', overflowY: 'auto' }}>
+      <ListItem>
+        <Center style={{ justifyContent: 'space-evenly' }}>
+          <Typography>Poäng: {total_score}</Typography>
+          <Typography>{questionName}</Typography>
+          <Typography>Timer: {timer}</Typography>
+        </Center>
+      </ListItem>
+      <Divider />
+      {getAlternatives()}
+    </Card>
+  )
+}
+
+export default QuestionComponentDisplay

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

@@ -9,6 +9,7 @@ import { Component, ImageComponent, TextComponent } from '../../../interfaces/Ap
 import { Position, Size } from '../../../interfaces/Components'
 import { RemoveMenuItem } from '../../admin/styledComp'
 import ImageComponentDisplay from './ImageComponentDisplay'
+import QuestionComponentDisplay from './QuestionComponentDisplay'
 import { HoverContainer } from './styled'
 import TextComponentDisplay from './TextComponentDisplay'
 //import NestedMenuItem from 'material-ui-nested-menu-item'
@@ -126,6 +127,12 @@ const RndComponent = ({ component, width, height, scale }: RndComponentProps) =>
             />
           </HoverContainer>
         )
+      case ComponentTypes.Question:
+        return (
+          <HoverContainer hover={hover}>
+            <QuestionComponentDisplay variant="editor" />
+          </HoverContainer>
+        )
       default:
         break
     }

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

@@ -77,15 +77,7 @@ const SlideDisplay = ({ variant, activeViewTypeId }: SlideDisplayProps) => {
                       scale={scale}
                     />
                   )
-                return (
-                  <PresentationComponent
-                    height={height}
-                    width={width}
-                    key={component.id}
-                    component={component}
-                    scale={scale}
-                  />
-                )
+                return <PresentationComponent key={component.id} component={component} scale={scale} />
               })}
         </SlideEditorPaper>
       </SlideEditorContainerRatio>

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

 /* This file compiles and renders the right hand slide settings bar, under the tab "SIDA".
  */
-import { Divider, List, ListItem, ListItemText, TextField, Typography } from '@material-ui/core'
-import React, { useState } from 'react'
+import { Divider } from '@material-ui/core'
+import React from 'react'
 import { useParams } from 'react-router-dom'
 import { useAppSelector } from '../../../hooks'
+import BackgroundImageSelect from './BackgroundImageSelect'
+import Images from './slideSettingsComponents/Images'
 import Instructions from './slideSettingsComponents/Instructions'
 import MultipleChoiceAlternatives from './slideSettingsComponents/MultipleChoiceAlternatives'
+import QuestionSettings from './slideSettingsComponents/QuestionSettings'
+import SingleChoiceAlternatives from './slideSettingsComponents/SingleChoiceAlternatives'
 import SlideType from './slideSettingsComponents/SlideType'
-import { Center, ImportedImage, SettingsList, PanelContainer } from './styled'
-import Timer from './slideSettingsComponents/Timer'
-import Images from './slideSettingsComponents/Images'
 import Texts from './slideSettingsComponents/Texts'
-import QuestionSettings from './slideSettingsComponents/QuestionSettings'
-import BackgroundImageSelect from './BackgroundImageSelect'
+import Timer from './slideSettingsComponents/Timer'
+import { PanelContainer, SettingsList } from './styled'
 
 interface CompetitionParams {
   competitionId: string
@@ -36,19 +37,21 @@ const SlideSettings: React.FC = () => {
       </SettingsList>
 
       {activeSlide?.questions[0] && <QuestionSettings activeSlide={activeSlide} competitionId={competitionId} />}
+
       {
-        // Choose answer alternatives depending on the slide type
+        // Choose answer alternatives, depending on the slide type
       }
-      {activeSlide?.questions[0]?.type_id === 1 && (
-        <Instructions activeSlide={activeSlide} competitionId={competitionId} />
-      )}
-      {activeSlide?.questions[0]?.type_id === 2 && (
+      {(activeSlide?.questions[0]?.type_id === 1 || activeSlide?.questions[0]?.type_id === 2) && (
         <Instructions activeSlide={activeSlide} competitionId={competitionId} />
       )}
       {activeSlide?.questions[0]?.type_id === 3 && (
         <MultipleChoiceAlternatives activeSlide={activeSlide} competitionId={competitionId} />
       )}
 
+      {activeSlide?.questions[0]?.type_id === 4 && (
+        <SingleChoiceAlternatives activeSlide={activeSlide} competitionId={competitionId} />
+      )}
+
       {activeSlide && (
         <Texts activeViewTypeId={activeViewTypeId} activeSlide={activeSlide} competitionId={competitionId} />
       )}

client/src/pages/presentationEditor/components/answerComponents/AnswerMultiple.tsx

+import { Checkbox, ListItem, ListItemText, Typography, withStyles } from '@material-ui/core'
+import { CheckboxProps } from '@material-ui/core/Checkbox'
+import { green, grey } from '@material-ui/core/colors'
+import axios from 'axios'
+import React from 'react'
+import { getEditorCompetition } from '../../../../actions/editor'
+import { getPresentationCompetition } from '../../../../actions/presentation'
+import { useAppDispatch, useAppSelector } from '../../../../hooks'
+import { QuestionAlternative } from '../../../../interfaces/ApiModels'
+import { RichSlide } from '../../../../interfaces/ApiRichModels'
+import { Center } from '../styled'
+
+type AnswerMultipleProps = {
+  variant: 'editor' | 'presentation'
+  activeSlide: RichSlide | undefined
+  competitionId: string
+}
+
+const AnswerMultiple = ({ variant, activeSlide, competitionId }: AnswerMultipleProps) => {
+  const dispatch = useAppDispatch()
+  const teamId = useAppSelector((state) => state.competitionLogin.data?.team_id)
+  const team = useAppSelector((state) => state.presentation.competition.teams.find((team) => team.id === teamId))
+  const answer = team?.question_answers.find((answer) => answer.question_id === activeSlide?.questions[0].id)
+
+  const decideChecked = (alternative: QuestionAlternative) => {
+    const teamAnswer = team?.question_answers.find((answer) => answer.answer === alternative.text)?.answer
+    if (alternative.text === teamAnswer) return true
+    else return false
+  }
+
+  const updateAnswer = async (alternative: QuestionAlternative) => {
+    // TODO: fix. Make list of alternatives and delete & post instead of put to allow multiple boxes checked.
+    if (activeSlide) {
+      if (team?.question_answers.find((answer) => answer.question_id === activeSlide.questions[0].id)) {
+        if (answer?.answer === alternative.text) {
+          // Uncheck checkbox
+          deleteAnswer()
+        } else {
+          // Check another box
+          // TODO
+        }
+      } else {
+        // Check first checkbox
+        await axios
+          .post(`/api/competitions/${competitionId}/teams/${teamId}/answers`, {
+            answer: alternative.text,
+            score: 0,
+            question_id: activeSlide.questions[0].id,
+          })
+          .then(() => {
+            if (variant === 'editor') {
+              dispatch(getEditorCompetition(competitionId))
+            } else {
+              dispatch(getPresentationCompetition(competitionId))
+            }
+          })
+          .catch(console.log)
+      }
+    }
+  }
+
+  const deleteAnswer = async () => {
+    await axios
+      .delete(`/api/competitions/${competitionId}/teams/${teamId}/answers`) // TODO: fix
+      .then(() => {
+        dispatch(getEditorCompetition(competitionId))
+      })
+      .catch(console.log)
+  }
+
+  const GreenCheckbox = withStyles({
+    root: {
+      color: grey[900],
+      '&$checked': {
+        color: green[600],
+      },
+    },
+    checked: {},
+  })((props: CheckboxProps) => <Checkbox color="default" {...props} />)
+
+  return (
+    <div>
+      <ListItem divider>
+        <Center>
+          <ListItemText primary="Välj ett eller flera svar:" />
+        </Center>
+      </ListItem>
+      {activeSlide &&
+        activeSlide.questions[0] &&
+        activeSlide.questions[0].alternatives &&
+        activeSlide.questions[0].alternatives.map((alt) => (
+          <div key={alt.id}>
+            <ListItem divider>
+              {
+                //<GreenCheckbox checked={checkbox} onChange={(event) => updateAnswer(alt, event.target.checked)} />
+              }
+              <GreenCheckbox checked={decideChecked(alt)} onChange={() => updateAnswer(alt)} />
+              <Typography style={{ wordBreak: 'break-all' }}>{alt.text}</Typography>
+            </ListItem>
+          </div>
+        ))}
+    </div>
+  )
+}
+
+export default AnswerMultiple