diff --git a/README.md b/README.md
index 8f54eb8f..e19d2384 100644
--- a/README.md
+++ b/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
+
+
+
+```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).
\ No newline at end of file
diff --git a/package.json b/package.json
index cdfc9341..825049e0 100644
--- a/package.json
+++ b/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": {
diff --git a/src/battery-vm.ts b/src/battery-vm.ts
index 1ad55473..40fad540 100644
--- a/src/battery-vm.ts
+++ b/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;
diff --git a/src/index.ts b/src/index.ts
index 2901a2bd..d0599130 100644
--- a/src/index.ts
+++ b/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;
}
/**
diff --git a/src/styles.ts b/src/styles.ts
index d4c18786..fd99559e 100644
--- a/src/styles.ts
+++ b/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;
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
index 6288205f..f2348d31 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -2,7 +2,7 @@
interface IColorThreshold {
value: number;
- color: string;
+ color?: string;
}
export interface IBatteryEntity {
@@ -10,15 +10,16 @@ export interface IBatteryEntity {
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;
}
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
index c683e34b..33302c20 100644
--- a/src/utils.ts
+++ b/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;',
);
diff --git a/src/views.ts b/src/views.ts
index 8acc2a90..ec7278b5 100644
--- a/src/views.ts
+++ b/src/views.ts
@@ -35,4 +35,14 @@ export const card = (headerText: string, contents: string[]) => html`
${contents}
-`;
\ No newline at end of file
+`;
+
+export const collapsableWrapper = (contents: string[], collapseAfter: number) => {
+ const elemId = "expander" + Math.random().toString().substr(2);
+ return html`
+ ${contents.slice(0, collapseAfter)}
+
+
+ ${contents.slice(collapseAfter)}
+ `
+};
\ No newline at end of file