Release v0.5.0 (#16)

* Labels instead of icons #7

* String replace option in KeywordString

* String replace option in KeywordString

* Bumping version

* Removed reduncant old keyword replace logic

Author: maxwroc

README.md

@@ -44,6 +44,7 @@ This component can be used as entity as well
 | name | String | **(required)** | v0.1.0 | Name of the attribute
 | icon | String |  | v0.1.0 | Icon override (there are default icons for most of the available attributes)
 | url | [KString](#keywordstring) \| Boolean |  | v0.2.0 | Url to open on click/tap. (there are default urls for most of the available attributes, so you can just use `true`)
+| label | [KString](#keywordstring) |  | v0.5.0 | Label/text which will be shown instead of the icon
 
 ### KeywordString
 
@@ -53,6 +54,12 @@ E.g. `"Card version {latest_release_tag}"` becomes `"Card version v1.5.0"`
 
 ![image](https://user-images.githubusercontent.com/8268674/95771623-4ddde880-0cb3-11eb-9265-57876a08bd6e.png)
 
+#### Converting keyword value
+
+You can do simple replace operation on the value e.g.: `"{name:Github=Project}"`. It will replace `"Github"` string in the `name` value with `"Project"`, so if your name attribute is `"Github github-flexi-card"` then the final result will be `"Project github-flexi-card"`.
+
+Note: It is very simple replace machanism, it is case sensitive, replaces only first match and it doesn't have any escape chars so you cannot use characters like `=` or `:` in the search word nor target word.
+
 ## Configuration examples
 
 ### Card
@@ -143,6 +150,28 @@ entities:
   - sensor.urleditorpro
 ```
 
+### Labels instead of icons
+
+![image](https://user-images.githubusercontent.com/8268674/96354074-37c49380-10ca-11eb-9151-829e5c37f877.png)
+
+```yaml
+type: 'custom:github-flexi-card'
+title: Labels instead of icons
+url: true
+attribute_urls: true
+attributes:
+  - name: views
+    label: Views
+  - name: stargazers
+    label: Stars
+  - name: open_issues
+    label: Issues
+entities:
+  - sensor.battery_state_card
+  - sensor.hideseek_mod
+  - sensor.urleditorpro
+```
+
 ## How to install?
 
 Install HACS and add this repo as custom repository (lovelace plugins). Click on "Install".

package.json

@@ -1,6 +1,6 @@
 {
   "name": "github-flexi-card",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Home assistant github card",
   "main": "dist/github-flexi-card.js",
   "scripts": {

src/custom-elements/entity.css

@@ -1,3 +1,7 @@
+:host {
+    --attribute-icon-size: 20px;
+}
+
 .truncate {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -39,7 +43,7 @@
 }
 
 .state {
-    --mdc-icon-size: 20px;
+    --mdc-icon-size: var(--attribute-icon-size);
     display: flex;
     margin-left: 7px;
 }
@@ -62,6 +66,12 @@
 .compact-view .state > div {
     line-height: normal;
 }
+.compact-view .state > .label {
+    margin-top: 1px; /* fix for small misalignment if you have icon next to label */
+    color: var(--primary-color);
+    line-height: var(--attribute-icon-size);
+}
+
 .compact-view .state > * {
     margin: 0;
 }

src/custom-elements/entity.ts

@@ -1,13 +1,10 @@
 import { HomeAssistant } from "../ha-types";
+import { KeywordStringProcessor } from "../keyword-processor";
 import { html, LitElement } from "../lit-element";
-import { IEntityConfig, IAttribute } from "../types";
+import { IEntityConfig, IMap } from "../types";
 import { logError } from "../utils";
 import styles from "./entity-styles";
 
-interface IMap<T> {
-    [key: string]: T
-}
-
 interface IAttributeViewData {
     value: string,
     tooltip: string,
@@ -67,14 +64,16 @@ export class GithubEntity extends LitElement {
             return;
         }
 
-        this.name = replaceKeywordsWithData(entityData.attributes, this.config.name) || entityData.attributes["friendly_name"];
+        const keywordProcessor = new KeywordStringProcessor(entityData.attributes, entityData.state);
+
+        this.name = keywordProcessor.process(this.config.name) || entityData.attributes["friendly_name"];
         this.icon = this.config.icon || entityData.attributes["icon"];
 
         if (this.config.secondary_info) {
-            this.secondaryInfo = replaceKeywordsWithData(entityData.attributes, this.config.secondary_info) as string;
+            this.secondaryInfo = keywordProcessor.process(this.config.secondary_info) as string;
         }
 
-        const newStats = getAttributesViewData(this.config, entityData.attributes);
+        const newStats = getAttributesViewData(this.config, entityData.attributes, keywordProcessor);
 
         // check to avoid unnecessary re-rendering
         if (JSON.stringify(newStats) != JSON.stringify(this.attributesData)) {
@@ -84,7 +83,7 @@ export class GithubEntity extends LitElement {
         // check whether we need to update the action
         if (this.url != this.config.url) {
             this.url = this.config.url;
-            this.action = getAction("home", this.url, entityData.attributes);
+            this.action = getAction("home", this.url, entityData.attributes["path"], keywordProcessor);
         }
     }
 
@@ -136,18 +135,12 @@ export class GithubEntity extends LitElement {
  */
 const attributeView = (attr: IAttributeViewData) => html`
 <div class="state${attr.action ? " clickable" : ""}" @click="${attr.action}" title="${attr.tooltip}">
-    <ha-icon icon="${attr.icon}" style="color: var(--primary-color)">
-    </ha-icon>
+    ${attr.label && html`<div class="label">${attr.label}</div>`}
+    ${(attr.icon && !attr.label) ? html`<ha-icon icon="${attr.icon}" style="color: var(--primary-color)"></ha-icon>` : null}
     <div>${attr.value}</div>
 </div>
 `;
 
-/**
- * Replaces keywords in given string with actual data
- */
-const replaceKeywordsWithData = (data: IMap<string>, text?: string) =>
-    text && text.replace(/\{([a-z0-9_]+)\}/g, (match, keyword) => data[keyword] !== undefined ? data[keyword] : match);
-
 /**
  * Attribute name to icon map
  */
@@ -182,14 +175,14 @@ const nameToUrlPathMap: IMap<string> = {
 /**
  * Creates action for clickable elements
  */
-const getAction = (attributeName: string, url: boolean | string | undefined, data: IMap<string>): Function | undefined => {
+const getAction = (attributeName: string, url: boolean | string | undefined, path: string, keywordProcessor: KeywordStringProcessor): Function | undefined => {
     switch (typeof url) {
         case "boolean":
             if (!url) {
                 return undefined;
             }
 
-            if (!data["path"]) {
+            if (!path) {
                 logError(`Cannot build url - entity path attribute is missing`);
                 return undefined;
             }
@@ -199,9 +192,9 @@ const getAction = (attributeName: string, url: boolean | string | undefined, dat
                 return undefined;
             }
 
-            return () => window.open(`https://github.com/${data["path"]}/${nameToUrlPathMap[attributeName]}`);
+            return () => window.open(`https://github.com/${path}/${nameToUrlPathMap[attributeName]}`);
         case "string":
-            return () => window.open(replaceKeywordsWithData(data, url));
+            return () => window.open(keywordProcessor.process(url));
         case "undefined":
             // we don't do anything
             break;
@@ -215,18 +208,20 @@ const getAction = (attributeName: string, url: boolean | string | undefined, dat
 /**
  * Gets list of attributes data to render
  */
-const getAttributesViewData = (config: IEntityConfig, data: IMap<string>): IAttributeViewData[] =>
+const getAttributesViewData = (config: IEntityConfig, data: IMap<string>, keywordProcessor: KeywordStringProcessor): IAttributeViewData[] =>
     (config.attributes || []).map(a => {
         return {
             value: data[a.name],
             tooltip: attributeNameToTooltip(a.name),
             icon: a.icon || nameToIconMap[a.name],
-            label: a.label && replaceKeywordsWithData(data, a.label),
+            label: a.label && keywordProcessor.process(a.label),
             action: getAction(
                 a.name,
                 // if attrib url property is missing use the entity-level setting
                 a.url !== undefined ? a.url : config.attribute_urls,
-                data),
+                data["path"],
+                keywordProcessor
+            ),
         }
     });
 

src/keyword-processor.ts

@@ -0,0 +1,59 @@
+import { IMap } from "./types";
+
+/**
+ * Class for processing keyword strings
+ */
+export class KeywordStringProcessor {
+    constructor(private data: IMap<string>, state: string) {
+        if (!this.data["state"]) {
+            this.data["state"] = state;
+        }
+    }
+
+    /**
+     * Replaces keywords in given string with the data
+     */
+    process(text?: string): string | undefined {
+        if (!text) {
+            return text;
+        }
+
+        return text.replace(/\{([^\}]+)\}/g, (match, keyword) => this.replaceKeyword(keyword, match));
+    }
+
+    /**
+     * Converts keyword in the final value
+     */
+    private replaceKeyword(keyword: string, defaultValue: string): string {
+        const chunks = keyword.split(":");
+        const attributeName = chunks[0];
+        const processingDetails = chunks[1];
+
+        const value = this.data[attributeName];
+
+        if (value === undefined) {
+            return defaultValue;
+        }
+
+        const processor = this.getProcessor(processingDetails);
+
+        return processor(value);
+    }
+
+    /**
+     * Returns value processor (if any processing options were specified)
+     */
+    private getProcessor(processingDetails: string): { (text: string): string } {
+        if (!processingDetails) {
+            return (text) => text;
+        }
+
+        // check if we should replace string in the value
+        if (processingDetails.includes("=")) {
+            const replaceDataChunks = processingDetails.split("=");
+            return (text) => text.replace(replaceDataChunks[0], replaceDataChunks[1]);
+        }
+
+        return (text) => text;
+    }
+}

src/types.ts

@@ -21,4 +21,8 @@ export interface IAttribute {
     icon?: string,
     label?: string,
     url?: string | boolean,
+}
+
+export interface IMap<T> {
+    [key: string]: T
 }

src/utils.ts

@@ -1,5 +1,5 @@
 export const printVersion = () => console.info(
-    "%c GITHUB-FLEXI-CARD %c 0.4.0",
+    "%c GITHUB-FLEXI-CARD %c 0.5.0",
     "color: white; background: #cca900; font-weight: 700;",
     "color: #cca900; background: white; font-weight: 700;",
 );