Add optional delay

README.md

@@ -94,9 +94,11 @@ layout:
 ```
 
 ### Dark theme, embedded layout
+
 ![Dark theme embedded](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_embedded.png)
 
 ### Dark theme, thin layout
+
 ![Dark theme thin layout](https://raw.githubusercontent.com/GeorgeSG/lovelace-time-picker-card/master/examples/dark_thin.png)
 
 ### With a custom lovelace theme
@@ -114,6 +116,7 @@ layout:
 | hour_mode         | `12` or `24` | **Optional** | Hour format. If `12`, card will show AM/PM picker                                                         | `24`                     |
 | hour_step         | number       | **Optional** | Hour change when clicking arrows                                                                          | `1`                      |
 | minute_step       | number       | **Optional** | Minute change when clicking arrows                                                                        | `5`                      |
+| delay             | number       | **Optional** | Delay in ms before updating entity                                                                        | `0`                      |
 | layout            | object       | **Optional** | Card Layout configuration                                                                                 | `none`                   |
 | hide              | object       | **Optional** | Hide object                                                                                               | `none`                   |
 | tap_action        | action       | **Optional** | Home assistant action to perform on tap                                                                   | `more-info`              |

devtools/homeassistant/configuration.yaml

@@ -17,7 +17,7 @@ lovelace:
     - type: module
       url: /hacsfiles/lovelace-state-switch/state-switch.js
     - type: module
-      url: http://localhost:5000/time-picker-card.js
+      url: http://127.0.0.1:5000/time-picker-card.js
   dashboards:
     lovelace-home:
       mode: yaml

devtools/homeassistant/ui-lovelace.yaml

@@ -44,6 +44,14 @@ views:
                   thin: true
                 hide:
                   name: true
+          - type: custom:time-picker-card
+            name: delayed
+            entity: input_datetime.test_date_time
+            delay: 1000
+            hour_mode: 12
+            layout:
+              hour_mode: single
+              thin: true
 
           - type: custom:time-picker-card
             entity: input_datetime.test_date_time

src/time-picker-card.ts

@@ -52,6 +52,8 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
   @property() private time!: Time;
   @property() private period!: Period;
 
+  private bounce: number | undefined;
+
   private get entity(): HassEntity | undefined {
     return this.hass.states[this.config.entity];
   }
@@ -197,20 +199,20 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
             <time-unit
               .unit=${this.time.hour}
               @stepChange=${this.onHourStepChange}
-              @update=${this.callHassService}
+              @update=${this.debouncedCallHassService}
             ></time-unit>
             <div class="time-separator">:</div>
             <time-unit
               .unit=${this.time.minute}
               @stepChange=${this.onMinuteStepChange}
-              @update=${this.callHassService}
+              @update=${this.debouncedCallHassService}
             ></time-unit>
             ${this.config.hide?.seconds === false
               ? html`<div class="time-separator">:</div>
                   <time-unit
                     .unit=${this.time.second}
                     @stepChange=${this.onSecondStepChange}
-                    @update=${this.callHassService}
+                    @update=${this.debouncedCallHassService}
                   ></time-unit>`
               : ''}
             ${this.shouldShowPeriod
@@ -248,22 +250,31 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
 
   private onPeriodToggle(): void {
     this.time.hour.togglePeriod();
-    this.callHassService();
+    this.debouncedCallHassService();
   }
 
   private onHourStepChange(event: CustomEvent): void {
     this.time.hourStep(event.detail.direction);
-    this.callHassService();
+    this.debouncedCallHassService();
   }
 
   private onMinuteStepChange(event: CustomEvent): void {
     this.time.minuteStep(event.detail.direction);
-    this.callHassService();
+    this.debouncedCallHassService();
   }
 
   private onSecondStepChange(event: CustomEvent): void {
     this.time.secondStep(event.detail.direction);
-    this.callHassService();
+    this.debouncedCallHassService();
+  }
+
+  private debouncedCallHassService(): void {
+    if (this.config.delay) {
+      clearTimeout(this.bounce);
+      this.bounce = setTimeout(() => this.callHassService(), this.config.delay, this);
+    } else {
+      this.callHassService();
+    }
   }
 
   private callHassService(): Promise<void> {

src/types.ts

@@ -8,6 +8,7 @@ export interface TimePickerCardConfig extends LovelaceCardConfig {
   hour_step?: number;
   minute_step?: number;
   second_step?: number;
+  delay?: number;
   layout?: TimePickerLayoutConfig;
   hide?: TimePickerHideConfig;
   tap_action?: ActionConfig;