Merge pull request #15 from maxwroc/vNext

Release v0.4.0

Author: maxwroc

.gitignore

@@ -1,4 +1,4 @@
 /.vscode/
 /node_modules/
 /dist/
-/src/custom-elements/styles.ts
+/src/custom-elements/*-styles.ts

README.md

@@ -7,14 +7,17 @@ The aim of this card is to show all the data provided by github integration. You
 
 ![image](https://user-images.githubusercontent.com/8268674/95763370-d904b180-0ca6-11eb-9951-56c8200ee025.png)
 
+This component can be used as entity as well
+
+![image](https://user-images.githubusercontent.com/8268674/96303544-7be46500-0ff2-11eb-9a86-16af9c52f1d0.png)
 
 ## Configuration
 
 ### Card
 | Name | Type | Default | Since | Description |
 |:-----|:-----|:-----|:-----|:-----|
 | title | String |  | v0.1.0 | Card header/title text
-| entities | [Entity](#entity)[] | **(required)** | v0.1.0 | Collection of entities to display
+| entities | [Entity](#entity)[] \| String | **(required)** | v0.1.0 | Collection of entities to display. You can provide simple list of entity_id strings.
 
 [+ Entity Properties](#Entity-Properties) - applied to all entities
 
@@ -52,6 +55,8 @@ E.g. `"Card version {latest_release_tag}"` becomes `"Card version v1.5.0"`
 
 ## Configuration examples
 
+### Card
+
 ```yaml
 type: 'custom:github-flexi-card'
 title: Github projects
@@ -84,6 +89,35 @@ entities:
       - name: open_issues
 ```
 
+### Entity
+
+Note: different type has to be used `custom:github-entity`
+
+![image](https://user-images.githubusercontent.com/8268674/96303544-7be46500-0ff2-11eb-9a86-16af9c52f1d0.png)
+
+```yaml
+type: entities
+title: Displayed as entity
+show_header_toggle: false
+entities:
+  - sensor.home_assistant_v2_db
+  - type: 'custom:github-entity'
+    entity: sensor.battery_state_card
+    secondary_info: 'Released {latest_release_tag}'
+    url: true
+    attribute_urls: true
+    attributes:
+      - name: views
+      - name: stargazers
+      - name: open_issues
+      - name: clones
+      - name: forks
+      - name: open_pull_requests
+  - sensor.hassio_online
+  - sensor.last_boot
+  - sensor.processor_use
+```
+
 ### Card-level entity properties
 
 Card-level entity properties are useful when you want to have same settings for all of the entities.
@@ -104,9 +138,9 @@ attributes:
   - name: forks
   - name: open_pull_requests
 entities:
-  - entity: sensor.battery_state_card
-  - entity: sensor.hideseek_mod
-  - entity: sensor.urleditorpro
+  - sensor.battery_state_card
+  - sensor.hideseek_mod
+  - sensor.urleditorpro
 ```
 
 ## How to install?

build/prebuild.js

@@ -31,10 +31,19 @@ const minimizeCss =  content => {
 }
 
 const compileCss = async () => {
-    const cssFile = "src/custom-elements/styles.css";
-    const cssCode = await readFile(cssFile);
-
-    return await writeFile(cssFile.replace(".css", ".ts"), 'import { css } from "../lit-element"; const styles = css`' + minimizeCss(cssCode) + '`; export default styles;');
+    const dir = "src/custom-elements";
+    const files = fs.readdirSync(dir);
+    return Promise.all(files.map(async file => {
+        if (!file.endsWith(".css")) {
+            return;
+        }
+
+        const sourceFilePath = `${dir}/${file}`;
+        const targetFilePath = sourceFilePath.replace(".css", "-styles.ts");
+
+        const cssCode = await readFile(sourceFilePath);
+        await writeFile(targetFilePath, 'import { css } from "../lit-element"; const styles = css`' + minimizeCss(cssCode) + '`; export default styles;');
+    }));
 };
 
 // Updates version printed in console window

package.json

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

src/custom-elements/card.css

@@ -0,0 +1,6 @@
+
+.truncate {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}

src/custom-elements/card.ts

@@ -1,78 +1,120 @@
 import { HomeAssistant } from "../ha-types";
 import { html, LitElement } from "../lit-element";
-import { ICardConfig } from "../types";
+import { ICardConfig, IEntityConfig } from "../types";
 import { GithubEntity } from "./entity";
-import styles from "./styles";
+import styles from "./card-styles";
 
 export class GithubFlexiCard extends LitElement {
 
     private cardTitle: string = "";
 
     private entities: GithubEntity[] = [];
 
+    private cardSize = 0;
+
     /**
      * CSS for the card
      */
     static get styles() {
         return styles;
     }
 
