mirror of
https://github.com/ckaczor/HomeMonitor.git
synced 2026-06-22 13:05:07 -04:00
Add more to kiosk page
This commit is contained in:
@@ -11,7 +11,7 @@ COPY . .
|
||||
RUN pnpm run build
|
||||
|
||||
# production stage
|
||||
FROM nginx:stable-alpine AS production-stage
|
||||
FROM nginx:lts-alpine AS production-stage
|
||||
COPY nginx/default.conf /etc/nginx/conf.d/
|
||||
RUN rm -rf /usr/share/nginx/html/*
|
||||
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
||||
|
||||
@@ -82,8 +82,6 @@
|
||||
|
||||
<style scoped>
|
||||
.alarm-overview {
|
||||
background-color: #121212;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -65,56 +65,54 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardItem title="Almanac">
|
||||
<div className="almanac-content">
|
||||
<div v-if="!almanacStore.sunTimes || !almanacStore.moonIllumination">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Sunrise</td>
|
||||
<td colSpan="{2}">
|
||||
{{ format(almanacStore.sunTimes.sunrise, 'hh:mm:ss aa') }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Sunset</td>
|
||||
<td colSpan="{2}">
|
||||
{{ format(almanacStore.sunTimes.sunset, 'hh:mm:ss aa') }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Day length</td>
|
||||
<td colSpan="{2}">{{ dayLength() }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Moonrise</td>
|
||||
<td colSpan="{2}">
|
||||
{{ almanacStore.moonTimes?.rise ? format(almanacStore.moonTimes.rise, 'hh:mm:ss aa') : 'None' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Moonset</td>
|
||||
<td colSpan="{2}">
|
||||
{{ almanacStore.moonTimes?.set ? format(almanacStore.moonTimes.set, 'hh:mm:ss aa') : 'None' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Moon</td>
|
||||
<td>
|
||||
{{ moonPhaseName() }}
|
||||
<br />
|
||||
{{ (almanacStore.moonIllumination.fraction * 100).toFixed(1) }}% illuminated
|
||||
</td>
|
||||
<td>
|
||||
<div className="moon-phase">
|
||||
{{ moonPhaseLetter() }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DashboardItem>
|
||||
<div className="almanac-content">
|
||||
<div v-if="!almanacStore.sunTimes || !almanacStore.moonIllumination">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Sunrise</td>
|
||||
<td colSpan="{2}">
|
||||
{{ format(almanacStore.sunTimes.sunrise, 'hh:mm:ss aa') }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Sunset</td>
|
||||
<td colSpan="{2}">
|
||||
{{ format(almanacStore.sunTimes.sunset, 'hh:mm:ss aa') }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Day length</td>
|
||||
<td colSpan="{2}">{{ dayLength() }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Moonrise</td>
|
||||
<td colSpan="{2}">
|
||||
{{ almanacStore.moonTimes?.rise ? format(almanacStore.moonTimes.rise, 'hh:mm:ss aa') : 'None' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Moonset</td>
|
||||
<td colSpan="{2}">
|
||||
{{ almanacStore.moonTimes?.set ? format(almanacStore.moonTimes.set, 'hh:mm:ss aa') : 'None' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="almanac-table-header">Moon</td>
|
||||
<td>
|
||||
{{ moonPhaseName() }}
|
||||
<br />
|
||||
{{ (almanacStore.moonIllumination.fraction * 100).toFixed(1) }}% illuminated
|
||||
</td>
|
||||
<td>
|
||||
<div className="moon-phase">
|
||||
{{ moonPhaseLetter() }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -94,8 +94,6 @@
|
||||
|
||||
<style>
|
||||
.calendar {
|
||||
background-color: #121212;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -6,27 +6,25 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardItem title="Laundry">
|
||||
<div className="laundry-current">
|
||||
<div v-if="!laundryStore.current">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr v-if="laundryStore.current.dryer != null">
|
||||
<td className="laundry-current-header">Dryer</td>
|
||||
<td :className="laundryStore.current.dryer.toString()">
|
||||
{{ laundryStore.current.dryer ? 'On' : 'Off' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="laundryStore.current.washer != null">
|
||||
<td className="laundry-current-header">Washer</td>
|
||||
<td :className="laundryStore.current.washer.toString()">
|
||||
{{ laundryStore.current.washer ? 'On' : 'Off' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DashboardItem>
|
||||
<div className="laundry-current">
|
||||
<div v-if="!laundryStore.current">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr v-if="laundryStore.current.dryer != null">
|
||||
<td className="laundry-current-header">Dryer</td>
|
||||
<td :className="laundryStore.current.dryer.toString()">
|
||||
{{ laundryStore.current.dryer ? 'On' : 'Off' }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="laundryStore.current.washer != null">
|
||||
<td className="laundry-current-header">Washer</td>
|
||||
<td :className="laundryStore.current.washer.toString()">
|
||||
{{ laundryStore.current.washer ? 'On' : 'Off' }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -6,33 +6,27 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardItem title="Power">
|
||||
<div className="power-current">
|
||||
<div v-if="!powerStore.current">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="power-current-header">Generation</td>
|
||||
<td>
|
||||
{{
|
||||
powerStore.current!.Generation < 0
|
||||
? 0
|
||||
: powerStore.current!.Generation
|
||||
}}
|
||||
W
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="power-current-header">Consumption</td>
|
||||
<td>
|
||||
{{ powerStore.current!.Consumption }}
|
||||
W
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DashboardItem>
|
||||
<div className="power-current">
|
||||
<div v-if="!powerStore.current">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="power-current-header">Generation</td>
|
||||
<td>
|
||||
{{ powerStore.current!.Generation < 0 ? 0 : powerStore.current!.Generation }}
|
||||
W
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="power-current-header">Consumption</td>
|
||||
<td>
|
||||
{{ powerStore.current!.Consumption }}
|
||||
W
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -8,73 +8,71 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardItem title="Weather">
|
||||
<div className="weather-current">
|
||||
<div v-if="!weatherStore.current">Loading...</div>
|
||||
<table
|
||||
v-else
|
||||
class="weather-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
className="weather-current-header"
|
||||
width="1">
|
||||
Temperature
|
||||
</td>
|
||||
<td :colspan="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill ? 1 : 3">
|
||||
{{ weatherStore.current?.Temperature?.toFixed(2) }}°F
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
|
||||
className="weather-current-header ml-8">
|
||||
Feels like
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="weatherStore.current?.HeatIndex">{{ weatherStore.current?.HeatIndex?.toFixed(2) }}°F</div>
|
||||
<div v-if="weatherStore.current?.WindChill">{{ weatherStore.current?.WindChill?.toFixed(2) }}°F</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Humidity</td>
|
||||
<td colspan="3">{{ weatherStore.current?.Humidity?.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Dew point</td>
|
||||
<td colspan="3">{{ weatherStore.current?.DewPoint?.toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Pressure</td>
|
||||
<td colspan="3">
|
||||
{{ weatherStore.current?.Pressure && (weatherStore.current?.Pressure / 100).toFixed(2) }} mbar
|
||||
<PressureTrendArrow
|
||||
class="pressure-trend-arrow"
|
||||
:pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Wind</td>
|
||||
<td colspan="3">
|
||||
{{ weatherStore.current?.WindSpeed?.toFixed(2) }}
|
||||
mph {{ ShortenWindDirection(weatherStore.current?.WindDirection) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Rain</td>
|
||||
<td colspan="3">{{ weatherStore.current?.RainLastHour?.toFixed(2) }}" (last hour)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Light</td>
|
||||
<td colspan="3">
|
||||
{{ weatherStore.current?.LightLevel?.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DashboardItem>
|
||||
<div className="weather-current">
|
||||
<div v-if="!weatherStore.current">Loading...</div>
|
||||
<table
|
||||
v-else
|
||||
class="weather-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
className="weather-current-header"
|
||||
width="1">
|
||||
Temperature
|
||||
</td>
|
||||
<td :colspan="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill ? 1 : 3">
|
||||
{{ weatherStore.current?.Temperature?.toFixed(2) }}°F
|
||||
</td>
|
||||
<td>
|
||||
<div
|
||||
v-if="weatherStore.current?.HeatIndex || weatherStore.current?.WindChill"
|
||||
className="weather-current-header ml-8">
|
||||
Feels like
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="weatherStore.current?.HeatIndex">{{ weatherStore.current?.HeatIndex?.toFixed(2) }}°F</div>
|
||||
<div v-if="weatherStore.current?.WindChill">{{ weatherStore.current?.WindChill?.toFixed(2) }}°F</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Humidity</td>
|
||||
<td colspan="3">{{ weatherStore.current?.Humidity?.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Dew point</td>
|
||||
<td colspan="3">{{ weatherStore.current?.DewPoint?.toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Pressure</td>
|
||||
<td colspan="3">
|
||||
{{ weatherStore.current?.Pressure && (weatherStore.current?.Pressure / 100).toFixed(2) }} mbar
|
||||
<PressureTrendArrow
|
||||
class="pressure-trend-arrow"
|
||||
:pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Wind</td>
|
||||
<td colspan="3">
|
||||
{{ weatherStore.current?.WindSpeed?.toFixed(2) }}
|
||||
mph {{ ShortenWindDirection(weatherStore.current?.WindDirection) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Rain</td>
|
||||
<td colspan="3">{{ weatherStore.current?.RainLastHour?.toFixed(2) }}" (last hour)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="weather-current-header">Light</td>
|
||||
<td colspan="3">
|
||||
{{ weatherStore.current?.LightLevel?.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
import { ConvertMillibarToInchesOfMercury } from '@/pressureConverter';
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, required: true },
|
||||
deviceName: { type: String, required: true }
|
||||
});
|
||||
|
||||
@@ -53,35 +52,33 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardItem :title="title">
|
||||
<div className="current">
|
||||
<div v-if="!indoorStore.current">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="header">Temperature</td>
|
||||
<td>{{ ConvertCToF(indoorStore.current.temperature).toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="header">Humidity</td>
|
||||
<td>{{ indoorStore.current.humidity.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="header">Pressure</td>
|
||||
<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()">
|
||||
{{ airQualityDescription(indoorStore.current.airQualityIndex) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DashboardItem>
|
||||
<div className="current">
|
||||
<div v-if="!indoorStore.current">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="header">Temperature</td>
|
||||
<td>{{ ConvertCToF(indoorStore.current.temperature).toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="header">Humidity</td>
|
||||
<td>{{ indoorStore.current.humidity.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="header">Pressure</td>
|
||||
<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()">
|
||||
{{ airQualityDescription(indoorStore.current.airQualityIndex) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
|
||||
const props = defineProps({
|
||||
name: { type: String, required: true },
|
||||
title: { type: String, required: true },
|
||||
start: { type: Date, required: true },
|
||||
end: { type: Date, required: true }
|
||||
});
|
||||
@@ -31,39 +30,37 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardItem :title="props.title">
|
||||
<div className="reading-summary">
|
||||
<div v-if="!readingAggregates">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Minimum</th>
|
||||
<th>Average</th>
|
||||
<th>Maximum</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="reading-summary-header">Temperature</td>
|
||||
<td>{{ ConvertCToF(readingAggregates!.minimumTemperature).toFixed(2) }}°F</td>
|
||||
<td>{{ ConvertCToF(readingAggregates!.averageTemperature).toFixed(2) }}°F</td>
|
||||
<td>{{ ConvertCToF(readingAggregates!.maximumTemperature).toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="reading-summary-header">Humidity</td>
|
||||
<td>{{ readingAggregates!.minimumHumidity.toFixed(2) }}%</td>
|
||||
<td>{{ readingAggregates!.averageHumidity.toFixed(2) }}%</td>
|
||||
<td>{{ readingAggregates!.maximumHumidity.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="reading-summary-header">Pressure</td>
|
||||
<td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.minimumPressure).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.averagePressure).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.maximumPressure).toFixed(2) }}"</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DashboardItem>
|
||||
<div className="reading-summary">
|
||||
<div v-if="!readingAggregates">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Minimum</th>
|
||||
<th>Average</th>
|
||||
<th>Maximum</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="reading-summary-header">Temperature</td>
|
||||
<td>{{ ConvertCToF(readingAggregates!.minimumTemperature).toFixed(2) }}°F</td>
|
||||
<td>{{ ConvertCToF(readingAggregates!.averageTemperature).toFixed(2) }}°F</td>
|
||||
<td>{{ ConvertCToF(readingAggregates!.maximumTemperature).toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="reading-summary-header">Humidity</td>
|
||||
<td>{{ readingAggregates!.minimumHumidity.toFixed(2) }}%</td>
|
||||
<td>{{ readingAggregates!.averageHumidity.toFixed(2) }}%</td>
|
||||
<td>{{ readingAggregates!.maximumHumidity.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="reading-summary-header">Pressure</td>
|
||||
<td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.minimumPressure).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.averagePressure).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertMillibarToInchesOfMercury(readingAggregates!.maximumPressure).toFixed(2) }}"</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -75,8 +75,6 @@
|
||||
|
||||
<style>
|
||||
.national-days {
|
||||
background-color: #121212;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
||||
@@ -29,83 +29,81 @@
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DashboardItem title="Weather">
|
||||
<div className="weather-summary">
|
||||
<div v-if="!weatherAggregates">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Minimum</th>
|
||||
<th>Average</th>
|
||||
<th>Maximum</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Temperature</td>
|
||||
<td>{{ weatherAggregates!.temperature.min.toFixed(2) }}°F</td>
|
||||
<td>{{ weatherAggregates!.temperature.average.toFixed(2) }}°F</td>
|
||||
<td>{{ weatherAggregates!.temperature.max.toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Humidity</td>
|
||||
<td>{{ weatherAggregates!.humidity.min.toFixed(2) }}%</td>
|
||||
<td>{{ weatherAggregates!.humidity.average.toFixed(2) }}%</td>
|
||||
<td>{{ weatherAggregates!.humidity.max.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Pressure</td>
|
||||
<td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.min).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.average).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.max).toFixed(2) }}"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Light</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.light.min.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.light.average.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.light.max.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Wind speed</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.windSpeed.min.toFixed(2) }}
|
||||
mph
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.windSpeed.average.toFixed(2) }}
|
||||
mph
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.windSpeed.max.toFixed(2) }}
|
||||
mph
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Wind direction</td>
|
||||
<td></td>
|
||||
<td>
|
||||
{{ ShortenWindDirection(weatherAggregates!.windDirectionAverage) }}
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Rain</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>{{ weatherAggregates!.rainTotal.toFixed(2) }}"</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DashboardItem>
|
||||
<div className="weather-summary">
|
||||
<div v-if="!weatherAggregates">Loading...</div>
|
||||
<table v-else>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Minimum</th>
|
||||
<th>Average</th>
|
||||
<th>Maximum</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Temperature</td>
|
||||
<td>{{ weatherAggregates!.temperature.min.toFixed(2) }}°F</td>
|
||||
<td>{{ weatherAggregates!.temperature.average.toFixed(2) }}°F</td>
|
||||
<td>{{ weatherAggregates!.temperature.max.toFixed(2) }}°F</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Humidity</td>
|
||||
<td>{{ weatherAggregates!.humidity.min.toFixed(2) }}%</td>
|
||||
<td>{{ weatherAggregates!.humidity.average.toFixed(2) }}%</td>
|
||||
<td>{{ weatherAggregates!.humidity.max.toFixed(2) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Pressure</td>
|
||||
<td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.min).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.average).toFixed(2) }}"</td>
|
||||
<td>{{ ConvertPascalToInchesOfMercury(weatherAggregates!.pressure.max).toFixed(2) }}"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Light</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.light.min.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.light.average.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.light.max.toFixed(2) }}
|
||||
lx
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Wind speed</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.windSpeed.min.toFixed(2) }}
|
||||
mph
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.windSpeed.average.toFixed(2) }}
|
||||
mph
|
||||
</td>
|
||||
<td>
|
||||
{{ weatherAggregates!.windSpeed.max.toFixed(2) }}
|
||||
mph
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Wind direction</td>
|
||||
<td></td>
|
||||
<td>
|
||||
{{ ShortenWindDirection(weatherAggregates!.windDirectionAverage) }}
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="weather-summary-header">Rain</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>{{ weatherAggregates!.rainTotal.toFixed(2) }}"</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -5,26 +5,34 @@
|
||||
fluid
|
||||
class="container">
|
||||
<v-card class="current-weather">
|
||||
<CurrentWeather></CurrentWeather>
|
||||
<DashboardItem title="Weather">
|
||||
<CurrentWeather></CurrentWeather>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
<v-card class="almanac">
|
||||
<Almanac></Almanac>
|
||||
<DashboardItem title="Almanac">
|
||||
<Almanac></Almanac>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
<v-card class="current-power">
|
||||
<CurrentPower></CurrentPower>
|
||||
<DashboardItem title="Power">
|
||||
<CurrentPower></CurrentPower>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
<v-card class="current-laundry-status">
|
||||
<CurrentLaundryStatus></CurrentLaundryStatus>
|
||||
<DashboardItem title="Laundry">
|
||||
<CurrentLaundryStatus></CurrentLaundryStatus>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
<v-card class="upstairs">
|
||||
<Indoor
|
||||
title="Upstairs"
|
||||
deviceName="main"></Indoor>
|
||||
<DashboardItem title="Upstairs">
|
||||
<Indoor deviceName="main"></Indoor>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
<v-card class="downstairs">
|
||||
<Indoor
|
||||
title="Downstairs"
|
||||
deviceName="basement"></Indoor>
|
||||
<DashboardItem title="Downstairs">
|
||||
<Indoor deviceName="basement"></Indoor>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -26,23 +26,27 @@
|
||||
}
|
||||
"></TimeRange>
|
||||
<v-card class="weather-summary">
|
||||
<WeatherSummary
|
||||
:start="start"
|
||||
:end="end"></WeatherSummary>
|
||||
<DashboardItem title="Weather">
|
||||
<WeatherSummary
|
||||
:start="start"
|
||||
:end="end"></WeatherSummary>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
<v-card class="main-summary">
|
||||
<IndoorSummary
|
||||
name="main"
|
||||
title="Upstairs"
|
||||
:start="start"
|
||||
:end="end"></IndoorSummary>
|
||||
<DashboardItem title="Upstairs">
|
||||
<IndoorSummary
|
||||
name="main"
|
||||
:start="start"
|
||||
:end="end"></IndoorSummary>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
<v-card class="basement-summary">
|
||||
<IndoorSummary
|
||||
name="basement"
|
||||
title="Downstairs"
|
||||
:start="start"
|
||||
:end="end"></IndoorSummary>
|
||||
<DashboardItem title="Downstairs">
|
||||
<IndoorSummary
|
||||
name="basement"
|
||||
:start="start"
|
||||
:end="end"></IndoorSummary>
|
||||
</DashboardItem>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
@@ -8,14 +8,22 @@
|
||||
import LongPressButton from '@/components/LongPressButton.vue';
|
||||
import PressureTrendArrow from '@/components/PressureTrendArrow.vue';
|
||||
import AlarmOverview from '@/components/AlarmOverview.vue';
|
||||
import WeatherSummary from '@/components/WeatherSummary.vue';
|
||||
import { subHours } from 'date-fns';
|
||||
import Almanac from '@/components/Almanac.vue';
|
||||
|
||||
enum KioskPage {
|
||||
Calendar,
|
||||
AlarmOverview
|
||||
AlarmOverview,
|
||||
WeatherSummary,
|
||||
Almanac
|
||||
}
|
||||
|
||||
const kioskPage = ref(KioskPage.Calendar);
|
||||
|
||||
const end = ref(new Date());
|
||||
const start = ref(subHours(end.value, 24));
|
||||
|
||||
const outOfDateDuration = 5000;
|
||||
|
||||
const showFeelsLike = ref(true);
|
||||
@@ -252,22 +260,50 @@
|
||||
icon="mdi-shield-home-outline"
|
||||
:class="{ 'kiosk-navigation-selected': kioskPage === KioskPage.AlarmOverview }"
|
||||
@click="kioskPage = KioskPage.AlarmOverview" />
|
||||
<v-icon
|
||||
class="kiosk-navigation-icon"
|
||||
icon="mdi-weather-cloudy-clock"
|
||||
:class="{ 'kiosk-navigation-selected': kioskPage === KioskPage.WeatherSummary }"
|
||||
@click="kioskPage = KioskPage.WeatherSummary" />
|
||||
<v-icon
|
||||
class="kiosk-navigation-icon"
|
||||
icon="mdi-notebook-outline"
|
||||
:class="{ 'kiosk-navigation-selected': kioskPage === KioskPage.Almanac }"
|
||||
@click="kioskPage = KioskPage.Almanac" />
|
||||
</div>
|
||||
<div
|
||||
class="kiosk-calendar-page"
|
||||
class="kiosk-page"
|
||||
v-show="kioskPage === KioskPage.Calendar">
|
||||
<CalendarAgenda
|
||||
class="kiosk-calendar"
|
||||
class="kiosk-panel kiosk-calendar"
|
||||
days="10"
|
||||
:refresh-interval="5 * 60 * 1000" />
|
||||
<NationalDays
|
||||
class="kiosk-national-days"
|
||||
class="kiosk-panel kiosk-national-days"
|
||||
v-show="kioskPage === KioskPage.Calendar" />
|
||||
</div>
|
||||
<div
|
||||
class="kiosk-alarm-overview-page"
|
||||
class="kiosk-page"
|
||||
v-show="kioskPage === KioskPage.AlarmOverview">
|
||||
<AlarmOverview class="kiosk-alarm-overview" />
|
||||
<AlarmOverview class="kiosk-panel" />
|
||||
</div>
|
||||
<div
|
||||
class="kiosk-page"
|
||||
v-show="kioskPage === KioskPage.WeatherSummary">
|
||||
<div class="kiosk-panel">
|
||||
<div class="kiosk-panel-header">Weather Summary</div>
|
||||
<WeatherSummary
|
||||
:start="start"
|
||||
:end="end"></WeatherSummary>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="kiosk-page"
|
||||
v-show="kioskPage === KioskPage.Almanac">
|
||||
<div class="kiosk-panel">
|
||||
<div class="kiosk-panel-header">Almanac</div>
|
||||
<Almanac></Almanac>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-container>
|
||||
@@ -294,6 +330,23 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.kiosk-panel {
|
||||
background-color: #121212;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.kiosk-panel-header {
|
||||
font-size: 1.15em;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 2px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kiosk-sidebar {
|
||||
padding: 5px;
|
||||
background-color: #121212;
|
||||
@@ -331,7 +384,7 @@
|
||||
|
||||
.kiosk-navigation-icon {
|
||||
font-size: 2rem;
|
||||
margin-right: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.kiosk-navigation-selected {
|
||||
@@ -400,14 +453,7 @@
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.kiosk-calendar-page {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
gap: 10px;
|
||||
height: calc(100vh - 70px);
|
||||
}
|
||||
|
||||
.kiosk-alarm-overview-page {
|
||||
.kiosk-page {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
gap: 10px;
|
||||
@@ -415,11 +461,14 @@
|
||||
}
|
||||
|
||||
.kiosk-calendar {
|
||||
flex-basis: 20%;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.kiosk-national-days {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user