Improve hiding modes selector

PiotrMachowski · Mar 30, 2023 · 575f9c8 · 575f9c8
1 parent d652d1e
commit 575f9c8
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 39 deletions.
diff --git a/src/const.ts b/src/const.ts
@@ -1,3 +1,7 @@
+import { MapModeConfig } from "./types/types";
+import { SelectionType } from "./model/map_mode/selection-type";
+import { RepeatsType } from "./model/map_mode/repeats-type";
+
 export const CARD_VERSION = "v@VACUUM_MAP_CARD_VERSION_PLACEHOLDER@";
 export const CARD_CUSTOM_ELEMENT_NAME = "xiaomi-vacuum-map-card";
 export const EDITOR_CUSTOM_ELEMENT_NAME = "xiaomi-vacuum-map-card-editor";
@@ -14,3 +18,9 @@ export const EVENT_SERVICE_CALL_GET = "map-card-service-call-get";
 export const EVENT_SERVICE_CALL = "map-card-service-call";
 export const EVENT_LOVELACE_DOM = "ll-custom";
 export const EVENT_LOVELACE_DOM_DETAIL = "xiaomi_vacuum_map_card";
+
+export const EMPTY_MAP_MODE: MapModeConfig = {
+    run_immediately: true,
+    selection_type: SelectionType[SelectionType.ROOM],
+    repeats_type: RepeatsType[RepeatsType.NONE]
+}
diff --git a/src/xiaomi-vacuum-map-card.ts b/src/xiaomi-vacuum-map-card.ts
@@ -28,6 +28,7 @@ import {
     DISCONNECTED_IMAGE,
     DISCONNECTION_TIME,
     EDITOR_CUSTOM_ELEMENT_NAME,
+    EMPTY_MAP_MODE,
     EVENT_AUTOGENERATED_CONFIG,
     EVENT_AUTOGENERATED_CONFIG_GET,
     EVENT_LOVELACE_DOM,
@@ -373,45 +374,49 @@ export class XiaomiVacuumMapCard extends LitElement {
                     </div>
                 </div>
                 ${conditional(!validCalibration, () => this._showInvalidCalibrationWarning())}
-                <div class="controls-wrapper">
-                    ${conditional(
-                        validCalibration && (modes.length > 1 || mapControls.length > 0),
-                        () => html`
-                            <div class="map-controls-wrapper">
-                                <div class="map-controls">
-                                    ${conditional(modes.length > 1, () =>
-                                        ModesMenuRenderer.render(modes, this.selectedMode, selected =>
-                                            this._setCurrentMode(selected),
-                                            this._modesDropdownMenu
-                                        ),
-                                    )}
-                                    ${conditional(
-                                        mapControls.length > 0,
-                                        () => html` <div class="map-actions-list">${mapControls}</div> `,
-                                    )}
+                ${conditional(
+                    modes.length > 1 || mapControls.length > 0 || (icons?.length??0) !== 0 || (tiles?.length ?? 0) !== 0,
+                    () => html`
+                    <div class="controls-wrapper">
+                        ${conditional(
+                            validCalibration && (modes.length > 1 || mapControls.length > 0),
+                            () => html`
+                                <div class="map-controls-wrapper">
+                                    <div class="map-controls">
+                                        ${conditional(modes.length > 1, () =>
+                                            ModesMenuRenderer.render(modes, this.selectedMode, selected =>
+                                                this._setCurrentMode(selected),
+                                                this._modesDropdownMenu
+                                            ),
+                                        )}
+                                        ${conditional(
+                                            mapControls.length > 0,
+                                            () => html` <div class="map-actions-list">${mapControls}</div> `,
+                                        )}
+                                    </div>
                                 </div>
-                            </div>
-                        `,
-                    )}
-                    ${conditional(
-                        (icons?.length ?? 0) !== 0,
-                        () => html`
-                            <div class="vacuum-controls">
-                                <div class="vacuum-actions-list">
-                                    ${icons?.map(icon => IconRenderer.render(icon, this))}
+                            `,
+                        )}
+                        ${conditional(
+                            (icons?.length ?? 0) !== 0,
+                            () => html`
+                                <div class="vacuum-controls">
+                                    <div class="vacuum-actions-list">
+                                        ${icons?.map(icon => IconRenderer.render(icon, this))}
+                                    </div>
                                 </div>
-                            </div>
-                        `,
-                    )}
-                    ${conditional(
-                        (tiles?.length ?? 0) !== 0,
-                        () => html`
-                            <div class="tiles-wrapper">
-                                ${tiles?.map(sensor => TileRenderer.render(sensor, this.internalVariables, this))}
-                            </div>
-                        `,
-                    )}
-                </div>
+                            `,
+                        )}
+                        ${conditional(
+                            (tiles?.length ?? 0) !== 0,
+                            () => html`
+                                <div class="tiles-wrapper">
+                                    ${tiles?.map(sensor => TileRenderer.render(sensor, this.internalVariables, this))}
+                                </div>
+                            `,
+                        )}
+                    </div>`
+                )}
                 ${ToastRenderer.render("map-card")}
             </ha-card>
         `;
@@ -531,9 +536,9 @@ export class XiaomiVacuumMapCard extends LitElement {
         if (this.hass) this._updateCalibration(config);
         const vacuumPlatform = config.vacuum_platform ?? "default";
         this.modes = (
-            (config.map_modes?.length ?? 0) === 0
+            (config.map_modes?.length ?? -1) === -1
                 ? PlatformGenerator.generateDefaultModes(vacuumPlatform)
-                : config.map_modes ?? []
+                : config.map_modes ?? [EMPTY_MAP_MODE]
         ).map(m => new MapMode(vacuumPlatform, m, this.config.language));
 
         this.presetIndex = index;