Lovelace - Weather Card: Adjust margins and move text

script/version_bump.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const util = require("util");
+const exec = util.promisify(require("child_process").exec);
+
+function patch(version) {
+  const parts = version.split(".");
+  return `${parts[0]}.${Number(parts[1]) + 1}`;
+}
+
+function today(version) {
+  const now = new Date();
+  return `${now.getFullYear()}${now.getMonth() + 1}${now.getDate()}.0`;
+}
+
+const methods = {
+  patch,
+  today,
+};
+
+async function main(args) {
+  const method = args.length > 0 && methods[args[0]];
+  const commit = args.length > 1 && args[1] == "--commit";
+
+  if (!method) {
+    console.error(
+      "Missing required method. Choose from",
+      Object.keys(methods).join(", ")
+    );
+    return;
+  }
+
+  const setup = fs.readFileSync("setup.py", "utf8");
+  const version = setup.match(/\d{8}\.\d+/)[0];
+  const newVersion = method(version);
+
+  console.log("Current version:", version);
+  console.log("New version:", newVersion);
+
+  fs.writeFileSync("setup.py", setup.replace(version, newVersion), "utf-8");
+
+  if (!commit) {
+    return;
+  }
+
+  const { stdout } = await exec(
+    `git commit -am "Bumped version to ${newVersion}"`
+  );
+  console.log(stdout);
+}
+
+main(process.argv.slice(2));

setup.py

@@ -2,7 +2,7 @@
 
 setup(
     name="home-assistant-frontend",
-    version="20181026.0",
+    version="20181026.1",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/cards/ha-weather-card.js

@@ -26,6 +26,25 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--paper-item-icon-color);
         }
 
+        .header {
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
+          opacity: var(--dark-primary-opacity);
+          padding: 24px 16px 16px;
+          display: flex;
+        }
+
+        .name {
+          margin-left: 16px;
+          font-size: 16px;
+          color: var(--secondary-text-color);
+        }
+
         .now {
           display: flex;
           justify-content: space-between;
@@ -58,12 +77,8 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           top: 4px;
         }
 
-        .now-text {
-          font-size: 24px;
-        }
-
         .forecast {
-          margin-top: 24px;
+          margin-top: 16px;
           display: flex;
           justify-content: space-between;
         }
@@ -74,7 +89,7 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
         }
 
         .forecast .icon {
-          margin: 8px 0;
+          margin: 4px 0;
           text-align: center;
         }
 
@@ -88,7 +103,13 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--secondary-text-color);
         }
       </style>
-      <ha-card header="[[stateObj.attributes.friendly_name]]">
+      <ha-card>
+        <div class="header">
+          [[computeState(stateObj.state, localize)]]
+          <div class="name">
+            [[stateObj.attributes.friendly_name]]
+          </div>
+        </div>
         <div class="content">
           <div class="now">
             <div class="main">
@@ -120,9 +141,6 @@ class HaWeatherCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               </template>
             </div>
           </div>
-          <div class="now-text">
-            [[computeState(stateObj.state, localize)]]
-          </div>
           <template is="dom-if" if="[[forecast]]">
             <div class="forecast">
               <template is="dom-repeat" items="[[forecast]]">

src/panels/lovelace/cards/hui-entities-card.ts

