Add list of open-ended questions

components/Coop.vue

@@ -0,0 +1,56 @@
+<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>
+</template>
+
+<script>
+import { collection, getDocs } from 'firebase/firestore'
+import { OpenEndedQuestionConverter } from '~/plugins/open-ended-question'
+
+export default {
+  name: 'CoopComponent',
+  props: {
+    courseID: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      questions: []
+    }
+  },
+  created () {
+    this.getQuestions()
+  },
+  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)
+
+      // Execute the query
+      getDocs(questionsRef).then((querySnapshot) => {
+        this.questions = []
+        querySnapshot.forEach((doc) => {
+          // Convert to OpenEndedQuestion object
+          this.questions.push(doc.data())
+        })
+      }).catch((error) => {
+        // Failed to fetch questions from the database; display error message
+        this.$toast({ content: error, color: 'error' })
+      })
+    }
+  }
+}
+</script>

pages/courses/_course/index.vue

@@ -4,8 +4,8 @@
       <v-col cols="auto">
         <v-btn depressed color="primary" @click="playVersus">Challenge Mode</v-btn>
       </v-col>
-      <v-col cols="auto">
+      <v-col cols="12">
-        <v-btn depressed color="primary" @click="playCoop">Co-op Mode</v-btn>
+        <Coop :courseID="courseID" />
       </v-col>
       <v-col cols="12">
         <AddClosedEndedQuestion />
@@ -34,10 +34,6 @@ export default {
     playVersus () {
       // TODO
       this.$router.push(`${this.$route.path}/play`)
-    },
-    playCoop () {
-      // TODO
-      this.$toast({ content: 'Todo: Co-op Mode implementieren', color: 'info' })
     }
   }
 }