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

155
WebDisplay/src/pages/indoor.vue
View File

@@ -5,11 +5,17 @@
import { ConvertCToF } from '@/temperatureConverter';
import { ConvertMillibarToInchesOfMercury } from '@/pressureConverter';
import ValueChart from '../components/ValueChart.vue';
import TimeRange from '@/components/TimeRange.vue';
import TimeSpan from '@/models/time-span';
const indoorStore = createIndoorStore('charts');
const ready = ref(false);
const end = ref(new Date());
const start = ref(subHours(end.value, 24));
const timeSpan = ref(TimeSpan.Last24Hours);
const categories: number[] = [];
const mainTemperatureSeries = { name: 'Upstairs', data: [] as number[] };
@@ -21,73 +27,103 @@
const mainPressureSeries = { name: 'Upstairs', data: [] as number[] };
const basementPressureSeries = { name: 'Downstairs', data: [] as number[] };
const end = new Date();
const start = subHours(end, 24);
const load = () => {
ready.value = false;
indoorStore.getReadingValueHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
groupedReadingsList.forEach((groupedReadings) => {
if (groupedReadings.name === 'main') {
categories.push(new Date(groupedReadings.bucket).getTime());
categories.length = 0;
mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
mainHumiditySeries.data.push(groupedReadings.averageHumidity);
mainPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
} else if (groupedReadings.name === 'basement') {
basementTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
basementHumiditySeries.data.push(groupedReadings.averageHumidity);
basementPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
}
mainTemperatureSeries.data.length = 0;
basementTemperatureSeries.data.length = 0;
mainHumiditySeries.data.length = 0;
basementHumiditySeries.data.length = 0;
mainPressureSeries.data.length = 0;
basementPressureSeries.data.length = 0;
indoorStore.getReadingValueHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
groupedReadingsList.forEach((groupedReadings) => {
if (groupedReadings.name === 'main') {
categories.push(new Date(groupedReadings.bucket).getTime());
mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
mainHumiditySeries.data.push(groupedReadings.averageHumidity);
mainPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
} else if (groupedReadings.name === 'basement') {
basementTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
basementHumiditySeries.data.push(groupedReadings.averageHumidity);
basementPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
}
});
ready.value = true;
});
};
ready.value = true;
});
load();
</script>
<template>
<v-container
fluid
class="container">
<v-row
dense
align="start">
<v-col
sm="6"
cols="12">
<ValueChart
:ready="ready"
type="line"
title="Temperature"
unit="°F"
group="indoor"
:categories="categories"
:series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart>
</v-col>
<v-col
sm="6"
cols="12">
<ValueChart
:ready="ready"
type="line"
title="Humidity"
unit="%"
group="indoor"
:categories="categories"
:series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
</v-col>
<v-col
sm="6"
cols="12">
<ValueChart
:ready="ready"
type="line"
title="Pressure"
unit='"'
group="indoor"
:y-axis-decimal-points="1"
:categories="categories"
:series="[mainPressureSeries, basementPressureSeries]"></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="ready"
type="line"
title="Temperature"
unit="°F"
group="indoor"
:categories="categories"
:series="[mainTemperatureSeries, basementTemperatureSeries]"></ValueChart>
</v-col>
<v-col
sm="6"
cols="12">
<ValueChart
:ready="ready"
type="line"
title="Humidity"
unit="%"
group="indoor"
:categories="categories"
:series="[mainHumiditySeries, basementHumiditySeries]"></ValueChart>
</v-col>
<v-col
sm="6"
cols="12">
<ValueChart
:ready="ready"
type="line"
title="Pressure"
unit='"'
group="indoor"
:y-axis-decimal-points="1"
:categories="categories"
:series="[mainPressureSeries, basementPressureSeries]"></ValueChart>
</v-col>
</v-row>
</div>
</v-container>
</template>
@@ -95,5 +131,10 @@
.container {
height: 100%;
background-color: #fafafa;
padding: 0;
}
.content {
padding: 10px;
}
</style>