50 lines
1.2 KiB
Svelte
50 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { _ } from 'svelte-i18n';
|
|
import Gauge from './Gauge.svelte';
|
|
import WindDirection from './WindDirection.svelte';
|
|
import type { Weather } from './weather.interface';
|
|
|
|
export let data: Partial<Weather> = {};
|
|
|
|
let convertedSpeed: string;
|
|
let convertedGust: string;
|
|
let convertedRain: string;
|
|
|
|
$: {
|
|
convertedSpeed = ((data.windSpeed || 0) / 3.6).toFixed(1);
|
|
convertedGust = ((data.gustSpeed || 0) / 3.6).toFixed(1);
|
|
convertedRain = (data.totalRain || 0).toFixed(1);
|
|
}
|
|
</script>
|
|
|
|
<div class="wind">
|
|
<span class="wind-label">{$_('wind')}</span>
|
|
<WindDirection direction={data.windDirection} />
|
|
<div class="wind-blocks">
|
|
<div class="wind-block">
|
|
<Gauge label={$_('windSpeed')} unit="m/s">{convertedSpeed}</Gauge>
|
|
</div>
|
|
<div class="wind-block">
|
|
<Gauge label={$_('windGust')} unit="m/s">{convertedGust}</Gauge>
|
|
</div>
|
|
<div class="wind-block">
|
|
<Gauge label={$_('rain')} unit="mm">{convertedRain}</Gauge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.wind {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
|
|
&-blocks {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|