Skip to content

Commit

Permalink
implement custom layout and button labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeremywillans
jeremywillans committed Jun 30, 2021
1 parent 6005f43 commit 33a6911
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 26 deletions.
40 changes: 33 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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

Expand All @@ -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

Expand All @@ -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

Expand Down
62 changes: 43 additions & 19 deletions dist/roomba-vacuum-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,23 +102,23 @@
<div class="content grid" style="${this.style.content + this.style.text}" >
<div class="grid-content grid-left" @click="${() => this.fireEvent('hass-more-info')}">
<div>${this.getState('status')}</div>
<div>${this.getValue('mode')}</div>
<div>${this.getValue('battery')}</div>
<div>${this.getValue('clean_base')}</div>
${this.state.layout['left_2'] ? html`<div>${this.getValue(this.state.layout['left_2'])}</div>` : null}
${this.state.layout['left_3'] ? html`<div>${this.getValue(this.state.layout['left_3'])}</div>` : null}
${this.state.layout['left_4'] ? html`<div>${this.getValue(this.state.layout['left_4'])}</div>` : null}
</div>
<div id="total" class="${this.state.hideRightGrid ? "grid-content " : "grid-content grid-right totals"} ${this.state.defaultTotals ? "tabactive" : "tabpassive"}" @click="${() => this.tabSwap('last')}">
${this.state.showTotals ? html`
<div>${this.getValue('total_area')}</div>
<div>${this.getValue('total_time')}</div>
<div>${this.getValue('total_jobs')}</div>
<div>${this.getValue('evac_events')}</div>` : null}
${this.state.layout['right_total_1'] ? html`<div>${this.getValue(this.state.layout['right_total_1'])}</div>` : null}
${this.state.layout['right_total_2'] ? html`<div>${this.getValue(this.state.layout['right_total_2'])}</div>` : null}
${this.state.layout['right_total_3'] ? html`<div>${this.getValue(this.state.layout['right_total_3'])}</div>` : null}
${this.state.layout['right_total_4'] ? html`<div>${this.getValue(this.state.layout['right_total_4'])}</div>` : null}` : null}
</div>
<div id="last" class="${this.state.hideRightGrid ? "grid-content " : "grid-content grid-right job"} ${this.state.defaultTotals ? "tabpassive" : "tabactive"}" @click="${() => this.tabSwap('total')}">
${this.state.showJob ? html`
<div>${this.getValue('job_initiator')}</div>
<div>${this.getValue('job_time')}</div>
<div>${this.getValue('job_recharge')}</div>
<div>${this.getValue('job_area')}</div>` : null}
${this.state.layout['right_job_1'] ? html`<div>${this.getValue(this.state.layout['right_job_1'])}</div>` : null}
${this.state.layout['right_job_2'] ? html`<div>${this.getValue(this.state.layout['right_job_2'])}</div>` : null}
${this.state.layout['right_job_3'] ? html`<div>${this.getValue(this.state.layout['right_job_3'])}</div>` : null}
${this.state.layout['right_job_4'] ? html`<div>${this.getValue(this.state.layout['right_job_4'])}</div>` : null}` : null}
</div>
</div>` : null}
${this.state.showButtons ? html`
Expand All @@ -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;
Expand Down Expand Up @@ -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":
Expand All @@ -205,7 +208,7 @@
// Resume
switch(field) {
case "label":
return `Resume`;
return this.state.labels['resume'];
case "icon":
return `mdi:play-pause`;
case "action":
Expand All @@ -215,7 +218,7 @@
// Pause
switch(field) {
case "label":
return `Pause`;
return this.state.labels['pause'];
case "icon":
return `mdi:pause`;
case "action":
Expand All @@ -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":
Expand All @@ -237,7 +240,7 @@
// Pause
switch(field) {
case "label":
return `Dock`;
return this.state.labels['dock'];
case "icon":
return `mdi:home-minus`;
case "action":
Expand All @@ -248,7 +251,7 @@
// Stop
switch(field) {
case "label":
return `Stop`;
return this.state.labels['stop'];
case "icon":
return `mdi:stop`;
case "action":
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand All @@ -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.');
Expand All @@ -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 = {
Expand Down

0 comments on commit 33a6911

Please sign in to comment.