1.2.0

Bump socket.io from 2.3.0 to 2.4.1

README.md

@@ -117,12 +117,14 @@ layout:
 | hour_mode      | `single`, `double`        | **Optional** | Whether to show both AM/PM or just the current mode. In `single` mode, tap the value to change it. | `double` |
 | align_controls | `left`, `center`, `right` | **Optional** | Horizontal alignment of the controls                                                               | `center` |
 | name           | `header`, `inside`        | **Optional** | Whether to show the name as a header or inside the card                                            | `header` |
+| embedded       | boolean                   | **Optional** | Render with embedded style - disables padding, box shadow, and card header                                            | `false` |
 
 ### Hide Object
 
-| Name | Type    | Requirement  | Description         | Default |
-| ---- | ------- | ------------ | ------------------- | ------- |
-| name | boolean | **Optional** | Hides the card name | `false` |
+| Name    | Type    | Requirement  | Description         | Default |
+| ----    | ------- | ------------ | ------------------- | ------- |
+| name    | boolean | **Optional** | Hides the card name | `false` |
+| seconds | boolean | **Optional** | Hides seconds input | `true`  |
 
 ### Theme Variables
 
@@ -137,6 +139,7 @@ you can use the following variables in your theme's config file:
 | time-picker-accent-color              | `var(--primary-color)`         | AM / PM active color                   |
 | time-picker-off-color                 | `var(--disabled-text-color)`   | AM / PM inactive color                 |
 | time-picker-border-radius             | `var(--ha-card-border-radius)` | Border radius of the card              |
+| time-picker-control-padding           | `8px`                          | Padding for interactive elements. Increase for larger hitboxes of the controls. Example: `10px 12px` |
 
 ## Meta
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "time-picker-card",
-  "version": "0.1.1",
+  "version": "1.2.0",
   "author": "Georgi Gardev <georgi@gardev.com>",
   "description": "Lovelace time-picker-card",
   "keywords": [
@@ -25,36 +25,36 @@
     "release-major": "npm version major && git push origin master --tags"
   },
   "dependencies": {
-    "custom-card-helpers": "^1.6.4",
-    "home-assistant-js-websocket": "^5.1.0",
-    "lit-element": "^2.3.1",
-    "lit-html": "^1.2.1"
+    "custom-card-helpers": "^1.6.6",
+    "home-assistant-js-websocket": "^5.7.0",
+    "lit-element": "^2.4.0",
+    "lit-html": "^1.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@open-wc/testing": "^2.5.16",
+    "@babel/core": "^7.12.7",
+    "@open-wc/testing": "^2.5.32",
     "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-json": "^4.0.3",
-    "@rollup/plugin-node-resolve": "^7.1.1",
-    "@rollup/plugin-typescript": "^4.0.0",
-    "@types/chai": "^4.2.11",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@rollup/plugin-typescript": "^4.1.2",
+    "@types/chai": "^4.2.14",
+    "@typescript-eslint/eslint-plugin": "^2.34.0",
+    "@typescript-eslint/parser": "^2.34.0",
     "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "karma": "^5.0.5",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "karma": "^5.2.3",
     "karma-chai": "^0.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-mocha": "^2.0.1",
     "karma-rollup-preprocessor": "^7.0.5",
-    "mocha": "^7.1.2",
-    "prettier": "^2.0.5",
+    "mocha": "^7.2.0",
+    "prettier": "^2.2.0",
     "rollup": "^1.32.1",
     "rollup-plugin-babel": "^4.4.0",
-    "rollup-plugin-serve": "^1.0.1",
-    "rollup-plugin-terser": "^5.3.0",
-    "sinon": "^9.0.2",
-    "typescript": "^3.8.3"
+    "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-terser": "^5.3.1",
+    "sinon": "^9.2.1",
+    "typescript": "^3.9.7"
   }
 }

src/components/time-period.component.ts

