Merge pull request #8 from maxwroc/vNext

Release v0.2.0

Author: maxwroc

README.md

@@ -21,15 +21,18 @@ The aim of this card is to show all the data provided by github integration. You
 | Name | Type | Default | Since | Description |
 |:-----|:-----|:-----|:-----|:-----|
 | entity_id | String | **(required)** | v0.1.0 | Entity ID e.g. `sensor.my_github_project`
-| name | [KeywordString](#keywordstring) |  | v0.1.0 | Name override
-| secondary_info | [KeywordString](#keywordstring) |  | v0.1.0 | String to display underneath the entity name
+| name | [KString](#keywordstring) |  | v0.1.0 | Name override
+| secondary_info | [KString](#keywordstring) |  | v0.1.0 | String to display underneath the entity name
 | attributes | [Attribute](#attribute)[] |  | v0.1.0 | Attributes to display
+| url | [KString](#keywordstring) \| Boolean |  | v0.2.0 | Url to open on click/tap. (when `true` is used the target url becomes repo homepage)
+| attribute_urls | Boolean |  | v0.2.0 | When set to `true` turns on default urls for all the displayed attributes
 
 ### Attribute
 | Name | Type | Default | Since | Description |
 |:-----|:-----|:-----|:-----|:-----|
 | 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`)
 
 ### KeywordString
 
@@ -39,21 +42,27 @@ 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)
 
-Example configuration
+## Configuration example
+
 ```yaml
 type: 'custom:github-flexi-card'
 title: Github projects
 entities:
   - entity_id: sensor.battery_state_card
     secondary_info: 'Released {latest_release_tag}'
+    url: "{latest_release_url}" # url taken from attribute
     attributes:
       - name: views
+        url: true # default url to graphs/traffic
       - name: stargazers
       - name: open_issues
       - name: clones
+        url: "https://my.custom.url/path"
       - name: forks
       - name: open_pull_requests
+        url: "{latest_open_pull_request_url}" # url taken from attribute
   - entity_id: sensor.hideseek_mod
+    url: true # default url - repo homepage
     attributes:
       - name: views
       - name: stargazers
@@ -65,4 +74,16 @@ entities:
       - name: views
       - name: stargazers
       - name: open_issues
+```
+
+## How to install?
+
+Install HACS and add this repo as custom repository (lovelace plugins). Click on "Install".
+
+If you have a YAML mode remember to add resource entry for the js bundle in ui-lovelace.yaml:
+
+```yaml
+resources:
+  - url: /hacsfiles/github-flexi-card/github-flexi-card.js
+    type: module
 ```

build/prebuild.js

@@ -37,5 +37,17 @@ const compileCss = async () => {
     return await writeFile(cssFile.replace(".css", ".ts"), 'import { css } from "../lit-element"; const styles = css`' + minimizeCss(cssCode) + '`; export default styles;');
 };
 
+// Updates version printed in console window
+const updateVersion = async () => {
+    const filePath = "src/utils.ts";
+    const pkg = require("./../package.json");
+    const utils = await readFile(filePath);
+    const updatedUtils = utils.replace(/"%c GITHUB-FLEXI-CARD %c [0-9]+.[0-9]+.[0-9]+"/gm, `"%c GITHUB-FLEXI-CARD %c ${pkg.version}"`);
+    if (utils !== updatedUtils) {
+        await writeFile(filePath, updatedUtils);
+    }
+}
+
 
-compileCss();
+compileCss();
+updateVersion();

package.json

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

src/custom-elements/entity.ts

@@ -1,10 +1,14 @@
 import { HomeAssistant } from "../ha-types";
 import { html, LitElement } from "../lit-element";
 import { IEntityConfig, IAttribute } from "../types";
+import { logError } from "../utils";
 
 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
+ */
 const nameToIconMap: IMap<string> = {
     "open_issues": "mdi:alert-circle-outline",
     "open_pull_requests": "mdi:source-pull",
@@ -17,13 +21,69 @@ const nameToIconMap: IMap<string> = {
     "views_unique": "mdi:eye-check",
 }
 
-const getStats = (attrib: IAttribute[], data: IMap<string>): IStat[] =>
-    attrib.map(a => {
+/**
+ * Attribute name to url path map
+ */
+const nameToUrlPathMap: IMap<string> = {
+    "open_issues": "issues",
+    "open_pull_requests": "pulls",
+    "stargazers": "stargazers",
+    "forks": "network/members",
+    "latest_release_tag": "releases",
+    "clones": "graphs/traffic",
+    "clones_unique": "graphs/traffic",
+    "views": "graphs/traffic",
+    "views_unique": "graphs/traffic",
+    "home": ""
+}
+
+/**
+ * Creates action for clickable elements
+ */
+const getAction = (attributeName: string, url: boolean | string | undefined, data: IMap<string>): Function | undefined => {
+    switch (typeof url) {
+        case "boolean":
+            if (!url) {
+                return undefined;
+            }
+
+            if (!data["path"]) {
+                logError(`Cannot build url - entity path attribute is missing`);
+                return undefined;
+            }
+
+            if (!nameToUrlPathMap[attributeName] === undefined) {
+                logError(`Sorry url cannot be built for "${attributeName}"`);
+                return undefined;
+            }
+
+            return () => window.open(`https://github.com/${data["path"]}/${nameToUrlPathMap[attributeName]}`);
+        case "string":
+            return () => window.open(replaceKeywordsWithData(data, url));
+        case "undefined":
+            // we don't do anything
+            break;
+        default:
+            logError("Unsupported url type: " + typeof url);
+    }
+
+    return undefined;
+}
+
+/**
+ * Gets list of attributes data to render
+ */
+const getAttributesViewData = (config: IEntityConfig, data: IMap<string>): IAttributeViewData[] =>
+    (config.attributes || []).map(a => {
         return {
             value: data[a.name],
             icon: a.icon || nameToIconMap[a.name],
             label: a.label && replaceKeywordsWithData(data, a.label),
-            url: a.url && replaceKeywordsWithData(data, a.url),
+            action: getAction(
+                a.name,
+                // if attrib url property is missing use the entity-level setting
+                a.url !== undefined ? a.url : config.attribute_urls,
+                data),
         }
     });
 
@@ -37,14 +97,19 @@ export class GithubEntity extends LitElement {
 
     private secondaryInfo: string = <any>null;
 
-    private stats: IStat[] = [];
+    private attributesData: IAttributeViewData[] = [];
+
+    private action: Function | undefined;
+
+    private url: string | boolean | undefined;
 
     static get properties() {
         return {
             icon: { type: String },
             name: { type: String },
             secondaryInfo: { type: String },
             stats: { type: Array },
+            action: { type: Function },
         };
     }
 
@@ -68,24 +133,33 @@ export class GithubEntity extends LitElement {
             this.secondaryInfo = replaceKeywordsWithData(entityData.attributes, this.config.secondary_info) as string;
         }
 
-        const newStats = getStats(this.config.attributes || [], entityData.attributes);
+        const newStats = getAttributesViewData(this.config, entityData.attributes);
         // check to avoid unnecessary re-rendering
-        if (JSON.stringify(newStats) != JSON.stringify(this.stats)) {
-            this.stats = newStats;
+        if (JSON.stringify(newStats) != JSON.stringify(this.attributesData)) {
+            this.attributesData = newStats;
+        }
+
+        // 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);
         }
     }
 
     setConfig(config: IEntityConfig) {
         const oldConfig = JSON.stringify(this.config);
         const newConfig = JSON.stringify(config);
 
-        if (oldConfig != newConfig) {
-            this.config = config;
-
-            this.name = config.name || config.entity_id;
-            config.icon && (this.icon = config.icon);
-            config.secondary_info && (this.secondaryInfo = config.secondary_info);
+        if (oldConfig == newConfig) {
+            return;
         }
+
+        // we cannot just assign the config because it is immutable and we want to change it
+        this.config = JSON.parse(newConfig);
+
+        this.name = config.name || config.entity_id;
+        config.icon && (this.icon = config.icon);
+        config.secondary_info && (this.secondaryInfo = config.secondary_info);
     }
 
     createRenderRoot() {
@@ -98,11 +172,11 @@ export class GithubEntity extends LitElement {
             <div class="icon">
                 <ha-icon icon="${this.icon}"></ha-icon>
             </div>
-            <div class="name truncate">
+            <div class="name truncate${this.action ? " clickable" : ""}" @click="${this.action}">
                 ${this.name}
                 ${this.secondaryInfo && html`<div class="secondary">${this.secondaryInfo}</div>`}
             </div>
-            ${this.stats.map(s => html`<div class="state"><ha-icon icon="${s.icon}" style="color: var(--primary-color)"></ha-icon><div>${s.value}</div></div>`)}
+            ${this.attributesData.map(s => html`<div class="state${s.action ? " clickable" : ""}" @click="${s.action}"><ha-icon icon="${s.icon}" style="color: var(--primary-color)"></ha-icon><div>${s.value}</div></div>`)}
         <div>
         `;
     }
@@ -112,9 +186,9 @@ interface IMap<T> {
     [key: string]: T
 }
 
-interface IStat {
+interface IAttributeViewData {
     value: string,
     icon?: string,
     label?: string,
-    url?: string,
+    action?: Function,
 }

src/custom-elements/styles.css

@@ -62,4 +62,8 @@
 }
 .compact-view .state > * {
     margin: 0;
+}
+
+.clickable {
+    cursor: pointer;
 }

src/types.ts

@@ -5,15 +5,17 @@ export interface ICardConfig {
 
 export interface IEntityConfig {
     entity_id: string,
-    attributes: IAttribute[],
+    attributes?: IAttribute[],
     name?: string,
     secondary_info?: string,
     icon?: string,
+    url?: string | boolean,
+    attribute_urls?: boolean,
 }
 
 export interface IAttribute {
     name: string,
     icon?: string,
     label?: string,
-    url?: string,
+    url?: string | boolean,
 }

src/utils.ts

@@ -1,5 +1,7 @@
 export const printVersion = () => console.info(
-    "%c GITHUB-FLEXI-CARD %c 0.1.0",
+    "%c GITHUB-FLEXI-CARD %c 0.2.0",
     "color: white; background: #cca900; font-weight: 700;",
     "color: #cca900; background: white; font-weight: 700;",
-)
+);
+
+export const logError = (msg: string) => console.error(`[github-flexi-card] ${msg}`);