More partials

src/partials.ts

@@ -1,7 +1,49 @@
 import { html, TemplateResult } from 'lit-element';
-import { TimePickerCardConfig } from './types';
+import { TimePickerCardConfig, Direction } from './types';
+import { TimeUnit } from './models';
 
 export class Partial {
+  static unit(unit: TimeUnit, serviceFn: () => Promise<void>): TemplateResult {
+    const onInputChange = ({ target: { value } }: { target: HTMLInputElement }): void => {
+      unit.setStringValue(value);
+      serviceFn();
+    };
+
+    return html`
+      <div class="time-unit">
+        ${Partial.stepChanger(Direction.UP, unit, serviceFn)}
+        <input
+          class="time-input"
+          type="number"
+          placeholder="MM"
+          min="0"
+          max="60"
+          .value="${unit.toString()}"
+          @change=${onInputChange}
+        />
+        ${Partial.stepChanger(Direction.DOWN, unit, serviceFn)}
+      </div>
+    `;
+  }
+
+  private static stepChanger(
+    direction: Direction,
+    unit: TimeUnit,
+    serviceFn: () => Promise<void>
+  ): TemplateResult {
+    const onIconClick = (): void => {
+      unit.stepUpdate(direction);
+      serviceFn();
+    };
+
+    return html`
+      <div class="time-picker-icon" @click=${onIconClick}>
+        <ha-icon .icon="mdi:arrow-${direction}"></ha-icon>
+        <mwc-ripple id="ripple"></mwc-ripple>
+      </div>
+    `;
+  }
+
   static error(error: string, origConfig: TimePickerCardConfig): TemplateResult {
     const config = { error, origConfig };
     return html`<hui-error-card ._config="${config}"></hui-error-card>`;

src/styles.ts

@@ -13,7 +13,7 @@ export const styles = css`
     justify-content: center;
   }
 
-  .time-form {
+  .time-unit {
     display: flex;
     flex-direction: column;
     align-items: center;

src/time-picker-card.ts

@@ -2,10 +2,10 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { HassEntity } from 'home-assistant-js-websocket';
 import { CSSResult, customElement, html, LitElement, property, TemplateResult } from 'lit-element';
 import { CARD_VERSION } from './const';
-import { Hour, Minute, TimeUnit } from './models';
+import { Hour, Minute } from './models';
 import { Partial } from './partials';
 import { styles, styleVariables } from './styles';
-import { Direction, TimePickerCardConfig } from './types';
+import { TimePickerCardConfig } from './types';
 
 console.info(
   `%c  TIME-PICKER-CARD  \n%c  Version ${CARD_VERSION}    `,
@@ -50,35 +50,9 @@ export class TimePickerCard extends LitElement {
 
     return html`
       <ha-card class="time-picker-ha-card">
-        <div class="time-form">
+        ${Partial.unit(this.hour, this.serviceFn.bind(this))}
-          ${this.renderStepChanger(Direction.UP, this.hour)}
+        <div class="time-separator">:</div>
-          <input
+        ${Partial.unit(this.minute, this.serviceFn.bind(this))}
-            class="time-input"
-            type="number"
-            placeholder="HH"
-            min="0"
-            max="24"
-            .value=${this.hour.toString()}
-            @change=${this.onHourChange}
-          />
-          ${this.renderStepChanger(Direction.DOWN, this.hour)}
-        </div>
-        <div class="time-separator">
-          :
-        </div>
-        <div class="time-form">
-          ${this.renderStepChanger(Direction.UP, this.minute)}
-          <input
-            class="time-input"
-            type="number"
-            placeholder="MM"
-            min="0"
-            max="60"
-            .value="${this.minute.toString()}"
-            @change=${this.onMinuteChange}
-          />
-          ${this.renderStepChanger(Direction.DOWN, this.minute)}
-        </div>
       </ha-card>
     `;
   }
@@ -99,31 +73,7 @@ export class TimePickerCard extends LitElement {
     return 3;
   }
 
-  onHourChange({ target: { value } }: { target: HTMLInputElement }): void {
+  private serviceFn(): Promise<void> {
-    this.hour!.setStringValue(value);
-    this.callService();
-  }
-
-  onMinuteChange({ target: { value } }: { target: HTMLInputElement }): void {
-    this.minute!.setStringValue(value);
-    this.callService();
-  }
-
-  private renderStepChanger(direction: Direction, unit: TimeUnit): TemplateResult {
-    const onIconClick = (): void => {
-      unit.stepUpdate(direction);
-      this.callService();
-    };
-
-    return html`
-      <div class="time-picker-icon" @click=${onIconClick}>
-        <ha-icon .icon="mdi:arrow-${direction}"></ha-icon>
-        <mwc-ripple id="ripple"></mwc-ripple>
-      </div>
-    `;
-  }
-
-  private callService(): Promise<void> {
     if (!this.hass) {
       throw new Error('Unable to update datetime');
     }