Merge pull request #122 from matt8707/timer-name

Add sidebar timer name, closes #107

PROGRESS.md

@@ -84,7 +84,9 @@ List grouped by domains and categorized based on their similar behaviors
 - [ ] time
   - [ ] time input like `timer`
 - [x] timer
-  - [ ] when set state in modal don't stop timer
+  - [x] when set state in modal don't stop timer
+  - [x] add entity name to timers
+        <https://github.com/matt8707/ha-fusion/issues/107>
 
 ### Device Tracker
 
@@ -93,6 +95,8 @@ List grouped by domains and categorized based on their similar behaviors
   - [ ] bug: if no entity_picture in map show icon
   - [ ] bug: if no gps modal won't open
   - [ ] idea: toggle icon pings phone?
+  - [ ] make api key more clear if missing
+        <https://github.com/matt8707/ha-fusion/issues/121>
 - [ ] zone
   - [ ] map with all person:, device_trackers etc
 

scripts/translations/fetch.py

@@ -76,7 +76,6 @@ def process_dir(_dir, _output, _keys):
             ("start", ["ui.card.timer.actions.start"]),
             ("pause", ["ui.card.timer.actions.pause"]),
             ("finish", ["ui.card.timer.actions.finish"]),
-            ("duration", ["ui.dialogs.helper_settings.timer.duration"]),
             ("motion", ["ui.dialogs.entity_registry.editor.device_classes.binary_sensor.motion"]),
             ("copied", ["ui.common.copied"]),
             ("object", ["ui.components.selectors.selector.types.object"]),
@@ -159,6 +158,13 @@ def process_dir(_dir, _output, _keys):
             ("stopped", ["entity_component", "_", "state", "stopped"]),
         ],
     ),
+    (  # TIMER
+        f"{COMPONENTS}/timer/translations/",
+        [
+            ("active", ["entity_component", "_", "state", "active"]),
+            ("duration", ["entity_component", "_", "state_attributes", "duration", "name"]),
+        ],
+    ),
     (  # WEATHER
         f"{COMPONENTS}/weather/translations",
         [

src/lib/Main/Button.svelte

@@ -215,9 +215,7 @@
 					break;
 
 				case 'timer':
-					openModal(() => import('$lib/Modal/TimerModal.svelte'), {
-						entity_id
-					});
+					openModal(() => import('$lib/Modal/TimerModal.svelte'), { sel });
 					break;
 
 				case 'alarm_control_panel':

src/lib/Modal/InputDateModal.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { states, lang, connection, motion, selectedLanguage } from '$lib/Stores';
+	import { states, lang, connection, selectedLanguage } from '$lib/Stores';
 	import Modal from '$lib/Modal/Index.svelte';
 	import ConfigButtons from '$lib/Modal/ConfigButtons.svelte';
-	import { getDomain, getName, relativeTime } from '$lib/Utils';
+	import { getDomain, getName } from '$lib/Utils';
 	import { callService } from 'home-assistant-js-websocket';
 
 	export let isOpen: boolean;

src/lib/Modal/TimerConfig.svelte

@@ -19,8 +19,6 @@
 		set('entity_id', demo);
 	}
 
-	$: entity_id = sel?.entity_id;
-
 	$: options = Object.entries($states)
 		.filter(([key]) => key.startsWith('timer.'))
 		.sort()
@@ -41,7 +39,7 @@
 		<h2>{$lang('preview')}</h2>
 
 		<div class="preview">
-			<Timer {entity_id} />
+			<Timer {sel} />
 		</div>
 
 		<h2>{$lang('entity')}</h2>

src/lib/Modal/TimerModal.svelte

@@ -9,11 +9,12 @@
 	import { callService, type HassEntity } from 'home-assistant-js-websocket';
 
 	export let isOpen: boolean;
-	export let entity_id: string | undefined;
+	export let sel: any;
 
 	let duration: string;
 	let entity: HassEntity;
 
+	$: entity_id = sel?.entity_id;
 	$: if (entity_id && $states?.[entity_id]?.last_updated !== entity?.last_updated) {
 		entity = $states?.[entity_id];
 	}
@@ -43,7 +44,7 @@
 
 		<h2>{$lang('timer')}</h2>
 
-		<Timer {entity_id} />
+		<Timer {sel} />
 
 		<h2>{$lang('options')}</h2>
 
@@ -75,8 +76,9 @@
 			<button
 				class="input overflow"
 				on:click={() => {
+					const prevState = state;
 					callService($connection, 'timer', 'start', { entity_id, duration });
-					callService($connection, 'timer', 'pause', { entity_id });
+					if (prevState !== 'active') callService($connection, 'timer', 'pause', { entity_id });
 				}}
 				use:Ripple={$ripple}
 			>

src/lib/Sidebar/Index.svelte

@@ -131,7 +131,7 @@
 					height: sel?.height
 				});
 			} else if (sel?.type === 'timer') {
-				openModal(() => import('$lib/Modal/TimerModal.svelte'), { entity_id: sel?.entity_id });
+				openModal(() => import('$lib/Modal/TimerModal.svelte'), { sel });
 			}
 		}
 	}
