+
+
+ ${localize(`source.${item.toLowerCase()}`) || item}
+
+ `)}
+
+
+ `;
+ }
+ renderBattery() {
+ var _a;
+ const { battery_level, battery_icon } = this.getAttributes(this.entity);
+ const batteryLevel = ((_a = this.battery) === null || _a === void 0 ? void 0 : _a.state) || battery_level;
+ const batteryIcon = (this === null || this === void 0 ? void 0 : this.battery) ? Se(this.battery) : battery_icon;
+ if (batteryLevel && batteryIcon) {
+ return x `
+
+
+ ${items.map((item, index) => x `
+
+
+ `;
+ }
+ return A;
+ }
+ renderMapOrImage(state) {
+ if (this.config.compact_view) {
+ return A;
+ }
+ if (this.map) {
+ return this.map && this.map.attributes.entity_picture
+ ? x `
+
+ ${value}
+ ${unit}
+
+ `;
+ });
+ if (!stats.length) {
+ return A;
+ }
+ return x `${subtitle}
+ ${stats}
`;
+ }
+ renderName() {
+ const { friendly_name } = this.getAttributes(this.entity);
+ if (!this.config.show_name) {
+ return A;
+ }
+ return x ` ${friendly_name}
`;
+ }
+ renderStatus() {
+ const { status } = this.getAttributes(this.entity);
+ if (!this.config.show_status) {
+ return A;
+ }
+ let s;
+ if (this.config.status_template === undefined) {
+ const localizedStatus = localize(`status.${status.toLowerCase()}`) || status;
+ s = x `
+
+ ${localizedStatus}
+
+ `;
+ }
+ else {
+ s = x `
+
+ ${s}
+
+
+
+ `;
+ }
+ renderToolbar(state) {
+ if (!this.config.show_toolbar) {
+ return A;
+ }
+ switch (state) {
+ case 'on':
+ case 'auto':
+ case 'spot':
+ case 'edge':
+ case 'single_room':
+ case 'mowing':
+ case 'edgecut':
+ case 'cleaning': {
+ return x `
+
+ `;
+ }
+ case 'paused': {
+ return x `
+
+ `;
+ }
+ case 'returning': {
+ return x `
+
+ `;
+ }
+ case 'docked':
+ case 'idle':
+ default: {
+ const buttons = this.config.shortcuts.map(({ name, service, icon, service_data, target, link }) => {
+ if (link) {
+ return x `
+
+
`;
@@ -176,7 +231,7 @@ export class VacuumCardEditor extends LitElement implements LovelaceCardEditor {
const target = event.target as ConfigElement;
if (
!target.configValue ||
- this.config[target.configValue] === target?.value
+ (this.config[target.configValue] && this.config[target.configValue] === target?.value)
) {
return;
}
diff --git a/src/ha-template.ts b/src/ha-template.ts
new file mode 100644
index 00000000..91c7dbe6
--- /dev/null
+++ b/src/ha-template.ts
@@ -0,0 +1,100 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { LitElement, TemplateResult, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+
+type Template = TemplateResult | string | typeof nothing;
+type UnsubscribePromise = Promise<() => Promise>;
+type UnsubscribeError = Error & { code: string };
+
+export class HATemplate extends LitElement {
+ @property() public hass!: HomeAssistant;
+
+ @property() public template = '';
+ @property() public variables: Record = {};
+ @property() public value: string | null = null;
+ @property() public valueResult: string | null = null;
+
+ @state() private unsubscribePromise: UnsubscribePromise | null = null;
+
+ public connectedCallback() {
+ super.connectedCallback();
+
+ this.updateTemplateValue();
+ }
+
+ protected updateTemplateValue() {
+ if (!this.hass) {
+ console.warn('hass object is not provided');
+ return;
+ }
+
+ if (this.unsubscribePromise) {
+ // Being here means that we have an update requested, but
+ // a promise already exists. This can happen if the async
+ // fetch hasn't completed, but more likely, it's because
+ // the fetch completed, the promise is fulfilled, and we
+ // want to update. So we unsubscribe and re-fetch.
+ this.unsubscribeFrom(this.unsubscribePromise);
+ this.unsubscribePromise = null;
+ }
+
+ if (!this.template) {
+ return;
+ }
+
+ this.unsubscribePromise = this.hass.connection.subscribeMessage<{
+ result: string;
+ }>(
+ (msg) => {
+ // Save to two places because the 'value' can be updated externally.
+ // This way, we know when the value has indeed changed and can
+ // re-fetch the template.
+ this.value = msg.result;
+ this.valueResult = msg.result;
+ },
+ {
+ type: 'render_template',
+ template: this.template,
+ variables: this.variables,
+ }
+ );
+ }
+
+ public disconnectedCallback() {
+ super.disconnectedCallback();
+
+ if (this.unsubscribePromise) {
+ this.unsubscribeFrom(this.unsubscribePromise);
+ this.unsubscribePromise = null;
+ }
+ }
+
+ protected async unsubscribeFrom(unsubscribePromise: UnsubscribePromise) {
+ try {
+ const unsubscribe = await unsubscribePromise;
+ return unsubscribe();
+ } catch (err: unknown) {
+ // We don't care when connection is closed.
+ if ((err as UnsubscribeError).code !== 'not_found') {
+ throw err;
+ }
+ }
+ }
+
+ protected render(): Template {
+ // If the valueResult is null, that means the initial fetch hasn't completed or there's no template. Skip.
+ // If the value isn't null and doesn't equal the result, it means we need to re-fetch.
+ if (this.value && this.valueResult && this.value !== this.valueResult)
+ this.updateTemplateValue();
+
+ // Return now, and it will update with the new value later.
+ return this.valueResult ?? this.value ?? nothing;
+ }
+
+}
+
+export default function register(componentName = 'ha-template') {
+ if (!customElements.get(componentName)) {
+ customElements.define(componentName, HATemplate);
+ }
+}
\ No newline at end of file
diff --git a/src/styles.css b/src/styles.css
index 22c1a822..652ad18c 100755
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,12 +1,8 @@
:host {
- --vc-background: var(
- --ha-card-background,
- var(--card-background-color, white)
- );
--vc-primary-text-color: var(--primary-text-color);
--vc-secondary-text-color: var(--secondary-text-color);
--vc-icon-color: var(--secondary-text-color);
- --vc-toolbar-background: var(--vc-background);
+ --vc-toolbar-background: var(--vc-background, var(--ha-card-background, var(--card-background-color, white)));
--vc-toolbar-text-color: var(--secondary-text-color);
--vc-toolbar-icon-color: var(--secondary-text-color);
--vc-divider-color: var(--entities-divider-color, var(--divider-color));
@@ -25,7 +21,7 @@ ha-card {
}
.preview {
- background: var(--vc-background);
+ background: var(--vc-background, var(--ha-card-background, var(--card-background-color, white)));
position: relative;
text-align: center;
@@ -136,16 +132,18 @@ ha-card {
filter: brightness(0.9);
}
-.vacuum.on,
-.vacuum.cleaning,
-.vacuum.auto,
-.vacuum.spot,
-.vacuum.edge,
-.vacuum.single_room {
+.vacuum.animated.on,
+.vacuum.animated.cleaning,
+.vacuum.animated.mowing,
+.vacuum.animated.edgecut,
+.vacuum.animated.auto,
+.vacuum.animated.spot,
+.vacuum.animated.edge,
+.vacuum.animated.single_room {
animation: cleaning 5s linear infinite;
}
-.vacuum.returning {
+.vacuum.animated.returning {
animation: returning 2s linear infinite;
}
@@ -177,11 +175,13 @@ ha-card {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
- margin-left: calc(28px + var(--vc-spacing)); /* size + margin of spinner */
+ gap: var(--vc-spacing);
}
-.status mwc-circular-progress {
+.status ha-circular-progress {
--mdc-theme-primary: var(--vc-secondary-text-color) !important;
+ --md-circular-progress-size: var(--body1-line-height, 20px);
+ --md-circular-progress-active-indicator-width: 20;
margin-left: var(--vc-spacing);
}
diff --git a/src/translations/da.json b/src/translations/da.json
index ced68335..43ccf9c4 100644
--- a/src/translations/da.json
+++ b/src/translations/da.json
@@ -1,17 +1,45 @@
{
"status": {
"cleaning": "Støvsuger",
+ "auto": "Automatisk rengøring",
+ "spot": "Spot rengøring",
+ "edge": "Kant rengøring cleaning",
+ "single_room": "Rengører udvalgt rum",
"paused": "Pauset",
"idle": "Inaktiv",
+ "stop": "Stoppet",
"charging": "Lader",
- "returning home": "Returnerer til dock"
+ "returning": "Returnerer til dock",
+ "returning_home": "Returnerer til dock",
+ "docked": "I dock",
+ "unknown": "Ukendt",
+ "offline": "Offline",
+ "error": "Fejl",
+ "charger_disconnected": "Oplader er frakoblet",
+ "remote_control_active": "Fjernstyring er aktiveret",
+ "manual_mode": "Manuel tilstand",
+ "shutting_down": "Lukker ned",
+ "updating": "Opdaterer",
+ "going_to_target": "Kører til punkt",
+ "zoned_cleaning": "Zone rengøring",
+ "segment_cleaning": "Rum rengøring"
},
"source": {
"gentle": "Mild",
"silent": "Stille",
"standard": "Standard",
"medium": "Medium",
- "turbo": "Turbo"
+ "turbo": "Turbo",
+ "normal": "Normal",
+ "max": "Max",
+ "max_plus": "Max+",
+ "high": "Høj",
+ "strong": "Kraftig",
+ "quiet": "Stille",
+ "auto": "Auto",
+ "balanced": "Balanceret",
+ "custom": "Brugerdefineret",
+ "off": "Fra"
},
"common": {
"name": "Vacuum Card",
@@ -25,14 +53,15 @@
"not_available": "Støvsuger er ikke tilgængelig"
},
"error": {
+ "invalid_config": "Ugyldig konfiguration",
"missing_entity": "En enhed skal specificeres!"
},
"warning": {
- "actions_array": ""
+ "actions_array": "ADVARSEL: 'actions' bruges til at overskrive handlinger for eksisterende knapper. Hvis du vil tilføje yderligere handlinger skal du i stedet bruge 'shortcuts'."
},
"editor": {
"entity": "Enhed (Påkrævet)",
- "map": "Map Camera (Valgfrit)",
+ "map": "Entitet med kamera til kortvisning (Valgfrit)",
"image": "Billede (Valgfrit)",
"compact_view": "Kompakt visning",
"compact_view_aria_label_on": "Slå kompakt visning til",
diff --git a/src/translations/de.json b/src/translations/de.json
index 4522d355..1adeb5f7 100644
--- a/src/translations/de.json
+++ b/src/translations/de.json
@@ -28,7 +28,10 @@
"gentle": "Schonend",
"silent": "Leise",
"standard": "Standard",
+ "low": "Niedrig",
"medium": "Mittel",
+ "high": "Hoch",
+ "ultrahigh": "Sehr hoch",
"turbo": "Max",
"normal": "Normal",
"max": "Maximal",
@@ -54,7 +57,8 @@
},
"error": {
"invalid_config": "Ungeültige Konfiguration",
- "missing_entity": "Angabe der Entität ist erforderlich!"
+ "missing_entity": "Angabe der Entität ist erforderlich!",
+ "domain_not_supported": "Domain nicht unterstützt! Erfoderlich ist {0}, aber Sie haben {1} angegeben!"
},
"warning": {
"actions_array": "WARNUNG: 'actions' ist dafür vorgesehen, die Standardaktionen für vorhandene Schaltflächen zu überschreiben. Wenn Sie zusätzliche Aktionen hinzufügen möchten, verwenden Sie stattdessen die Option 'shortcuts'."
@@ -62,6 +66,7 @@
"editor": {
"entity": "Entität (Erforderlich)",
"map": "Map Camera (Optional)",
+ "water_level": "Wasser Level Select (Optional)",
"image": "Bild (Optional)",
"compact_view": "kompakte Ansicht",
"compact_view_aria_label_on": "Schalte kompakte Ansicht ein",
diff --git a/src/translations/en.json b/src/translations/en.json
index b5762cdd..848a419f 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -28,12 +28,14 @@
"gentle": "Gentle",
"silent": "Silent",
"standard": "Standard",
+ "low": "Low",
"medium": "Medium",
"turbo": "Turbo",
"normal": "Normal",
"max": "Max",
"max_plus": "Max+",
"high": "High",
+ "ultrahigh": "Ultrahigh",
"strong": "Strong",
"quiet": "Quiet",
"auto": "Auto",
@@ -54,14 +56,17 @@
},
"error": {
"invalid_config": "Invalid configuration",
- "missing_entity": "Specifying entity is required!"
+ "missing_entity": "Specifying entity is required!",
+ "domain_not_supported": "Domain not supported! Required is {0}, but you specified {1}!"
},
"warning": {
"actions_array": "WARNING: 'actions' is reserved to override default actions for existing buttons. If your intention was to add additional actions, use the 'shortcuts' option instead."
},
"editor": {
"entity": "Entity (Required)",
+ "battery": "Battery Sensor (Optional)",
"map": "Map Camera (Optional)",
+ "water_level": "Water Level Select (Optional)",
"image": "Image (Optional)",
"compact_view": "Compact View",
"compact_view_aria_label_on": "Toggle compact view on",
@@ -75,6 +80,10 @@
"show_toolbar": "Show Toolbar",
"show_toolbar_aria_label_on": "Toggle display toolbar on",
"show_toolbar_aria_label_off": "Toggle display toolbar off",
+ "animated": "Animated",
+ "animated_aria_label_on": "Toggle animated on",
+ "animated_aria_label_off": "Toggle animated off",
+ "status_template": "Status Template (Optional)",
"code_only_note": "Note: Setting actions and stats options are available exclusively using Code Editor."
}
}
diff --git a/src/translations/fr.json b/src/translations/fr.json
index c9c2e69d..6aef159e 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -13,16 +13,35 @@
"returning": "Retour à la base",
"docked": "A la base",
"unknown": "Inconnu",
- "offline": "Déconnecté"
+ "offline": "Déconnecté",
+ "error": "Erreur",
+ "charger_disconnected": "Chargement Déconnecté",
+ "remote_control_active": "Contrôle à distance activé",
+ "manual_mode": "Mode Manuelle",
+ "shutting_down": "Arrêt du système",
+ "updating": "Mise à jour",
+ "going_to_target": "aller_vers_la_cible",
+ "zoned_cleaning": "Nettoyage de zone",
+ "segment_cleaning": "Nettoyage du périmètre"
},
"source": {
"gentle": "Doux",
"silent": "Silencieux",
"standard": "Standard",
+ "low": "Bas",
"medium": "Moyen",
+ "high": "Intense",
+ "ultrahigh": "Très Intense",
"turbo": "Turbo",
"normal": "Normal",
- "high": "Intense"
+ "max": "Maximale",
+ "max_plus": "Maximale+",
+ "strong": "Fort",
+ "quiet": "Silencieux",
+ "auto": "Auto",
+ "balanced": "Équilibré",
+ "custom": "Personnalisé",
+ "off": "Arrêter"
},
"common": {
"name": "Vacuum Carte",
@@ -32,14 +51,16 @@
"pause": "Pause",
"stop": "Stop",
"return_to_base": "Retour base",
- "locate": "Localiser aspirateur",
+ "locate": "Localiser l'aspirateur",
"not_available": "L'aspirateur n'est pas disponible"
},
"error": {
- "missing_entity": "La spécification de l'entité est requise !"
+ "invalid_config": "Configuration invalide",
+ "missing_entity": "Champs requis!",
+ "domain_not_supported": "Domaine non supporté ! Requise est {0}, mais utiliser {1}!"
},
"warning": {
- "actions_array": ""
+ "actions_array": "ATTENTION: les 'actions' sont reservées pour écraser l'action par défaut des boutons existants. If besoin d'ajouter des actions, utiliser l'option 'shortcuts' à la place."
},
"editor": {
"entity": "Entité (obligatoire)",
@@ -59,4 +80,4 @@
"show_toolbar_aria_label_off": "Désactiver l'affichage de la barre d'outils",
"code_only_note": "Remarque: Les options de réglage des actions et statistiques sont disponibles exclusivement en utilisant l'éditeur de code."
}
-}
+}
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 7776b47f..d7469f67 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -54,13 +54,17 @@ export interface VacuumCardShortcut {
service?: string;
service_data?: Record;
target?: HassServiceTarget;
+ link?: string;
}
export interface VacuumCardConfig {
entity: string;
+ status_template: string;
+ battery: string;
map: string;
map_refresh: number;
image: string;
+ animated: boolean;
show_name: boolean;
show_status: boolean;
show_toolbar: boolean;
@@ -68,6 +72,7 @@ export interface VacuumCardConfig {
stats: Record;
actions: Record;
shortcuts: VacuumCardShortcut[];
+ water_level: string;
}
export interface VacuumServiceCallParams {
diff --git a/src/vacuum-card.ts b/src/vacuum-card.ts
index 23841894..8d1eebe9 100755
--- a/src/vacuum-card.ts
+++ b/src/vacuum-card.ts
@@ -5,8 +5,9 @@ import {
fireEvent,
HomeAssistant,
ServiceCallRequest,
+ stateIcon,
} from 'custom-card-helpers';
-import registerTemplates from 'ha-template';
+import registerTemplates from './ha-template';
import get from 'lodash/get';
import localize from './localize';
import styles from './styles.css';
@@ -67,7 +68,8 @@ export class VacuumCard extends LitElement {
}
get entity(): VacuumEntity {
- return this.hass.states[this.config.entity] as VacuumEntity;
+ const vacuum = this.hass.states[this.config.entity] as VacuumEntity;
+ return vacuum;
}
get map(): HassEntity | null {
@@ -77,6 +79,28 @@ export class VacuumCard extends LitElement {
return this.hass.states[this.config.map];
}
+ get battery(): HassEntity | null {
+ if (!this.hass || !this.config.battery) {
+ return null;
+ }
+ return this.hass.states[this.config.battery];
+ }
+
+ get waterLevelEntity(): string | null {
+ if (!this.hass || !this.config.water_level) {
+ return null;
+ }
+
+ return this.config.water_level;
+ }
+
+ get waterLevel(): HassEntity | null {
+ if (this.waterLevelEntity) {
+ return this.hass.states[this.waterLevelEntity];
+ }
+ return null;
+ }
+
public setConfig(config: VacuumCardConfig): void {
this.config = buildConfig(config);
}
@@ -85,8 +109,24 @@ export class VacuumCard extends LitElement {
return this.config.compact_view ? 3 : 8;
}
+ public hasWaterLevelChanged(changedProps: PropertyValues): boolean {
+ if (this.waterLevelEntity === null || this.waterLevel === null) {
+ return false;
+ }
+
+ return (
+ this.hass &&
+ !!this.config.water_level &&
+ changedProps.get('hass').states[this.waterLevelEntity].state !==
+ this.waterLevel.state
+ );
+ }
+
public shouldUpdate(changedProps: PropertyValues): boolean {
- return hasConfigOrEntityChanged(this, changedProps, false);
+ return (
+ hasConfigOrEntityChanged(this, changedProps, false) ||
+ this.hasWaterLevelChanged(changedProps)
+ );
}
protected updated(changedProps: PropertyValues) {
@@ -158,6 +198,14 @@ export class VacuumCard extends LitElement {
this.callVacuumService('set_fan_speed', { request: false }, { fan_speed });
}
+ private handleSelect(e: PointerEvent): void {
+ const value = (e.target).getAttribute('value');
+ this.hass.callService('select', 'select_option', {
+ entity_id: this.waterLevel ? this.waterLevel.entity_id : '',
+ option: value,
+ });
+ }
+
private handleVacuumAction(
action: string,
params: VacuumActionParams = { request: true },
@@ -189,23 +237,48 @@ export class VacuumCard extends LitElement {
return nothing;
}
- const selected = sources.indexOf(source);
+ return this.renderDropDown(source, sources, 'mdi:fan', this.handleSpeed);
+ }
+
+ private renderWaterLevel(): Template {
+ const entity = this.waterLevel;
+
+ if (!entity) {
+ return nothing;
+ }
+
+ return this.renderDropDown(
+ entity.state,
+ entity.attributes.options,
+ 'mdi:water',
+ this.handleSelect,
+ );
+ }
+
+ private renderDropDown(
+ selectedObject: string,
+ items: Record,
+ icon: string,
+ onSelected: Function,
+ ): Template {
+ const selected = items.indexOf(selectedObject);
return html`
${localize(`source.${item.toLowerCase()}`) || item}
@@ -218,13 +291,18 @@ export class VacuumCard extends LitElement {
private renderBattery(): Template {
const { battery_level, battery_icon } = this.getAttributes(this.entity);
-
- return html`
- 
@@ -316,22 +395,37 @@ export class VacuumCard extends LitElement {
private renderStatus(): Template {
const { status } = this.getAttributes(this.entity);
- const localizedStatus =
- localize(`status.${status.toLowerCase()}`) || status;
-
if (!this.config.show_status) {
return nothing;
}
-
- return html`
-
-
- ${sources.map(
- (item, index) => html`
+ ${items.map(
+ (item: string, index: number) => html`
-
- `;
+ const batteryLevel = this.battery?.state || battery_level;
+ const batteryIcon = this?.battery ? stateIcon(this.battery) : battery_icon;
+
+ if (batteryLevel && batteryIcon) {
+ return html`
+
+
+ `;
+ }
+ return nothing;
}
private renderMapOrImage(state: VacuumEntityState): Template {
@@ -246,10 +324,11 @@ export class VacuumCard extends LitElement {
const src =
this.config.image === 'default' ? DEFAULT_IMAGE : this.config.image;
+ const animated = this.config.animated ? ' animated' : '';
return html`
+ let s;
+ if (this.config.status_template === undefined) {
+ const localizedStatus =
+ localize(`status.${status.toLowerCase()}`) || status;
+ s = html`
${localizedStatus}
+ `;
+ } else {
+ s = html`
+
+ ${s}
`;
}
@@ -347,6 +441,8 @@ export class VacuumCard extends LitElement {
case 'spot':
case 'edge':
case 'single_room':
+ case 'mowing':
+ case 'edgecut':
case 'cleaning': {
return html`