ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-16 10:58:32 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

More new UI

Browse Source
This commit is contained in:
Chris Kaczor
2024-03-11 01:44:32 +00:00
parent 69379d761f
commit 21f5522950
11 changed files with 615 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
WebDisplay/src/pages/power.vue
View File

@@ -4,7 +4,9 @@
import { usePowerStore } from '@/stores/powerStore';
import { useWeatherStore } from '@/stores/weatherStore';
import ValueChart from '../components/ValueChart.vue';
import TimeRange from '@/components/TimeRange.vue';
import WeatherValueType from '@/models/weather/weather-value-type';
import TimeSpan from '@/models/time-span';
const powerStore = usePowerStore();
const weatherStore = useWeatherStore();
@@ -20,66 +22,96 @@
const lightSeries = { name: 'Average Light', data: [] as number[] };
const end = new Date();
const start = subHours(end, 24);
const end = ref(new Date());
const start = ref(subHours(end.value, 24));
const timeSpan = ref(TimeSpan.Last24Hours);
powerStore.getReadingHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
groupedReadingsList.forEach((groupedReadings) => {
powerCategories.push(new Date(groupedReadings.bucket).getTime());
const load = () => {
powerReady.value = false;
powerCategories.length = 0;
generationSeries.data.length = 0;
consumptionSeries.data.length = 0;
generationSeries.data.push(groupedReadings.averageGeneration);
consumptionSeries.data.push(groupedReadings.averageConsumption);
lightReady.value = false;
lightCategories.length = 0;
lightSeries.data.length = 0;
powerStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
groupedReadingsList.forEach((groupedReadings) => {
powerCategories.push(new Date(groupedReadings.bucket).getTime());
generationSeries.data.push(groupedReadings.averageGeneration);
consumptionSeries.data.push(groupedReadings.averageConsumption);
});
powerReady.value = true;
});
powerReady.value = true;
});
weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => {
groupedReadingsList.forEach((groupedReadings) => {
lightCategories.push(new Date(groupedReadings.bucket).getTime());
weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start, end, 15).then((groupedReadingsList) => {
groupedReadingsList.forEach((groupedReadings) => {
lightCategories.push(new Date(groupedReadings.bucket).getTime());
lightSeries.data.push(groupedReadings.averageValue);
});
lightSeries.data.push(groupedReadings.averageValue);
lightReady.value = true;
});
};
lightReady.value = true;
});
load();
</script>
<template>
<v-container
fluid
class="container">
<v-row
dense
align="start">
<v-col
sm="6"
cols="12">
<ValueChart
:ready="powerReady"
type="line"
title="Power"
unit=" W"
group="power"
:y-axis-decimal-points="0"
:value-decimal-points="0"
:categories="powerCategories"
:series="[generationSeries, consumptionSeries]"></ValueChart>
</v-col>
<v-col
sm="6"
cols="12">
<ValueChart
:ready="lightReady"
type="line"
title="Light"
unit=" lx"
group="power"
:categories="lightCategories"
:series="[lightSeries]">
</ValueChart>
</v-col>
</v-row>
<TimeRange
:time-span="timeSpan"
:start="start"
:end="end"
@change="
(value) => {
timeSpan = value.timeSpan;
start = value.start;
end = value.end;
load();
}
"
@refresh="load"></TimeRange>
<div class="content">
<v-row
dense
align="start">
<v-col
sm="6"
cols="12">
<ValueChart
:ready="powerReady"
type="line"
title="Power"
unit=" W"
group="power"
:y-axis-decimal-points="0"
:value-decimal-points="0"
:categories="powerCategories"
:series="[generationSeries, consumptionSeries]"></ValueChart>
</v-col>
<v-col
sm="6"
cols="12">
<ValueChart
:ready="lightReady"
type="line"
title="Light"
unit=" lx"
group="power"
:categories="lightCategories"
:series="[lightSeries]">
</ValueChart>
</v-col>
</v-row>
</div>
</v-container>
</template>
@@ -87,5 +119,10 @@
.container {
height: 100%;
background-color: #fafafa;
padding: 0;
}
.content {
padding: 10px;
}
</style>