ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-22 17:23:52 -05:00
Code Issues 9 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

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>