mirror of
https://github.com/ckaczor/HomeMonitor.git
synced 2026-01-23 01:25:39 -05:00
Bunch more new UI
This commit is contained in:
@@ -23,6 +23,12 @@
|
||||
<v-col cols="4">
|
||||
<WeatherSummary></WeatherSummary>
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<Indoor title="Upstairs" deviceName="main"></Indoor>
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<Indoor title="Downstairs" deviceName="basement"></Indoor>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
99
WebDisplay/src/pages/indoor.vue
Normal file
99
WebDisplay/src/pages/indoor.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { subHours } from 'date-fns';
|
||||
import { createIndoorStore } from '@/stores/indoorStore';
|
||||
import { ConvertCToF } from '@/temperatureConverter';
|
||||
import { ConvertMillibarToInchesOfMercury } from '@/pressureConverter';
|
||||
import ValueChart from '../components/ValueChart.vue';
|
||||
|
||||
const indoorStore = createIndoorStore('charts');
|
||||
|
||||
const ready = ref(false);
|
||||
|
||||
const categories: number[] = [];
|
||||
|
||||
const mainTemperatureSeries = { name: 'Upstairs', data: [] as number[] };
|
||||
const basementTemperatureSeries = { name: 'Downstairs', data: [] as number[] };
|
||||
|
||||
const mainHumiditySeries = { name: 'Upstairs', data: [] as number[] };
|
||||
const basementHumiditySeries = { name: 'Downstairs', data: [] as number[] };
|
||||
|
||||
const mainPressureSeries = { name: 'Upstairs', data: [] as number[] };
|
||||
const basementPressureSeries = { name: 'Downstairs', data: [] as number[] };
|
||||
|
||||
const end = new Date();
|
||||
const start = subHours(end, 24);
|
||||
|
||||
indoorStore.getReadingValueHistoryGrouped(start, end, 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;
|
||||
});
|
||||
</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>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<v-container class="fill-height">
|
||||
<v-responsive class="align-center text-center fill-height">
|
||||
Inside
|
||||
</v-responsive>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
160
WebDisplay/src/pages/outdoor.vue
Normal file
160
WebDisplay/src/pages/outdoor.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { subHours } from 'date-fns';
|
||||
import { useWeatherStore } from '@/stores/weatherStore';
|
||||
import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
|
||||
import ValueChart from '../components/ValueChart.vue';
|
||||
|
||||
const weatherStore = useWeatherStore();
|
||||
|
||||
const readingsReady = ref(false);
|
||||
const windReady = ref(false);
|
||||
|
||||
const readingsCategories: number[] = [];
|
||||
const windCategories: number[] = [];
|
||||
|
||||
const temperatureSeries = { name: 'Average Temperature', data: [] as number[] };
|
||||
const humiditySeries = { name: 'Average Humidity', data: [] as number[] };
|
||||
const pressureSeries = { name: 'Average Pressure', data: [] as number[] };
|
||||
const lightSeries = { name: 'Average Light', data: [] as number[] };
|
||||
const rainSeries = { name: 'Total Rain', data: [] as number[] };
|
||||
|
||||
const windMinimumSeries = { name: 'Minimum', data: [] as number[] };
|
||||
const windAverageSeries = { name: 'Average', data: [] as number[] };
|
||||
const windMaximumSeries = { name: 'Maximum', data: [] as number[] };
|
||||
|
||||
const end = new Date();
|
||||
const start = subHours(end, 24);
|
||||
|
||||
weatherStore.getReadingHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
readingsCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
temperatureSeries.data.push(groupedReadings.averageTemperature);
|
||||
humiditySeries.data.push(groupedReadings.averageHumidity);
|
||||
pressureSeries.data.push(ConvertPascalToInchesOfMercury(groupedReadings.averagePressure));
|
||||
lightSeries.data.push(groupedReadings.averageLightLevel);
|
||||
rainSeries.data.push(groupedReadings.rainTotal);
|
||||
});
|
||||
|
||||
readingsReady.value = true;
|
||||
});
|
||||
|
||||
weatherStore.getWindHistoryGrouped(start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
windCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
windMinimumSeries.data.push(groupedReadings.minimumSpeed);
|
||||
windAverageSeries.data.push(groupedReadings.averageSpeed);
|
||||
windMaximumSeries.data.push(groupedReadings.maximumSpeed);
|
||||
});
|
||||
|
||||
windReady.value = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
class="container">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Temperature"
|
||||
unit="°F"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[temperatureSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Humidity"
|
||||
unit="%"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[humiditySeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Pressure"
|
||||
unit='"'
|
||||
group="outdoor"
|
||||
:y-axis-decimal-points="1"
|
||||
:categories="readingsCategories"
|
||||
:series="[pressureSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Light"
|
||||
unit=" lx"
|
||||
group="outdoor"
|
||||
:categories="readingsCategories"
|
||||
:series="[lightSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="readingsReady"
|
||||
type="line"
|
||||
title="Rain"
|
||||
unit='"'
|
||||
group="outdoor"
|
||||
:stepline="true"
|
||||
:y-axis-decimal-points="2"
|
||||
:categories="readingsCategories"
|
||||
:series="[rainSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
<v-col
|
||||
sm="4"
|
||||
xl="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="windReady"
|
||||
type="line"
|
||||
title="Wind"
|
||||
unit=" MPH"
|
||||
group="outdoor"
|
||||
:y-axis-decimal-points="0"
|
||||
:categories="windCategories"
|
||||
:series="[windMinimumSeries, windAverageSeries, windMaximumSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<v-container class="fill-height">
|
||||
<v-responsive class="align-center text-center fill-height">
|
||||
Outside
|
||||
</v-responsive>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
93
WebDisplay/src/pages/power.vue
Normal file
93
WebDisplay/src/pages/power.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { subHours } from 'date-fns';
|
||||
import { usePowerStore } from '@/stores/powerStore';
|
||||
import { useWeatherStore } from '@/stores/weatherStore';
|
||||
import ValueChart from '../components/ValueChart.vue';
|
||||
import WeatherValueType from '@/models/weather/weather-value-type';
|
||||
|
||||
const powerStore = usePowerStore();
|
||||
const weatherStore = useWeatherStore();
|
||||
|
||||
const powerReady = ref(false);
|
||||
const lightReady = ref(false);
|
||||
|
||||
const powerCategories: number[] = [];
|
||||
const lightCategories: number[] = [];
|
||||
|
||||
const generationSeries = { name: 'Generation', data: [] as number[] };
|
||||
const consumptionSeries = { name: 'Consumption', data: [] as number[] };
|
||||
|
||||
const lightSeries = { name: 'Average Light', data: [] as number[] };
|
||||
|
||||
const end = new Date();
|
||||
const start = subHours(end, 24);
|
||||
|
||||
powerStore.getReadingHistoryGrouped(start, end, 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;
|
||||
});
|
||||
|
||||
weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start, end, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
lightCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
lightSeries.data.push(groupedReadings.averageValue);
|
||||
});
|
||||
|
||||
lightReady.value = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container
|
||||
fluid
|
||||
class="container">
|
||||
<v-row
|
||||
dense
|
||||
align="start">
|
||||
<v-col
|
||||
sm="4"
|
||||
md="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="4"
|
||||
md="6"
|
||||
cols="12">
|
||||
<ValueChart
|
||||
:ready="lightReady"
|
||||
type="line"
|
||||
title="Light"
|
||||
unit=" lx"
|
||||
group="power"
|
||||
:categories="lightCategories"
|
||||
:series="[lightSeries]">
|
||||
</ValueChart>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user