feat(web-app): add get values and update dependencies

web-app/src/App.vue

@@ -6,19 +6,16 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import HelloWorld from "./components/HelloWorld.vue";
+import { HttpClient } from "./Services/HttpClient";
 
-import axios from "axios";
+const URL = "rest.mse.kb28.ch";
 
-axios
-  .get("https://rest.mse.kb28.ch/ping")
-  .then(function (response) {
-    // handle success
-    console.log(response);
-  })
-  .catch(function (error) {
-    // handle error
-    console.error(error);
-  });
+const username = process.env.VUE_APP_INFLUXDB_USER;
+const password = process.env.VUE_APP_INFLUXDB_PASSWORD;
+
+const httpClient = new HttpClient(URL, username, password);
+
+const series = httpClient.getValues();
 
 export default defineComponent({
   name: "App",

web-app/src/Measures/Serie.ts

@@ -0,0 +1,48 @@
+import { TEMPERATURE, HUMIDITY, TYPE, VALUE } from "../const";
+
+export class Serie {
+  private _type: string;
+  private _data: { time: number; value: number }[];
+
+  private _user: string;
+  private _room: string;
+  private _device: string;
+
+  constructor(
+    type: string,
+    data: { time: number; value: number }[],
+    user: string,
+    room: string,
+    device: string
+  ) {
+    this._type = type;
+    this._data = data;
+    this._user = user;
+    this._room = room;
+    this._device = device;
+  }
+
+  public getLabel(): string {
+    return `${this._user} - ${this._room} - ${this._device}`;
+  }
+
+  public getSerie(): any {
+    if (this._type === TEMPERATURE) {
+      return {
+        label: this.getLabel(),
+        data: this._data,
+        borderColor: "rgba(255, 99, 132, 1)",
+        backgroundColor: "rgba(255, 99, 132, 0.2)",
+        borderWidth: 1,
+      };
+    } else if (this._type === HUMIDITY) {
+      return {
+        label: this.getLabel(),
+        data: this._data,
+        borderColor: "rgba(54, 162, 235, 1)",
+        backgroundColor: "rgba(54, 162, 235, 0.2)",
+        borderWidth: 1,
+      };
+    }
+  }
+}

web-app/src/Services/HttpClient.ts

@@ -1,15 +1,19 @@
-import axios from "axios";
-
-const BASE = "https://";
-const PING = "ping";
-const RACLETTE = "raclette";
-const PONG = "pong";
+import axios, { AxiosResponse } from "axios";
+import { BASE, PING, RACLETTE, PONG } from "../const";
 
 export class HttpClient {
   private _url: string;
+  private _username: string | undefined;
+  private _password: string | undefined;
 
-  constructor(url: string) {
+  constructor(
+    url: string,
+    username: string | undefined,
+    password: string | undefined
+  ) {
     this._url = url;
+    this._username = username;
+    this._password = password;
   }
 
   async isConnected(): Promise<boolean> {
@@ -28,4 +32,26 @@ export class HttpClient {
     const response = await axios.get(`${BASE}${this._url}/${PING}`);
     return response.data;
   }
+
+  private getAuthHeader() {
+    return {
+      Authorization: `Basic ${btoa(`${this._username}:${this._password}`)}`,
+    };
+  }
+
+  async getValues(
+    user: string,
+    room: string,
+    device: string
+  ): Promise<AxiosResponse<any, any>> {
+    const response = await axios.get(`${BASE}${this._url}/${RACLETTE}`, {
+      headers: this.getAuthHeader(),
+      params: {
+        user: user,
+        room: room,
+        device: device,
+      },
+    });
+    return response;
+  }
 }

web-app/src/TimeSeriesManager.ts

@@ -0,0 +1,47 @@
+import { Prop } from "vue";
+import { Serie } from "./Measures/Serie";
+import { HttpClient } from "./Services/HttpClient";
+import { TEMPERATURE, HUMIDITY, TYPE, VALUE } from "./const";
+
+export class TimeSeriesManager {
+  private client: HttpClient;
+
+  constructor(client: HttpClient) {
+    this.client = client;
+  }
+
+  async getTimeSeriesData(
+    user: string,
+    room: string,
+    device: string
+  ): Promise<{ temperature: Serie; humidity: Serie }> {
+    return this.client
+      .getValues(user, room, device)
+      .then((response) => {
+        const serie_temperature = new Serie(
+          TEMPERATURE,
+          response.data.filter((x: any) => x[TYPE] === TEMPERATURE),
+          user,
+          room,
+          device
+        );
+
+        const serie_humidity = new Serie(
+          HUMIDITY,
+          response.data.filter((x: any) => x[TYPE] === HUMIDITY),
+          user,
+          room,
+          device
+        );
+
+        return {
+          temperature: serie_temperature,
+          humidity: serie_humidity,
+        };
+      })
+      .catch((error) => {
+        console.error("Error fetching time series data:", error);
+        throw error; // Re-throw to allow calling code to handle it
+      });
+  }
+}

web-app/src/const.ts

@@ -0,0 +1,19 @@
+export const URL = "rest.mse.kb28.ch";
+
+// load environment varaibles - need to have the prefix VUE_APP
+export const USERNAME = process.env.VUE_APP_INFLUXDB_USER;
+export const PASSWORD = process.env.VUE_APP_INFLUXDB_PASSWORD;
+
+export const HUMIDITY = "humidity";
+export const TEMPERATURE = "temperature";
+export const TYPE = "type";
+export const VALUE = "value";
+
+export const USER = "remi";
+export const ROOM = "Terrasse";
+export const DEVICE = "Shed";
+
+export const BASE = "https://";
+export const PING = "ping";
+export const RACLETTE = "raclette";
+export const PONG = "pong";