-
Notifications
You must be signed in to change notification settings - Fork 95
/
StateLogic.svelte
130 lines (110 loc) · 3.96 KB
/
StateLogic.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<script lang="ts">
import { editMode, lang, selectedLanguage, states } from '$lib/Stores';
import { getDomain, isTimestamp, relativeTime } from '$lib/Utils';
import type { HassEntity } from 'home-assistant-js-websocket';
export let selected: any;
export let contentWidth: number | undefined = undefined;
export let entity_id: string | undefined;
let entity: HassEntity;
$: if (entity_id && $states?.[entity_id]?.last_updated !== entity?.last_updated)
entity = $states?.[entity_id];
$: attributes = entity?.attributes;
$: state = entity?.state;
$: brightness = attributes?.brightness;
$: percentage = attributes?.percentage;
$: media_title = attributes?.media_title;
</script>
<!-- Light -->
{#if selected?.attribute}
{entity?.attributes[selected?.attribute]}
{:else if state === 'on' && brightness}
{@const percentage = brightness / 255}
<!-- should never be 0% if on -->
{@const floor = percentage < 0.01 && percentage > 0 ? 0.01 : percentage}
{Intl.NumberFormat($selectedLanguage, { style: 'percent' }).format(floor)}
<!-- Media -->
{:else if media_title && state === 'playing'}
{@const title = `<span title=${media_title}>${media_title}</span>`}
{#if selected?.marquee === true && contentWidth && contentWidth > 153 && !$editMode}
{#await import('$lib/Components/Marquee.svelte')}
{@html title}
{:then Marquee}
<svelte:component this={Marquee.default}>
{media_title}
{@html ' '.repeat(4)}
</svelte:component>
{/await}
{:else}
{@html title}
{/if}
<!-- Climate -->
{:else if getDomain(entity_id) === 'climate' && attributes?.hvac_action}
{$lang(attributes?.hvac_action)}
<!-- Climate -->
{:else if getDomain(entity_id) === 'update'}
{#if attributes?.in_progress}
{typeof attributes?.in_progress === 'number'
? $lang('update_installing_progress').replace('{progress}', String(attributes?.in_progress))
: $lang('update_installing')}
{:else if state === 'on'}
{$lang('update_available')}
{:else if state === 'off'}
{$lang('update_up_to_date')}
{/if}
<!-- Automation -->
{:else if getDomain(entity_id) === 'automation' && entity?.attributes?.current > 0}
{$lang('running')}
<!-- Script -->
{:else if getDomain(entity_id) === 'script' && entity?.attributes?.current > 0}
{$lang('running')}
<!-- Humidifier -->
{:else if getDomain(entity_id) === 'humidifier' && state === 'on' && attributes?.action}
{$lang('humidifier_' + attributes?.action)}
<!-- Water Heater -->
{:else if getDomain(entity_id) === 'water_heater'}
{$lang('water_heater_' + state)}
<!-- Input Number / Number -->
{:else if entity_id && (getDomain(entity_id) === 'input_number' || getDomain(entity_id) === 'number')}
{Number(state) || $lang('unknown')}
{#if attributes?.unit_of_measurement}{attributes.unit_of_measurement}{/if}
<!-- Weather -->
{:else if getDomain(entity_id) === 'weather'}
{$lang('weather_' + state?.replace('_', '-')) || state || $lang('unknown')}
<!-- Text -->
{:else if getDomain(entity_id) === 'input_text' || getDomain(entity_id) === 'text'}
{#if state === 'unknown'}
{$lang('unknown')}
{:else if state === ''}
{@html ' '}
{:else}
{attributes?.mode === 'password' ? state.replace(/./g, '•') : state}
{/if}
<!-- Timestamp -->
{:else if state && isTimestamp(state)}
{relativeTime(state, $selectedLanguage)}
<!-- Percentage -->
{:else if state === 'on' && percentage}
{Intl.NumberFormat($selectedLanguage, { style: 'percent' }).format(percentage * 0.01)}
<!-- State -->
{:else if state}
{#if selected?.marquee && contentWidth && contentWidth > 153 && !$editMode}
{#await import('$lib/Components/Marquee.svelte') then Marquee}
<svelte:component this={Marquee.default}>
{@html $lang(state)}
<!-- Unit -->
{#if attributes?.unit_of_measurement}
{attributes.unit_of_measurement}
{/if}
{@html ' '.repeat(4)}
</svelte:component>
{/await}
{:else}
{@html $lang(state)}
<!-- Unit -->
{#if attributes?.unit_of_measurement}
{attributes.unit_of_measurement}
{/if}
{/if}
{:else}
{$lang('unknown')}
{/if}