Teacherview anglegt

frontend/src/assets/main.css

@@ -2,6 +2,7 @@
 
 #app {
   margin-left: 325px;
+  margin-right: 20px;
 }
 
 a,

frontend/src/components/SideBar.vue

@@ -33,7 +33,6 @@ 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">
@@ -44,10 +43,10 @@ function setClass(input: number) {
     <div v-else>
       <ul>
         <li>
-          <a href="/about">Offene/Abgegebene Evaluaionsbögen</a>
+          <p href="/about">Offene/Abgegebene Evaluaionsbögen</p>
         </li>
         <li>
-          <a href="/about">Notenübersicht</a>
+          <p href="/about">Notenübersicht</p>
         </li>
       </ul>
     </div>

frontend/src/views/HomeView.vue

@@ -1,7 +1,35 @@
 <script setup lang="ts">
+import { useClassStore } from '@/stores/classStore'
+import Card from 'primevue/card'
+import router from '@/router'
+
+const store = useClassStore()
+
+store.loadClasses()
+
+var elements = store.classInfoList
+
+function setClass(input: number) {
+  store.setActiveClass(input)
+  router.push({ name: 'about' })
+}
 </script>
 
-
 <template>
-  <h1>Home View</h1>
+  <div>
+    <Card v-for="item in elements" class="cards" href="/about" @click="setClass(item.id)">
+      <template #title>{{ item.name }}</template>
+      <template #content>
+        <p class="m-0">Klassebereich von: {{ item.name }}</p>
+      </template>
+    </Card>
+  </div>
 </template>
+
+<style>
+.cards {
+  outline-style: solid;
+  margin-top: 20px;
+  outline-color: gray;
+}
+</style>