Refactor: layout

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,19 +1,22 @@
 <template>
-  <v-container>
-    <v-row>
-      <v-col cols="auto">
-        <v-btn depressed color="primary" @click="playVersus">Challenge Mode</v-btn>
-      </v-col>
-      <v-col cols="12">
-        <Coop :courseID="courseID" />
-      </v-col>
-      <v-col cols="12">
-        <AddClosedEndedQuestion />
-      </v-col>
-      <v-col cols="12">
-        <AddOpenEndedQuestion />
-      </v-col>
-    </v-row>
+  <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 v-if="isAuthorized" cols="12">
+          <TutorPanel :course-id="courseID" />
+        </v-col>
+        <v-col cols="12">
+          <Challenge :course-id="courseID" />
+        </v-col>
+        <v-col cols="12">
+          <Coop :course-id="courseID" />
+        </v-col>
+      </v-row>
+    </v-container>
   </v-container>
 </template>
 
@@ -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) => {