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,17 +1,22 @@
 <template>
-  <v-expansion-panels>
-    <v-expansion-panel
-      v-for="(item, i) in questions"
-      :key="i"
-    >
-      <v-expansion-panel-header>
-        {{ item.question }}
-      </v-expansion-panel-header>
-      <v-expansion-panel-content class="text-pre-wrap">
-        <div class="text-pre-wrap">{{ item.solution }}</div>
-      </v-expansion-panel-content>
-    </v-expansion-panel>
-  </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"
+      >
+        <v-expansion-panel-header>
+          {{ item.question }}
+        </v-expansion-panel-header>
+        <v-expansion-panel-content class="text-pre-wrap">
+          <div class="text-pre-wrap">{{ item.solution }}</div>
+        </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 () {