purifier-card 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "purifier-card",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Air Purifier card for Home Assistant Lovelace UI",
   "main": "dist/purifier-card.js",
   "scripts": {
@@ -24,9 +24,12 @@
   "author": "Denys Dovhan <denysdovhan@gmail.com> (http://denysdovhan.com/)",
   "license": "MIT",
   "dependencies": {
+    "@types/lodash": "^4.14.195",
     "custom-card-helpers": "^1.6.4",
-    "ha-template": "^1.0.5",
-    "lit": "^2.2.2"
+    "ha-template": "^1.2.0",
+    "home-assistant-js-websocket": "^8.0.1",
+    "lit": "^2.2.2",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
@@ -37,7 +40,10 @@
     "@rollup/plugin-image": "^3.0.1",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.2",
     "@semantic-release/git": "^10.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.20.2",
@@ -51,7 +57,9 @@
     "rollup-plugin-postcss-lit": "^2.0.0",
     "rollup-plugin-serve": "^2.0.1",
     "rollup-plugin-terser": "^7.0.2",
-    "semantic-release": "^19.0.2"
+    "rollup-plugin-typescript2": "^0.34.1",
+    "semantic-release": "^19.0.2",
+    "typescript": "^5.1.3"
   },
   "browserslist": [
     "last 2 versions",

package/rollup.config.js

@@ -1,7 +1,9 @@
 /*  eslint-env node */
+import pkg from './package.json';
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
 import json from '@rollup/plugin-json';
+import typescript from 'rollup-plugin-typescript2';
 import babel from '@rollup/plugin-babel';
 import image from '@rollup/plugin-image';
 import postcss from 'rollup-plugin-postcss';
@@ -9,6 +11,7 @@ import postcssPresetEnv from 'postcss-preset-env';
 import postcssLit from 'rollup-plugin-postcss-lit';
 import { terser } from 'rollup-plugin-terser';
 import minifyLiterals from 'rollup-plugin-minify-html-literals';
+import replace from '@rollup/plugin-replace';
 import serve from 'rollup-plugin-serve';
 
 const IS_DEV = process.env.ROLLUP_WATCH;
@@ -23,40 +26,52 @@ const serverOptions = {
   },
 };
 
+const plugins = [
+  nodeResolve(),
+  commonjs(),
+  json(),
+  replace({
+    values: {
+      PKG_VERSION_VALUE: IS_DEV ? 'DEVELOPMENT' : pkg.version,
+    },
+    preventAssignment: true,
+  }),
+
+  postcss({
+    plugins: [
+      postcssPresetEnv({
+        stage: 1,
+        features: {
+          'nesting-rules': true,
+        },
+      }),
+    ],
+    extract: false,
+  }),
+  postcssLit(),
+  image(),
+  typescript(),
+  babel({
+    babelHelpers: 'runtime',
+    exclude: 'node_modules/**',
+  }),
+  IS_DEV && serve(serverOptions),
+  !IS_DEV && minifyLiterals(),
+  !IS_DEV &&
+    terser({
+      output: {
+        comments: false,
+      },
+    }),
+];
+
 export default {
-  input: 'src/purifier-card.js',
+  input: 'src/purifier-card.ts',
   output: {
     dir: 'dist',
     format: 'es',
+    inlineDynamicImports: true,
   },
-  plugins: [
-    nodeResolve(),
-    commonjs(),
-    json(),
-    babel({
-      babelHelpers: 'runtime',
-      exclude: 'node_modules/**',
-    }),
-    postcss({
-      plugins: [
-        postcssPresetEnv({
-          stage: 1,
-          features: {
-            'nesting-rules': true,
-          },
-        }),
-      ],
-      extract: false,
-    }),
-    postcssLit(),
-    image(),
-    IS_DEV && serve(serverOptions),
-    !IS_DEV && minifyLiterals(),
-    !IS_DEV &&
-      terser({
-        output: {
-          comments: false,
-        },
-      }),
-  ],
+  context: 'window',
+  plugins,
 };

package/src/config.ts

@@ -0,0 +1,26 @@
+import { PurifierCardConfig } from './types';
+import localize from './localize';
+
+export default function buildConfig(
+  config?: Partial<PurifierCardConfig>
+): PurifierCardConfig {
+  if (!config) {
+    throw new Error(localize('error.invalid_config'));
+  }
+
+  if (!config.entity) {
+    throw new Error(localize('error.missing_entity'));
+  }
+
+  return {
+    entity: config.entity,
+    show_name: config.show_name ?? true,
+    show_state: config.show_state ?? true,
+    show_preset_mode: config.show_preset_mode ?? true,
+    show_toolbar: config.show_toolbar ?? true,
+    compact_view: config.compact_view ?? false,
+    aqi: config.aqi ?? {},
+    stats: config.stats ?? [],
+    shortcuts: config.shortcuts ?? [],
+  };
+}

package/src/declarations.d.ts

@@ -0,0 +1,5 @@
+// declaration.d.ts
+declare module '*.css';
+declare module '*.svg';
+declare module '*.png';
+declare module '*.gif';

package/src/editor.css

@@ -0,0 +1,19 @@
+.card-config {
+  flex-direction: column;
+  display: flex;
+  gap: 10px;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+}
+
+.option ha-switch {
+  margin-right: 10px;
+}
+
+.option ha-select,
+.option paper-input {
+  width: 100%;
+}

package/src/editor.ts

@@ -0,0 +1,166 @@
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import {
+  HomeAssistant,
+  LovelaceCardConfig,
+  fireEvent,
+} from 'custom-card-helpers';
+import { PurifierCardConfig, Template } from './types';
+import localize from './localize';
+import styles from './editor.css';
+
+type ConfigElement = HTMLInputElement & {
+  configValue?: keyof PurifierCardConfig;
+};
+
+@customElement('purifier-card-editor')
+export class PurifierCardEditor extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private config!: Partial<PurifierCardConfig>;
+
+  @state() private compact_view = false;
+  @state() private show_name = true;
+  @state() private show_state = true;
+  @state() private show_toolbar = true;
+
+  public setConfig(config: LovelaceCardConfig & PurifierCardConfig) {
+    this.config = config;
+
+    if (!this.config.entity) {
+      this.config.entity = this.getEntitiesByType('fan')[0] || '';
+      fireEvent(this, 'config-changed', { config: this.config });
+    }
+  }
+
+  private getEntitiesByType(type: string): string[] {
+    if (!this.hass) {
+      return [];
+    }
+
+    return Object.keys(this.hass.states).filter((eid) => eid.startsWith(type));
+  }
+
+  protected render(): Template {
+    if (!this.hass) {
+      return nothing;
+    }
+
+    const fanEntities = this.getEntitiesByType('fan');
+
+    return html`
+      <div class="card-config">
+        <div class="option">
+          <ha-select
+            .label=${localize('editor.entity')}
+            @selected=${this.valueChanged}
+            .configValue=${'entity'}
+            .value=${this.config.entity}
+            @closed=${(e: PointerEvent) => e.stopPropagation()}
+            fixedMenuPosition
+            naturalMenuWidth
+            required
+            validationMessage=${localize('error.missing_entity')}
+          >
+            ${fanEntities.map(
+              (entity) => html`<mwc-list-item .value=${entity}
+                >${entity}</mwc-list-item
+              >`
+            )}
+          </ha-select>
+        </div>
+
+        <div class="option">
+          <ha-switch
+            aria-label=${localize(
+              this.compact_view
+                ? 'editor.compact_view_aria_label_off'
+                : 'editor.compact_view_aria_label_on'
+            )}
+            .checked=${this.compact_view}
+            .configValue=${'compact_view'}
+            @change=${this.valueChanged}
+          >
+          </ha-switch>
+          ${localize('editor.compact_view')}
+        </div>
+
+        <div class="option">
+          <ha-switch
+            aria-label=${localize(
+              this.show_name
+                ? 'editor.show_name_aria_label_off'
+                : 'editor.show_name_aria_label_on'
+            )}
+            .checked=${this.show_name}
+            .configValue=${'show_name'}
+            @change=${this.valueChanged}
+          >
+          </ha-switch>
+          ${localize('editor.show_name')}
+        </div>
+
+        <div class="option">
+          <ha-switch
+            aria-label=${localize(
+              this.show_state
+                ? 'editor.show_state_aria_label_off'
+                : 'editor.show_state_aria_label_on'
+            )}
+            .checked=${this.show_state}
+            .configValue=${'show_state'}
+            @change=${this.valueChanged}
+          >
+          </ha-switch>
+          ${localize('editor.show_state')}
+        </div>
+
+        <div class="option">
+          <ha-switch
+            aria-label=${localize(
+              this.show_name
+                ? 'editor.show_toolbar_aria_label_off'
+                : 'editor.show_toolbar_aria_label_on'
+            )}
+            .checked=${this.show_toolbar}
+            .configValue=${'show_toolbar'}
+            @change=${this.valueChanged}
+          >
+          </ha-switch>
+          ${localize('editor.show_toolbar')}
+        </div>
+
+        <strong> ${localize('editor.code_only_note')}</strong>
+      </div>
+    `;
+  }
+
+  private valueChanged(event: Event): void {
+    if (!this.config || !this.hass || !event.target) {
+      return;
+    }
+    const target = event.target as ConfigElement;
+    if (
+      !target.configValue ||
+      this.config[target.configValue] === target?.value
+    ) {
+      return;
+    }
+    if (target.configValue) {
+      if (target.value === '') {
+        delete this.config[target.configValue];
+      } else {
+        this.config = {
+          ...this.config,
+          [target.configValue]:
+            target.checked !== undefined ? target.checked : target.value,
+        };
+      }
+    }
+    fireEvent(this, 'config-changed', { config: this.config });
+  }
+
+  static get styles() {
+    return styles;
+  }
+}

