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

2025-05-06 17:12:54 +02:00
parent d6e3a5c1e0
commit c8c719099e
7 changed files with 242 additions and 51 deletions
--- a/web-app/package-lock.json
+++ b/web-app/package-lock.json
@@ -9,7 +9,10 @@
      "version": "0.1.0",
      "dependencies": {
        "axios": "^1.9.0",
-        "vue": "^3.2.13"
+        "chartjs": "^0.3.24",
+        "dotenv": "^16.5.0",
+        "vue": "^3.2.13",
+        "vue-chartjs": "^5.3.2"
      },
      "devDependencies": {
        "@vue/cli-plugin-typescript": "~5.0.0",
@@ -362,6 +365,13 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/@leichtgewicht/ip-codec": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -920,6 +930,16 @@
        }
      }
    },
+    "node_modules/@vue/cli-service/node_modules/dotenv": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
+      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/@vue/cli-shared-utils": {
      "version": "5.0.8",
      "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-5.0.8.tgz",
@@ -1806,6 +1826,31 @@
        "readable-stream": "^3.4.0"
      }
    },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
    "node_modules/bluebird": {
      "version": "3.7.2",
      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -1930,31 +1975,6 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
-    "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
    "node_modules/buffer-from": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -2081,6 +2101,25 @@
        "node": ">=8"
      }
    },
+    "node_modules/chart.js": {
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.9.tgz",
+      "integrity": "sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
+    "node_modules/chartjs": {
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/chartjs/-/chartjs-0.3.24.tgz",
+      "integrity": "sha512-h6G9qcDqmFYnSWqjWCzQMeOLiypS+pM6Fq2Rj7LPty8Kjx5yHonwwJ7oEHImZpQ2u9Pu36XGYfardvvBiQVrhg==",
+      "license": "MIT"
+    },
    "node_modules/chokidar": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -3199,13 +3238,15 @@
      }
    },
    "node_modules/dotenv": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
-      "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==",
-      "dev": true,
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
      "license": "BSD-2-Clause",
      "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
      }
    },
    "node_modules/dotenv-expand": {
@@ -8493,6 +8534,16 @@
        }
      }
    },
+    "node_modules/vue-chartjs": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.2.tgz",
+      "integrity": "sha512-NrkbRRoYshbXbWqJkTN6InoDVwVb90C0R7eAVgMWcB9dPikbruaOoTFjFYHE/+tNPdIe6qdLCDjfjPHQ0fw4jw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "vue": "^3.0.0-0 || ^2.7.0"
+      }
+    },
    "node_modules/vue-hot-reload-api": {
      "version": "2.3.4",
      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -3,12 +3,15 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --env-mode",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "axios": "^1.9.0",
-    "vue": "^3.2.13"
+    "chartjs": "^0.3.24",
+    "dotenv": "^16.5.0",
+    "vue": "^3.2.13",
+    "vue-chartjs": "^5.3.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "~5.0.0",
--- a/web-app/src/App.vue
+++ b/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",
--- a/web-app/src/Measures/Serie.ts
+++ b/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,
+      };
+    }
+  }
+}
--- a/web-app/src/Services/HttpClient.ts
+++ b/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;
+  }
 }
--- a/web-app/src/TimeSeriesManager.ts
+++ b/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
+      });
+  }
+}
--- a/web-app/src/const.ts
+++ b/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";