@@ -315,7 +315,7 @@
 						<!-- TIMER -->
 					{:else if Timer && item?.type === 'timer'}
 						<button on:click={() => handleClick(item?.id)}>
-							<svelte:component this={Timer.default} entity_id={item?.entity_id} />
+							<svelte:component this={Timer.default} sel={item} />
 						</button>
 
 						<!-- WEATHER -->

src/lib/Sidebar/Timer.svelte

@@ -5,8 +5,9 @@
 	import Ripple from 'svelte-ripple';
 	import { modals } from 'svelte-modals';
 	import { callService, type HassEntity } from 'home-assistant-js-websocket';
+	import { getName } from '$lib/Utils';
 
-	export let entity_id: string | undefined = undefined;
+	export let sel: any;
 
 	let interval: ReturnType<typeof setInterval>;
 	let currentDate = new Date();
@@ -15,6 +16,7 @@
 
 	let clicked = false;
 
+	$: entity_id = sel?.entity_id;
 	$: if (entity_id && $states?.[entity_id]?.last_updated !== entity?.last_updated) {
 		entity = $states?.[entity_id];
 	}
@@ -111,42 +113,44 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="outer">
 	<div
 		class="container"
 		style:pointer-events={$modals.length !== 0 ? 'none' : 'unset'}
 		style:cursor={$editMode || $modals.length !== 0 ? 'unset' : 'pointer'}
-		style:transition="background-color {$motion}ms ease"
 		style:background-color={state === 'active' && entity_id
 			? 'rgba(0, 0, 0, 0.25)'
 			: 'rgba(0, 0, 0, 0)'}
+		style:padding={state === 'active' && entity_id
+			? '0.35rem 0.65rem 0.35rem 0.45rem'
+			: '0 0.65rem 0 0.45rem'}
+		style:transition="color {$motion}ms ease, background-color {$motion}ms ease, padding {$motion}ms
+		ease"
 	>
-		<div
-			class="timer"
-			style:color={finishes_at ? 'orange' : 'rgba(255, 255, 255, 0.5)'}
-			style:transition="color {$motion}ms ease"
-		>
-			<div class="icon">
-				<Icon icon="ic:twotone-timer" height="none" />
+		<div class="icon" style:color={finishes_at ? 'orange' : 'rgba(255, 255, 255, 0.5)'}>
+			<Icon icon="ic:twotone-timer" height="none" />
+		</div>
+
+		<div class="column">
+			<div class="name">
+				{getName(sel, entity) || $lang('unknown')}
 			</div>
 
