add water level

README.md

@@ -123,6 +123,7 @@ Here is what every option means:
 | `stats`        | `object`  | Optional     | Custom per state stats for your vacuum cleaner                                                            |
 | `actions`      | `object`  | Optional     | Override default actions behavior with service invocations.                                               |
 | `shortcuts`    | `object`  | Optional     | List of shortcuts shown at the right bottom part of the card with custom actions for your vacuum cleaner. |
+| `water_level`  | `string`  | Optional     | An entity_id within the `select` domain, for showing/setting the water level of the vacuum.               |
 
 ### `stats` object
 

package.json

@@ -27,7 +27,8 @@
     "custom-card-helpers": "^1.6.4",
     "ha-template": "^1.0.5",
     "lit": "^2.0.0",
-    "lodash.get": "^4.4.2"
+    "lodash.get": "^4.4.2",
+    "typescript-string-operations": "^1.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",

src/translations/de.json

@@ -13,7 +13,10 @@
   "source": {
     "silent": "Leise",
     "standard": "Standard",
+    "low": "Niedrig",
     "medium": "Mittel",
+    "high": "Hoch",
+    "ultrahigh": "Sehr hoch",
     "turbo": "Max",
     "quiet": "Leise",
     "max": "Maximal",
@@ -31,14 +34,16 @@
     "locate": "Staubsauger lokalisieren"
   },
   "error": {
-    "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": ""
   },
   "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",

src/translations/en.json

@@ -20,10 +20,12 @@
     "gentle": "Gentle",
     "silent": "Silent",
     "standard": "Standard",
+    "low": "Low",
     "medium": "Medium",
     "turbo": "Turbo",
     "normal": "Normal",
     "high": "High",
+    "ultrahigh": "Ultrahigh",
     "strong": "Strong",
     "quiet": "Quiet",
     "max": "Max",
@@ -41,14 +43,16 @@
     "not_available": "Vacuum is not available"
   },
   "error": {
-    "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)",
     "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",

src/vacuum-card-editor.js

@@ -36,6 +36,14 @@ export class VacuumCardEditor extends LitElement {
     return '';
   }
 
+  get _water_level() {
+    if (this._config) {
+      return this._config.water_level || '';
+    }
+
+    return '';
+  }
+
   get _image() {
     if (this._config) {
       return this._config.image || '';
@@ -82,45 +90,43 @@ export class VacuumCardEditor extends LitElement {
     );
   }
 
+  renderDropDownMenu(configValue, selectedEntity, entities) {
+    return html`
+      <paper-dropdown-menu
+        label="${localize('editor.' + configValue)}"
+        @value-changed=${this._valueChanged}
+        .configValue=${configValue}
+      >
+        <paper-listbox
+          slot="dropdown-content"
+          .selected=${entities.indexOf(selectedEntity)}
+        >
+          ${entities.map((entity) => {
+            return html` <paper-item>${entity}</paper-item> `;
+          })}
+        </paper-listbox>
+      </paper-dropdown-menu>
+    `;
+  }
+
   render() {
     if (!this.hass) {
       return nothing;
     }
 
     const vacuumEntities = this.getEntitiesByType('vacuum');
     const cameraEntities = this.getEntitiesByType('camera');
+    const selectEntities = this.getEntitiesByType('select');
 
     return html`
       <div class="card-config">
-        <paper-dropdown-menu
-          label="${localize('editor.entity')}"
-          @value-changed=${this._valueChanged}
-          .configValue=${'entity'}
-        >
-          <paper-listbox
-            slot="dropdown-content"
-            .selected=${vacuumEntities.indexOf(this._entity)}
-          >
-            ${vacuumEntities.map((entity) => {
-              return html` <paper-item>${entity}</paper-item> `;
-            })}
-          </paper-listbox>
-        </paper-dropdown-menu>
-
-        <paper-dropdown-menu
-          label="${localize('editor.entity')}"
-          @value-changed=${this._valueChanged}
-          .configValue=${'map'}
-        >
-          <paper-listbox
-            slot="dropdown-content"
-            .selected=${cameraEntities.indexOf(this._map)}
-          >
-            ${cameraEntities.map((entity) => {
-              return html` <paper-item>${entity}</paper-item> `;
-            })}
-          </paper-listbox>
-        </paper-dropdown-menu>
+        ${this.renderDropDownMenu('entity', this._entity, vacuumEntities)}
+        ${this.renderDropDownMenu('map', this._map, cameraEntities)}
+        ${this.renderDropDownMenu(
+          'water_level',
+          this._water_level,
+          selectEntities
+        )}
 
         <paper-input
           label="${localize('editor.image')}"