Refactor DeviceDashboard to enhance filtering options; replace filter select...

Refactor DeviceDashboard to enhance filtering options; replace filter select with buttons and add custom time range input

frontend/src/components/DeviceDashboard.vue

@@ -5,8 +5,8 @@
       <p>Übersicht aller Geräte und deren Verfügbarkeit</p>
     </div>
 
-<div class="filter-bar">
-  <span class="filter-label">Filter:</span>
+    <div class="filter-bar">
+  <span class="filter-label">Status:</span>
   <div class="filter-buttons">
     <button
       v-for="option in filterOptions"
@@ -17,6 +17,25 @@
       {{ option.label }}
     </button>
   </div>
+
+  <div class="time-filter-bar">
+    <label for="time-range">Zeitraum:</label>
+    <select id="time-range" v-model="selectedTimeRange" @change="refreshData">
+      <option v-for="range in timeRanges" :key="range.value" :value="range.value">
+        {{ range.label }}
+      </option>
+    </select>
+
+    <!-- 👇 Benutzerdefinierter Zeitwert -->
+    <input
+      v-if="selectedTimeRange === 'custom'"
+      type="text"
+      placeholder="z.B. -42m, -5d"
+      v-model="customTimeInput"
+      @input="refreshData"
+      class="custom-time-input"
+    />
+  </div>
 </div> 
 
 
@@ -75,20 +94,28 @@
 
 <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 {
     devices: [],
     loading: true,
     selectedFilter: 'all',
+    selectedTimeRange: "-7d",  // ✨ Standardwert
+    filterOptions: [
+      { value: "all", label: "Alle" },
+      { value: "true", label: "Verfügbar" },
+      { value: "false", label: "Nicht verfügbar" },
+    ],
+    timeRanges: [
+        { label: "Letzte Minute", value: "-1m" },
+      { label: "Letzte 30 Minuten", value: "-30m" },
+      { label: "Letzte Stunde", value: "-1h" },
+      { label: "Letzte 6 Stunden", value: "-6h" },
+      { label: "Letzte 24 Stunden", value: "-1d" },
+      { label: "Letzte 7 Tage", value: "-7d" },
+      { label: "Letzte 30 Tage", value: "-30d" },
+      { label: "Benutzerdefiniert", value: "custom" }, // ✨
+],
+customTimeInput: "",
   };
   },
   computed: {
@@ -106,10 +133,19 @@ setFilter(value) {
       return this.devices.filter(d => d.availabil === this.selectedFilter);
     },},
   methods: {
+    setFilter(value) {
+  this.selectedFilter = value;
+},
 async loadDevices() {
   this.loading = true;
   try {
-    const response = await fetch("/api/sensors/all_room_sensors_availability");
+    let startParam = this.selectedTimeRange === "custom"
+      ? this.customTimeInput || "-7d"
+      : this.selectedTimeRange;
+
+    const response = await fetch(
+      `http://localhost:8000/api/all_room_sensors_availability?start=${encodeURIComponent(startParam)}&stop=now()`
+    );
     const result = await response.json();
     this.devices = result.sensors;
   } catch (err) {
@@ -118,7 +154,7 @@ async loadDevices() {
   } finally {
     this.loading = false;
   }
-    },
+},
     async refreshData() {
       await this.loadDevices();
     },
@@ -390,4 +426,35 @@ async refreshData() {
   color: white;
 }
 
+.time-dropdown {
+  padding: 8px 12px;
+  border-radius: 20px;
+  border: 1px solid #ccc;
+  background: #fff;
+  font-size: 0.95rem;
+  color: #2c3e50;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.time-dropdown:focus {
+  outline: none;
+  border-color: #3498db;
+  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
+}
+
+.custom-time-input {
+  padding: 6px 10px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.custom-time-input:focus {
+  border-color: #3498db;
+}
+
+
 </style>
\ No newline at end of file