From 3dd20147369c54405b33f31a173b7d795717a4fe Mon Sep 17 00:00:00 2001
From: IP2_Mele <21meaa1bif@hft-stuttgart.de>
Date: Wed, 4 Jun 2025 18:10:31 +0200
Subject: [PATCH] Frontend now works perfect

---
 frontend/src/components/RoomCard.vue |  2 +-
 frontend/src/router/index.ts         |  6 +++
 frontend/src/views/ChartView.vue     | 68 ++++++++++++++++++++++++++--
 3 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/RoomCard.vue b/frontend/src/components/RoomCard.vue
index 3156ef2..76d1ac0 100644
--- a/frontend/src/components/RoomCard.vue
+++ b/frontend/src/components/RoomCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <RouterLink :to="`/rooms/${room}`" class="room-card">
+  <RouterLink :to="`/rooms/${encodeURIComponent(room)}`" class="room-card">
     <div class="card-content">
       <h3>{{ room }}</h3>
     </div>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 9bc21d2..acc846f 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -39,6 +39,12 @@ const router = createRouter({
             name: 'charts',
             component: ChartView
         },
+        {
+            path: '/rooms/:room',
+            name: 'RoomChart',
+            component: () => import('../views/ChartView.vue'),
+            props: true
+        },        
         {
             path: '/about',
             name: 'about',
diff --git a/frontend/src/views/ChartView.vue b/frontend/src/views/ChartView.vue
index 8bb7156..e0ec4d4 100644
--- a/frontend/src/views/ChartView.vue
+++ b/frontend/src/views/ChartView.vue
@@ -1,7 +1,69 @@
 <template>
-    <MyChart />
+  <div class="chart-view">
+    <h2>Daten für Raum: {{ room }}</h2>
+
+    <ChartCard
+      title="COâ‚‚ Verlauf"
+      :labels="labels"
+      :data="co2Data"
+      borderColor="#ff6384"
+    />
+
+    <!-- Debug-Ausgabe -->
+    <pre>Labels: {{ labels }}</pre>
+    <pre>COâ‚‚: {{ co2Data }}</pre>
+  </div>
 </template>
 
-<script setup lang="ts">
-import MyChart from '@/components/Chart.vue'
+<script lang="ts">
+import { defineComponent, ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import ChartCard from '../components/ChartCard.vue'
+
+export default defineComponent({
+  name: 'ChartView',
+  components: { ChartCard },
+  setup() {
+    const route = useRoute()
+    const room = decodeURIComponent(route.params.room as string)
+
+    const labels = ref<string[]>([])
+    const co2Data = ref<number[]>([])
+
+    onMounted(async () => {
+      try {
+        const url = `http://localhost:8000/api/room_data_range?room=${encodeURIComponent(room)}&start=-7d&stop=now()`
+        const response = await fetch(url)
+
+        if (!response.ok) {
+          throw new Error(`HTTP-Fehler: ${response.status}`)
+        }
+
+        const json = await response.json()
+        const entries = Object.entries(json.data).sort(
+          ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
+        )
+
+        const labelsArray = entries.map(([timestamp]) =>
+          new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+        )
+
+        const co2DataArray = entries.map(([, values]) => values.co2)
+
+        labels.value = labelsArray
+        co2Data.value = co2DataArray
+      } catch (err) {
+        console.error('❌ Fehler beim Laden der Daten:', err)
+      }
+    })
+
+    return { room, labels, co2Data }
+  }
+})
 </script>
+
+<style scoped>
+.chart-view {
+  padding: 2rem;
+}
+</style>
-- 
GitLab