@@ -31,8 +31,8 @@ interface Config extends LovelaceConfig {
 class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
   implements LovelaceCard {
   protected _hass?: HomeAssistant;
-  protected config?: Config;
-  protected configEntities?: ConfigEntity[];
+  protected _config?: Config;
+  protected _configEntities?: ConfigEntity[];
 
   set hass(hass) {
     this._hass = hass;
@@ -45,16 +45,16 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   static get properties(): PropertyDeclarations {
     return {
-      config: {},
+      _config: {},
     };
   }
 
   public getCardSize() {
-    if (!this.config) {
+    if (!this._config) {
       return 0;
     }
     // +1 for the header
-    return (this.config.title ? 1 : 0) + this.config.entities.length;
+    return (this._config.title ? 1 : 0) + this._config.entities.length;
   }
 
   public setConfig(config: Config) {
@@ -77,15 +77,15 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
       }
     }
 
-    this.config = config;
-    this.configEntities = entities;
+    this._config = config;
+    this._configEntities = entities;
   }
 
   protected render() {
-    if (!this.config || !this._hass) {
+    if (!this._config || !this._hass) {
       return html``;
     }
-    const { show_header_toggle, title } = this.config;
+    const { show_header_toggle, title } = this._config;
 
     return html`
       ${this.renderStyle()}
@@ -102,7 +102,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
                   : html`
                   <hui-entities-toggle
                     .hass="${this._hass}"
-                    .entities="${this.configEntities!.map(
+                    .entities="${this._configEntities!.map(
                       (conf) => conf.entity
                     )}"
                   >
@@ -111,7 +111,7 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
             </div>`
         }
         <div id="states">
-          ${this.configEntities!.map((entityConf) =>
+          ${this._configEntities!.map((entityConf) =>
             this.renderEntity(entityConf)
           )}
         </div>
@@ -156,7 +156,9 @@ class HuiEntitiesCard extends hassLocalizeLitMixin(LitElement)
 
   private renderEntity(entityConf) {
     const element = createRowElement(entityConf);
-    element.hass = this._hass;
+    if (this._hass) {
+      element.hass = this._hass;
+    }
     if (
       entityConf.entity &&
       !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))

src/panels/lovelace/cards/hui-horizontal-stack-card.ts

@@ -3,16 +3,9 @@ import { TemplateResult } from "lit-html";
 
 import computeCardSize from "../common/compute-card-size.js";
 
-import { LovelaceCard, LovelaceConfig } from "../types";
-import HuiStackCard from "./hui-stack-card";
-
-interface Config extends LovelaceConfig {
-  cards: LovelaceConfig[];
-}
-
-class HuiHorizontalStackCard extends HuiStackCard implements LovelaceCard {
-  protected config?: Config;
+import { HuiStackCard } from "./hui-stack-card";
 
+class HuiHorizontalStackCard extends HuiStackCard {
   public getCardSize(): number {
     let totalSize = 0;
 

src/panels/lovelace/cards/hui-stack-card.ts

@@ -10,15 +10,14 @@ interface Config extends LovelaceConfig {
   cards: LovelaceConfig[];
 }
 
-export default abstract class HuiStackCard extends LitElement
-  implements LovelaceCard {
-  protected config?: Config;
+export abstract class HuiStackCard extends LitElement implements LovelaceCard {
   protected _cards?: LovelaceCard[];
+  private _config?: Config;
   private _hass?: HomeAssistant;
 
   static get properties() {
     return {
-      config: {},
+      _config: {},
     };
   }
 
@@ -40,16 +39,18 @@ export default abstract class HuiStackCard extends LitElement
     if (!config || !config.cards || !Array.isArray(config.cards)) {
       throw new Error("Card config incorrect");
     }
-    this.config = config;
+    this._config = config;
     this._cards = config.cards.map((card) => {
       const element = createCardElement(card) as LovelaceCard;
-      element.hass = this._hass;
+      if (this._hass) {
+        element.hass = this._hass;
+      }
       return element;
     });
   }
 
   protected render(): TemplateResult {
-    if (!this.config) {
+    if (!this._config) {
       return html``;
     }
 

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -9,6 +9,7 @@ import { roundSliderStyle } from "../../../resources/jquery.roundslider";
 import { HomeAssistant } from "../../../types.js";
 import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
 import { LovelaceCard, LovelaceConfig } from "../types.js";
+import computeStateName from "../../../common/entity/compute_state_name.js";
 
 const thermostatConfig = {
   radius: 150,
@@ -66,18 +67,21 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
     }
     const stateObj = this.hass.states[this.config.entity];
     const broadCard = this.clientWidth > 390;
+    const mode = modeIcons[stateObj.attributes.operation_mode]
+      ? stateObj.attributes.operation_mode
+      : "unknown-mode";
     return html`
       ${this.renderStyle()}
       <ha-card
         class="${classMap({
-          [stateObj.attributes.operation_mode]: true,
+          [mode]: true,
           large: broadCard,
           small: !broadCard,
         })}">
         <div id="root">
           <div id="thermostat"></div>
           <div id="tooltip">
-            <div class="title">Upstairs</div>
+            <div class="title">${computeStateName(stateObj)}</div>
             <div class="current-temperature">
               <span class="current-temperature-text">${
                 stateObj.attributes.current_temperature
@@ -94,7 +98,7 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
             )}</div>
             <div class="modes">
               ${stateObj.attributes.operation_list.map((modeItem) =>
-                this._renderIcon(modeItem, stateObj.attributes.operation_mode)
+                this._renderIcon(modeItem, mode)
               )}
             </div>
           </div>
@@ -105,10 +109,10 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
 
   protected shouldUpdate(changedProps) {
     if (changedProps.get("hass")) {
-      return changedProps.get("hass").states[this.config!.entity] !==
+      return (
+        changedProps.get("hass").states[this.config!.entity] !==
         this.hass!.states[this.config!.entity]
-        ? true
-        : false;
+      );
     }
     return changedProps;
   }
@@ -178,6 +182,12 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
       .off {
         --mode-color: #8a8a8a;
       }
+      .unknown-mode {
+        --mode-color: #bac;
+      }
+      .no-title {
+        --title-margin-top: 33% !important;
+      }
       .large {
         --thermostat-padding-top: 25px;
         --thermostat-margin-bottom: 25px;
@@ -324,6 +334,9 @@ export class HuiThermostatCard extends hassLocalizeLitMixin(LitElement)
   }
 
   private _renderIcon(mode, currentMode) {
+    if (!modeIcons[mode]) {
+      return html``;
+    }
     return html`<ha-icon
       class="${classMap({ "selected-icon": currentMode === mode })}"
       .mode="${mode}"