Merge pull request 'frontend/implementing-a-store' (#66) from frontend/implementing-a-store into main

Reviewed-on: #66
Reviewed-by: mixel <mika.bomm@outlook.com>

frontend/src/components/SideBar.vue

@@ -1,22 +1,26 @@
 <script setup lang="ts">
 import Drawer from 'primevue/drawer'
 import { ref } from 'vue'
+import { useClassStore } from '@/stores/classStore'
+import router from '@/router'
+
+const store = useClassStore()
+
+store.loadClasses()
 
 defineProps<{
   isLoggedIn: boolean
   isTeacher: boolean
 }>()
 
-var elements = [
+var elements = store.classInfoList
-  { name: 'Max', id: 25 },
-  { name: 'Anna', id: 30 },
-  { name: 'Tom', id: 35 },
-]
 var visible = ref(true)
 var closeIcon = ref(false)
-var counter = ref(null)
 
-function setClass(input: Number) {}
+function setClass(input: number) {
+  store.setActiveClass(input)
+  router.push({ name: 'about' })
+}
 </script>
 
 <template>
@@ -29,10 +33,11 @@ function setClass(input: Number) {}
     header="Sidebar"
     v-if="isLoggedIn"
   >
+    <h1 v-if="store.classInfo != null">{{ store.classInfo.name }}</h1>
     <div v-if="isTeacher">
       <ul>
         <li v-for="item in elements">
-          <a href="/about" @click="setClass(item.id)">{{ item.name }}</a>
+          <p href="/about" @click="setClass(item.id)">{{ item.name }}</p>
         </li>
       </ul>
     </div>

frontend/src/main.ts

@@ -1,6 +1,5 @@
 import './assets/main.css'
 
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import PrimeVue from 'primevue/config'
@@ -11,14 +10,15 @@ import App from './App.vue'
 import router from './router'
 
 const app = createApp(App)
+const pinia = createPinia()
 
 app.use(PrimeVue, {
   theme: {
     preset: Aura,
   },
 })
-app.use(createPinia())
+app.use(pinia)
 app.use(router)
-app.directive('ripple', Ripple) 
+app.directive('ripple', Ripple)
 
 app.mount('#app')

frontend/src/stores/classStore.ts

@@ -0,0 +1,39 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+interface State {
+  classInfoList: ClassInfo[]
+  classInfo: ClassInfo | null
+}
+
+export const useClassStore = defineStore('class', {
+  state: (): State => {
+    return {
+      classInfoList: [],
+      classInfo: null,
+    }
+  },
+  actions: {
+    loadClasses() {
+      /* Beispieldaten  */
+      if (this.classInfoList.length < 1) {
+        this.classInfoList.push({ name: 'Steve', id: 1 })
+        this.classInfoList.push({ name: 'Garett', id: 2 })
+        this.classInfoList.push({ name: 'Natalie', id: 3 })
+        this.classInfoList.push({ name: 'Henry', id: 4 })
+        this.classInfoList.push({ name: 'Dawn', id: 5 })
+      }
+    },
+    setActiveClass(id: number) {
+      this.classInfoList.map((item) => {
+        if (item.id == id) {
+          this.classInfo = item
+        }
+      })
+    },
+  },
+})
+
+interface ClassInfo {
+  name: string
+  id: number
+}

frontend/src/views/AboutView.vue

@@ -1,15 +1,12 @@
+<script setup lang="ts">
+import { useClassStore } from '@/stores/classStore'
+
+const store = useClassStore()
+</script>
 <template>
   <div class="about">
     <h1>This is an about page</h1>
   </div>
 </template>
 
-<style>
+<style></style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>