From 33a6911a2fb5fdcc84c2cf7e18a9f8a3e1c90c09 Mon Sep 17 00:00:00 2001 From: Jeremy Willans Date: Wed, 30 Jun 2021 12:50:18 +1000 Subject: [PATCH] implement custom layout and button labels --- README.md | 40 +++++++++++++++++++----- dist/roomba-vacuum-card.js | 62 ++++++++++++++++++++++++++------------ 2 files changed, 76 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 059b0b3..39fa125 100644 --- a/README.md +++ b/README.md @@ -42,6 +42,7 @@ resources: | attributes | object/bool | *(see below)* | Customize attribute fields | labels | object/bool | *(see below)* | Customize label fields | vac_states | object/bool | *(see below)* | Customize vacuum states +| layout | object/bool | *(see below)* | Customize vacuum card layout | maint | bool | true | Display maintenance status | clean_base | bool | true | If no Clean Base, Set to `false` to show Bin Status | totals | bool | true | Show Total Stats on Right @@ -58,7 +59,26 @@ resources: | stop | bool | `false` | Show or hide stop button - enable blank (below) if you disable this | blank | bool | `true` | Show or hide blank button - splits startstop and dock if stop is disabled | dock | bool | `true` | Show or hide dock/empty button -| find | bool | `false` | Show or hide find button - not yet implemented in rest980 + +### Layout object + +Customize card layout. +**Note:** Status (top left), cannot be customized. +If you want to hide a field, use `false`, if you want to keep a blank link in its place, use `blank` + +| Name | Type | Default +| ---- | ---- | ------- +| left_2 | string | `mode` +| left_3 | string | `battery` +| left_4 | string | `clean_base` +| right_total_1 | string | `total_area` +| right_total_2 | string | `total_time` +| right_total_3 | string | `total_jobs` +| right_total_4 | string | `evac_events` +| right_job_1 | string | `job_initiator` +| right_job_2 | string | `job_time` +| right_job_3 | string | `job_recharge` +| right_job_4 | string | `job_expires` ### Attributes object @@ -76,10 +96,10 @@ Customize attribute fields. | total_time | string | `job_time` | Change total job time attribute | total_jobs | string | `total_jobs` | Change total jobs attribute | evac_events | string | `evac_events` | Change clean base empties attribute (for Clean Base) -| job_initiator | string | `last_job` | Change current/last mission job initiator attribute -| job_time | string | `last_job_time` | Change current/last mission area cleaned attribute -| job_recharge | string | `last_job_recharge_time` | Change current/last mission recharge minutes attribute -| job_area | string | `last_job_area` | Change current/last mission area cleaned attribute +| job_initiator | string | `job_initiator` | Change current/last mission job initiator attribute +| job_time | string | `job_time` | Change current/last mission area time attribute +| job_recharge | string | `job_recharge` | Change current/last mission recharge minutes attribute +| job_expires | string | `job_expires` | Change current/last mission expiry minutes attribute ### Labels object @@ -98,8 +118,14 @@ Customize or translate label names. | evac_events | string | `Evacs` | Change clean base empties label (for Clean Base) | job_initiator | string | `Source` | Change current/last mission job initiator label | job_time | string | `Time` | Change current/last mission area time label -| job_recharge | string | `Recharge` | Change current/last mission recharge minutes label -| job_area | string | `Area` | Change current/last mission area cleaned label +| job_recharge | string | `Recharge In` | Change current/last mission recharge minutes label +| job_expires | string | `Expires In` | Change current/last mission expiry minutes label +| full_clean | string | `Full Clean` | Change full clean button label +| resume | string | `Resume` | Change resume button label +| pause | string | `Pause` | Change pause button label +| empty | string | `Empty Bin` | Change empty bin button label +| dock | string | `Dock` | Change dock button label +| stop | string | `Stop` | Change stop button label ### Vac_States object diff --git a/dist/roomba-vacuum-card.js b/dist/roomba-vacuum-card.js index 507f7c3..73a21b3 100644 --- a/dist/roomba-vacuum-card.js +++ b/dist/roomba-vacuum-card.js @@ -102,23 +102,23 @@
${this.getState('status')}
-
${this.getValue('mode')}
-
${this.getValue('battery')}
-
${this.getValue('clean_base')}
+ ${this.state.layout['left_2'] ? html`
${this.getValue(this.state.layout['left_2'])}
` : null} + ${this.state.layout['left_3'] ? html`
${this.getValue(this.state.layout['left_3'])}
` : null} + ${this.state.layout['left_4'] ? html`
${this.getValue(this.state.layout['left_4'])}
` : null}
${this.state.showTotals ? html` -
${this.getValue('total_area')}
-
${this.getValue('total_time')}
-
${this.getValue('total_jobs')}
-
${this.getValue('evac_events')}
` : null} + ${this.state.layout['right_total_1'] ? html`
${this.getValue(this.state.layout['right_total_1'])}
` : null} + ${this.state.layout['right_total_2'] ? html`
${this.getValue(this.state.layout['right_total_2'])}
` : null} + ${this.state.layout['right_total_3'] ? html`
${this.getValue(this.state.layout['right_total_3'])}
` : null} + ${this.state.layout['right_total_4'] ? html`
${this.getValue(this.state.layout['right_total_4'])}
` : null}` : null}
${this.state.showJob ? html` -
${this.getValue('job_initiator')}
-
${this.getValue('job_time')}
-
${this.getValue('job_recharge')}
-
${this.getValue('job_area')}
` : null} + ${this.state.layout['right_job_1'] ? html`
${this.getValue(this.state.layout['right_job_1'])}
` : null} + ${this.state.layout['right_job_2'] ? html`
${this.getValue(this.state.layout['right_job_2'])}
` : null} + ${this.state.layout['right_job_3'] ? html`
${this.getValue(this.state.layout['right_job_3'])}
` : null} + ${this.state.layout['right_job_4'] ? html`
${this.getValue(this.state.layout['right_job_4'])}
` : null}` : null}
` : null} ${this.state.showButtons ? html` @@ -145,6 +145,9 @@ } getValue(field) { + if (field === 'blank') { + return `‎‎‎‏‏‎ ‎`; + } if ((this.state.attributes[field] === 'clean_base') && (!this.state.cleanBase)) { field = this.state.attributes.bin; const bin_check = this.state.attributes.bin_present; @@ -195,7 +198,7 @@ // Full Clean switch(field) { case "label": - return `Full Clean`; + return this.state.labels['full_clean']; case "icon": return `mdi:play`; case "action": @@ -205,7 +208,7 @@ // Resume switch(field) { case "label": - return `Resume`; + return this.state.labels['resume']; case "icon": return `mdi:play-pause`; case "action": @@ -215,7 +218,7 @@ // Pause switch(field) { case "label": - return `Pause`; + return this.state.labels['pause']; case "icon": return `mdi:pause`; case "action": @@ -227,7 +230,7 @@ // Empty switch(field) { case "label": - return `Empty Bin`; + return this.state.labels['empty']; case "icon": return `mdi:home-minus`; case "action": @@ -237,7 +240,7 @@ // Pause switch(field) { case "label": - return `Dock`; + return this.state.labels['dock']; case "icon": return `mdi:home-minus`; case "action": @@ -248,7 +251,7 @@ // Stop switch(field) { case "label": - return `Stop`; + return this.state.labels['stop']; case "icon": return `mdi:stop`; case "action": @@ -311,7 +314,13 @@ job_initiator: 'Source', job_time: 'Time', job_recharge: 'Resume In', - job_area: 'Area' + job_expires: 'Expires In', + full_clean: 'Full Clean', + resume: 'Resume', + pause: 'Pause', + empty: 'Empty Bin', + dock: 'Dock', + stop: 'Stop' }; const vac_states = { @@ -340,7 +349,7 @@ job_initiator: 'job_initiator', job_time: 'job_time', job_recharge: 'job_recharge', - job_area: 'job_area' + job_expires: 'job_expires' }; const buttons = { @@ -350,6 +359,20 @@ dock: true }; + const layout = { + left_2: 'mode', + left_3: 'battery', + left_4: 'clean_base', + right_total_1: 'total_area', + right_total_2: 'total_time', + right_total_3: 'total_jobs', + right_total_4: 'evac_events', + right_job_1: 'job_initiator', + right_job_2: 'job_time', + right_job_3: 'job_recharge', + right_job_4: 'job_expires', + }; + if (!config.entity) throw new Error('Please define an entity.'); const re = new RegExp("(sensor|vacuum)"); if (!re.test(config.entity.split('.')[0])) throw new Error('Please define a sensor or vacuum entity.'); @@ -372,6 +395,7 @@ attributes: Object.assign({}, attributes, config.attributes), vac_states: Object.assign({}, vac_states, config.vac_states), labels: Object.assign({}, labels, config.labels), + layout: Object.assign({}, layout, config.layout), }; this.style = {