KevinMidboe/brewpi
1
0
Fork 0
mirror of https://github.com/KevinMidboe/brewPi.git synced 2025-10-29 16:50:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Made progress values more bold & updates colors manually

Browse Source
This commit is contained in:
Kevin
2023-06-02 00:50:02 +02:00
parent 659b657175
commit 38d01399fd
1 changed files with 72 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
src/lib/components/VerticalSensorDisplay.svelte
View File

@@ -7,7 +7,9 @@
export let outside; export let outside;
let loadedTime: number = new Date().getTime(); let loadedTime: number = new Date().getTime();
let currentTime: number = new Date().getTime() let currentTime: number = new Date().getTime();
let autoReload = false;
const currentGoal = 4;
function updateTime() { function updateTime() {
currentTime = new Date().getTime(); currentTime = new Date().getTime();
@@ -18,11 +20,9 @@
} }
onMount(() => setInterval(updateTime, 1000)); onMount(() => setInterval(updateTime, 1000));
$: secondsSinceUpdate = Math.floor((currentTime - loadedTime) / 1000);
$: secondsSinceUpdate = Math.floor((currentTime - loadedTime) / 1000)
</script> </script>
<div class="card"> <div class="card">
<CardButton> <CardButton>
<Activity on:click={flipCard} /> <Activity on:click={flipCard} />
@@ -30,8 +30,8 @@
<h2>Current target temperature</h2> <h2>Current target temperature</h2>
<div class="sensor-reading"> <div class="sensor-reading">
<div class="red"> <div class="blue">
<span class="value">16</span> <span class="value">{currentGoal}</span>
<span class="unit">°C</span> <span class="unit">°C</span>
</div> </div>
</div> </div>
@@ -39,89 +39,101 @@
<h2>Inside temperature</h2> <h2>Inside temperature</h2>
<div class="sensor-reading"> <div class="sensor-reading">
<div class="blue"> <div class="blue">
<span class="value">{ inside?.temperature }</span> <span class="value">{inside?.temperature}</span>
<span class="unit">{ inside?.temperature_unit }</span> <span class="unit">{inside?.temperature_unit}</span>
</div> </div>
<div> <div>
<span class="value">{ Math.floor(inside?.humidity) }</span> <span class="value">{Math.floor(inside?.humidity)}</span>
<span class="unit">{ inside?.humidity_unit || '%' }</span> <span class="unit">{inside?.humidity_unit || '%'}</span>
</div> </div>
</div> </div>
<h2>Outside temperature</h2> <h2>Outside temperature</h2>
<div class="sensor-reading"> <div class="sensor-reading">
<div class="blue"> <div class="red">
<span class="value">{ outside?.temperature }</span> <span class="value">{outside?.temperature}</span>
<span class="unit">{ outside?.temperature_unit }</span> <span class="unit">{outside?.temperature_unit}</span>
</div> </div>
<div> <div>
<span class="value">{ Math.floor(outside?.humidity) }</span> <span class="value">{Math.floor(outside?.humidity)}</span>
<span class="unit">{ outside?.humidity_unit }</span> <span class="unit">{outside?.humidity_unit}</span>
</div> </div>
</div> </div>
<h2>Pressure</h2> <h2>Pressure</h2>
<div class="sensor-reading"> <div class="sensor-reading">
<span class="value">{ inside?.pressure || 0}</span> <span class="value">{inside?.pressure || 0}</span>
<span class="unit">bar</span> <span class="unit">bar</span>
</div> </div>
<div class="button-timer"> <div class="button-timer">
<span>Updated { secondsSinceUpdate === 0 ? 'now' : secondsSinceUpdate + 's ago' }</span> <span>Updated {secondsSinceUpdate === 0 ? 'now' : secondsSinceUpdate + 's ago'}</span>
</div> </div>
</div> </div>
<style lang="scss" module="scoped"> <style lang="scss" module="scoped">
@import '../../styles/media-queries.scss'; @import '../../styles/media-queries.scss';
h2 { h2 {
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-weight: 400; font-weight: 400;
color: var(--text-color); color: var(--text-color);
@include tablet { @include tablet {
font-size: 1.6rem; font-size: 1.6rem;
} }
}
.sensor-reading {
display: flex;
justify-content: space-between;
margin-bottom: 1.75rem;
font-size: 2.2rem;
line-height: 1;
font-weight: 500;
color: var(--text-color);
@include tablet {
font-size: 2.9rem;
} }
@include desktop { .sensor-reading {
font-size: 3rem; display: flex;
justify-content: space-between;
margin-bottom: 1.75rem;
font-size: 2.2rem;
line-height: 1;
font-weight: bold;
color: var(--text-color);
@include tablet {
font-size: 2.9rem;
}
@include desktop {
font-size: 3rem;
}
> div {
display: flex;
white-space: nowrap;
}
.unit {
font-weight: 300;
margin-left: 0.3rem;
}
.red {
color: var(--red);
}
.blue {
color: var(--blue);
}
} }
.unit { .button-timer {
font-weight: 300; display: flex;
align-items: center;
justify-content: flex-end;
color: rgba(0, 0, 0, 0.5);
svg {
margin-left: 0.5rem;
}
} }
.red {
color: var(--red);
}
.blue {
color: var(--blue);
}
}
.button-timer {
width: 100%;
text-align: right;
color: rgba(0, 0, 0, .5);
}
</style> </style>