mirror of
https://github.com/ckaczor/HomeMonitor.git
synced 2026-01-22 17:23:52 -05:00
More UI work and start preparing for deployment
This commit is contained in:
@@ -4,30 +4,34 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-container fluid class="container">
|
||||
<v-row dense align="start">
|
||||
<v-col cols="3">
|
||||
<CurrentWeather></CurrentWeather>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<Almanac></Almanac>
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<CurrentPower></CurrentPower>
|
||||
</v-col>
|
||||
<v-col cols="2">
|
||||
<CurrentLaundryStatus></CurrentLaundryStatus>
|
||||
</v-col>
|
||||
<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
|
||||
fluid
|
||||
class="container">
|
||||
<v-card class="current-weather">
|
||||
<CurrentWeather></CurrentWeather>
|
||||
</v-card>
|
||||
<v-card class="almanac">
|
||||
<Almanac></Almanac>
|
||||
</v-card>
|
||||
<v-card class="current-power">
|
||||
<CurrentPower></CurrentPower>
|
||||
</v-card>
|
||||
<v-card class="current-laundry-status">
|
||||
<CurrentLaundryStatus></CurrentLaundryStatus>
|
||||
</v-card>
|
||||
<v-card class="weather-summary">
|
||||
<WeatherSummary></WeatherSummary>
|
||||
</v-card>
|
||||
<v-card class="upstairs">
|
||||
<Indoor
|
||||
title="Upstairs"
|
||||
deviceName="main"></Indoor>
|
||||
</v-card>
|
||||
<v-card class="downstairs">
|
||||
<Indoor
|
||||
title="Downstairs"
|
||||
deviceName="basement"></Indoor>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -36,4 +40,66 @@
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, max-content);
|
||||
grid-template-rows: repeat(5, max-content);
|
||||
gap: 15px 15px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
'current-weather current-weather almanac almanac current-power'
|
||||
'current-weather current-weather almanac almanac current-laundry-status'
|
||||
'weather-summary weather-summary weather-summary upstairs downstairs'
|
||||
'weather-summary weather-summary weather-summary . .'
|
||||
'. . . . .';
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.container {
|
||||
padding: 7px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, max-content);
|
||||
grid-template-rows: repeat(7, max-content);
|
||||
gap: 10px 0px;
|
||||
grid-template-areas:
|
||||
'current-weather'
|
||||
'almanac'
|
||||
'current-power'
|
||||
'current-laundry-status'
|
||||
'weather-summary'
|
||||
'upstairs'
|
||||
'downstairs';
|
||||
}
|
||||
}
|
||||
|
||||
.current-weather {
|
||||
grid-area: current-weather;
|
||||
}
|
||||
|
||||
.almanac {
|
||||
grid-area: almanac;
|
||||
}
|
||||
|
||||
.current-power {
|
||||
grid-area: current-power;
|
||||
}
|
||||
|
||||
.current-laundry-status {
|
||||
grid-area: current-laundry-status;
|
||||
}
|
||||
|
||||
.weather-summary {
|
||||
grid-area: weather-summary;
|
||||
}
|
||||
|
||||
.upstairs {
|
||||
grid-area: upstairs;
|
||||
}
|
||||
|
||||
.downstairs {
|
||||
grid-area: downstairs;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,43 +16,43 @@
|
||||
const start = ref(subHours(end.value, 24));
|
||||
const timeSpan = ref(TimeSpan.Last24Hours);
|
||||
|
||||
const categories: number[] = [];
|
||||
const categories = ref<number[]>([]);
|
||||
|
||||
const mainTemperatureSeries = { name: 'Upstairs', data: [] as number[] };
|
||||
const basementTemperatureSeries = { name: 'Downstairs', data: [] as number[] };
|
||||
const mainTemperatureSeries = ref({ name: 'Upstairs', data: [] as number[] });
|
||||
const basementTemperatureSeries = ref({ name: 'Downstairs', data: [] as number[] });
|
||||
|
||||
const mainHumiditySeries = { name: 'Upstairs', data: [] as number[] };
|
||||
const basementHumiditySeries = { name: 'Downstairs', data: [] as number[] };
|
||||
const mainHumiditySeries = ref({ name: 'Upstairs', data: [] as number[] });
|
||||
const basementHumiditySeries = ref({ name: 'Downstairs', data: [] as number[] });
|
||||
|
||||
const mainPressureSeries = { name: 'Upstairs', data: [] as number[] };
|
||||
const basementPressureSeries = { name: 'Downstairs', data: [] as number[] };
|
||||
const mainPressureSeries = ref({ name: 'Upstairs', data: [] as number[] });
|
||||
const basementPressureSeries = ref({ name: 'Downstairs', data: [] as number[] });
|
||||
|
||||
const load = () => {
|
||||
ready.value = false;
|
||||
|
||||
categories.length = 0;
|
||||
|
||||
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) => {
|
||||
categories.value.length = 0;
|
||||
|
||||
mainTemperatureSeries.value.data.length = 0;
|
||||
basementTemperatureSeries.value.data.length = 0;
|
||||
|
||||
mainHumiditySeries.value.data.length = 0;
|
||||
basementHumiditySeries.value.data.length = 0;
|
||||
|
||||
mainPressureSeries.value.data.length = 0;
|
||||
basementPressureSeries.value.data.length = 0;
|
||||
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
if (groupedReadings.name === 'main') {
|
||||
categories.push(new Date(groupedReadings.bucket).getTime());
|
||||
categories.value.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
mainTemperatureSeries.data.push(ConvertCToF(groupedReadings.averageTemperature));
|
||||
mainHumiditySeries.data.push(groupedReadings.averageHumidity);
|
||||
mainPressureSeries.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
|
||||
mainTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature));
|
||||
mainHumiditySeries.value.data.push(groupedReadings.averageHumidity);
|
||||
mainPressureSeries.value.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));
|
||||
basementTemperatureSeries.value.data.push(ConvertCToF(groupedReadings.averageTemperature));
|
||||
basementHumiditySeries.value.data.push(groupedReadings.averageHumidity);
|
||||
basementPressureSeries.value.data.push(ConvertMillibarToInchesOfMercury(groupedReadings.averagePressure));
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -4,28 +4,28 @@
|
||||
import { useWeatherStore } from '@/stores/weatherStore';
|
||||
import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
|
||||
import ValueChart from '../components/ValueChart.vue';
|
||||
import WindDirectionNumber from '@/models/weather/wind-direction-number';
|
||||
import TimeRange from '@/components/TimeRange.vue';
|
||||
import TimeSpan from '@/models/time-span';
|
||||
import { ConvertDegreesToShortLabel, ConvertWindDirectionToDegrees } from '@/windConverter';
|
||||
|
||||
const weatherStore = useWeatherStore();
|
||||
|
||||
const readingsReady = ref(false);
|
||||
const windReady = ref(false);
|
||||
|
||||
const readingsCategories: number[] = [];
|
||||
const windCategories: number[] = [];
|
||||
const readingsCategories = ref<number[]>([]);
|
||||
const windCategories = ref<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 temperatureSeries = ref({ name: 'Average Temperature', data: [] as number[] });
|
||||
const humiditySeries = ref({ name: 'Average Humidity', data: [] as number[] });
|
||||
const pressureSeries = ref({ name: 'Average Pressure', data: [] as number[] });
|
||||
const lightSeries = ref({ name: 'Average Light', data: [] as number[] });
|
||||
const rainSeries = ref({ 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 windDirectionSeries = { name: 'Average Direction', data: [] as number[] };
|
||||
const windMinimumSeries = ref({ name: 'Minimum', data: [] as number[] });
|
||||
const windAverageSeries = ref({ name: 'Average', data: [] as number[] });
|
||||
const windMaximumSeries = ref({ name: 'Maximum', data: [] as number[] });
|
||||
const windDirectionSeries = ref({ name: 'Average Direction', data: [] as number[] });
|
||||
|
||||
const end = ref(new Date());
|
||||
const start = ref(subHours(end.value, 24));
|
||||
@@ -33,43 +33,44 @@
|
||||
|
||||
const load = () => {
|
||||
readingsReady.value = false;
|
||||
readingsCategories.length = 0;
|
||||
temperatureSeries.data.length = 0;
|
||||
humiditySeries.data.length = 0;
|
||||
pressureSeries.data.length = 0;
|
||||
lightSeries.data.length = 0;
|
||||
rainSeries.data.length = 0;
|
||||
|
||||
windReady.value = false;
|
||||
windCategories.length = 0;
|
||||
windMinimumSeries.data.length = 0;
|
||||
windAverageSeries.data.length = 0;
|
||||
windMaximumSeries.data.length = 0;
|
||||
windDirectionSeries.data.length = 0;
|
||||
|
||||
weatherStore.getReadingHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
readingsCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
readingsCategories.value.length = 0;
|
||||
temperatureSeries.value.data.length = 0;
|
||||
humiditySeries.value.data.length = 0;
|
||||
pressureSeries.value.data.length = 0;
|
||||
lightSeries.value.data.length = 0;
|
||||
rainSeries.value.data.length = 0;
|
||||
|
||||
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);
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
readingsCategories.value.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
temperatureSeries.value.data.push(groupedReadings.averageTemperature);
|
||||
humiditySeries.value.data.push(groupedReadings.averageHumidity);
|
||||
pressureSeries.value.data.push(ConvertPascalToInchesOfMercury(groupedReadings.averagePressure));
|
||||
lightSeries.value.data.push(groupedReadings.averageLightLevel);
|
||||
rainSeries.value.data.push(groupedReadings.rainTotal);
|
||||
});
|
||||
|
||||
readingsReady.value = true;
|
||||
});
|
||||
|
||||
weatherStore.getWindHistoryGrouped(start.value, end.value, 15).then((groupedReadingsList) => {
|
||||
windCategories.value.length = 0;
|
||||
windMinimumSeries.value.data.length = 0;
|
||||
windAverageSeries.value.data.length = 0;
|
||||
windMaximumSeries.value.data.length = 0;
|
||||
windDirectionSeries.value.data.length = 0;
|
||||
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
windCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
windCategories.value.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
windMinimumSeries.data.push(groupedReadings.minimumSpeed);
|
||||
windAverageSeries.data.push(groupedReadings.averageSpeed);
|
||||
windMaximumSeries.data.push(groupedReadings.maximumSpeed);
|
||||
windMinimumSeries.value.data.push(groupedReadings.minimumSpeed);
|
||||
windAverageSeries.value.data.push(groupedReadings.averageSpeed);
|
||||
windMaximumSeries.value.data.push(groupedReadings.maximumSpeed);
|
||||
|
||||
windDirectionSeries.data.push(groupedReadings.averageDirection);
|
||||
windDirectionSeries.value.data.push(ConvertWindDirectionToDegrees(groupedReadings.averageDirection));
|
||||
});
|
||||
|
||||
windReady.value = true;
|
||||
@@ -200,11 +201,11 @@
|
||||
title="Wind Direction"
|
||||
unit=""
|
||||
group="outdoor"
|
||||
:tick-amount="3"
|
||||
:marker-size="3"
|
||||
:line-size="0"
|
||||
:y-axis-minimum="WindDirectionNumber.Min"
|
||||
:y-axis-maximum="WindDirectionNumber.Max"
|
||||
:tick-amount="4"
|
||||
:y-axis-minimum="0"
|
||||
:y-axis-maximum="360"
|
||||
:y-axis-label-formatter="ConvertDegreesToShortLabel"
|
||||
:y-axis-value-formatter="ConvertDegreesToShortLabel"
|
||||
:categories="windCategories"
|
||||
:series="[windDirectionSeries]">
|
||||
</ValueChart>
|
||||
|
||||
@@ -14,13 +14,13 @@
|
||||
const powerReady = ref(false);
|
||||
const lightReady = ref(false);
|
||||
|
||||
const powerCategories: number[] = [];
|
||||
const lightCategories: number[] = [];
|
||||
const powerCategories = ref<number[]>([]);
|
||||
const lightCategories = ref<number[]>([]);
|
||||
|
||||
const generationSeries = { name: 'Generation', data: [] as number[] };
|
||||
const consumptionSeries = { name: 'Consumption', data: [] as number[] };
|
||||
const generationSeries = ref({ name: 'Generation', data: [] as number[] });
|
||||
const consumptionSeries = ref({ name: 'Consumption', data: [] as number[] });
|
||||
|
||||
const lightSeries = { name: 'Average Light', data: [] as number[] };
|
||||
const lightSeries = ref({ name: 'Average Light', data: [] as number[] });
|
||||
|
||||
const end = ref(new Date());
|
||||
const start = ref(subHours(end.value, 24));
|
||||
@@ -28,30 +28,31 @@
|
||||
|
||||
const load = () => {
|
||||
powerReady.value = false;
|
||||
powerCategories.length = 0;
|
||||
generationSeries.data.length = 0;
|
||||
consumptionSeries.data.length = 0;
|
||||
|
||||
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());
|
||||
powerCategories.value.length = 0;
|
||||
generationSeries.value.data.length = 0;
|
||||
consumptionSeries.value.data.length = 0;
|
||||
|
||||
generationSeries.data.push(groupedReadings.averageGeneration);
|
||||
consumptionSeries.data.push(groupedReadings.averageConsumption);
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
powerCategories.value.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
generationSeries.value.data.push(groupedReadings.averageGeneration);
|
||||
consumptionSeries.value.data.push(groupedReadings.averageConsumption);
|
||||
});
|
||||
|
||||
powerReady.value = true;
|
||||
});
|
||||
|
||||
weatherStore.getReadingValueHistoryGrouped(WeatherValueType.Light, start.value, end.value, 15).then((groupedReadingsList) => {
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
lightCategories.push(new Date(groupedReadings.bucket).getTime());
|
||||
lightCategories.value.length = 0;
|
||||
lightSeries.value.data.length = 0;
|
||||
|
||||
lightSeries.data.push(groupedReadings.averageValue);
|
||||
groupedReadingsList.forEach((groupedReadings) => {
|
||||
lightCategories.value.push(new Date(groupedReadings.bucket).getTime());
|
||||
|
||||
lightSeries.value.data.push(groupedReadings.averageValue);
|
||||
});
|
||||
|
||||
lightReady.value = true;
|
||||
|
||||
Reference in New Issue
Block a user