Add m/s

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 1.2.1m
+
+Added latest changes from original bramkragten card aug9->oct11
+
+## 1.2.0m
+
+- Mod the windspeed to use m/s and added precipitation from original card
+
 ## 1.2.0
 
 - Added UI editor

README.md

@@ -1,10 +1,15 @@
-# Lovelace animated weather card
+# Lovelace animated weather card (modified by @helto4real)
+*Modified the original card from @bramkragten to show percipitation and use eu m/s as wind speed unit*, all else is @bramkragten work. Thanks for this awesome work!*
+
+Please checkout the original and instructions at https://github.com/bramkragten/weather-card
+
 
 Originally created for the [old UI](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008) converted by @arsaboo and @ciotlosm to [Lovelace](https://community.home-assistant.io/t/custom-ui-weather-state-card-with-a-question/23008/291) and now converted to Lit to make it even better.
 
 This card uses the awesome [animated SVG weather icons by amCharts](https://www.amcharts.com/free-animated-svg-weather-icons/).
 
-![Weather Card](https://github.com/bramkragten/custom-ui/blob/master/weather-card/weather-card.gif?raw=true)
+*(modded)*
+![Weather Card](https://github.com/helto4real/weather-card-mod/blob/master/weather-card.gif?raw=true)
 
 Thanks for all picking this card up.
 
@@ -17,43 +22,34 @@ Firefox < 66 does not support all the needed functions yet for the editor.
 You change this by enabling `javascript.options.dynamicImport` in `about:config`.
 Or use the version without the editor: [Version without editor](https://raw.githubusercontent.com/bramkragten/custom-ui/58c41ad177b002e149497629a26ea10ccfeebcd0/weather-card/weather-card.js)
 
-# Hosted:
-
-Add the following to resources in your lovelace config:
-
-```yaml
-- url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
-  type: module
-```
-
 # Manual:
 
-1. Download the [weather-card.js](https://raw.githubusercontent.com/bramkragten/weather-card/v1.2.0/dist/weather-card.js) to `/config/www/custom-lovelace/weather-card/`. (or an other folder in `/config/www/`)
+1. Download the [weather-card-mod.js](https://github.com/helto4real/weather-card-mod/tree/master/dist/weather-card.js) to `/config/www/custom-lovelace/weather-card/`. (or an other folder in `/config/www/`)
 2. Save, the [amCharts icons](https://www.amcharts.com/free-animated-svg-weather-icons/) (The contents of the folder "animated") under `/config/www/custom-lovelace/weather-card/icons/` (or an other folder in `/config/www/`)
-3. If you use Lovelace in storage mode, and want to use the editor, download the [weather-card-editor.js](https://raw.githubusercontent.com/bramkragten/weather-card/v1.2.0/dist/weather-card-editor.js) to `/config/www/custom-lovelace/weather-card/`. (or the folder you used above)
+3. If you use Lovelace in storage mode, and want to use the editor, download the [weather-card-editor.js](https://github.com/helto4real/weather-card-mod/tree/master/dist/weather-card-editor.js) to `/config/www/custom-lovelace/weather-card/`. (or the folder you used above)
 
 Add the following to resources in your lovelace config:
 
 ```yaml
 resources:
-  - url: /local/custom-lovelace/weather-card/weather-card.js
+  - url: /local/custom-lovelace/weather-card/weather-card-mod.js
     type: module
 ```
 
 ## Configuration:
 
-And add a card with type `custom:weather-card`:
+And add a card with type `custom:weather-card-mod`:
 
 ```yaml
-- type: custom:weather-card
+- type: custom:weather-card-mod
   entity: weather.yourweatherentity
   name: Optional name
 ```
 
 If you want to use your local icons add the location to the icons:
 
 ```yaml
-- type: custom:weather-card
+- type: custom:weather-card-mod
   entity: weather.yourweatherentity
   icons: "/local/custom-lovelace/weather-card/icons/"
 ```

dist/weather-card-editor.js

@@ -1,8 +1,3 @@
-if (!customElements.get("paper-input")) {
-  console.log("imported", "paper-input");
-  import("https://unpkg.com/@polymer/paper-input/paper-input.js?module");
-}
-
 const fireEvent = (node, type, detail, options) => {
   options = options || {};
   detail = detail === null || detail === undefined ? {} : detail;
@@ -16,10 +11,16 @@ const fireEvent = (node, type, detail, options) => {
   return event;
 };
 
-const LitElement = Object.getPrototypeOf(
-  customElements.get("ha-panel-lovelace")
-);
+if (
+  !customElements.get("ha-switch") &&
+  customElements.get("paper-toggle-button")
+) {
+  customElements.define("ha-switch", customElements.get("paper-toggle-button"));
+}
+
+const LitElement = Object.getPrototypeOf(customElements.get("hui-view"));
 const html = LitElement.prototype.html;
+const css = LitElement.prototype.css;
 
 export class WeatherCardEditor extends LitElement {
   setConfig(config) {
@@ -42,14 +43,30 @@ export class WeatherCardEditor extends LitElement {
     return this._config.icons || "";
   }
 
+  get _current() {
+    return this._config.current !== false;
+  }
+
+  get _details() {
+    return this._config.details !== false;
+  }
+
+  get _forecast() {
+    return this._config.forecast !== false;
+  }
+
   render() {
     if (!this.hass) {
       return html``;
     }
 
+    const entities = Object.keys(this.hass.states).filter(
+      eid => eid.substr(0, eid.indexOf(".")) === "weather"
+    );
+
     return html`
       <div class="card-config">
-        <div class="side-by-side">
+        <div>
           <paper-input
             label="Name"
             .value="${this._name}"
@@ -62,27 +79,53 @@ export class WeatherCardEditor extends LitElement {
             .configValue="${"icons"}"
             @value-changed="${this._valueChanged}"
           ></paper-input>
-          ${
-            customElements.get("ha-entity-picker")
-              ? html`
-                  <ha-entity-picker
-                    .hass="${this.hass}"
-                    .value="${this._entity}"
-                    .configValue=${"entity"}
-                    domain-filter="weather"
-                    @change="${this._valueChanged}"
-                    allow-custom-entity
-                  ></ha-entity-picker>
-                `
-              : html`
-                  <paper-input
-                    label="Entity"
-                    .value="${this._entity}"
-                    .configValue="${"entity"}"
-                    @value-changed="${this._valueChanged}"
-                  ></paper-input>
-                `
-          }
+          ${customElements.get("ha-entity-picker")
+            ? html`
+                <ha-entity-picker
+                  .hass="${this.hass}"
+                  .value="${this._entity}"
+                  .configValue=${"entity"}
+                  domain-filter="weather"
+                  @change="${this._valueChanged}"
+                  allow-custom-entity
+                ></ha-entity-picker>
+              `
+            : html`
+                <paper-dropdown-menu
+                  label="Entity"
+                  @value-changed="${this._valueChanged}"
+                  .configValue="${"entity"}"
+                >
+                  <paper-listbox
+                    slot="dropdown-content"
+                    .selected="${entities.indexOf(this._entity)}"
+                  >
+                    ${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
+          >
         </div>
       </div>
     `;
@@ -102,12 +145,28 @@ export class WeatherCardEditor extends LitElement {
       } else {
         this._config = {
           ...this._config,
-          [target.configValue]: target.value
+          [target.configValue]:
+            target.checked !== undefined ? target.checked : target.value
         };
       }
     }
     fireEvent(this, "config-changed", { config: this._config });
   }
+
+  static get styles() {
+    return css`
+      ha-switch {
+        padding-top: 16px;
+      }
+      .side-by-side {
+        display: flex;
+      }
+      .side-by-side > * {
+        flex: 1;
+        padding-right: 4px;
+      }
+    `;
+  }
 }
 
 customElements.define("weather-card-editor", WeatherCardEditor);