package/src/{localize.js → localize.ts}

@@ -17,7 +17,13 @@ import * as it from './translations/it.json';
 import * as cs from './translations/cs.json';
 import * as nl from './translations/nl.json';
 
-var languages = {
+type Translations = {
+  [key: string]: {
+    [key: string]: string;
+  };
+};
+
+const languages: Record<string, Translations> = {
   en,
   uk,
   fr,
@@ -37,13 +43,17 @@ var languages = {
 
 const DEFAULT_LANG = 'en';
 
-export default function localize(string, search, replace) {
-  const [section, key] = string.split('.');
+export default function localize(
+  str: string,
+  search?: string,
+  replace?: string
+): string | undefined {
+  const [section, key] = str.toLowerCase().split('.');
 
-  let langStored;
+  let langStored: string | null = null;
 
   try {
-    langStored = JSON.parse(localStorage.getItem('selectedLanguage'));
+    langStored = JSON.parse(localStorage.getItem('selectedLanguage') ?? '');
   } catch (e) {
     langStored = localStorage.getItem('selectedLanguage');
   }
@@ -57,23 +67,17 @@ export default function localize(string, search, replace) {
   try {
     translated = languages[lang][section][key];
   } catch (e) {
-    /**/
+    translated = languages[DEFAULT_LANG][section][key];
   }
-
   if (translated === undefined) {
-    try {
-      translated = languages[DEFAULT_LANG][section][key];
-    } catch (e) {
-      /**/
-    }
+    translated = languages[DEFAULT_LANG][section][key];
   }
-
   if (translated === undefined) {
     return;
   }
 
-  if (search !== '' && replace !== '') {
-    translated = translated.replace(search, replace);
+  if (search && replace) {
+    translated = translated?.replace(search, replace);
   }
 
   return translated;