Refactor DeviceDashboard filter implementation; replace select with button...

Refactor DeviceDashboard filter implementation; replace select with button group for improved usability and styling

frontend/src/components/DeviceDashboard.vue

@@ -5,15 +5,20 @@
       <p>Übersicht aller Geräte und deren Verfügbarkeit</p>
     </div>
 
-     <div class="filter-bar">
-      <label for="status-filter">Filter:</label>
-      <select id="status-filter" v-model="selectedFilter" @change="applyFilter">
-        <option value="all">Alle</option>
-        <option value="true">Verfügbar</option>
-        <option value="loading">Lädt...</option>
-        <option value="false">Nicht verfügbar</option>
-      </select>
-    </div>
+<div class="filter-bar">
+  <span class="filter-label">Filter:</span>
+  <div class="filter-buttons">
+    <button
+      v-for="option in filterOptions"
+      :key="option.value"
+      :class="['filter-button', { active: selectedFilter === option.value }]"
+      @click="setFilter(option.value)"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</div>
+
 
     <div class="table-container" v-if="!loading">
       <table class="status-table">
@@ -25,9 +30,9 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="device in filteredDevices" :key="device['mac-adress']">
+            <tr v-for="device in filteredDevices" :key="device.mac_address">
             <td class="room-cell">{{ device.room }}</td>
-            <td><span class="mac-cell">{{ device['mac-adress'] }}</span></td>
+            <td><span class="mac-cell">{{ device.mac_address }}</span></td>
             <td>
               <div class="status-indicator">
                 <div class="status-light" :class="getStatusClass(device.availabil)"></div>
@@ -70,6 +75,14 @@
 
 <script>
 export default {
+    filterOptions: [
+  { value: "all", label: "Alle" },
+  { value: "true", label: "Verfügbar" },
+  { value: "false", label: "Nicht verfügbar" },
+],
+setFilter(value) {
+  this.selectedFilter = value;
+},
 
   data() {
     return {
@@ -94,23 +107,13 @@ export default {
     },},
   methods: {
 async loadDevices() {
-      this.loading = true;
-      try {
-    // ✨ Beispielgeräte (verschiedene Räume & Stati)
-    const data = [
-      { "mac-adress": "00:11:22:33:44:01", room: "Büro A", availabil: "true" },
-      { "mac-adress": "00:11:22:33:44:02", room: "Büro B", availabil: "false" },
-      { "mac-adress": "00:11:22:33:44:03", room: "Lager", availabil: "loading" },
-      { "mac-adress": "00:11:22:33:44:04", room: "Küche", availabil: "true" },
-      { "mac-adress": "00:11:22:33:44:05", room: "Serverraum", availabil: "false" },
-      { "mac-adress": "00:11:22:33:44:06", room: "Eingang", availabil: "loading" },
-      { "mac-adress": "00:11:22:33:44:07", room: "Konferenz 1", availabil: "true" },
-      { "mac-adress": "00:11:22:33:44:08", room: "Konferenz 2", availabil: "false" }
-    ];
-    await new Promise(resolve => setTimeout(resolve, 500)); // künstliche Ladezeit
-    this.devices = data;
+  this.loading = true;
+  try {
+    const response = await fetch("/api/sensors/all_room_sensors_availability");
+    const result = await response.json();
+    this.devices = result.sensors;
   } catch (err) {
-    console.error('Mock-Daten-Fehler:', err);
+    console.error("Fehler beim Laden der Gerätedaten:", err);
     this.devices = [];
   } finally {
     this.loading = false;
@@ -145,10 +148,6 @@ async refreshData() {
   mounted() {
     this.loadDevices();
   },
-
-
-  
-
 };
 </script>
 
@@ -352,4 +351,43 @@ async refreshData() {
     align-items: stretch;
   }
 }
+.filter-bar {
+  display: flex;
+  align-items: center;
+  padding: 20px 30px;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.filter-label {
+  font-weight: bold;
+  font-size: 1rem;
+  color: #2c3e50;
+}
+
+.filter-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.filter-button {
+  background: #ecf0f1;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 30px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  color: #2c3e50;
+}
+
+.filter-button:hover {
+  background: #d0dce3;
+}
+
+.filter-button.active {
+  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+  color: white;
+}
+
 </style>
\ No newline at end of file