147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<template>
|
|
<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 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";
|
|
|
|
let httpClient = new HttpClient(URL, USERNAME, PASSWORD);
|
|
let manager = new TimeSeriesManager(httpClient);
|
|
|
|
export default defineComponent({
|
|
name: APP_NAME,
|
|
components: {
|
|
ChartComponent,
|
|
ControlPanel,
|
|
},
|
|
data() {
|
|
return {
|
|
manager,
|
|
series: [] as any[],
|
|
loading: true,
|
|
error: undefined as string | undefined,
|
|
showTemperature: true,
|
|
showHumidity: true,
|
|
};
|
|
},
|
|
methods: {
|
|
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-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;
|
|
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>
|