-			<span style:margin-top="0.1rem">
+			<div class="counter" style:color={finishes_at ? 'orange' : 'rgba(255, 255, 255, 0.5)'}>
 				{#if state === 'active' && entity_id}
 					{displayTime || $timers[entity_id].pausedState}
 				{:else if state === 'paused' && entity_id}
 					{$timers[entity_id].pausedState}
-				{:else if state === 'idle'}
-					{$lang('idle')}
+				{:else if state === 'idle' && attributes?.duration}
+					{format(...parseRemaining(attributes.duration))}
 				{:else}
 					--:--
 				{/if}
-			</span>
+			</div>
 		</div>
 
 		{#if state}
-			<div
+			<button
 				class="start_pause"
 				style:cursor={$editMode ? 'unset' : 'pointer'}
 				style:pointer-events={$modals.length !== 0 ? 'auto' : 'unset'}
@@ -161,7 +165,7 @@
 				{:else}
 					<Icon icon="ic:round-play-arrow" height="none" />
 				{/if}
-			</div>
+			</button>
 		{/if}
 	</div>
 </div>
@@ -172,46 +176,49 @@
 	}
 
 	.container {
-		padding: var(--theme-sidebar-item-padding);
 		display: flex;
-		justify-content: space-between;
 		text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
 		border-radius: 0.65rem;
 		margin-left: -0.6rem;
 		margin-right: -0.6rem;
-		padding: 0.45rem 0.65rem 0.45rem 0.45rem;
 	}
 
-	.timer {
-		display: flex;
-		gap: 0.4rem;
-		font-weight: 500;
-		font-size: 2.2rem;
-		line-height: 2.25rem;
-		transition: font-size 190ms ease;
-		border-radius: 0.2em;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		margin-left: -0.1rem;
+	.icon {
+		flex-shrink: 1;
+		width: 3.1rem;
+		height: 3.1rem;
 		align-self: center;
+		margin-bottom: -0.2rem;
 	}
 
-	.icon {
-		width: 2.4rem;
-		height: 2.4rem;
-		padding-top: 0.08rem;
+	.column {
+		display: flex;
+		flex-direction: column;
+		margin-left: 0.2rem;
+		flex-grow: 1;
+		margin-left: 0.5rem;
+	}
+
+	.name {
+		margin-top: 0.1rem;
+		margin-bottom: -0.2rem;
+	}
+
+	.counter {
+		font-size: 1.8rem;
+		transition: font-size 190ms ease;
+		font-weight: 500;
 	}
 
 	.start_pause {
-		width: 2.2rem;
-		height: 2.2rem;
+		flex-shrink: 1;
+		width: 2.5rem;
+		height: 2.5rem;
 		background-color: var(--theme-navigate-background-color);
-		border: none;
-		color: inherit;
 		border-radius: 50%;
-		padding: 0.3rem;
-		margin-top: 0.1rem;
-		font-size: inherit;
+		padding: 0.4rem;
+		align-self: center;
+		color: inherit;
+		border: none;
 	}
 </style>

static/translations/af.json

@@ -43,7 +43,6 @@
 	"divider": "Divider",
 	"docs": "Documentation",
 	"done": "Done",
-	"duration": "Duration",
 	"edit": "Wysig",
 	"edit_title": "Wysig titel",
 	"edit_ui": "Wysig gebruikerskoppelvlak",

static/translations/ar.json

@@ -43,7 +43,6 @@
 	"divider": "Divider",
 	"docs": "\u0627\u0644\u0648\u062b\u0627\u0626\u0642",
 	"done": "\u0623\u064f\u0646\u062c\u0632",
-	"duration": "\u0627\u0644\u0645\u062f\u0629",
 	"edit": "\u062a\u0635\u062d\u064a\u062d",
 	"edit_title": "Edit title",
 	"edit_ui": "\u062a\u062d\u0631\u064a\u0631 \u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645",

static/translations/bg.json

@@ -1,5 +1,6 @@
 {
 	"above_horizon": "\u041d\u0430\u0434 \u0445\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430",
+	"active": "\u0410\u043a\u0442\u0438\u0432\u0435\u043d",
 	"add": "\u0414\u043e\u0431\u0430\u0432\u044f\u043d\u0435",
 	"add_view": "\u0414\u043e\u0431\u0430\u0432\u044f\u043d\u0435 \u043d\u0430 \u0438\u0437\u0433\u043b\u0435\u0434",
 	"addons": "\u0414\u043e\u0431\u0430\u0432\u043a\u0438",

static/translations/bn.json

@@ -42,7 +42,6 @@
 	"divider": "Divider",
 	"docs": "Documentation",
 	"done": "Done",
-	"duration": "Duration",
 	"edit": "Edit",
 	"edit_title": "Edit title",
 	"edit_ui": "Edit UI",

static/translations/bs.json

@@ -43,7 +43,6 @@
 	"divider": "Razdjelnik",
 	"docs": "Dokumentacija",
 	"done": "Gotovo",
-	"duration": "Trajanje",
 	"edit": "Uredi",
 	"edit_title": "Promjeni naslov",
 	"edit_ui": "Uredi korisni\u010dko su\u010delje",

static/translations/ca.json

@@ -1,5 +1,6 @@
 {
 	"above_horizon": "Sobre l'horitz\u00f3",
+	"active": "Actiu",
 	"add": "Afegeix",
 	"add_view": "Afegeix visualitzaci\u00f3",
 	"addons": "Complements",

static/translations/cs.json

@@ -1,5 +1,6 @@
 {
 	"above_horizon": "Nad obzorem",
+	"active": "Aktivn\u00ed",
 	"add": "P\u0159idat",
 	"add_view": "P\u0159idat pohled",
 	"addons": "Dopl\u0148ky",

static/translations/cy.json

@@ -43,7 +43,6 @@
 	"divider": "Divider",
 	"docs": "Documentation",
 	"done": "Done",
-	"duration": "Hyd",
 	"edit": "Golygu",
 	"edit_title": "Golygu teitl",
 	"edit_ui": "Golygu rhyngwyneb defnyddiwr",

static/translations/da.json

@@ -1,5 +1,6 @@
 {
 	"above_horizon": "Over horisonten",
+	"active": "Aktiv",
 	"add": "Tilf\u00f8j",
 	"add_view": "Tilf\u00f8j visning",
 	"addons": "Tilf\u00f8jelsesprogrammer",

static/translations/de.json

@@ -1,5 +1,6 @@
 {
 	"above_horizon": "\u00dcber dem Horizont",
+	"active": "Aktiv",
 	"add": "Hinzuf\u00fcgen",
 	"add_view": "Ansicht hinzuf\u00fcgen",
 	"addons": "Add-ons",

static/translations/en-GB.json

@@ -42,7 +42,6 @@
 	"divider": "Divider",
 	"docs": "Documentation",
 	"done": "Done",
-	"duration": "Duration",
 	"edit": "Edit",
 	"edit_title": "Edit title",
 	"edit_ui": "Edit UI",

static/translations/en.json

@@ -1,5 +1,6 @@
 {
 	"above_horizon": "Above horizon",
+	"active": "Active",
 	"add": "Add",
 	"add_view": "Add view",
 	"addons": "Add-ons",

static/translations/eo.json

@@ -42,7 +42,6 @@
 	"divider": "Divider",
 	"docs": "Documentation",
 	"done": "Done",
-	"duration": "Duration",
 	"edit": "Edit",
 	"edit_title": "Redakti titolon",
 	"edit_ui": "Edit UI",