Refactor: layout

components/AddClosedEndedQuestion.vue

@@ -52,7 +52,7 @@ import { collection, doc, addDoc, writeBatch } from 'firebase/firestore'
 // https://vee-validate.logaretm.com/v3/guide/basics.html
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
 import { required } from 'vee-validate/dist/rules'
-import { ClosedEndedQuestion, ClosedEndedQuestionConverter } from '~/plugins/closed-ended-question'
+import { ClosedEndedQuestion, ClosedEndedQuestionConverter, states } from '~/plugins/closed-ended-question'
 
 // Override the default error message of required fields
 extend('required', {
@@ -75,6 +75,11 @@ export default {
     }
   },
   methods: {
+    isAuthorized () {
+      const isTutor = this.$auth.currentUser.email.endsWith('@iu.org')
+      const isAdmin = this.$store.getters.isAdmin
+      return isTutor || isAdmin
+    },
     submit () {
       this.loading = true
 
@@ -86,14 +91,17 @@ export default {
         this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
         Date.now() / 1000, // Current UNIX timestamp in seconds
         this.comment ? [this.comment] : [],
-        'neu'
+        this.isAuthorized() ? states.approved : states.new
       )
 
       // Add a new document with a generated id
       addDoc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenGeschlossen`).withConverter(ClosedEndedQuestionConverter), q)
       .then((docRef) => {
         // Successfully added new question to database
-        this.$toast({ content: 'Deine Frage wurde eingereicht!', color: 'success' })
+        const content = this.isAuthorized()
+          ? 'Die Frage wurde hinzugefügt!'
+          : 'Deine Frage wurde eingereicht und wartet auf Bestätigung durch den Tutor!'
+        this.$toast({ content, color: 'success' })
       })
       .catch((error) => {
         // Failed to add question to database; display error message
@@ -131,7 +139,7 @@ export default {
           this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
           Date.now() / 1000, // Current UNIX timestamp in seconds
           [],
-          'genehmigt'
+          states.approved
         )
 
         const questionRef = doc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenGeschlossen`).withConverter(ClosedEndedQuestionConverter))

components/Challenge.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-container fluid>
+    <v-subheader class="text-h5 text--primary">Challenge</v-subheader>
+    <v-divider></v-divider>
+    <v-btn depressed color="success" class="my-3" @click="playVersus">
+      <v-icon left>mdi-play</v-icon>
+      Quiz Spielen
+    </v-btn>
+    <AddClosedEndedQuestion />
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: 'ChallengeComponent',
+  props: {
+    courseId: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  methods: {
+    playVersus () {
+      // TODO
+      this.$router.push(`${this.$route.path}/play`)
+    }
+  }
+}
+</script>

components/Coop.vue

@@ -1,5 +1,8 @@
 <template>
-  <v-expansion-panels>
+  <v-container fluid>
+    <v-subheader class="text-h5 text--primary">Offene Fragen</v-subheader>
+    <v-divider></v-divider>
+    <v-expansion-panels focusable class="my-3">
       <v-expansion-panel
         v-for="(item, i) in questions"
         :key="i"
@@ -12,6 +15,8 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
+    <AddOpenEndedQuestion />
+  </v-container>
 </template>
 
 <script>
@@ -21,7 +26,7 @@ import { OpenEndedQuestionConverter } from '~/plugins/open-ended-question'
 export default {
   name: 'CoopComponent',
   props: {
-    courseID: {
+    courseId: {
       type: String,
       required: true
     }
@@ -37,7 +42,7 @@ export default {
   methods: {
     getQuestions () {
       // Create a reference to the open-ended questions collection of the currently selected course
-      const questionsRef = collection(this.$db, `kurse/${this.courseID}/fragenOffen`).withConverter(OpenEndedQuestionConverter)
+      const questionsRef = collection(this.$db, `kurse/${this.courseId}/fragenOffen`).withConverter(OpenEndedQuestionConverter)
 
       // Execute the query
       getDocs(questionsRef).then((querySnapshot) => {

components/DemoInfoDialog.vue

@@ -3,9 +3,9 @@
 <template>
   <v-dialog v-model="show" width="500">
     <template #activator="{ on, attrs }">
-      <v-btn fixed top left dark color="red lighten-2" v-bind="attrs" v-on="on">
+      <v-btn fixed top dark color="red lighten-2" :style="{left: '50%', transform:'translateX(-50%)'}" v-bind="attrs" v-on="on">
         <v-icon left>mdi-alert-circle-outline</v-icon>
-        Demo-Account Info
+        Mit Demo-Account Anmelden
       </v-btn>
     </template>
     <v-card elevation="12" class="mx-auto">
@@ -44,7 +44,6 @@
 
 <script>
 import { signInWithEmailAndPassword } from 'firebase/auth'
-export const demoAccounts = ['max.muster.test@iubh-fernstudium.de', 'tutor.test@iu.org', 'admin.test@iu.org']
 
 export default {
   data () {

pages/courses/_course.vue

@@ -1,10 +1,5 @@
 <template>
   <v-container fluid fill-height>
-    <v-row>
-      <v-col cols="12">
-        <span class="text-h4">{{ title }}</span>
-      </v-col>
-    </v-row>
     <NuxtChild />
   </v-container>
 </template>
@@ -16,20 +11,8 @@ export default {
       courseID: undefined
     }
   },
-  computed: {
-    title () {
-      const courseName = this.$store.getters.getCourseByID(this.courseID).name
-      return `${this.courseID.toUpperCase()} - ${courseName}`
-    }
-  },
   created () {
     this.courseID = this.$route.params.course
   }
 }
 </script>
-
-<style>
-.tete {
-  flex: 1 1 auto;
-}
-</style>

pages/courses/_course/index.vue

@@ -1,20 +1,23 @@
 <template>
+  <v-container fluid class="pa-0">
+    <v-sheet class="rounded-lg pa-2">
+      <span class="text-h4 text--secondary">{{ courseID.toUpperCase() }}</span>
+      <span class="text-h4">{{ $store.getters.getCourseByID(courseID).name }}</span>
+    </v-sheet>
     <v-container>
       <v-row>
-      <v-col cols="auto">
+        <v-col v-if="isAuthorized" cols="12">
-        <v-btn depressed color="primary" @click="playVersus">Challenge Mode</v-btn>
+          <TutorPanel :course-id="courseID" />
         </v-col>
         <v-col cols="12">
-        <Coop :courseID="courseID" />
+          <Challenge :course-id="courseID" />
         </v-col>
         <v-col cols="12">
-        <AddClosedEndedQuestion />
+          <Coop :course-id="courseID" />
-      </v-col>
-      <v-col cols="12">
-        <AddOpenEndedQuestion />
         </v-col>
       </v-row>
     </v-container>
+  </v-container>
 </template>
 
 <script>
@@ -26,15 +29,14 @@ export default {
     }
   },
   computed: {
+    isAuthorized () {
+      const isTutor = this.$auth.currentUser.email.endsWith('@iu.org')
+      const isAdmin = this.$store.getters.isAdmin
+      return isTutor || isAdmin
+    }
   },
   created () {
     this.courseID = this.$route.params.course
-  },
-  methods: {
-    playVersus () {
-      // TODO
-      this.$router.push(`${this.$route.path}/play`)
-    }
   }
 }
 </script>

pages/courses/_course/play.vue

@@ -41,7 +41,7 @@ import {
 import _sampleSize from 'lodash-es/sampleSize'
 import _shuffle from 'lodash-es/shuffle'
 import _capitalize from 'lodash-es/capitalize'
-import { ClosedEndedQuestionConverter } from '~/plugins/closed-ended-question'
+import { ClosedEndedQuestionConverter, states } from '~/plugins/closed-ended-question'
 import { Game, GameConverter } from '~/plugins/game'
 
 export default {
@@ -101,7 +101,7 @@ export default {
 
       // Create a query against the collection.
       // Only questions with the status "approved" (=genehmigt) should be fetched from the database
-      const q = query(questionsRef, where('status', '==', 'genehmigt'))
+      const q = query(questionsRef, where('status', '==', states.approved))
 
       // Execute the query
       return getDocs(q).then((querySnapshot) => {

plugins/closed-ended-question.js

@@ -11,6 +11,12 @@ export class ClosedEndedQuestion {
   }
 }
 
+export const states = {
+  new: 'neu',
+  approved: 'genehmigt',
+  declined: 'abgelehnt'
+}
+
 // Firestore data converter
 export const ClosedEndedQuestionConverter = {
   toFirestore: (closedEndedQuestion) => {