Refactoring

Author: killi199

src/editor.ts

@@ -42,6 +42,29 @@ export class VacuumCardEditor extends LitElement implements LovelaceCardEditor {
     return Object.keys(this.hass.states).filter((id) => id.startsWith(type));
   }
 
+  private renderDropdownMenu(
+    configValue: string,
+    selectedEntity: string | undefined,
+    entities: string[],
+  ) {
+    return html` <div class="option">
+      <ha-select
+        .label=${localize('editor.' + configValue)}
+        @selected=${this.valueChanged}
+        .configValue=${configValue}
+        .value=${selectedEntity}
+        @closed=${(e: Event) => e.stopPropagation()}
+        fixedMenuPosition
+        naturalMenuWidth
+      >
+        ${entities.map(
+          (entity) =>
+            html` <mwc-list-item .value=${entity}>${entity}</mwc-list-item>`,
+        )}
+      </ha-select>
+    </div>`;
+  }
+
   protected render(): Template {
     if (!this.hass) {
       return nothing;
@@ -77,43 +100,12 @@ export class VacuumCardEditor extends LitElement implements LovelaceCardEditor {
           </ha-select>
         </div>
 
-        <div class="option">
-          <ha-select
-            .label=${localize('editor.map')}
-            @selected=${this.valueChanged}
-            .configValue=${'map'}
-            .value=${this.config.map}
-            @closed=${(e: Event) => e.stopPropagation()}
-            fixedMenuPosition
-            naturalMenuWidth
-          >
-            ${cameraEntities.map(
-              (entity) =>
-                html` <mwc-list-item .value=${entity}
-                  >${entity}</mwc-list-item
-                >`,
-            )}
-          </ha-select>
-        </div>
-
-        <div class="option">
-          <ha-select
-            .label=${localize('editor.water_level')}
-            @selected=${this.valueChanged}
-            .configValue=${'water_level'}
-            .value=${this.config.water_level}
-            @closed=${(e: Event) => e.stopPropagation()}
-            fixedMenuPosition
-            naturalMenuWidth
-          >
-            ${selectEntities.map(
-              (entity) =>
-                html` <mwc-list-item .value=${entity}
-                  >${entity}</mwc-list-item
-                >`,
-            )}
-          </ha-select>
-        </div>
+        ${this.renderDropdownMenu('map', this.config.map, cameraEntities)}
+        ${this.renderDropdownMenu(
+          'water_level',
+          this.config.water_level,
+          selectEntities,
+        )}
 
         <div class="option">
           <paper-input

src/vacuum-card.ts

@@ -241,31 +241,7 @@ export class VacuumCard extends LitElement {
       return nothing;
     }
 
-    const selected = sources.indexOf(source);
-
-    return html`
-      <div class="tip">
-        <ha-button-menu @click="${(e: Event) => e.stopPropagation()}">
-          <div slot="trigger">
-            <ha-icon icon="mdi:fan"></ha-icon>
-            <span class="icon-title">
-              ${localize(`source.${source.toLowerCase()}`) || source}
-            </span>
-          </div>
-          ${sources.map(
-            (item, index) => html`
-              <mwc-list-item
-                ?activated=${selected === index}
-                value=${item}
-                @click=${this.handleSpeed}
-              >
-                ${localize(`source.${item.toLowerCase()}`) || item}
-              </mwc-list-item>
-            `,
-          )}
-        </ha-button-menu>
-      </div>
-    `;
+    return this.renderDropDown(source, sources, 'mdi:fan', this.handleSpeed);
   }
 
   private renderWaterLevel(): Template {
@@ -275,24 +251,38 @@ export class VacuumCard extends LitElement {
       return nothing;
     }
 
-    const selected = entity.attributes.options.indexOf(entity.state);
+    return this.renderDropDown(
+      entity.state,
+      entity.attributes.options,
+      'mdi:water',
+      this.handleSelect,
+    );
+  }
+
+  private renderDropDown(
+    selectedObject: string,
+    objects: any,
+    icon: string,
+    onSelected: Function,
+  ): Template {
+    const selected = objects.indexOf(selectedObject);
 
     return html`
       <div class="tip">
         <ha-button-menu @click="${(e: Event) => e.stopPropagation()}">
           <div slot="trigger">
-            <ha-icon icon="mdi:water"></ha-icon>
+            <ha-icon icon="${icon}"></ha-icon>
             <span class="icon-title">
-              ${localize(`source.${entity.state.toLowerCase()}`) ||
-              entity.state}
+              ${localize(`source.${selectedObject.toLowerCase()}`) ||
+              selectedObject}
             </span>
           </div>
-          ${entity.attributes.options.map(
+          ${objects.map(
             (item: string, index: number) => html`
               <mwc-list-item
                 ?activated=${selected === index}
                 value=${item}
-                @click=${this.handleSelect}
+                @click=${onSelected}
               >
                 ${localize(`source.${item.toLowerCase()}`) || item}
               </mwc-list-item>