ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

Separate historical from current

Browse Source
This commit is contained in:
Chris Kaczor
2024-03-12 21:22:45 +00:00
parent 934e683f89
commit ec85be2096
8 changed files with 179 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
WebDisplay/src/App.vue
View File

@@ -19,11 +19,17 @@
density="compact"
nav>
<v-list-item
prepend-icon="mdi-view-dashboard"
title="Dashboard"
prepend-icon="mdi-information-outline"
title="Current"
to="/"
@click="drawer = false">
</v-list-item>
<v-list-item
prepend-icon="mdi-chart-box-outline"
title="Summary"
to="summary"
@click="drawer = false">
</v-list-item>
<v-list-item
prepend-icon="mdi-sun-thermometer"
title="Outdoor"

6
WebDisplay/src/components/Indoor.vue
View File

@@ -71,8 +71,10 @@
<td>{{ ConvertMillibarToInchesOfMercury(indoorStore.current.pressure).toFixed(2) }}"</td>
</tr>
<tr>
<td className="header">Air Quality</td>
<td :class="airQualityClass(indoorStore.current.airQualityIndex)" :title="indoorStore.current.airQualityIndex.toString()">
<td className="header">Air quality</td>
<td
:class="airQualityClass(indoorStore.current.airQualityIndex)"
:title="indoorStore.current.airQualityIndex.toString()">
{{ airQualityDescription(indoorStore.current.airQualityIndex) }}
</td>
</tr>

27
WebDisplay/src/components/WeatherSummary.vue
View File

