Refactor some variable and method names

components/AddClosedEndedQuestion.vue

@@ -52,6 +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'
 
 // Override the default error message of required fields
 extend('required', {
@@ -77,18 +78,19 @@ export default {
     submit () {
       this.loading = true
 
-      const q = {
+      const q = new ClosedEndedQuestion(
-        ersteller: this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
+        null,
-        erstellt: Date.now() / 1000, // Current UNIX timestamp in seconds
+        this.question,
-        frage: this.question,
+        this.answers,
-        antworten: this.answers,
+        this.correctAnswer,
-        richtig: this.correctAnswer,
+        this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
-        kommentare: this.comment ? [this.comment] : [],
+        Date.now() / 1000, // Current UNIX timestamp in seconds
-        status: 'neu'
+        this.comment ? [this.comment] : [],
-      }
+        'neu'
+      )
 
       // Add a new document with a generated id
-      addDoc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenGeschlossen`), q)
+      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' })
@@ -121,17 +123,18 @@ export default {
         // Generate random integer between 0 (inlcusive) and 3 (inclusive)
         const correctAnswer = Math.floor(Math.random() * (3 + 1))
 
-        const q = {
+        const q = new ClosedEndedQuestion(
-          ersteller: this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
+          null,
-          erstellt: Date.now() / 1000, // Current UNIX timestamp in seconds
+          `Frage ${randomNumber}: Was ist die richtige Antwort? (Richtig: ${correctAnswer+1})`,
-          frage: `Frage ${randomNumber}: Was ist die richtige Antwort? (Richtig: ${correctAnswer+1})`,
+          answers,
-          antworten: answers,
+          answers[correctAnswer],
-          richtig: answers[correctAnswer],
+          this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
-          kommentare: [],
+          Date.now() / 1000, // Current UNIX timestamp in seconds
-          status: 'genehmigt'
+          [],
-        }
+          'genehmigt'
+        )
 
-        const questionRef = doc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenGeschlossen`))
+        const questionRef = doc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenGeschlossen`).withConverter(ClosedEndedQuestionConverter))
         batch.set(questionRef, q)
       }
 

components/AddOpenEndedQuestion.vue

@@ -34,6 +34,7 @@
           </v-row>
         </v-card-text>
         <v-card-actions>
+          <v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
           <v-spacer />
           <v-btn text color="primary" @click="clear">Reset</v-btn>
           <v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
@@ -44,11 +45,12 @@
 </template>
 
 <script>
-import { collection, addDoc } from 'firebase/firestore'
+import { collection, doc, addDoc, writeBatch } from 'firebase/firestore'
 // We use vee-validate@3 for form validation.
 // https://vee-validate.logaretm.com/v3/guide/basics.html
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
 import { required, min } from 'vee-validate/dist/rules'
+import { OpenEndedQuestion, OpenEndedQuestionConverter } from '~/plugins/open-ended-question'
 
 extend('required', {
   ...required,
@@ -76,17 +78,18 @@ export default {
     submit () {
       this.loading = true
 
-      const q = {
+      const q = new OpenEndedQuestion(
-        ersteller: this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
+        null,
-        erstellt: Date.now() / 1000, // Current UNIX timestamp in seconds
+        this.question,
-        frage: this.question,
+        this.solution,
-        musterloesung: this.solution,
+        this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
-        bewertungen: [],
+        Date.now() / 1000, // Current UNIX timestamp in seconds
-        schwierigkeit: []
+        [],
-      }
+        []
+      )
 
       // Add a new document with a generated id.
-      addDoc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`), q)
+      addDoc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`).withConverter(OpenEndedQuestionConverter), q)
       .then((docRef) => {
         // Successfully added new question to database
         this.$toast({ content: 'Deine Frage wurde eingereicht!', color: 'success' })
@@ -103,6 +106,58 @@ export default {
       this.question = ''
       this.solution = ''
       this.$refs.observer.reset()
+    },
+    // TODO: This method is used for writing test data to the database and should be removed in production
+    addQuestionsForTesting () {
+      this.loading = true
+      const solution = 
+        `Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n\n
+        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
+        vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
+        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
+        tincidunt ut laoreet dolore magna aliquam erat volutpat.`
+      const batch = writeBatch(this.$db)
+
+      for (let i = 1; i <= 10; i++) {
+        // Generate random integer between 1 (inlcusive) and 1000 (inclusive)
+        const randomNumber = Math.floor(Math.random() * (1000 - 1 + 1) + 1)
+
+        const q = new OpenEndedQuestion(
+          null,
+          `Frage ${randomNumber}: Erläutere den Sinn des Lebens.`,
+          solution,
+          this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
+          Date.now() / 1000, // Current UNIX timestamp in seconds
+          [],
+          []
+        )
+
+        const questionRef = doc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`).withConverter(OpenEndedQuestionConverter))
+        batch.set(questionRef, q)
+      }
+
+      // Commit the batch
+      batch.commit().then((empty) => {
+        // Successfully added new questions to the database
+        this.$toast({ content: '10 Fragen wurden hinzugefügt!', color: 'success' })
+      }).catch((error) => {
+        // Failed to add questions to the database; display error message
+        this.$toast({content: error, color: 'error'})
+      }).then(() => {
+        this.loading = false
+      })
     }
   }
 }

