Thermostat Card LoveLace (#1814)

* POC/WIP: Thermostat Card

* Fix jQuery imports

* Cleaning out testing code and working on reviews

* Colors Dynamic + mode dynamic

* Minor changes

* adding html prefix

* Dynamic Text size and colors - getting somwhere slowly.

* Review Changes - Working version (i think)

* Updating Gallery Entry

* Travies Review

* Remove provide plugin, move CSS to JS

* Add provideHass to demo

* Demo fixes

* tweak margins

* Travis changes

* Style Tweaks

* Update to client Width range

gallery/src/data/entity.js

@@ -99,6 +99,21 @@ export class CoverEntity extends Entity {
   }
 }
 
+export class ClimateEntity extends Entity {
+  async handleService(domain, service, data) {
+    if (domain !== this.domain) return;
+
+    if (service === "set_operation_mode") {
+      this.update(
+        data.operation_mode === "heat" ? "heat" : data.operation_mode,
+        Object.assign(this.attributes, {
+          operation_mode: data.operation_mode,
+        })
+      );
+    }
+  }
+}
+
 export class GroupEntity extends Entity {
   async handleService(domain, service, data) {
     if (!["homeassistant", this.domain].includes(domain)) return;
@@ -115,6 +130,7 @@ export class GroupEntity extends Entity {
 }
 
 const TYPES = {
+  climate: ClimateEntity,
   light: LightEntity,
   lock: LockEntity,
   cover: CoverEntity,

gallery/src/demos/demo-hui-thermostat-card.js

@@ -0,0 +1,88 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag.js";
+import { PolymerElement } from "@polymer/polymer/polymer-element.js";
+
+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
+import "../components/demo-cards.js";
+
+const ENTITIES = [
+  getEntity("climate", "ecobee", "auto", {
+    current_temperature: 73,
+    min_temp: 45,
+    max_temp: 95,
+    temperature: null,
+    target_temp_high: 75,
+    target_temp_low: 70,
+    fan_mode: "Auto Low",
+    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    operation_mode: "auto",
+    operation_list: ["heat", "cool", "auto", "off"],
+    hold_mode: "home",
+    swing_mode: "Auto",
+    swing_list: ["Auto", "1", "2", "3", "Off"],
+    friendly_name: "Ecobee",
+    supported_features: 1014,
+  }),
+  getEntity("climate", "nest", "heat", {
+    current_temperature: 17,
+    min_temp: 15,
+    max_temp: 25,
+    temperature: 19,
+    fan_mode: "Auto Low",
+    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+    operation_mode: "heat",
+    operation_list: ["heat", "cool", "auto", "off"],
+    hold_mode: "home",
+    swing_mode: "Auto",
+    swing_list: ["Auto", "1", "2", "3", "Off"],
+    friendly_name: "Nest",
+    supported_features: 1014,
+  }),
+];
+
+const CONFIGS = [
+  {
+    heading: "Range example",
+    config: `
+- type: thermostat
+  entity: climate.ecobee
+- type: thermostat
+  entity: climate.nest
+    `,
+  },
+  {
+    heading: "Single temp example",
+    config: `
+- type: thermostat
+  entity: climate.nest
+    `,
+  },
+];
+
+class DemoThermostatEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards
+        id='demos'
+        configs="[[_configs]]"
+      ></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define("demo-hui-thermostat-card", DemoThermostatEntity);

gallery/webpack.config.js

@@ -17,6 +17,10 @@ module.exports = {
   module: {
     rules: [
       babelLoaderConfig({ latestBuild: true }),
+      {
+        test: /\.css$/,
+        use: "raw-loader",
+      },
       {
         test: /\.(html)$/,
         use: {