@@ -63,7 +63,7 @@ export class TimePeriodComponent extends LitElement {
 
       .time-period {
         width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
         background: var(--tpc-off-color);
         color: var(--tpc-text-color);
         text-align: center;

src/components/time-unit.component.ts

@@ -69,7 +69,7 @@ export class TimeUnitComponent extends LitElement {
 
       .time-picker-icon {
         width: 30px;
-        padding: 8px;
+        padding: var(--tpc-control-padding);
         text-align: center;
         cursor: pointer;
         color: var(--tpc-icon-color);
@@ -77,7 +77,7 @@ export class TimeUnitComponent extends LitElement {
 
       .time-input {
         width: 30px;
-        padding: 8px 8px 6px;
+        padding: var(--tpc-control-padding);
         background: var(--tpc-elements-background-color);
         border: 0;
         border-bottom: 2px solid var(--tpc-elements-background-color);

src/const.ts

@@ -9,6 +9,7 @@ export const ENTITY_DOMAIN = 'input_datetime';
 // Config defaults
 export const DEFAULT_HOUR_STEP = 1;
 export const DEFAULT_MINUTE_STEP = 5;
+export const DEFAULT_SECOND_STEP = 5;
 export const DEFAULT_LAYOUT_HOUR_MODE = 'double';
 export const DEFAULT_LAYOUT_ALIGN_CONTROLS = Layout.AlignControls.CENTER;
 export const DEFAULT_LAYOUT_NAME = Layout.Name.HEADER;

src/editor.ts

@@ -15,12 +15,18 @@ import {
   ENTITY_DOMAIN,
   DEFAULT_LAYOUT_ALIGN_CONTROLS,
   DEFAULT_LAYOUT_NAME,
+  DEFAULT_SECOND_STEP,
 } from './const';
 import { TimePickerCardConfig, Layout, HourMode } from './types';
 
 @customElement('time-picker-card-editor')
 export class TimePickerCardEditor extends LitElement implements LovelaceCardEditor {
-  private static readonly NUMBER_PROPERTIES = ['hour_step', 'minute_step', 'hour_mode'];
+  private static readonly NUMBER_PROPERTIES = [
+    'hour_step',
+    'minute_step',
+    'second_step',
+    'hour_mode',
+  ];
   private static readonly CONFIG_CHANGED_EVENT = 'config-changed';
 
   @property({ type: Object }) hass!: HomeAssistant;
@@ -65,7 +71,6 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
           <ha-switch
             style="margin-left: 10px"
             .checked="${!Boolean(this.config.hide?.name)}"
-            .configValue="${'hide_name'}"
             @change="${this.onHideNameChange}"
           ></ha-switch>
           Show name?
@@ -101,11 +106,27 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
           @value-changed=${this.onValueChange}
         ></paper-input>
       </div>
+      <div class="side-by-side">
+        <div>
+          <ha-switch
+            style="margin-left: 10px"
+            .checked="${this.config.hide?.seconds === false}"
+            @change="${this.onHideSecondsChange}"
+          ></ha-switch>
+          Show seconds?
+        </div>
+        <paper-input
+          type="number"
+          label="Second Step (Optional)"
+          .configValue=${'second_step'}
+          .value=${this.config.second_step || DEFAULT_SECOND_STEP}
+          @value-changed=${this.onValueChange}
+        ></paper-input>
+      </div>
       <div class="side-by-side">
         <div>
           <ha-switch
             .checked="${this.config.hour_mode === 12}"
-            .configValue="${'hour_mode'}"
             @change="${this.onHourModeChange}"
           ></ha-switch>
           12-Hour mode
@@ -114,7 +135,6 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
           ? html`<div>
               <ha-switch
                 .checked="${this.config.layout?.hour_mode === 'single'}"
-                .configValue="${'hour_mode_layout'}"
                 @change="${this.onHourModeLayoutChange}"
               ></ha-switch>
               "Single" hour mode layout
@@ -139,12 +159,20 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
         <div>
           <ha-switch
             .checked="${this.config.link_values}"
-            .configValue="${'link_values'}"
             @change="${this.onLinkValuesChange}"
           ></ha-switch>
           Link Values
         </div>
       </div>
+      <div class="side-by-side">
+        <div>
+          <ha-switch
+            .checked="${this.config.layout?.embedded}"
+            @change="${this.onEmbeddedChange}"
+          ></ha-switch>
+          Embedded
+        </div>
+      </div>
     </div>`;
   }
 
@@ -160,7 +188,14 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
   }
 
   private onHideNameChange({ target: { checked } }): void {
-    const newConfig = { ...this.config, hide: { name: !checked } };
+    const hide = { ...this.config.hide, name: !checked };
+    const newConfig = { ...this.config, hide };
+    this.dispatch(newConfig);
+  }
+
+  private onHideSecondsChange({ target: { checked } }): void {
+    const hide = { ...this.config.hide, seconds: !checked };
+    const newConfig = { ...this.config, hide };
     this.dispatch(newConfig);
   }
 
@@ -191,6 +226,11 @@ export class TimePickerCardEditor extends LitElement implements LovelaceCardEdit
     this.dispatch(newConfig);
   }
 
+  private onEmbeddedChange({ target: { checked } }): void {
+    const newConfig = { ...this.config, layout: { embedded: checked } };
+    this.dispatch(newConfig);
+  }
+
   private onValueChange(e: CustomEvent): void {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const property = (e.target as any).configValue;

src/models/second.ts

@@ -0,0 +1,26 @@
+import { DEFAULT_SECOND_STEP } from '../const';
+import { TimeUnit } from './time-unit';
+import { Direction } from '../types';
+
+/**
+ * * Represents the second value of a datetime.
+ */
+export class Second extends TimeUnit {
+  private static readonly VALUE_LIMIT = 60;
+
+  minValue = 0;
+  maxValue = Second.VALUE_LIMIT - 1;
+
+  constructor(value: number, step = DEFAULT_SECOND_STEP) {
+    super(value, step, Second.VALUE_LIMIT);
+  }
+
+  /**
+   * Returns true if the seconds will overflow to a different hour when changed in {@param direction}.
+   * @param direction
+   */
+  willOverflow(direction: Direction): boolean {
+    const newValue = direction === Direction.UP ? this.value + this._step : this.value - this._step;
+    return newValue >= this._limit || newValue < 0;
+  }
+}

src/models/time.ts

@@ -1,9 +1,15 @@
+import { Direction } from '../types';
 import { Hour } from './hour';
 import { Minute } from './minute';
-import { Direction } from '../types';
+import { Second } from './second';
 
 export class Time {
-  constructor(public hour: Hour, public minute: Minute, private _linkValues: boolean = false) {}
+  constructor(
+    public hour: Hour,
+    public minute: Minute,
+    public second: Second,
+    private _linkValues: boolean = false
+  ) {}
 
   hourStep(direction: Direction): void {
     this.hour.stepUpdate(direction);
@@ -17,7 +23,15 @@ export class Time {
     this.minute.stepUpdate(direction);
   }
 
+  secondStep(direction: Direction): void {
+    if (this._linkValues && this.second.willOverflow(direction)) {
+      this.minute.stepUpdate(direction, 1);
+    }
+
+    this.second.stepUpdate(direction);
+  }
+
   get value(): string {
-    return `${this.hour.value}:${this.minute.value}`;
+    return `${this.hour.value}:${this.minute.value}:${this.second.value}`;
   }
 }

src/partials.ts

@@ -16,11 +16,7 @@ export class Partial {
   }
 
   static headerName(title: string): TemplateResult {
-    return html`
-      <div class="time-picker-header">
-        ${title}
-      </div>
-    `;
+    return html`<div class="time-picker-header">${title}</div>`;
   }
 
   static nestedName(name: string, entity: HassEntity): TemplateResult {

src/time-picker-card.ts

@@ -10,22 +10,22 @@ import {
   TemplateResult,
 } from 'lit-element';
 import { ClassInfo, classMap } from 'lit-html/directives/class-map';
+import './components/time-period.component';
+import './components/time-unit.component';
 import {
   CARD_SIZE,
   CARD_VERSION,
+  DEFAULT_LAYOUT_ALIGN_CONTROLS,
   DEFAULT_LAYOUT_HOUR_MODE,
   ENTITY_DOMAIN,
-  DEFAULT_LAYOUT_ALIGN_CONTROLS,
 } from './const';
+import './editor';
 import { Hour } from './models/hour';
 import { Minute } from './models/minute';
+import { Second } from './models/second';
 import { Time } from './models/time';
 import { Partial } from './partials';
-import { Period, TimePickerCardConfig, Layout } from './types';
-
-import './components/time-period.component';
-import './components/time-unit.component';
-import './editor';
+import { Layout, Period, TimePickerCardConfig } from './types';
 
 console.info(
   `%c  TIME-PICKER-CARD  \n%c  Version ${CARD_VERSION}    `,
@@ -51,11 +51,16 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     return this.hass.states[this.config.entity];
   }
 
+  private get isEmbedded(): boolean {
+    return this.config.layout?.embedded === true;
+  }
+
   private get hasNameInHeader(): boolean {
     return (
       Boolean(this.name) &&
       Boolean(this.config.hide?.name) === false &&
-      this.config.layout?.name !== Layout.Name.INSIDE
+      this.config.layout?.name !== Layout.Name.INSIDE &&
+      Boolean(this.config.layout?.embedded) === false // embedded layout disables name in header
     );
   }
 
@@ -63,7 +68,7 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     return (
       Boolean(this.name) &&
       Boolean(this.config.hide?.name) === false &&
-      this.config.layout?.name === Layout.Name.INSIDE
+      (this.config.layout?.name === Layout.Name.INSIDE || Boolean(this.config.layout?.embedded))
     );
   }
 
@@ -79,10 +84,17 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     return this.config.layout?.align_controls ?? DEFAULT_LAYOUT_ALIGN_CONTROLS;
   }
 
+  private get haCardClass(): ClassInfo {
+    return {
+      embedded: this.isEmbedded,
+    };
+  }
+
   private get rowClass(): ClassInfo {
     return {
       'time-picker-row': true,
       'with-header-name': this.hasNameInHeader,
+      embedded: this.isEmbedded,
     };
   }
 
@@ -109,14 +121,15 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
       );
     }
 
-    const { hour, minute } = this.entity!.attributes;
+    const { hour, minute, second } = this.entity!.attributes;
     const hourInstance = new Hour(hour, this.config.hour_step, this.config.hour_mode);
     const minuteInstance = new Minute(minute, this.config.minute_step);
-    this.time = new Time(hourInstance, minuteInstance, this.config.link_values);
+    const secondInstance = new Second(second, this.config.second_step);
+    this.time = new Time(hourInstance, minuteInstance, secondInstance, this.config.link_values);
     this.period = hourInstance.value >= 12 ? Period.PM : Period.AM;
 
     return html`
-      <ha-card>
+      <ha-card class=${classMap(this.haCardClass)}>
         ${this.hasNameInHeader ? Partial.headerName(this.name!) : ''}
         <div class=${classMap(this.rowClass)}>
           ${this.hasNameInside ? Partial.nestedName(this.name!, this.entity) : ''}
@@ -133,7 +146,14 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
               @stepChange=${this.onMinuteStepChange}
               @update=${this.callHassService}
             ></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}
+                  ></time-unit>`
+              : ''}
             ${this.shouldShowPeriod
               ? html`<time-period
                   .period=${this.period}
@@ -182,6 +202,11 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
     this.callHassService();
   }
 
+  private onSecondStepChange(event: CustomEvent): void {
+    this.time.secondStep(event.detail.direction);
+    this.callHassService();
+  }
+
   private callHassService(): Promise<void> {
     if (!this.hass) {
       throw new Error('Unable to update datetime');
@@ -201,6 +226,8 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
           var(--primary-color)
         );
 
+        --tpc-control-padding: var(--time-picker-control-padding, 8px);
+
         --tpc-icon-color: var(--time-picker-icon-color, var(--primary-text-color));
         --tpc-text-color: var(--time-picker-text-color, #fff);
         --tpc-accent-color: var(--time-picker-accent-color, var(--primary-color));
@@ -209,6 +236,14 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
         --tpc-border-radius: var(--time-picker-border-radius, var(--ha-card-border-radius, 4px));
       }
 
+      ha-card {
+        overflow: scroll;
+      }
+
+      ha-card.embedded {
+        box-shadow: none;
+      }
+
       .time-picker-header {
         padding: 16px;
         color: var(--tpc-text-color);
@@ -226,6 +261,10 @@ export class TimePickerCard extends LitElement implements LovelaceCard {
         padding: 16px;
       }
 
+      .time-picker-row.embedded {
+        padding: 0;
+      }
+
       .time-picker-row.with-header-name {
         padding: 8px 16px 16px;
       }

src/types.ts

@@ -7,6 +7,7 @@ export interface TimePickerCardConfig extends LovelaceCardConfig {
   hour_mode?: HourMode;
   hour_step?: number;
   minute_step?: number;
+  second_step?: number;
   layout?: TimePickerLayoutConfig;
   hide?: TimePickerHideConfig;
 }
@@ -17,6 +18,7 @@ export interface TimePickerLayoutConfig {
   align_controls?: Layout.AlignControls;
   name?: Layout.Name;
   hour_mode?: Layout.HourMode;
+  embedded?: boolean;
 }
 
 export namespace Layout {
@@ -36,6 +38,7 @@ export namespace Layout {
 
 export interface TimePickerHideConfig {
   name?: boolean;
+  seconds?: boolean;
 }
 
 export enum Direction {

test/models/second.test.ts

@@ -0,0 +1,119 @@
+import { Second } from '../../src/models/second';
+import { Direction } from '../../src/types';
+import { expect } from 'chai';
+
+describe('Second', () => {
+  let second: Second;
+
+  context('with default config', () => {
+    beforeEach(() => {
+      second = new Second(2);
+    });
+
+    it('returns value', () => {
+      expect(second.value).to.equal(2);
+    });
+
+    it('has correct max value', () => {
+      expect(second.maxValue).to.equal(59);
+    });
+
+    describe('toString', () => {
+      it('renders values correctly', () => {
+        second = new Second(0);
+        expect(second.toString()).to.equal('00');
+
+        second = new Second(5);
+        expect(second.toString()).to.equal('05');
+
+        second = new Second(59);
+        expect(second.toString()).to.equal('59');
+      });
+    });
+
+    describe('stepUpdate', () => {
+      it('updates up', () => {
+        second.stepUpdate(Direction.UP);
+        expect(second.value).to.equal(7);
+      });
+
+      it('updates down', () => {
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).to.equal(57);
+      });
+
+      it('goes up from 59 to 4', () => {
+        second = new Second(59);
+        second.stepUpdate(Direction.UP);
+        expect(second.value).to.equal(4);
+      });
+
+      it('goes down from 0 to 55', () => {
+        second = new Second(0);
+        second.stepUpdate(Direction.DOWN);
+        expect(second.value).to.equal(55);
+      });
+    });
+
+    describe('setStringValue', () => {
+      it('sets value from valid string', () => {
+        second.setStringValue('3');
+        expect(second.value).to.equal(3);
+      });
+
+      it("doesn't set value from invalid string", () => {
+        second.setStringValue('test');
+        expect(second.value).to.equal(2);
+      });
+
+      it("doesn't set value from outside of scope", () => {
+        second.setStringValue('60');
+        expect(second.value).to.equal(2);
+
+        second.setStringValue('65');
+        expect(second.value).to.equal(2);
+      });
+    });
+  });
+
+  context('with a different step size', () => {
+    beforeEach(() => {
+      second = new Second(2, 15);
+    });
+
+    it('goes up correctly', () => {
+      second.stepUpdate(Direction.UP);
+      expect(second.value).to.equal(17);
+
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      second.stepUpdate(Direction.UP);
+      expect(second.value).to.equal(2);
+
+      second.stepUpdate(Direction.UP);
+      expect(second.value).to.equal(17);
+    });
+
+    it('goes down correclty', () => {
+      second.stepUpdate(Direction.DOWN);
+      expect(second.value).to.equal(47);
+    });
+  });
+
+  describe('will overflow', () => {
+    it('returns true if the Seconds will overflow an hour up', () => {
+      second.setStringValue('59');
+      expect(second.willOverflow(Direction.UP)).to.be.true;
+    });
+
+    it('returns true if the Seconds will overflow an hour down', () => {
+      second.setStringValue('0');
+      expect(second.willOverflow(Direction.DOWN)).to.be.true;
+    });
+
+    it('returns true if the Seconds will not overflow', () => {
+      second.setStringValue('55');
+      expect(second.willOverflow(Direction.DOWN)).to.be.false;
+    });
+  });
+});