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.fireEvent('hass-more-info')}">
${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.tabSwap('last')}">
${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.tabSwap('total')}">
${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 = {