diff --git a/gallery/src/data/plants.ts b/gallery/src/data/plants.ts new file mode 100644 index 0000000000..362afaac78 --- /dev/null +++ b/gallery/src/data/plants.ts @@ -0,0 +1,72 @@ +import { getEntity } from "../../../src/fake_data/entity"; + +export const createPlantEntities = () => [ + getEntity("plant", "lemon_tree", "ok", { + problem: "none", + sensors: { + moisture: "sensor.lemon_tree_moisture", + battery: "sensor.lemon_tree_battery", + temperature: "sensor.lemon_tree_temperature", + conductivity: "sensor.lemon_tree_conductivity", + brightness: "sensor.lemon_tree_brightness", + }, + unit_of_measurement_dict: { + temperature: "°C", + moisture: "%", + brightness: "lx", + battery: "%", + conductivity: "μS/cm", + }, + moisture: 54, + battery: 95, + temperature: 15.6, + conductivity: 1, + brightness: 12, + max_brightness: 20, + friendly_name: "Lemon Tree", + }), + getEntity("plant", "apple_tree", "ok", { + problem: "brightness", + sensors: { + moisture: "sensor.apple_tree_moisture", + battery: "sensor.apple_tree_battery", + temperature: "sensor.apple_tree_temperature", + conductivity: "sensor.apple_tree_conductivity", + brightness: "sensor.apple_tree_brightness", + }, + unit_of_measurement_dict: { + temperature: "°C", + moisture: "%", + brightness: "lx", + battery: "%", + conductivity: "μS/cm", + }, + moisture: 54, + battery: 2, + temperature: 15.6, + conductivity: 1, + brightness: 25, + max_brightness: 20, + friendly_name: "Apple Tree", + }), + getEntity("plant", "sunflowers", "ok", { + problem: "moisture, temperature, conductivity", + sensors: { + moisture: "sensor.sunflowers_moisture", + temperature: "sensor.sunflowers_temperature", + conductivity: "sensor.sunflowers_conductivity", + brightness: "sensor.sunflowers_brightness", + }, + unit_of_measurement_dict: { + temperature: "°C", + moisture: "%", + brightness: "lx", + conductivity: "μS/cm", + }, + moisture: 54, + temperature: 15.6, + conductivity: 1, + brightness: 25, + entity_picture: "/images/sunflowers.jpg", + }), +]; diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts index 5455232a3d..f28c4ef7b4 100644 --- a/gallery/src/demos/demo-hui-glance-card.ts +++ b/gallery/src/demos/demo-hui-glance-card.ts @@ -218,7 +218,7 @@ const CONFIGS = [ }, ]; -class DemoPicEntity extends PolymerElement { +class DemoGlanceEntity extends PolymerElement { static get template() { return html` `; } @@ -240,4 +240,4 @@ class DemoPicEntity extends PolymerElement { } } -customElements.define("demo-hui-glance-card", DemoPicEntity); +customElements.define("demo-hui-glance-card", DemoGlanceEntity); diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/demo-hui-plant-card.ts new file mode 100644 index 0000000000..7df7f1c9f2 --- /dev/null +++ b/gallery/src/demos/demo-hui-plant-card.ts @@ -0,0 +1,55 @@ +import { html } from "@polymer/polymer/lib/utils/html-tag"; +/* eslint-plugin-disable lit */ +import { PolymerElement } from "@polymer/polymer/polymer-element"; +import { provideHass } from "../../../src/fake_data/provide_hass"; +import "../components/demo-cards"; +import { createPlantEntities } from "../data/plants"; + +const CONFIGS = [ + { + heading: "Basic example", + config: ` +- type: plant-status + entity: plant.lemon_tree + `, + }, + { + heading: "Problem (too bright) + low battery", + config: ` +- type: plant-status + entity: plant.apple_tree + `, + }, + { + heading: "With picture + multiple problems", + config: ` +- type: plant-status + entity: plant.sunflowers + name: Sunflowers Name Overwrite + `, + }, +]; + +class DemoPlantEntity extends PolymerElement { + static get template() { + return html``; + } + + static get properties() { + return { + _configs: { + type: Object, + value: CONFIGS, + }, + }; + } + + public ready() { + super.ready(); + const hass = provideHass(this.$.demos); + hass.updateTranslations(null, "en"); + hass.addEntities(createPlantEntities()); + } +} + +customElements.define("demo-hui-plant-card", DemoPlantEntity);