Frontend now shows all the Rooms in a building when you press the Card for it ^^

frontend/src/components/BauCard.vue

 <template>
-  <RouterLink :to="`/buildings/${buildingId}`" class="bau-card">
-    <div class="card-background" :style="{ backgroundImage: `url(${image})` }"></div>
+  <div class="bau-card" @click="handleClick">
+    <div class="card-background" :style="{ backgroundImage: `url(${props.image})` }"></div>
     <div class="card-content">
-      <h3>{{ title }}</h3>
-      <p>{{ description }}</p>
+      <h3>{{ props.title }}</h3>
+      <p>{{ props.description }}</p>
     </div>
-  </RouterLink>
+  </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+const emit = defineEmits(['select'])
+
+const props = defineProps<{
   title: string
   description: string
   image: string
   buildingId: string
 }>()
+
+function handleClick() {
+  emit('select', props.buildingId)
+}
 </script>
 
 <style scoped>

frontend/src/views/AboutView.vue

@@ -19,6 +19,8 @@
 import { defineComponent, ref, onMounted } from 'vue';
 import ChartCard from '../components/ChartCard.vue';
 
+const availableRooms = ['1/121', '1/131', '1/210', '1/211']
+
 export default defineComponent({
   name: 'AboutView',
   components: { ChartCard },
@@ -29,6 +31,7 @@ export default defineComponent({
     onMounted(async () => {
       try {
         const url = 'http://localhost:8000/api/room_data_range?room=1/210&start=-7d&stop=now()';
+        //const url = 'http://localhost:8000/api/room_data_range?room=${room.value}&start=${start.value}&stop=${stop.value}';
         const response = await fetch(url);
 
         if (!response.ok) {

frontend/src/views/BuildingsView.vue

 <script setup lang="ts">
+import { ref } from 'vue'
 import BauCard from '../components/BauCard.vue'
+import RoomCard from '../components/RoomCard.vue'
 
 const buildings = [
   {
@@ -14,39 +16,93 @@ const buildings = [
     description: 'Informatik und IT-Räume',
     image: '/images/building2.png',
   },
-    {
-    id: '2',
-    title: 'Bau 2',
+  {
+    id: '3',
+    title: 'Bau 3',
     description: 'Informatik und IT-Räume',
     image: '/images/building2.png',
   },
-    {
-    id: '2',
-    title: 'Bau 2',
+  {
+    id: '8',
+    title: 'Bau 8',
     description: 'Informatik und IT-Räume',
     image: '/images/building2.png',
   }
 ]
+
+const selectedBuildingId = ref<string | null>(null)
+const rooms = ref<string[]>([])
+const isLoading = ref(false)
+const error = ref<string | null>(null)
+
+async function loadRooms(buildingId: string) {
+  selectedBuildingId.value = buildingId
+  rooms.value = []
+  isLoading.value = true
+  error.value = null
+
+  try {
+    const response = await fetch(`http://localhost:8000/api/get_rooms_from_building?building=${buildingId}`)
+    const data = await response.json()
+
+    if (response.ok) {
+      rooms.value = data.rooms
+    } else {
+      throw new Error(data.detail || 'Fehler beim Laden der Räume')
+    }
+  } catch (err: any) {
+    error.value = err.message
+  } finally {
+    isLoading.value = false
+  }
+}
 </script>
 
 <template>
-  <div class="building-grid">
-    <BauCard
-      v-for="bau in buildings"
-      :key="bau.id"
-      :building-id="bau.id"
-      :title="bau.title"
-      :description="bau.description"
-      :image="bau.image"
-    />
+  <div class="layout">
+    <!-- Linke Spalte: Gebäude -->
+    <div class="building-grid">
+      <BauCard
+        v-for="bau in buildings"
+        :key="bau.id"
+        :building-id="bau.id"
+        :title="bau.title"
+        :description="bau.description"
+        :image="bau.image"
+        @select="loadRooms"
+      />
+    </div>
+
+    <!-- Rechte Spalte: Räume -->
+    <div class="room-panel">
+      <h3 v-if="selectedBuildingId">Räume in Bau {{ selectedBuildingId }}</h3>
+      <div v-if="isLoading">Lade Räume...</div>
+      <div v-else-if="error">{{ error }}</div>
+      <div v-else>
+        <RoomCard v-for="room in rooms" :key="room" :room="room" />
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.layout {
+  display: flex;
+  padding: 2rem;
+  gap: 2rem;
+}
+
 .building-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: 1.5rem;
-  padding: 2rem;
+  flex: 2;
+}
+
+.room-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 </style>