@@ -1,24 +1,35 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
import { useWeatherStore } from '@/stores/weatherStore';
import { subHours } from 'date-fns';
import WeatherAggregates from '@/models/weather/weather-aggregates';
import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
import { ShortenWindDirection } from '@/windFormatter';
const props = defineProps({
start: { type: Date, required: true },
end: { type: Date, required: true }
});
const weatherAggregates = ref<WeatherAggregates | undefined>();
const weatherStore = useWeatherStore();
const end = new Date();
const start = subHours(end, 24);
weatherStore.getReadingAggregate(start, end).then((newWeatherAggregates) => {
weatherStore.getReadingAggregate(props.start, props.end).then((newWeatherAggregates) => {
weatherAggregates.value = newWeatherAggregates;
});
watch(
() => [props.start, props.end],
() => {
weatherStore.getReadingAggregate(props.start, props.end).then((newWeatherAggregates) => {
weatherAggregates.value = newWeatherAggregates;
});
}
);
</script>
<template>
<DashboardItem title="Weather Summary">
<DashboardItem title="Weather">
<div className="weather-summary">
<div v-if="!weatherAggregates">Loading...</div>
<table v-else>
@@ -81,7 +92,7 @@
<td class="weather-summary-header">Wind direction</td>
<td></td>
<td>
{{ weatherAggregates!.windDirectionAverage }}
{{ ShortenWindDirection(weatherAggregates!.windDirectionAverage) }}
</td>
<td></td>
</tr>

4
WebDisplay/src/models/weather/weather-aggregates.ts
View File

@@ -1,10 +1,12 @@
import WindDirection from './wind-direction';
export default interface WeatherAggregates {
humidity: WeatherAggregate;
temperature: WeatherAggregate;
pressure: WeatherAggregate;
light: WeatherAggregate;
windSpeed: WeatherAggregate;
windDirectionAverage: number;
windDirectionAverage: WindDirection;
rainTotal: number;
}

42
WebDisplay/src/pages/index.vue
View File

@@ -1,7 +1,4 @@
<script lang="ts" setup>
import CurrentWeather from '../components/CurrentWeather.vue';
import CurrentPower from '../components/CurrentPower.vue';
</script>
<script lang="ts" setup></script>
<template>
<v-container
@@ -19,9 +16,6 @@
<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"
@@ -41,35 +35,45 @@
background-color: #fafafa;
}
@media (min-width: 700px) {
@media (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(5, max-content);
grid-template-rows: repeat(5, max-content);
grid-template-rows: repeat(3, 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 . .'
'. . . . .';
'upstairs downstairs . . .';
}
}
@media (max-width: 700px) {
@media (max-width: 1024px) {
.container {
padding: 7px;
display: grid;
grid-template-columns: repeat(1, max-content);
grid-template-rows: repeat(7, max-content);
grid-template-columns: repeat(4, max-content);
grid-template-rows: repeat(3, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas:
'current-weather current-weather almanac almanac'
'current-weather current-weather almanac almanac'
'current-power current-laundry-status upstairs downstairs';
}
}
@media (max-width: 768px) {
.container {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, max-content);
gap: 10px 0px;
grid-template-areas:
'current-weather'
'almanac'
'current-power'
'current-laundry-status'
'weather-summary'
'upstairs'
'downstairs';
}
@@ -91,10 +95,6 @@
grid-area: current-laundry-status;
}
.weather-summary {
grid-area: weather-summary;
}
.upstairs {
grid-area: upstairs;
}

82
WebDisplay/src/pages/summary.vue Normal file
View File

@@ -0,0 +1,82 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { subHours } from 'date-fns';
import TimeSpan from '@/models/time-span';
import TimeRange from '@/components/TimeRange.vue';
import WeatherSummary from '@/components/WeatherSummary.vue';
const end = ref(new Date());
const start = ref(subHours(end.value, 24));
const timeSpan = ref(TimeSpan.Last24Hours);
</script>
<template>
<v-container
fluid
class="container">
<TimeRange
:time-span="timeSpan"
:start="start"
:end="end"
@change="
(value) => {
timeSpan = value.timeSpan;
start = value.start;
end = value.end;
}
"></TimeRange>
<v-card class="weather-summary">
<WeatherSummary
:start="start"
:end="end"></WeatherSummary>
</v-card>
</v-container>
</template>
<style scoped>
.container {
height: 100%;
background-color: #fafafa;
}
@media (min-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(3, max-content);
grid-template-rows: repeat(2, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas:
'weather-summary weather-summary weather-summary'
'weather-summary weather-summary weather-summary';
}
}
@media (max-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(3, max-content);
grid-template-rows: repeat(2, max-content);
gap: 15px 15px;
grid-auto-flow: row;
grid-template-areas:
'weather-summary weather-summary weather-summary'
'weather-summary weather-summary weather-summary';
}
}
@media (max-width: 768px) {
.container {
padding: 7px;
display: grid;
grid-template-columns: repeat(1, max-content);
grid-template-rows: repeat(1, max-content);
gap: 10px 0px;
grid-template-areas: 'weather-summary';
}
}
.weather-summary {
grid-area: weather-summary;
}
</style>

41
WebDisplay/src/windFormatter.ts
View File

@@ -1,4 +1,5 @@
import WindDirection from './models/weather/wind-direction';
import WindDirectionNumber from './models/weather/wind-direction-number';
export function ShortenWindDirection(windDirection: WindDirection | undefined): string {
switch (windDirection) {
@@ -39,3 +40,43 @@ export function ShortenWindDirection(windDirection: WindDirection | undefined):
}
return windDirection!.toString();
}
export function ShortenWindDirectionNumber(windDirection: WindDirectionNumber | undefined): string {
switch (windDirection) {
case WindDirectionNumber.None:
return '';
case WindDirectionNumber.North:
return 'N';
case WindDirectionNumber.East:
return 'E';
case WindDirectionNumber.South:
return 'S';
case WindDirectionNumber.West:
return 'W';
case WindDirectionNumber.NorthEast:
return 'NE';
case WindDirectionNumber.SouthEast:
return 'SE';
case WindDirectionNumber.SouthWest:
return 'SW';
case WindDirectionNumber.NorthWest:
return 'NW';
case WindDirectionNumber.NorthNorthEast:
return 'NNE';
case WindDirectionNumber.EastNorthEast:
return 'ENE';
case WindDirectionNumber.EastSouthEast:
return 'ESE';
case WindDirectionNumber.SouthSouthEast:
return 'SSE';
case WindDirectionNumber.SouthSouthWest:
return 'SSW';
case WindDirectionNumber.WestSouthWest:
return 'WSW';
case WindDirectionNumber.WestNorthWest:
return 'WNW';
case WindDirectionNumber.NorthNorthWest:
return 'NNW';
}
return windDirection!.toString();
}