12h/24h setting

fixes #8

package.json

@@ -1,6 +1,6 @@
 {
  "name": "sun-card",
- "version": "2.0.0",
+ "version": "3.1.0",
  "description": "Lovelace sun card",
  "keywords": [
  "home-assistant",
@@ -16,25 +16,25 @@
  "license": "MIT",
  "dependencies": {
  "@types/moment-timezone": "^0.5.12",
- "home-assistant-js-websocket": "^4.0.0",
+ "home-assistant-js-websocket": "^4.3.1",
  "humanize-duration-ts": "^2.0.0",
- "lit-element": "^2.0.1",
+ "lit-element": "^2.2.1",
  "moment": "^2.24.0",
- "moment-timezone": "^0.5.23"
+ "moment-timezone": "^0.5.26"
  },
  "devDependencies": {
- "@typescript-eslint/parser": "^1.4.1",
- "eslint": "^5.14.1",
- "eslint-config-airbnb-base": "^13.1.0",
- "eslint-plugin-import": "^2.16.0",
+ "@typescript-eslint/parser": "^1.13.0",
+ "eslint": "^5.16.0",
+ "eslint-config-airbnb-base": "^13.2.0",
+ "eslint-plugin-import": "^2.18.2",
  "eslint-plugin-typescript": "^0.14.0",
- "prettier": "^1.16.4",
+ "prettier": "^1.18.2",
  "rollup": "^1.2.3",
  "rollup-plugin-commonjs": "^9.3.4",
  "rollup-plugin-json": "^4.0.0",
  "rollup-plugin-node-resolve": "^4.0.1",
  "rollup-plugin-typescript2": "^0.22.1",
- "typescript": "^3.3.3333"
+ "typescript": "^3.5.3"
  },
  "scripts": {
  "build": "npm run lint && npm run rollup",

rollup.config.js

@@ -15,7 +15,8 @@ const commonPlugins = [
  commonjs({
  include: [
  'node_modules/moment/**',
- 'node_modules/moment-timezone/**'
+ 'node_modules/moment-timezone/**',
+ 'node_modules/humanize-duration-ts/**'
  ],
  sourceMap: false
  }),

src/card.ts

@@ -68,7 +68,7 @@ class SunCard extends LitElement {
  return {};
  }
 
- @property() public hass?: HomeAssistant;
+ @property() private _hass?: HomeAssistant;
 
  @property() private _config?: SunCardConfig;
 
@@ -79,7 +79,7 @@ class SunCard extends LitElement {
  // half of svg viewBox height / (|-zenith| + zenith elevation angle)
  readonly yScale: number = this.svgViewBoxH / 180;
 
- readonly humanizeDurationLang: HumanizeDurationLanguage = new HumanizeDurationLanguage();
+ readonly humanizer: HumanizeDuration = new HumanizeDuration(new HumanizeDurationLanguage());
 
  public setConfig(config: SunCardConfig): void {
  if (!config || !config.type) {
@@ -89,6 +89,24 @@ class SunCard extends LitElement {
  this._config = config;
  }
 
+ get hass(): HomeAssistant | undefined {
+ return this._hass;
+ }
+
+ set hass(hass) {
+ this._hass = hass;
+ if (hass) {
+ moment.locale(hass.language);
+ moment.tz.setDefault(hass.config.time_zone);
+ this.humanizer.setOptions({
+ language: hass.language,
+ delimiter: ' ',
+ units: ['h', 'm'],
+ round: true,
+ });
+ }
+ }
+
  public getCardSize(): number {
  return 6;
  }
@@ -97,15 +115,11 @@ class SunCard extends LitElement {
  if (!this._config || !this.hass) {
  return html``;
  }
- moment.locale(this.hass.language);
- moment.tz.setDefault(this.hass.config.time_zone);
- const humanizer: HumanizeDuration = new HumanizeDuration(this.humanizeDurationLang);
- humanizer.setOptions({
- language: this.hass.language,
- delimiter: ' ',
- units: ['h', 'm'],
- round: true,
- });
+
+ const timeFormat: string =
+ this._config.meridiem === undefined && 'LT' ||
+ this._config.meridiem === true && 'h:mm A' ||
+ 'H:mm';
  const { localize, states } = this.hass;
 
  const sunStateObj: HassEntity = states['sun.sun'];
@@ -150,10 +164,10 @@ class SunCard extends LitElement {
  return svg`
  <line class="event-line" x1="${eventPos.x}" y1="0" x2="${eventPos.x}" y2="${-100 * inverter}"/>
  <g transform="translate(${eventPos.x - 100},${-125 * inverter - 25})">
- <svg viewBox="0 0 100 25" preserveAspectRatio="xMinYMin slice" width="200" height="50">
+ <svg viewBox="0 0 150 25" preserveAspectRatio="xMinYMin slice" width="300" height="50">
  <path d="${svgData}"></path>
  <text class="event-time" dominant-baseline="middle" x="25" y="12.5">
- ${event.format('LT')}
+ ${event.format(timeFormat)}
  </text>
  </svg>
  </g>
@@ -180,7 +194,7 @@ class SunCard extends LitElement {
  return html`
  <div>
  <ha-icon slot="item-icon" icon="mdi:weather-sunny"></ha-icon>
- <span class="item-text">: ${humanizer.humanize(sunEntity.daylight.asMilliseconds())}</span>
+ <span class="item-text">: ${this.humanizer.humanize(sunEntity.daylight.asMilliseconds())}</span>
  </div>
  `;
  };

src/editor.ts

@@ -4,26 +4,47 @@ import {
  customElement,
  property,
  TemplateResult,
+ CSSResult,
+ css,
 } from 'lit-element';
-import { fireEvent } from './hass';
+import moment from 'moment';
 
+import { fireEvent, HomeAssistant } from './hass';
 import { SunCardConfig } from './types';
 
 @customElement('sun-card-editor')
 export class SunCardEditor extends LitElement {
- @property() public hass?: any;
+ @property() private _hass?: HomeAssistant;
 
  @property() private _config?: SunCardConfig;
 
+ private _defaultMeridiem?: boolean;
+
  public setConfig(config) : void {
  this._config = config;
  this.requestUpdate();
  }
 
+ get hass(): HomeAssistant | undefined {
+ return this._hass;
+ }
+
+ set hass(hass) {
+ this._hass = hass;
+ if (hass) {
+ this._defaultMeridiem = moment.localeData(hass.language)
+ .longDateFormat('LT').toLowerCase().indexOf('a') > -1;
+ }
+ }
+
  get _name(): string {
  return this._config!.name || '';
  }
 
+ get _meridiem(): boolean | undefined {
+ return this._config!.meridiem !== undefined ? this._config!.meridiem : this._defaultMeridiem;
+ }
+
  protected render(): TemplateResult | void {
  if (!this.hass) {
  return html``;
@@ -37,6 +58,24 @@ export class SunCardEditor extends LitElement {
  .configValue="${'name'}"
  @value-changed="${this._valueChanged}">
  </paper-input>
+ <div class="side-by-side">
+ <div class="label">
+ <div class="heading">Clock format</div>
+ <div class="description">Default set to language specific</div>
+ </div>
+ <div class="input">
+ <label>24h</label>
+ <paper-toggle-button noink
+ class="${this._config!.meridiem === undefined && 'default'}"
+ role="button"
+ id="meridiem"
+ .configValue="${'meridiem'}"
+ ?checked="${this._meridiem === true}"
+ @change="${this._valueChanged}">
+ 12h
+ </paper-toggle-button>
+ </div>
+ </div>
  </div>
  `;
  }
@@ -62,4 +101,42 @@ export class SunCardEditor extends LitElement {
  }
  fireEvent(this, 'config-changed', { config: this._config });
  }
+
+ static get styles(): CSSResult {
+ return css`
+ .side-by-side {
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ line-height: var(--paper-font-body1_-_line-height);;
+ }
+ .label .heading {
+ font-size: var(--paper-input-container-shared-input-style_-_font-size)
+ }
+ .label .description {
+ color: var(--disabled-text-color);
+ font-size: var(--paper-font-body1_-_font-size);
+ }
+ .input {
+ display: flex;
+ flex-flow: row nowrap;
+ }
+ .input label {
+ margin: auto 0;
+ padding-right: var(--paper-toggle-button-label-spacing, 8px);
+ }
+ paper-toggle-button#meridiem {
+ --paper-toggle-button-checked-bar-color: var(--paper-toggle-button-checked-bar-color);
+ --paper-toggle-button-checked-button-color: var(--paper-toggle-button-checked-button-color);
+ --paper-toggle-button-unchecked-bar-color: var(--paper-toggle-button-unchecked-bar-color);
+ --paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-unchecked-button-color);
+ }
+ paper-toggle-button#meridiem.default {
+ --paper-toggle-button-checked-bar-color: var(--disabled-text-color);
+ --paper-toggle-button-checked-button-color: var(--disabled-text-color);
+ --paper-toggle-button-unchecked-bar-color: var(--disabled-text-color);
+ --paper-toggle-button-unchecked-button-color: var(--disabled-text-color);
+ }
+ `;
+ }
 }

src/types.ts

@@ -1,9 +1,11 @@
 import moment from 'moment';
+
 import { HassEntities, HassEntity } from 'home-assistant-js-websocket';
 
 export interface SunCardConfig {
  type: string;
  name?: string;
+ meridiem?: boolean;
 }
 
 export type Coords = {