63 lines
1.6 KiB
Svelte
63 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { _, isLoading } from 'svelte-i18n';
|
|
import Gauge from './lib/Gauge.svelte';
|
|
import Refresh from './lib/Refresh.svelte';
|
|
import Wind from './lib/Wind.svelte';
|
|
import type { Weather } from './lib/weather.interface';
|
|
import { weatherInfo } from './lib/weather.store';
|
|
import LangSwitcher from './lib/LangSwitcher.svelte';
|
|
|
|
let weatherData: Partial<Weather> = {};
|
|
|
|
weatherInfo.subscribe((data) => {
|
|
weatherData = data;
|
|
});
|
|
</script>
|
|
|
|
<main>
|
|
{#if $isLoading}<span>Please wait...</span>{:else}
|
|
<h1>{$_('weather')}</h1>
|
|
<div class="wrapper">
|
|
<div class="section">
|
|
<Gauge label={$_('outTemp')} unit="°C"
|
|
>{weatherData.outdoorTemperature?.toFixed(1) || '...'}</Gauge
|
|
>
|
|
<Gauge label={$_('outHumid')} unit="%RH"
|
|
>{weatherData.outdoorHumidity?.toFixed(0) || '...'}</Gauge
|
|
>
|
|
</div>
|
|
<div class="section">
|
|
<Gauge label={$_('inTemp')} unit="°C"
|
|
>{weatherData.indoorTemperature?.toFixed(1) || '...'}</Gauge
|
|
>
|
|
<Gauge label={$_('inHumid')} unit="%RH"
|
|
>{weatherData.indoorHumidity?.toFixed(0) || '...'}</Gauge
|
|
>
|
|
</div>
|
|
<div class="section">
|
|
<Wind data={weatherData} />
|
|
</div>
|
|
<div class="section">
|
|
<Gauge label={$_('absPressure')} unit="hPa"
|
|
>{weatherData.absPressure?.toFixed(1) || '...'}</Gauge
|
|
>
|
|
</div>
|
|
<LangSwitcher />
|
|
<Refresh />
|
|
</div>
|
|
{/if}
|
|
</main>
|
|
|
|
<style>
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.section {
|
|
display: flex;
|
|
gap: 2rem;
|
|
justify-content: center;
|
|
}
|
|
</style>
|