More UI work and start preparing for deployment

2026-01-13 17:22:54 -05:00 · 2024-03-12 01:25:41 +00:00
parent 21f5522950
commit 3087059e75
15 changed files with 442 additions and 123 deletions
--- a/WebDisplay/src/components/CurrentWeather.vue
+++ b/WebDisplay/src/components/CurrentWeather.vue
@@ -45,7 +45,7 @@
                        <td>
                            <div
                                v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
-                                className="weather-current-header">
+                                className="weather-current-header ml-8">
                                Feels like
                            </div>
                        </td>
--- a/WebDisplay/src/components/DashboardItem.vue
+++ b/WebDisplay/src/components/DashboardItem.vue
@@ -14,15 +14,9 @@
 <style scoped>
    .dashboard-item-header {
        padding: 2px 10px;
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
    }

    .dashboard-item-content {
        background-color: white;
-        border: 1px solid lightgray;
-        border-top: 0px;
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
    }
 </style>
--- a/WebDisplay/src/components/ValueChart.vue
+++ b/WebDisplay/src/components/ValueChart.vue
@@ -16,7 +16,9 @@
        yAxisMaximum: { type: Number, required: false, default: undefined },
        tickAmount: { type: Number, required: false, default: undefined },
        lineSize: { type: Number, required: false, default: 2 },
-        markerSize: { type: Number, required: false, default: 0 }
+        markerSize: { type: Number, required: false, default: 0 },
+        yAxisLabelFormatter: { type: Function, required: false, default: undefined },
+        yAxisValueFormatter: { type: Function, required: false, default: undefined }
    });

    var chartOptions: ApexOptions = {
@@ -48,6 +50,10 @@
            },
            y: {
                formatter: (value) => {
+                    if (props.yAxisValueFormatter) {
+                        return props.yAxisValueFormatter(value);
+                    }
+
                    return `${value.toFixed(props.valueDecimalPoints)}${props.unit}`;
                }
            }
@@ -69,6 +75,10 @@
        yaxis: {
            labels: {
                formatter: (value) => {
+                    if (props.yAxisLabelFormatter) {
+                        return props.yAxisLabelFormatter(value);
+                    }
+
                    return `${value.toFixed(props.yAxisDecimalPoints)}${props.unit}`;
                }
            },
@@ -94,7 +104,7 @@
 <template>
    <div class="chart">
        <v-container
-            v-if="!props.ready"
+            v-show="!props.ready"
            class="fill-height loading">
            <v-responsive class="align-center text-center fill-height">
                <v-progress-circular
@@ -105,7 +115,6 @@
            </v-responsive>
        </v-container>
        <apexchart
-            v-else
            width="100%"
            height="250"
            :type="props.type"
@@ -118,9 +127,17 @@
    .loading {
        width: 100%;
        min-height: 250px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 99;
+        background-color: #eeeeee;
    }

    .chart {
+        position: relative;
        border: 1px solid lightgray;
        background-color: white;
        padding-top: 10px;
--- a/WebDisplay/src/models/weather/wind-history-grouped.ts
+++ b/WebDisplay/src/models/weather/wind-history-grouped.ts
@@ -1,7 +1,9 @@
+import WindDirectionNumber from './wind-direction-number';
+
 export default interface WindHistoryGrouped {
    bucket: string;
    minimumSpeed: number;
    averageSpeed: number;
    maximumSpeed: number;
-    averageDirection: number;
+    averageDirection: WindDirectionNumber;
 }
--- a/WebDisplay/src/pages/index.vue
+++ b/WebDisplay/src/pages/index.vue
@@ -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>
--- a/WebDisplay/src/pages/indoor.vue
+++ b/WebDisplay/src/pages/indoor.vue
@@ -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));
                }
            });

--- a/WebDisplay/src/pages/outdoor.vue
+++ b/WebDisplay/src/pages/outdoor.vue
@@ -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>
--- a/WebDisplay/src/pages/power.vue
+++ b/WebDisplay/src/pages/power.vue
@@ -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;
--- a/WebDisplay/src/windConverter.ts
+++ b/WebDisplay/src/windConverter.ts
@@ -0,0 +1,81 @@
+import WindDirectionNumber from './models/weather/wind-direction-number';
+
+export function ConvertWindDirectionToDegrees(windDirection: WindDirectionNumber): number {
+    switch (windDirection) {
+        case WindDirectionNumber.None:
+            return -1;
+        case WindDirectionNumber.North:
+            return 0;
+        case WindDirectionNumber.East:
+            return 90;
+        case WindDirectionNumber.South:
+            return 180;
+        case WindDirectionNumber.West:
+            return 270;
+        case WindDirectionNumber.NorthEast:
+            return 45;
+        case WindDirectionNumber.SouthEast:
+            return 135;
+        case WindDirectionNumber.SouthWest:
+            return 225;
+        case WindDirectionNumber.NorthWest:
+            return 315;
+        case WindDirectionNumber.NorthNorthEast:
+            return 22.5;
+        case WindDirectionNumber.EastNorthEast:
+            return 67.5;
+        case WindDirectionNumber.EastSouthEast:
+            return 112.5;
+        case WindDirectionNumber.SouthSouthEast:
+            return 157.5;
+        case WindDirectionNumber.SouthSouthWest:
+            return 202.5;
+        case WindDirectionNumber.WestSouthWest:
+            return 247.5;
+        case WindDirectionNumber.WestNorthWest:
+            return 292.5;
+        case WindDirectionNumber.NorthNorthWest:
+            return 337.5;
+    }
+    return -1;
+}
+
+export function ConvertDegreesToShortLabel(degrees: number): string {
+    switch (degrees) {
+        case 0:
+        case 360:
+            return 'N';
+        case 90:
+            return 'E';
+        case 180:
+            return 'S';
+        case 270:
+            return 'W';
+        case 45:
+            return 'NE';
+        case 135:
+            return 'SE';
+        case 225:
+            return 'SW';
+        case 315:
+            return 'NW';
+        case 22.5:
+            return 'NNE';
+        case 67.5:
+            return 'ENE';
+        case 112.5:
+            return 'ESE';
+        case 157.5:
+            return 'SSE';
+        case 202.5:
+            return 'SSW';
+        case 247.5:
+            return 'WSW';
+        case 292.5:
+            return 'WNW';
+        case 337.5:
+            return 'NNW';
+    }
+
+    return '';
+}