ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-13 17:22:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

UI tweaks

Browse Source
This commit is contained in:
Chris Kaczor
2025-02-10 21:44:23 +00:00
parent 766fa7c0cf
commit 6454bba7c8
3 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
WebDisplay/package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "web-display", "name": "web-display",
"version": "1.0.0", "version": "1.0.0",
"packageManager": "pnpm@9.15.0", "packageManager": "pnpm@10.2.1",
"scripts": { "scripts": {
"dev": "cross-env NODE_OPTIONS='--no-warnings' vite", "dev": "cross-env NODE_OPTIONS='--no-warnings' vite",
"build": "vue-tsc --noEmit && vite build", "build": "vue-tsc --noEmit && vite build",

14
WebDisplay/src/pages/kiosk.vue
View File

@@ -102,6 +102,7 @@
@click="showFeelsLike = !showFeelsLike" @click="showFeelsLike = !showFeelsLike"
v-if="weatherStore.current"> v-if="weatherStore.current">
<div class="display-item"> <div class="display-item">
<span class="display-item-header">Temperature</span>
<span class="display-item-value">{{ getTemperature() }}</span> <span class="display-item-value">{{ getTemperature() }}</span>
<span class="display-item-label">{{ showFeelsLike ? 'Feels Like' : 'Actual' }}</span> <span class="display-item-label">{{ showFeelsLike ? 'Feels Like' : 'Actual' }}</span>
</div> </div>
@@ -110,8 +111,9 @@
class="kiosk-humidity text-center pb-3" class="kiosk-humidity text-center pb-3"
v-if="weatherStore.current"> v-if="weatherStore.current">
<div class="display-item"> <div class="display-item">
<span class="display-item-header">Dew Point</span>
<span class="display-item-value"> <span class="display-item-value">
{{ weatherStore.current?.Humidity?.toFixed(0) + '%' }} {{ weatherStore.current?.DewPoint?.toFixed(0) + '°' }}
</span> </span>
<span class="display-item-label">{{ dewPointDescription(weatherStore.current?.DewPoint) }}</span> <span class="display-item-label">{{ dewPointDescription(weatherStore.current?.DewPoint) }}</span>
</div> </div>
@@ -120,6 +122,7 @@
class="kiosk-wind text-center pb-3" class="kiosk-wind text-center pb-3"
v-if="weatherStore.current"> v-if="weatherStore.current">
<div class="display-item"> <div class="display-item">
<span class="display-item-header">Wind</span>
<span class="display-item-value"> <span class="display-item-value">
<span> <span>
{{ weatherStore.current?.WindSpeed?.toFixed(1) }} {{ weatherStore.current?.WindSpeed?.toFixed(1) }}
@@ -133,13 +136,14 @@
class="kiosk-pressure text-center pb-3" class="kiosk-pressure text-center pb-3"
v-if="weatherStore.current"> v-if="weatherStore.current">
<div class="display-item"> <div class="display-item">
<span class="display-item-header">Pressure</span>
<span class="display-item-value"> <span class="display-item-value">
<span> <span>
{{ (weatherStore.current?.Pressure! / 100).toFixed(0) }} {{ (weatherStore.current?.Pressure! / 100).toFixed(0) }}
</span> </span>
<PressureTrendArrow :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" /> <PressureTrendArrow :pressureDifference="weatherStore.current?.PressureDifferenceThreeHour" />
</span> </span>
<span class="display-item-label">MB</span> <span class="display-item-label">hPa</span>
</div> </div>
</div> </div>
<div <div
@@ -363,7 +367,11 @@
} }
.display-item-value { .display-item-value {
height: calc(1em + 10px); line-height: calc(100% + 2px);
}
.display-item-header {
font-size: 10pt;
} }
.display-item-label { .display-item-label {

4
WebDisplay/src/stores/weatherStore.ts
View File

@@ -32,7 +32,9 @@ export const useWeatherStore = defineStore('weather', {
await this._connection.start(); await this._connection.start();
this._connection.on('LatestReading', (message: string) => { this._connection.on('LatestReading', (message: string) => {
this.$patch({ current: JSON.parse(message) }); const json: WeatherUpdate = JSON.parse(message);
this.$patch({ current: json });
}); });
}, },
async stop() { async stop() {