Separate historical from current

WebDisplay/src/App.vue

@@ -19,11 +19,17 @@
                 density="compact"
                 nav>
                 <v-list-item
-                    prepend-icon="mdi-view-dashboard"
+                    prepend-icon="mdi-information-outline"
-                    title="Dashboard"
+                    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"

WebDisplay/src/components/Indoor.vue

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

WebDisplay/src/components/WeatherSummary.vue

@@ -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();
+    weatherStore.getReadingAggregate(props.start, props.end).then((newWeatherAggregates) => {
-    const start = subHours(end, 24);
-
-    weatherStore.getReadingAggregate(start, 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>

WebDisplay/src/models/weather/weather-aggregates.ts

@@ -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;
 }
 

WebDisplay/src/pages/index.vue

@@ -1,7 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup></script>
-    import CurrentWeather from '../components/CurrentWeather.vue';
-    import CurrentPower from '../components/CurrentPower.vue';
-</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'
+                'upstairs downstairs . . .';
-                'weather-summary weather-summary weather-summary . .'
-                '. . . . .';
         }
     }
 
-    @media (max-width: 700px) {
+    @media (max-width: 1024px) {
         .container {
-            padding: 7px;
             display: grid;
-            grid-template-columns: repeat(1, max-content);
+            grid-template-columns: repeat(4, max-content);
-            grid-template-rows: repeat(7, 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;
     }

WebDisplay/src/pages/summary.vue

@@ -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>

WebDisplay/src/windFormatter.ts

@@ -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();
+}

WebDisplay/typed-router.d.ts

@@ -43,6 +43,7 @@ declare module 'vue-router/auto/routes' {
     '/indoor': RouteRecordInfo<'/indoor', '/indoor', Record<never, never>, Record<never, never>>,
     '/outdoor': RouteRecordInfo<'/outdoor', '/outdoor', Record<never, never>, Record<never, never>>,
     '/power': RouteRecordInfo<'/power', '/power', Record<never, never>, Record<never, never>>,
+    '/summary': RouteRecordInfo<'/summary', '/summary', Record<never, never>, Record<never, never>>,
   }
 }