feat(web-app): selected user/room/device

This part allow to select from where the data from with some option
- user
- room
- device

web-app/src/App.vue

@@ -14,6 +14,7 @@
           :show-humidity.sync="showHumidity"
           @add-temperature="addTemperature"
           @refresh="refreshData"
+          :manager="manager"
         />
       </div>
 
@@ -41,9 +42,6 @@ import { URL, USERNAME, PASSWORD, USER, ROOM, DEVICE, APP_NAME } from "./const";
 import { Serie } from "./Measures/Serie";
 
 let httpClient = new HttpClient(URL, USERNAME, PASSWORD);
-
-// console.log(httpClient.newValue(URL, USERNAME, PASSWORD));
-
 let manager = new TimeSeriesManager(httpClient);
 
 export default defineComponent({
@@ -66,6 +64,14 @@ export default defineComponent({
     addTemperature() {
       // Implement your functionality here
       console.log("Add temperature clicked");
+      manager
+        .getNewValue(USER, ROOM, DEVICE)
+        .then((result) => {})
+        .catch((error) => {
+          console.error("Error asking data:", error);
+          this.error = "Failed to load data. Please try again later.";
+          this.loading = false;
+        });
     },
 
     refreshData() {

web-app/src/Measures/TimeSeriesManager.ts

@@ -2,10 +2,61 @@ import { Prop } from "vue";
 import { Serie } from "./Serie";
 import { HttpClient } from "../Services/HttpClient";
 import { TEMPERATURE, HUMIDITY, TYPE, VALUE } from "../const";
+import { ref } from "vue";
 
 export class TimeSeriesManager {
   private client: HttpClient;
 
+  selected_user = {
+    user: "Rémi",
+    tag: "remi",
+  };
+  selected_room = {
+    room: "Bedroom",
+    tag: "Bedroom",
+  };
+  selected_device = {
+    device: "Door sensor",
+    tag: "DoorSensor",
+  };
+
+  user_options = [
+    {
+      user: "Rémi",
+      tag: "remi",
+    },
+    {
+      user: "Sylvan",
+      tag: "sylvan",
+    },
+  ];
+
+  room_options = [
+    {
+      room: "23N309",
+      tag: "23N309",
+    },
+    {
+      room: "Bedroom",
+      tag: "Bedroom",
+    },
+    {
+      room: "Terrasse",
+      tag: "Terrasse",
+    },
+  ];
+
+  device_options = [
+    {
+      device: "Door sensor",
+      tag: "DoorSensor",
+    },
+    {
+      device: "Shed",
+      tag: "Shed",
+    },
+  ];
+
   constructor(client: HttpClient) {
     this.client = client;
   }
@@ -16,7 +67,11 @@ export class TimeSeriesManager {
     device: string
   ): Promise<Serie[]> {
     return this.client
-      .getValues(user, room, device)
+      .getValues(
+        this.selected_user.tag,
+        this.selected_room.tag,
+        this.selected_device.tag
+      )
       .then((response) => {
         // Filter temperature records
         let temperatureRecords = response.data.filter(

web-app/src/components/ControlPanel.vue

@@ -4,28 +4,61 @@
       Add Temperature
     </button>
 
-    <div class="sensor-selector">
-      <h3>Sensors</h3>
-      <div class="sensor-options">
-        <label class="sensor-option">
-          <input type="checkbox" :checked="showTemperature" />
-          <span>Temperature</span>
-        </label>
-        <label class="sensor-option">
-          <input type="checkbox" :checked="showHumidity" />
-          <span>Humidity</span>
-        </label>
-      </div>
-    </div>
-
     <button @click="$emit('refresh')" class="refresh-button">
       <span class="button-icon">↻</span> Refresh Data
     </button>
   </div>
+
+  <div>
+      <span>
+        <multiselect
+        id="user-select"
+        v-model="manager.selected_user"
+        :options="manager.user_options"
+        :multiple="false"
+        :group-select="false"
+        placeholder="User"
+        track-by="user"
+        label="user"
+        </multiselect>
+      </span>
+      <span>
+        <multiselect
+        id="room-select"
+        v-model="manager.selected_room"
+        :options="manager.room_options"
+        :multiple="false"
+        :group-select="false"
+        placeholder="Room"
+        track-by="room"
+        label="room"
+        </multiselect>
+      </span>
+      <span>
+        <multiselect
+        id="device-select"
+        v-model="manager.selected_device"
+        :options="manager.device_options"
+        :close-on-select="true"
+        :multiple="false"
+        :group-select="false"
+        placeholder="Device"
+        track-by="device"
+        label="device"
+        </multiselect>
+      </span>
+  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import Multiselect from "vue-multiselect";
+import "vue-multiselect/dist/vue-multiselect.css"; // Add
+import { ref } from "vue";
+import { TimeSeriesManager } from "@/Measures/TimeSeriesManager";
+
+let options = [{ code: "CA", country: "Canada" }];
+
 
 export default defineComponent({
   name: "ControlPanel",
@@ -38,6 +71,11 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    manager: {
+      type: TimeSeriesManager,
+      required: true,
+    }
+
   },
   emits: [
     "add-temperature",
@@ -46,6 +84,14 @@ export default defineComponent({
     "refresh",
     "simulate-data",
   ],
+  components: {
+    Multiselect,
+  },
+  methods: {
+    setSelected(value: any) {
+      //  trigger a mutation, or dispatch an action
+    },
+  },
 });
 </script>
 

web-app/src/shims-vue.d.ts

@@ -1,6 +0,0 @@
-/* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}