add setcards

src/composables/api.ts

@@ -139,9 +139,15 @@ export type UpdateCategory = CreateCategory;
 export type UpdateRoom = CreateRoom;
 
 export type Points = {
-  points: number;
   userId: number;
-  sessionId?: number;
+  allPoints: {
+    audioPoints: number;
+    videoPoints: number;
+    browserPoints: number;
+    whiteboardPoints: number;
+    notePoints: number;
+  }
+  totalPoints: number;
 };
 
 export interface RoomSession {
@@ -175,6 +181,12 @@ export type Activity = {
   timestamp: Date;
 }
 
+export interface Role {
+  id: number;
+  name: string;
+  description?: string;
+}
+
 /**
  * An object containing async functions to interact with the server API.
  */
@@ -385,6 +397,10 @@ const api = {
   async getRoomSessionById(sessionId: string, categoryId: string, roomId: string): Promise<RoomSession> {
     return await fetch.getOrFail(`/category/${categoryId}/room/${roomId}/sessions/${sessionId}`);
   },
+
+  async getRoles(): Promise<Role[]> {
+    return await fetch.getOrFail('/roles');
+  },
 }
 
 /**

src/views/SessionAnalysisView.vue

 <template>
     <Layout title="Raum Überblick" :buttons="['account', 'admin']">
-    <div>
-        <h1>Teilnehmer</h1>
-        <ul>
-            <li v-for="user in roomSession?.users">
-                {{ user.name }}
-            </li>
-        </ul>
+    <div class="container">
+        <h1 class="mb-4">Teilnehmer Analyse</h1>
+        
+        <div class="row g-3">
+            <div v-for="user in roomSession?.users" :key="user.userId" class="col-auto">
+                <div class="card square-card">
+                    <div class="card-header text-center text-primary fw-bold">
+                        MODERATOR
+                    </div>
+                    <div class="card-body d-flex flex-column align-items-center">
+                        <h5 class="card-title text-center mb-3">{{ user.name }}</h5>
+                        <div class="card-text text-center w-100">
+                            <p class="mb-1 text-muted extra-small"><strong>User ID:</strong> {{ user.userId }}</p>
+                        </div>
+                        <div class="card-text text-center w-100">
+                            <p class="mb-1 text-muted extra-small">{{ userPoints[user.id]?.totalPoints || 'Loading...' }} Punkte</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     </div>
     </Layout>
 </template>
@@ -15,16 +29,66 @@
     import { ref, onMounted, Ref } from 'vue';
     import { useApi } from '@/composables/api';
     import { useRoute } from 'vue-router';
-    import { RoomSession } from '@/composables/api';
+    import { RoomSession, Points } from '@/composables/api';
     import Layout from '@/components/Layout.vue';
 
+    const api = useApi();
     const route = useRoute();
-    const roomSession: Ref<RoomSession | null> = ref(null);
+    const roomSession: Ref<RoomSession | null> = ref(null);    
+    const userPoints = ref<Record<number, Points>>({});
+
+    async function loadUserPoints(userId: number) {
+        try {
+            const points = await api.getPointsByUser(userId);
+            userPoints.value[userId] = points;
+        } catch (error) {
+            console.error(`Error loading points for user ${userId}:`, error);
+        }
+    }
 
     onMounted(async () => {
-        const response = await useApi().getRoomSessionById(route.query.roomSessionId as string, "0", "0");
+        const response = await api.getRoomSessionById(route.query.roomSessionId as string, "0", "0");
         roomSession.value = response;
+
+        // Load points for each user
+        if (response.users) {
+            for (const user of response.users) {
+                await loadUserPoints(user.id);
+            }
+        }
     });
 
+</script>
+
+<style scoped>
+.square-card {
+    aspect-ratio: 1;
+    width: 100%;
+    transition: transform 0.2s;
+    border: 1px solid rgba(0,0,0,0.125);
+}
+
+.square-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.card-body {
+    padding: 1.25rem;
+}
+
+.card-header {
+    background-color: rgba(13, 110, 253, 0.1);
+    border-bottom: 1px solid rgba(13, 110, 253, 0.2);
+    padding: 0.5rem;
+}
+
+.small {
+    font-size: 0.875rem;
+}
 
-</script>
\ No newline at end of file
+.extra-small {
+    font-size: 0.75rem;
+    opacity: 0.7;
+}
+</style>
\ No newline at end of file

tsconfig.app.json

 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*.ts", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
     "composite": true,