components/NavigationDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer v-if="$store.state.userLoggedIn" app clipped :mini-variant="miniVariant">
+  <v-navigation-drawer v-if="$store.state.user" app clipped :mini-variant="miniVariant">
     <v-list>
       <v-list-item link class="px-2" @click="gotoProfilePage">
         <v-list-item-avatar>

layouts/default.vue

@@ -33,7 +33,7 @@ export default {
   },
   computed: {
     loggedIn () {
-      return this.$store.state.userLoggedIn
+      return this.$store.state.user
     }
   },
   methods: {

pages/courses/_course.vue

@@ -1,22 +1,11 @@
 <template>
-  <v-container>
+  <v-container fluid fill-height>
     <v-row>
       <v-col cols="12">
         <span class="text-h4">{{ title }}</span>
       </v-col>
-      <v-col cols="auto">
-        <v-btn depressed color="primary" @click="playVersus">Challenge Mode</v-btn>
-      </v-col>
-      <v-col cols="auto">
-        <v-btn depressed color="primary" @click="playCoop">Co-op Mode</v-btn>
-      </v-col>
-      <v-col cols="12">
-        <AddClosedEndedQuestion />
-      </v-col>
-      <v-col cols="12">
-        <AddOpenEndedQuestion />
-      </v-col>
     </v-row>
+    <NuxtChild />
   </v-container>
 </template>
 
@@ -35,16 +24,12 @@ export default {
   },
   created () {
     this.courseID = this.$route.params.course
-  },
-  methods: {
-    playVersus () {
-      // TODO
-      this.$toast({ content: 'Todo: Challenge Mode implementieren', color: 'info' })
-    },
-    playCoop () {
-      // TODO
-      this.$toast({ content: 'Todo: Co-op Mode implementieren', color: 'info' })
-    }
   }
 }
 </script>
+
+<style>
+.tete {
+  flex: 1 1 auto;
+}
+</style>

pages/index.vue

@@ -6,6 +6,8 @@
 
 <script>
 import { onAuthStateChanged } from 'firebase/auth'
+import { doc, getDoc } from 'firebase/firestore'
+import { UserConverter } from '~/plugins/user'
 
 export default {
   name: 'IndexPage',
@@ -17,15 +19,27 @@ export default {
     onAuthStateChanged(this.$auth, (user) => {
       this.$store.commit('initFirebase')
       if (user) {
-        // User is signed in; redirect to main page (dashboard)
+        // User is signed in; get user data from db, then redirect to main page (dashboard)
-        this.$store.commit('setUserLoggedIn', true)
+        this.getUser()
-        this.$router.push({ name: 'dashboard' })
       } else {
         // User is signed out; redirect to login page
-        this.$store.commit('setUserLoggedIn', false)
+        this.$store.commit('setUser', null)
         this.$router.push({ name: 'login' })
       }
     })
+  },
+  methods: {
+    getUser () {
+      const ref = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`).withConverter(UserConverter)
+      getDoc(ref).then((docSnap) => {
+        if (docSnap.exists()) {
+          this.$store.commit('setUser', docSnap.data())
+          this.$router.push({ name: 'dashboard' })
+        } else {
+          this.$toast({ content: 'Benutzer konnte in DB nicht gefunden werden!', color: 'error' })
+        }
+      })
+    }
   }
 }
 </script>

store/index.js

@@ -1,6 +1,6 @@
 export const state = () => ({
   firebaseInitialized: false,
-  userLoggedIn: false,
+  user: null,
   courses: {},
   selectedCourse: undefined
 })
@@ -15,8 +15,8 @@ export const mutations = {
   initFirebase (state) {
     state.firebaseInitialized = true
   },
-  setUserLoggedIn (state, isLoggedIn) {
+  setUser (state, user) {
-    state.userLoggedIn = isLoggedIn
+    state.user = user
   },
   setCourses (state, courses) {
     state.courses = courses