Start adding kiosk view

WebDisplay/src/App.vue

@@ -1,45 +1,7 @@
 <template>
     <v-app>
-        <v-navigation-drawer
-            rail
-            permanent>
-            <v-list
-                density="compact"
-                nav>
-                <v-list-item
-                    prepend-icon="mdi-information-outline"
-                    title="Current"
-                    to="/">
-                </v-list-item>
-                <v-list-item
-                    prepend-icon="mdi-chart-box-outline"
-                    title="Summary"
-                    to="summary">
-                </v-list-item>
-                <v-list-item
-                    prepend-icon="mdi-sun-thermometer"
-                    title="Outdoor"
-                    to="outdoor">
-                </v-list-item>
-                <v-list-item
-                    prepend-icon="mdi-home-analytics"
-                    title="Indoor"
-                    to="indoor">
-                </v-list-item>
-                <v-list-item
-                    prepend-icon="mdi-home-lightning-bolt-outline"
-                    title="Power"
-                    to="power">
-                </v-list-item>
-            </v-list>
-        </v-navigation-drawer>
-
-        <v-main>
-            <router-view />
-        </v-main>
+        <router-view></router-view>
     </v-app>
 </template>
 
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>

WebDisplay/src/pages/index.vue

@@ -1,104 +1,68 @@
-<script lang="ts" setup></script>
-
 <template>
-    <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="upstairs">
-            <Indoor
-                title="Upstairs"
-                deviceName="main"></Indoor>
-        </v-card>
-        <v-card class="downstairs">
-            <Indoor
-                title="Downstairs"
-                deviceName="basement"></Indoor>
-        </v-card>
-    </v-container>
+    <v-app>
+        <v-app-bar
+            title="Home Monitor"
+            color="primary">
+            <template v-slot:prepend>
+                <v-app-bar-nav-icon
+                    v-show="!mdAndUp"
+                    @click="drawer = !drawer"></v-app-bar-nav-icon>
+            </template>
+        </v-app-bar>
+
+        <v-navigation-drawer
+            mobile-breakpoint="md"
+            :expand-on-hover="mdAndUp"
+            :rail="mdAndUp"
+            :model-value="mdAndUp ? true : drawer">
+            <v-list
+                density="compact"
+                nav>
+                <v-list-item
+                    prepend-icon="mdi-information-outline"
+                    title="Current"
+                    :active="$route.path === '/'"
+                    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"
+                    to="outdoor"
+                    @click="drawer = false">
+                </v-list-item>
+                <v-list-item
+                    prepend-icon="mdi-home-analytics"
+                    title="Indoor"
+                    to="indoor"
+                    @click="drawer = false">
+                </v-list-item>
+                <v-list-item
+                    prepend-icon="mdi-home-lightning-bolt-outline"
+                    title="Power"
+                    to="power"
+                    @click="drawer = false">
+                </v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+
+        <v-main>
+            <router-view />
+        </v-main>
+    </v-app>
 </template>
 
-<style scoped>
-    .container {
-        height: 100%;
-        background-color: #fafafa;
-    }
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import { useDisplay } from 'vuetify';
 
-    @media (min-width: 1024px) {
-        .container {
-            display: grid;
-            grid-template-columns: 360px 350px 210px 1fr;
-            grid-template-rows: repeat(3, max-content);
-            gap: 15px 15px;
-            grid-auto-flow: row;
-            grid-template-areas:
-                'current-weather almanac current-laundry-status'
-                'current-weather almanac current-power'
-                'upstairs downstairs .';
-        }
-    }
+    const drawer = ref(false);
 