+    /**
+     * List of properties which trigger update when changed
+     */
     static get properties() {
         return {
             cardTitle: { type: String },
             entities: { type: Array },
         };
     }
 
+    /**
+     * Called whenever HS state is updated
+     */
     set hass(hass: HomeAssistant) {
         this.entities.forEach(entity => entity.hass = hass);
     }
 
+    /**
+     * Called whenever card config is updated
+     */
     setConfig(cardConfig: ICardConfig) {
         this.cardTitle = cardConfig.title;
 
-        if (this.entities.length != cardConfig.entities.length) {
-            this.entities = cardConfig.entities.map(entityConf => {
-                const elem = document.createElement("github-entity") as GithubEntity;
-
-                // we have to make a copy as the original one is immutable
-                const updatableConfig = { ...entityConf };
+        this.cardSize = 0;
 
-                // if property is not defined take the card-level one
-                updatableConfig.attributes = updatableConfig.attributes || cardConfig.attributes;
-                updatableConfig.attribute_urls = updatableConfig.attribute_urls !== undefined ? updatableConfig.attribute_urls : cardConfig.attribute_urls;
-                updatableConfig.icon = updatableConfig.icon || cardConfig.icon;
-                updatableConfig.name = updatableConfig.name || cardConfig.name;
-                updatableConfig.secondary_info = updatableConfig.secondary_info || cardConfig.secondary_info;
-                updatableConfig.url = updatableConfig.url !== undefined ? updatableConfig.url : cardConfig.url;
+        if (this.cardTitle) {
+            this.cardSize++;
+        }
 
-                elem.setConfig(updatableConfig);
+        if (this.entities.length != cardConfig.entities.length) {
+            this.entities = cardConfig.entities.map(e => getEntityConfig(e, cardConfig)).map(entityConf => {
+                const elem = document.createElement("github-entity") as GithubEntity;
+                elem.setConfig(entityConf);
+                this.cardSize++;
                 return elem;
             })
         }
         else {
-            this.entities.forEach((entity, index) => entity.setConfig(cardConfig.entities[index]));
+            this.entities.forEach((entity, index) => entity.setConfig(getEntityConfig(cardConfig.entities[index], cardConfig)));
         }
     }
 
+    /**
+     * Gets the height of your card.
+     *
+     * Home Assistant uses this to automatically distribute all cards over
+     * the available columns. One is equal 50px.
+     */
+    getCardSize() {
+        return this.cardSize;
+    }
+
+    /**
+     * Called when element rendering was triggered
+     */
     render() {
         return html`
         <ha-card>
-            ${this.getHeader()}
+            ${this.cardTitle && header(this.cardTitle)}
             <div class="card-content">
                 ${this.entities}
             </div>
         </ha-card>
         `;
     }
+}
 
-    private getHeader() {
-        return this.cardTitle && html`
-        <div class="card-header">
-            <div class="truncate">
-                ${this.cardTitle}
-            </div>
-        </div>
-        `;
-    }
+/**
+ * Header/title view
+ */
+const header = (title: string) => html`
+<div class="card-header">
+    <div class="truncate">
+        ${title}
+    </div>
+</div>
+`;
+
+/**
+ * Converts string entry to proper config obj and applies card-level settings
+ */
+const getEntityConfig = (configEntry: IEntityConfig | string, cardConfig: ICardConfig): IEntityConfig => {
+
+    const entityConfig = typeof configEntry != "string" ?
+        // we have to make a copy as the original one is immutable
+        { ...configEntry } :
+        // construct simple config entry
+        { entity: configEntry };
+
+    // if property is not defined take the card-level one
+    entityConfig.attributes = entityConfig.attributes || cardConfig.attributes;
+    entityConfig.attribute_urls = entityConfig.attribute_urls !== undefined ? entityConfig.attribute_urls : cardConfig.attribute_urls;
+    entityConfig.icon = entityConfig.icon || cardConfig.icon;
+    entityConfig.name = entityConfig.name || cardConfig.name;
+    entityConfig.secondary_info = entityConfig.secondary_info || cardConfig.secondary_info;
+    entityConfig.url = entityConfig.url !== undefined ? entityConfig.url : cardConfig.url;
+
+    return entityConfig;
 }

src/custom-elements/styles.css renamed to src/custom-elements/entity.css

@@ -1,11 +1,13 @@
-
-
 .truncate {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
+.clickable {
+    cursor: pointer;
+}
+
 .entity-spacing:first-child {
     margin-top: 0;
 }
@@ -62,8 +64,4 @@
 }
 .compact-view .state > * {
     margin: 0;
-}
-
-.clickable {
-    cursor: pointer;
 }