refactor: Update localization and icon states, and add entity state converter and formatting support (#233)

* First step to add localization using HA JS modules

* Format any number

* Split state processing and displaying

* Split state processing and displaying

* Add converters to buildStateString()

* Update entity state converters

* First working version for lights

* Update dist too

* Update and Add Icon States

* Add icon monitoring and cleanup

* Remove locale from formatTime24h

* Remove isNumericState from import

* Remove unused variable iconSet

Author: AmoebeLabs

Diff for: dist/swiss-army-knife-card.js

@@ -25,10 +25,11 @@
   },
   "dependencies": {
     "@formatjs/intl-utils": "^3.8.4",
-    "custom-card-helpers": "^1.8.0",
+    "@mdi/js": "^7.2.96",
+    "@tanem/svg-injector": "^10.1.53",
     "home-assistant-js-websocket": "^5.7.0",
     "lit-element": "^2.5.1",
     "lit-html": "^1.4.1",
-    "@tanem/svg-injector": "^10.1.53"
+    "memoize-one": "^6.0.0"
   }
 }

Diff for: package-lock.json

@@ -1,4 +1,4 @@
-import { fireEvent } from 'custom-card-helpers';
+import { fireEvent } from './frontend_mods/common/dom/fire_event';
 
 import Merge from './merge';
 import Utils from './utils';
@@ -122,9 +122,14 @@ export default class BaseTool {
   */
   set value(state) {
     let localState = state;
-
     if (this.dev.debug) console.log('BaseTool set value(state)', localState);
-    if (typeof (localState) !== 'undefined') if (this._stateValue?.toLowerCase() === localState.toLowerCase()) return;
+
+    try {
+      if (localState !== 'undefined'
+        && typeof localState !== 'undefined') if (this._stateValue?.toString().toLowerCase() === localState.toString().toLowerCase()) return;
+    } catch (e) {
+      console.log('catching something', e, state, this.config);
+    }
 
     this.derivedEntity = null;
 
@@ -137,7 +142,6 @@ export default class BaseTool {
     this._stateValuePrev = this._stateValue || localState;
     this._stateValue = localState;
     this._stateValueIsDirty = true;
-
     // If animations defined, calculate style for current state.
 
     // 2022.07.04 Temp disable this return, as animations should be able to process the 'undefined' state too!!!!
@@ -161,18 +165,13 @@ export default class BaseTool {
 
       if (isMatch) return true;
 
-      // The state builder renames 'unavailable' to '-ua-'
-      // Change this temporary in here to match this...
-      if (item.state === 'unavailable') { item.state = '-ua-'; }
-
       // #TODO:
       // Default is item.state. But can also be item.custom_field[x], so you can compare with custom value
       // Should index then not with item.state but item[custom_field[x]].toLowerCase() or similar...
       // Or above, with the mapping of the item using the name?????
 
       // Assume equals operator if not defined...
       const operator = item.operator ? item.operator : '==';
-
       switch (operator) {
         case '==':
           if (typeof (this._stateValue) === 'undefined') {
@@ -209,8 +208,6 @@ export default class BaseTool {
           // Unknown operator. Just do nothing and return;
           isMatch = false;
       }
-      // Revert state
-      if (item.state === '-ua-') { item.state = 'unavailable'; }
 
       if (this.dev.debug) console.log('BaseTool, animation, match, value, config, operator', isMatch, this._stateValue, item.state, item.operator);
       if (!isMatch) return true;
@@ -449,9 +446,6 @@ export default class BaseTool {
       if (color !== '') {
         argStyleMap.fill = this.config[this.config.show.style].fill ? color : '';
         argStyleMap.stroke = this.config[this.config.show.style].stroke ? color : '';
-
-        // this.config[this.config.show.style].fill ? argStyleMap['fill'] = color : '';
-        // this.config[this.config.show.style].stroke ? argStyleMap['stroke'] = color : '';
       }
     }
   }

Diff for: package.json

@@ -369,7 +369,7 @@ export default class CircularSliderTool extends BaseTool {
 
     const x = 10 ** dec;
     this.labelValue2 = (Math.round(this.pointToSliderValue(m) * x) / x).toFixed(dec);
-
+    console.log('updateLabel, labelvalue ', this.labelValue2);
     if (this.config.position.label.placement !== 'none') {
       this.elements.label.textContent = this.labelValue2;
     }
@@ -720,18 +720,19 @@ export default class CircularSliderTool extends BaseTool {
     this.MergeAnimationStyleIfChanged();
 
     // this.MergeColorFromState();
-
     this.renderValue = this._stateValue;
+    // if (this.renderValue === undefined) this.renderValue = 'undefined';
     if (this.dragging) {
       this.renderValue = this.labelValue2;
-    } else if (this.elements?.label) this.elements.label.textContent = this.renderValue;
+    } else if (this.elements?.label) this.elements.label.textContent = (this.renderValue === 'undefined') ? '' : this.renderValue;
+
     function renderLabel(argGroup) {
       if ((this.config.position.label.placement === 'thumb') && argGroup) {
         return svg`
       <text id="label">
         <tspan class="${classMap(this.classes.label)}" x="${this.svg.label.cx}" y="${this.svg.label.cy}" style="${styleMap(this.styles.label)}">
-        ${this.renderValue}</tspan>
-        ${this._renderUom()}
+        ${typeof this.renderValue === 'undefined' ? '' : this.renderValue}</tspan>
+        ${typeof this.renderValue === 'undefined' ? '' : this._renderUom()}
         </text>
         `;
       }
@@ -740,8 +741,9 @@ export default class CircularSliderTool extends BaseTool {
         return svg`
           <text id="label" style="transform-origin:center;transform-box: fill-box;">
             <tspan class="${classMap(this.classes.label)}" data-placement="position" x="${this.svg.label.cx}" y="${this.svg.label.cy}"
-            style="${styleMap(this.styles.label)}">${this.renderValue ? this.renderValue : ''}</tspan>
-            ${this.renderValue ? this._renderUom() : ''}
+            style="${styleMap(this.styles.label)}">
+            ${typeof this.renderValue === 'undefined' ? '' : this.renderValue}</tspan>
+            ${typeof this.renderValue === 'undefined' ? '' : this._renderUom()}
           </text>
           `;
       }