-    @media (max-width: 1024px) {
-        .container {
-            display: grid;
-            grid-template-columns: repeat(4, 180px);
-            grid-template-rows: repeat(2, max-content);
-            gap: 15px 15px;
-            grid-auto-flow: row;
-            grid-template-areas:
-                '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'
-                '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;
-    }
-
-    .upstairs {
-        grid-area: upstairs;
-    }
-
-    .downstairs {
-        grid-area: downstairs;
-    }
-</style>
+    const { mdAndUp } = useDisplay();
+</script>

WebDisplay/src/pages/index/index.vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup></script>
+
+<template>
+    <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="upstairs">
+            <Indoor
+                title="Upstairs"
+                deviceName="main"></Indoor>
+        </v-card>
+        <v-card class="downstairs">
+            <Indoor
+                title="Downstairs"
+                deviceName="basement"></Indoor>
+        </v-card>
+    </v-container>
+</template>
+
+<style scoped>
+    .container {
+        height: 100%;
+        background-color: #fafafa;
+    }
+
+    @media (min-width: 1024px) {
+        .container {
+            display: grid;
+            grid-template-columns: 360px 350px 210px 1fr;
+            grid-template-rows: repeat(3, max-content);
+            gap: 15px 15px;
+            grid-auto-flow: row;
+            grid-template-areas:
+                'current-weather almanac current-laundry-status'
+                'current-weather almanac current-power'
+                'upstairs downstairs .';
+        }
+    }
+
+    @media (max-width: 1024px) {
+        .container {
+            display: grid;
+            grid-template-columns: repeat(4, 180px);
+            grid-template-rows: repeat(2, max-content);
+            gap: 15px 15px;
+            grid-auto-flow: row;
+            grid-template-areas:
+                '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'
+                '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;
+    }
+
+    .upstairs {
+        grid-area: upstairs;
+    }
+
+    .downstairs {
+        grid-area: downstairs;
+    }
+</style>

WebDisplay/src/pages/index/indoor.vue

@@ -4,7 +4,7 @@
     import { createIndoorStore } from '@/stores/indoorStore';
     import { ConvertCToF } from '@/temperatureConverter';
     import { ConvertMillibarToInchesOfMercury } from '@/pressureConverter';
-    import ValueChart from '../components/ValueChart.vue';
+    import ValueChart from '@/components/ValueChart.vue';
     import TimeRange from '@/components/TimeRange.vue';
     import TimeSpan from '@/models/time-span';
 

WebDisplay/src/pages/index/outdoor.vue

@@ -3,7 +3,7 @@
     import { subHours } from 'date-fns';
     import { useWeatherStore } from '@/stores/weatherStore';
     import { ConvertPascalToInchesOfMercury } from '@/pressureConverter';
-    import ValueChart from '../components/ValueChart.vue';
+    import ValueChart from '@/components/ValueChart.vue';
     import TimeRange from '@/components/TimeRange.vue';
     import TimeSpan from '@/models/time-span';
     import { ConvertDegreesToShortLabel, ConvertWindDirectionToDegrees } from '@/windConverter';

WebDisplay/src/pages/index/power.vue

@@ -3,7 +3,7 @@
     import { subHours } from 'date-fns';
     import { usePowerStore } from '@/stores/powerStore';
     import { useWeatherStore } from '@/stores/weatherStore';
-    import ValueChart from '../components/ValueChart.vue';
+    import ValueChart from '@/components/ValueChart.vue';
     import TimeRange from '@/components/TimeRange.vue';
     import WeatherValueType from '@/models/weather/weather-value-type';
     import TimeSpan from '@/models/time-span';

WebDisplay/src/pages/kiosk.vue

@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+    import { ref } from 'vue';
+    import { useWeatherStore } from '@/stores/weatherStore';
+    import { useLaundryStore } from '@/stores/laundryStore';
+    import { usePowerStore } from '@/stores/powerStore';
+
+    const weatherStore = useWeatherStore();
+    weatherStore.start();
+
+    const laundryStore = useLaundryStore();
+    laundryStore.start();
+
+    const powerStore = usePowerStore();
+    powerStore.start();
+
+    const currentTime = ref(new Date());
+
+    const timeFormatter = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit' });
+    const dateFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
+
+    setInterval(() => (currentTime.value = new Date()), 1000);
+</script>
+
+<template>
+    <v-container
+        fluid
+        class="kiosk-container">
+        <div class="kiosk-sidebar">
+            <div
+                name="kiosk-time"
+                class="kiosk-time text-center">
+                {{ timeFormatter.format(currentTime) }}
+            </div>
+            <div class="kiosk-date text-center pb-4">
+                {{ dateFormatter.format(currentTime) }}
+            </div>
+            <div
+                class="kiosk-temperature text-center pb-3"
+                v-if="weatherStore.current">
+                {{ weatherStore.current?.Temperature?.toFixed(0) + '°F' }}
+            </div>
+            <div
+                class="kiosk-humidity text-center pb-3"
+                v-if="weatherStore.current">
+                {{ weatherStore.current?.Humidity?.toFixed(0) + '%' }}
+            </div>
+            <div
+                class="kiosk-generation pl-2 pt-4"
+                v-if="powerStore.current">
+                <v-icon
+                    class="kiosk-device"
+                    icon="mdi-solar-power-variant" />
+                {{ (powerStore.current!.Generation < 0 ? 0 : powerStore.current!.Generation) + '&thinsp;W' }}
+            </div>
+            <div
+                class="kiosk-consumption pl-2 pt-4"
+                v-if="powerStore.current">
+                <v-icon
+                    class="kiosk-device"
+                    icon="mdi-home-lightning-bolt" />
+                {{ powerStore.current.Consumption + '&thinsp;W' }}
+            </div>
+            <div
+                class="kiosk-washer pl-2 pt-4"
+                v-if="laundryStore?.current?.washer !== undefined"
+                :class="laundryStore.current.washer.toString()">
+                <v-icon
+                    class="kiosk-device"
+                    icon="mdi-washing-machine" />
+                {{ laundryStore.current.washer ? 'On' : 'Off' }}
+            </div>
+            <div
+                class="kiosk-dryer pl-2 pt-4"
+                v-if="laundryStore?.current?.dryer !== undefined"
+                :class="laundryStore.current.dryer.toString()">
+                <v-icon
+                    class="kiosk-device"
+                    icon="mdi-tumble-dryer" />
+                {{ laundryStore.current.dryer ? 'On' : 'Off' }}
+            </div>
+        </div>
+    </v-container>
+</template>
+
+<style scoped>
+    .kiosk-container {
+        height: 100%;
+        padding: 0;
+        background-color: #020c25;
+        color: #9acef1;
+        display: grid;
+        grid-template-columns: 250px 1fr;
+        grid-template-rows: 1fr;
+        gap: 15px 15px;
+        grid-auto-flow: row;
+        grid-template-areas:
+            'kiosk-sidebar . '
+            'kiosk-sidebar . '
+            'kiosk-sidebar . ';
+    }
+
+    .kiosk-row {
+        padding-top: 5px;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+    }
+
+    .kiosk-sidebar {
+        padding: 5px;
+        background-color: #13213e;
+        grid-area: kiosk-sidebar;
+
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(5, auto) 1fr;
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+
+        grid-template-areas:
+            'kiosk-time kiosk-time'
+            'kiosk-date kiosk-date'
+            'kiosk-temperature kiosk-humidity'
+            'kiosk-generation kiosk-consumption'
+            'kiosk-washer kiosk-dryer';
+    }
+
+    .kiosk-time {
+        font-size: 2rem;
+        grid-area: kiosk-time;
+    }
+
+    .kiosk-date {
+        font-size: 1.1rem;
+        grid-area: kiosk-date;
+    }
+
+    .kiosk-temperature {
+        font-size: 2rem;
+        grid-area: kiosk-temperature;
+    }
+
+    .kiosk-humidity {
+        font-size: 2rem;
+        grid-area: kiosk-humidity;
+    }
+
+    .kiosk-generation {
+        grid-area: kiosk-generation;
+    }
+
+    .kiosk-consumption {
+        grid-area: kiosk-consumption;
+    }
+
+    .kiosk-washer {
+        grid-area: kiosk-washer;
+    }
+
+    .kiosk-dryer {
+        grid-area: kiosk-dryer;
+    }
+
+    .kiosk-device {
+        font-size: 2.5rem;
+    }
+
+    .true {
+        color: #d09f27;
+    }
+
+    .false {
+        color: #208b20;
+    }
+</style>

WebDisplay/typed-router.d.ts

@@ -40,10 +40,12 @@ import type {
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/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>>,
+    '//': RouteRecordInfo<'//', '/', Record<never, never>, Record<never, never>>,
+    '//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>>,
+    '/kiosk': RouteRecordInfo<'/kiosk', '/kiosk', Record<never, never>, Record<never, never>>,
   }
 }