From dd4e0ad5628ab34c5f8d50f58e583d9d96fa7409 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 15 Jun 2020 15:55:11 +0200
Subject: [PATCH] Add to card picker

---
 .gitignore                  |   2 +
 dist/weather-card-editor.js |  96 ++++++++++++++++-------------
 dist/weather-card.js        | 116 +++++++++++++++++++++---------------
 3 files changed, 126 insertions(+), 88 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..3249a919
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+
+dist/.DS_Store
diff --git a/dist/weather-card-editor.js b/dist/weather-card-editor.js
index 5552710a..ae84cfb8 100644
--- a/dist/weather-card-editor.js
+++ b/dist/weather-card-editor.js
@@ -4,7 +4,7 @@ const fireEvent = (node, type, detail, options) => {
   const event = new Event(type, {
     bubbles: options.bubbles === undefined ? true : options.bubbles,
     cancelable: Boolean(options.cancelable),
-    composed: options.composed === undefined ? true : options.composed
+    composed: options.composed === undefined ? true : options.composed,
   });
   event.detail = detail;
   node.dispatchEvent(event);
@@ -69,7 +69,7 @@ export class WeatherCardEditor extends LitElement {
     }
 
     const entities = Object.keys(this.hass.states).filter(
-      eid => eid.substr(0, eid.indexOf(".")) === "weather"
+      (eid) => eid.substr(0, eid.indexOf(".")) === "weather"
     );
 
     return html`
@@ -108,43 +108,54 @@ export class WeatherCardEditor extends LitElement {
                     slot="dropdown-content"
                     .selected="${entities.indexOf(this._entity)}"
                   >
-                    ${entities.map(entity => {
-                      return html`
-                        <paper-item>${entity}</paper-item>
-                      `;
+                    ${entities.map((entity) => {
+                      return html` <paper-item>${entity}</paper-item> `;
                     })}
                   </paper-listbox>
                 </paper-dropdown-menu>
               `}
-          <ha-switch
-            .checked=${this._current}
-            .configValue="${"current"}"
-            @change="${this._valueChanged}"
-            >Show current</ha-switch
-          >
-          <ha-switch
-            .checked=${this._details}
-            .configValue="${"details"}"
-            @change="${this._valueChanged}"
-            >Show details</ha-switch
-          >
-          <ha-switch
-            .checked=${this._forecast}
-            .configValue="${"forecast"}"
-            @change="${this._valueChanged}"
-            >Show forecast</ha-switch
-          >
-          <ha-switch
-          .checked=${this._hourly_forecast}
-          .configValue="${"hourly_forecast"}"
-          @change="${this._valueChanged}"
-          >Show hourly forecast</ha-switch
-          >
+          <div class="switches">
+            <div class="switch">
+              <ha-switch
+                .checked=${this._current}
+                .configValue="${"current"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+              ><span>Show current</span>
+            </div>
+            <div class="switch">
+              <ha-switch
+                .checked=${this._details}
+                .configValue="${"details"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+              ><span>Show details</span>
+            </div>
+            <div class="switch">
+              <ha-switch
+                .checked=${this._forecast}
+                .configValue="${"forecast"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+              ><span>Show forecast</span>
+            </div>
+            <div class="switch">
+              <ha-switch
+                .checked=${this._hourly_forecast}
+                .configValue="${"hourly_forecast"}"
+                @change="${this._valueChanged}"
+              ></ha-switch
+              ><span>Show hourly forecast</span>
+            </div>
+          </div>
           <paper-input
-          label="Number of future forcasts"
-          type="number" min="1" max="8" value=${this._number_of_forecasts}
-          .configValue="${"number_of_forecasts"}"
-          @value-changed="${this._valueChanged}"
+            label="Number of future forcasts"
+            type="number"
+            min="1"
+            max="8"
+            value=${this._number_of_forecasts}
+            .configValue="${"number_of_forecasts"}"
+            @value-changed="${this._valueChanged}"
           ></paper-input>
         </div>
       </div>
@@ -166,7 +177,7 @@ export class WeatherCardEditor extends LitElement {
         this._config = {
           ...this._config,
           [target.configValue]:
-            target.checked !== undefined ? target.checked : target.value
+            target.checked !== undefined ? target.checked : target.value,
         };
       }
     }
