feat(web-app): plot humidity and temperature

web-app/src/App.vue

@@ -1,53 +1,146 @@
 <template>
-  <div style="text-align: center">
-    <h1>Home Monitor</h1>
-    <br />
-    <!-- <Scatter :data="chartSeries" :options="options" /> -->
-    <button @click="addTemperature">Add Temperature</button>
+  <div class="app-container">
+    <!-- Header Section -->
+    <header class="header">
+      <h1>Home Monitor</h1>
+    </header>
+
+    <!-- Main Content Section -->
+    <div class="main-content">
+      <!-- Left Sidebar with Controls -->
+      <div class="sidebar">
+        <ControlPanel
+          :show-temperature.sync="showTemperature"
+          :show-humidity.sync="showHumidity"
+          @add-temperature="addTemperature"
+          @refresh="refreshData"
+        />
+      </div>
+
+      <!-- Right Side Chart Area -->
+      <div class="chart-area">
+        <ChartComponent
+          :series="series"
+          :show-temperature="showTemperature"
+          :show-humidity="showHumidity"
+          :loading="loading"
+          :error="error"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import {
-  Chart as ChartJS,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Tooltip,
-  Legend,
-} from "chart.js";
-import { Scatter } from "vue-chartjs";
-
+import ChartComponent from "./components/ChartComponent.vue";
+import ControlPanel from "./components/ControlPanel.vue";
 import { HttpClient } from "./Services/HttpClient";
 import { TimeSeriesManager } from "./TimeSeriesManager";
 import { URL, USERNAME, PASSWORD, USER, ROOM, DEVICE, APP_NAME } from "./const";
+import { Serie } from "./Measures/Serie";
 
-const httpClient = new HttpClient(URL, USERNAME, PASSWORD);
-const manager = new TimeSeriesManager(httpClient);
-console.log(manager.getTimeSeriesData(USER, ROOM, DEVICE));
+let httpClient = new HttpClient(URL, USERNAME, PASSWORD);
+let manager = new TimeSeriesManager(httpClient);
 
 export default defineComponent({
   name: APP_NAME,
-  components: {},
+  components: {
+    ChartComponent,
+    ControlPanel,
+  },
   data() {
     return {
       manager,
+      series: [] as any[],
+      loading: true,
+      error: undefined as string | undefined,
+      showTemperature: true,
+      showHumidity: true,
     };
   },
   methods: {
-    addTemperature() {},
+    addTemperature() {
+      // Implement your functionality here
+      console.log("Add temperature clicked");
+    },
+
+    refreshData() {
+      console.log("Refreshing data...");
+      this.fetchData();
+    },
+
+    fetchData() {
+      this.loading = true;
+      this.error = undefined;
+
+      manager
+        .getTimeSeriesData(USER, ROOM, DEVICE)
+        .then((result) => {
+          this.series = result;
+          this.loading = false;
+        })
+        .catch((error) => {
+          console.error("Error fetching data:", error);
+          this.error = "Failed to load data. Please try again later.";
+          this.loading = false;
+        });
+    },
+  },
+  mounted() {
+    // Fetch data when component is mounted
+    this.fetchData();
   },
 });
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+.app-container {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+.header {
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  height: 100%;
+  overflow: hidden;
+}
+
+.sidebar {
+  background-color: #f8f9fa;
+  border-right: 1px solid #e9ecef;
+  padding: 1.25rem;
+  overflow-y: auto;
+}
+
+.chart-area {
+  padding: 1.5rem;
+  height: 100%;
+  overflow-y: auto;
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .sidebar {
+    border-right: none;
+    border-bottom: 1px solid #e9ecef;
+    padding: 1rem;
+  }
 }
 </style>