Merge pull request #2 from maxwroc/Collapse

Collapsed view

README.md

@@ -17,6 +17,7 @@ Card code is very small - less than 10KB. It **doesn't** depend on external depe
 | entities | array(string \| [Entity](#entity-object)) | **(required)** | v0.9.0 | List of entities
 | name | string | `"Battery levels"` | v0.9.0 | Card title
 | sort_by_level | string |  | v0.9.0 | Values: `asc`, `desc`
+| collapse | number |  | v1.0.0 | Number of entities to show. Rest will be available in expandable section ([example](#sorted-list-and-collapsed-view))
 
 +[appearance options](#appearance-options)
 
@@ -179,6 +180,23 @@ You can setup as well colors only for lower battery levels and leave the default
     - sensor.bedroom_switch_battery_level
 ```
 
+### Sorted list and collapsed view
+
+![ezgif com-resize](https://user-images.githubusercontent.com/8268674/80119122-31bd8200-8581-11ea-9221-aee943d0b1a0.gif)
+
+```yaml
+- type: custom:battery-state-card
+  name: "Sorted list and collapsed view"
+  sort_by_level: "asc"
+  collapse: 4
+  entities:
+    - sensor.bedroom_motion_battery_level
+    - sensor.bathroom_motion_battery_level
+    - sensor.bedroomtemp_battery_level
+    - sensor.bedroom_balcony_battery_level
+    - sensor.bedroom_switch_battery_level
+```
+
 ## Installation
 
 Once added to [HACS](https://community.home-assistant.io/t/custom-component-hacs/121727) add the following to your lovelace configuration
@@ -204,6 +222,10 @@ Bundeled transpiled code will appear in `dist` directory.
 
 Note: there is "undocumented" `value_override` property on the [entity object](#entity-object) which you can use for testing.
 
+## Do you like the card?
+
+If you do like the card please star it on [github](https://github.com/maxwroc/battery-state-card)! This is a great way to give feedback and motivation boost for me to continue working on it. Thanks!
+
 ## License
 
 This project is under the [MIT license](https://github.com/maxwroc/battery-state-card/blob/master/LICENSE).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "battery-state-card",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "description": "Battery State card for Home Assistant",
   "main": "dist/battery-state-card.js",
   "repository": {

src/battery-vm.ts

@@ -55,7 +55,7 @@ class BatteryViewModel {
      */
     get levelColor(): string {
 
-        if (this.isColorGradientValid(this.config.color_gradient)) {
+        if (this.config.color_gradient && this.isColorGradientValid(this.config.color_gradient)) {
             return getColorInterpolationForPercentage(this.config.color_gradient, this.level);
         }
 
@@ -82,10 +82,6 @@ class BatteryViewModel {
     }
 
     private isColorGradientValid(color_gradient: string[]) {
-        if (!color_gradient) {
-            return false;
-        }
-
         if (color_gradient.length < 2) {
             log("Value for 'color_gradient' should be an array with at least 2 colors.");
             return;

src/index.ts

@@ -111,18 +111,30 @@ class BatteryStateCard extends LitElement {
             return views.battery(this.batteries[0]);
         }
 
+        const batteryViews = this.batteries.map(battery => views.battery(battery));
+
         return views.card(
             this.config.name || "Battery levels",
-            this.batteries.map(battery => views.battery(battery))
+            this.config.collapse ? [ views.collapsableWrapper(batteryViews, this.config.collapse) ] : batteryViews
         );
     }
 
     /**
-     * Gets the height of your card. Home Assistant uses this to automatically
-     * distribute all cards over the available columns.
+     * 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.batteries.length + 1;
+        let size = this.batteries.length;
+
+        if (this.config.collapse) {
+            // +1 to account the expand button
+            size = this.config.collapse + 1;
+        }
+
+        // +1 to account header
+        return size + 1;
     }
 
     /**

src/styles.ts

@@ -14,6 +14,38 @@ const styles = css`
     border-radius: 50%;
     text-align: center;
 }
+
+
+.expand {
+    display: none;
+}
+.expand + label {
+    display: block;
+    text-align: right;
+    cursor: pointer;
+}
+.expand + label > div {
+    display: inline-block;
+    transform: rotate(-90deg);
+    font-size: 26px;
+    height: 29px;
+    width: 29px;
+    text-align: center;
+}
+.expand + label > div,
+.expand + label + div {
+    transition: 0.5s ease-in-out;
+}
+.expand:checked + label > div {
+    transform: rotate(-90deg) scaleX(-1);
+}
+.expand + label + div {
+    max-height: 0;
+    overflow: hidden;
+}
+.expand:checked + label + div {
+    max-height: 1000px;
+}
 `;
 
 export default styles;

src/types.ts

@@ -2,23 +2,24 @@
 
 interface IColorThreshold {
     value: number;
-    color: string;
+    color?: string;
 }
 
 export interface IBatteryEntity {
     entity: string;
     name?: string;
     attribute?: string;
     multiplier?: number;
-    value_override: number; // dev purposes only
+    value_override?: number; // dev purposes only
 }
 
 export interface IAppearance {
     color_thresholds?: IColorThreshold[];
-    color_gradient: string[]
+    color_gradient?: string[];
 }
 
 export interface IBatteryStateCardConfig extends IBatteryEntity, IAppearance  {
     entities: IBatteryEntity[];
     sort_by_level?: "asc" | "desc";
+    collapse?: number;
 }

src/utils.ts

@@ -1,6 +1,6 @@
 
 console.info(
-    '%c BATTERY-STATE-CARD %c 0.9.0 ',
+    '%c BATTERY-STATE-CARD %c 1.0.0 ',
     'color: white; background: forestgreen; font-weight: 700;',
     'color: forestgreen; background: white; font-weight: 700;',
 );

src/views.ts

@@ -35,4 +35,14 @@ export const card = (headerText: string, contents: string[]) => html`
         ${contents}
     </div>
 </ha-card>
-`;
+`;
+
+export const collapsableWrapper = (contents: string[], collapseAfter: number) => {
+    const elemId = "expander" + Math.random().toString().substr(2);
+    return html`
+    ${contents.slice(0, collapseAfter)}
+    <input type="checkbox" class="expand" id="${elemId}" />
+    <label for="${elemId}"><div>&lsaquo;</div></label>
+    <div>${contents.slice(collapseAfter)}</div>
+    `
+};