@@ -175,15 +186,18 @@ export class WeatherCardEditor extends LitElement {
 
   static get styles() {
     return css`
-      ha-switch {
-        padding-top: 16px;
+      .switches {
+        margin: 8px 0;
+        display: flex;
+        justify-content: space-between;
       }
-      .side-by-side {
+      .switch {
         display: flex;
+        align-items: center;
+        justify-items: center;
       }
-      .side-by-side > * {
-        flex: 1;
-        padding-right: 4px;
+      .switches span {
+        padding: 0 16px;
       }
     `;
   }
diff --git a/dist/weather-card.js b/dist/weather-card.js
index dc5eec13..ef754a79 100644
--- a/dist/weather-card.js
+++ b/dist/weather-card.js
@@ -18,7 +18,7 @@ const weatherIconsDay = {
   sunny: "day",
   windy: "cloudy",
   "windy-variant": "cloudy-day-3",
-  exceptional: "!!"
+  exceptional: "!!",
 };
 
 const weatherIconsNight = {
@@ -26,7 +26,7 @@ const weatherIconsNight = {
   clear: "night",
   sunny: "night",
   partlycloudy: "cloudy-night-3",
-  "windy-variant": "cloudy-night-3"
+  "windy-variant": "cloudy-night-3",
 };
 
 const windDirections = [
@@ -46,16 +46,25 @@ const windDirections = [
   "WNW",
   "NW",
   "NNW",
-  "N"
+  "N",
 ];
 
+window.customCards = window.customCards || [];
+window.customCards.push({
+  type: "weather-card",
+  name: "Weather Card",
+  description: "A custom weather card with animated icons.",
+  preview: true,
+  documentationURL: "https://github.com/bramkragten/weather-card",
+});
+
 const fireEvent = (node, type, detail, options) => {
   options = options || {};
   detail = detail === null || detail === undefined ? {} : detail;
   const event = new Event(type, {
     bubbles: options.bubbles === undefined ? true : options.bubbles,
     cancelable: Boolean(options.cancelable),
-    composed: options.composed === undefined ? true : options.composed
+    composed: options.composed === undefined ? true : options.composed,
   });
   event.detail = detail;
   node.dispatchEvent(event);
@@ -83,7 +92,7 @@ class WeatherCard extends LitElement {
   static get properties() {
     return {
       _config: {},
-      hass: {}
+      hass: {},
     };
   }
 
@@ -92,8 +101,12 @@ class WeatherCard extends LitElement {
     return document.createElement("weather-card-editor");
   }
 
-  static getStubConfig() {
-    return {};
+  static getStubConfig(hass, unusedEntities, allEntities) {
+    let entity = unusedEntities.find((eid) => eid.split(".")[0] === "weather");
+    if (!entity) {
+      entity = allEntities.find((eid) => eid.split(".")[0] === "weather");
+    }
+    return { entity };
   }
 
   setConfig(config) {
@@ -158,9 +171,7 @@ class WeatherCard extends LitElement {
           >${stateObj.state}
         </span>
         ${this._config.name
-          ? html`
-              <span class="title"> ${this._config.name} </span>
-            `
+          ? html` <span class="title"> ${this._config.name} </span> `
           : ""}
         <span class="temp"
           >${this.getUnit("temperature") == "°F"
@@ -241,43 +252,54 @@ class WeatherCard extends LitElement {
     this.numberElements++;
     return html`
       <div class="forecast clear ${this.numberElements > 1 ? "spacer" : ""}">
-      ${forecast.slice(0, this._config.number_of_forecasts ? this._config.number_of_forecasts : 5 ).map(
-        daily => html`
-            <div class="day">
-              <div class="dayname">
-              ${this._config.hourly_forecast 
-                ? new Date(daily.datetime).toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit' })
-                : new Date(daily.datetime).toLocaleDateString(lang, {weekday: "short" })
-              }
-              </div>
-              <i
-                class="icon"
-                style="background: none, url('${this.getWeatherIcon(
-                  daily.condition.toLowerCase()
-                )}') no-repeat; background-size: contain"
-              ></i>
-              <div class="highTemp">
-                ${daily.temperature}${this.getUnit("temperature")}
+        ${forecast
+          .slice(
+            0,
+            this._config.number_of_forecasts
+              ? this._config.number_of_forecasts
+              : 5
+          )
+          .map(
+            (daily) => html`
+              <div class="day">
+                <div class="dayname">
+                  ${this._config.hourly_forecast
+                    ? new Date(daily.datetime).toLocaleTimeString(lang, {
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      })
+                    : new Date(daily.datetime).toLocaleDateString(lang, {
+                        weekday: "short",
+                      })}
+                </div>
+                <i
+                  class="icon"
+                  style="background: none, url('${this.getWeatherIcon(
+                    daily.condition.toLowerCase()
+                  )}') no-repeat; background-size: contain"
+                ></i>
+                <div class="highTemp">
+                  ${daily.temperature}${this.getUnit("temperature")}
+                </div>
+                ${daily.templow !== undefined
+                  ? html`
+                      <div class="lowTemp">
+                        ${daily.templow}${this.getUnit("temperature")}
+                      </div>
+                    `
+                  : ""}
+                ${!this._config.hide_precipitation &&
+                daily.precipitation !== undefined &&
+                daily.precipitation !== null
+                  ? html`
+                      <div class="precipitation">
+                        ${daily.precipitation} ${this.getUnit("precipitation")}
+                      </div>
+                    `
+                  : ""}
               </div>
-              ${daily.templow !== undefined
-                ? html`
-                    <div class="lowTemp">
-                      ${daily.templow}${this.getUnit("temperature")}
-                    </div>
-                  `
-                : ""}
-              ${!this._config.hide_precipitation &&
-              daily.precipitation !== undefined &&
-              daily.precipitation !== null
-                ? html`
-                    <div class="precipitation">
-                      ${daily.precipitation} ${this.getUnit("precipitation")}
-                    </div>
-                  `
-                : ""}
-            </div>
-          `
-        )}
+            `
+          )}
       </div>
     `;
   }
@@ -363,7 +385,7 @@ class WeatherCard extends LitElement {
         margin-right: 7px;
       }
 
-      @media (max-width: 460px){
+      @media (max-width: 460px) {
         .title {
           font-size: 2.2em;
           left: 4em;