From d3a35345ae594221d48dfe2ed848d257576a6f02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Wed, 21 Nov 2018 22:23:44 +0100
Subject: [PATCH] Lots of pretification - BREAKING CHANGES

---
 README.md            |  99 ++++++++++++++++++--------
 slider-entity-row.js | 164 ++++++++++++++++++-------------------------
 2 files changed, 138 insertions(+), 125 deletions(-)

diff --git a/README.md b/README.md
index da3fe99..03e55e8 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,79 @@
 slider-entity-row
 =================
 
+Add a slider to adjust brightness of lights, volume of media players or position of covers in lovelace entity cards
 
-Proof of concept
-
-No support given - if you don't know how to get this to work, that is probably a good thing for now.
-
-
----
+![slider-entity-row](https://user-images.githubusercontent.com/1299821/48869222-b6303200-eddc-11e8-8b8c-7b4a9601df7a.png)
 
 ```yaml
-resources:
-  - url: /local/slider-entity-row.js
-    type: js
+  - title: slider-entity-row
+    cards:
+      - type: entities
+        title: Domains
+        show_header_toggle: false
+        entities:
+          - input_number.slider
 
+          - type: section
+            label: light
+          - type: custom:slider-entity-row
+            entity: light.bed_light
+          - type: custom:slider-entity-row
+            entity: light.ceiling_lights
+          - type: custom:slider-entity-row
+            entity: light.kitchen_lights
 
-views:
-  title: My view
-  cards:
-    - type: entities
-      entities:
-      - entity: light.my_lamp
-        name: A dimmable lamp
-        type: custom:slider-entity-row
+          - type: section
+            label: media_player
+          - type: custom:slider-entity-row
+            entity: media_player.bedroom
+          - type: custom:slider-entity-row
+            entity: media_player.living_room
+          - type: custom:slider-entity-row
+            entity: media_player.lounge_room
+          - type: custom:slider-entity-row
+            entity: media_player.walkman
+
+          - type: section
+            label: cover
+          - type: custom:slider-entity-row
+            entity: cover.hall_window
+          - type: custom:slider-entity-row
+            entity: cover.garage_door
+          - type: custom:slider-entity-row
+            entity: cover.living_room_window
+
+      - type: entities
+        title: Options
+        show_header_toggle: false
+        entities:
+          - type: section
+            label: default
+          - type: custom:slider-entity-row
+            entity: light.bed_light
+          - type: custom:slider-entity-row
+            entity: media_player.bedroom
+          - type: custom:slider-entity-row
+            entity: cover.hall_window
+
+          - type: section
+            label: "toggle: true"
+          - type: custom:slider-entity-row
+            entity: light.bed_light
+            toggle: true
+
+          - type: section
+            label: "full_row: true"
+          - entity: light.bed_light
+          - type: custom:slider-entity-row
+            entity: light.bed_light
+            full_row: true
+          - entity: media_player.bedroom
+          - type: custom:slider-entity-row
+            entity: media_player.bedroom
+            full_row: true
+          - entity: cover.hall_window
+          - type: custom:slider-entity-row
+            entity: cover.hall_window
+            full_row: true
 ```
-![slider-entity-row](https://user-images.githubusercontent.com/1299821/44172580-e7161200-a0dd-11e8-8042-19199ad5d5ac.png)
-
-
-### Other options
-
-`hide_toggle: true` - Remove toggle
-
-`break_slider: true` - Put slider on separate row
-
-`hide_when_off: true` - Hide the slider when the light is off
-
-`show_value: true` - Show the current dimmer value instead of toggle.
diff --git a/slider-entity-row.js b/slider-entity-row.js
index fe7c0ed..342cc47 100644
--- a/slider-entity-row.js
+++ b/slider-entity-row.js
@@ -1,70 +1,71 @@
 class SliderEntityRow extends Polymer.Element {
+
   static get template() {
-    let slider = Polymer.html`
-      <paper-slider
-        min="0"
-        max="100"
-        value="{{value}}"
-        step="5"
-        pin
-        on-change="selectedValue"
-        ignore-bar-touch
-        on-click="stopPropagation">
-      </paper-slider>
-      `;
-    return Polymer.html`
-    <style>
-      hui-generic-entity-row {
-        margin: var(--ha-themed-slider-margin, initial);
-      }
-      .flex {
-        display: flex;
-        align-items: center;
-      }
-      .second-line paper-slider {
-        width: 100%;
-      }
-    </style>
-    <hui-generic-entity-row
-      config="[[_config]]"
-      hass="[[_hass]]"
-      >
-      <div class="flex">
-        <template is='dom-if' if='{{displayTop}}'>
-          ${slider}
-        </template>
-        <template is='dom-if' if='{{displayToggle}}'>
-          <ha-entity-toggle
-            state-obj="[[stateObj]]"
-            hass="[[_hass]]"
-          ></ha-entity-toggle>
-        </template>
-        <template is='dom-if' if='{{displayStatus}}'>
-          <div style="min-width: 40px">
-            [[statusString(stateObj)]]
+    const style = Polymer.html`
+      <style>
+        .flex {
+          display: flex;
+          align-items: center;
+          }
+        .state {
+          min-width: 45px;
+          text-align: center;
+        }
+      </style>
+      <template is="dom-if" if="{{!displayRow}}">
+        <style>
+        ha-slider {
+          width: 100%;
+        }
+        </style>
+      </template>
+    `;
+
+    const input = Polymer.html`
+      <div>
+        <template is="dom-if" if="{{displaySlider}}">
+          <div class="flex">
+            <ha-slider
+              min="0"
+              max="100"
+              value="{{value}}"
+              step="5"
+              pin
+              on-change="selectedValue"
+              on-click="stopPropagation"
+              ignore-bar-touch
+            ></ha-slider>
+            <span class="state" on-click="stopPropagation">
+              <template is="dom-if" if="{{displayValue}}">
+                [[statusString(stateObj)]]
+              </template>
+              <template is="dom-if" if="{{displayToggle}}">
+                <ha-entity-toggle
+                  state-obj="[[stateObj]]"
+                  hass="[[_hass]]"
+                ></ha-entity-toggle>
+              </template>
+            </span>
           </div>
         </template>
       </div>
-    </hui-generic-entity-row>
-    <template is='dom-if' if='{{displayBottom}}'>
-      <div class="second-line">
-        ${slider}
-      </div>
-    </template>
-    `
-  }
+    `;
 
-  static get properties() {
-    return {
-      _hass: Object,
-      _config: Object,
-      hideToggle: { type: Boolean, value: false },
-      breakSlider: { type: Boolean, value: false },
-      hideWhenOff: { type: Boolean, value: false },
-      showValue: { type: Boolean, value: false },
-      stateObj: { type: Object, value: null },
-      value: Number,
-    };
+    return Polymer.html`
+      ${style}
+
+      <template is="dom-if" if="{{displayRow}}">
+        <hui-generic-entity-row
+          hass="[[_hass]]"
+          config="[[_config]]"
+        >
+          ${input}
+        </hui-generic-entity-row>
+      </template>
+      <template is="dom-if" if="{{!displayRow}}">
+        ${input}
+      </template>
+    `;
   }
 
   setConfig(config)
@@ -136,14 +137,15 @@ class SliderEntityRow extends Polymer.Element {
 
 
     this._config = config;
+    this.stateObj = null;
     const domain = config.entity.split('.')[0];
     this.controller = CONTROLLERS[domain];
     if(!this.controller) throw new Error('Unsupported entity domain: ' + domain);
 
-    this.hideToggle = config.hide_control || config.hide_toggle || false;
-    this.breakSlider = config.break_slider || false;
-    this.hideWhenOff = config.hide_when_off || false;
-    this.showValue = config.show_value || false;
+    this.displayRow = !config.full_row;
+    this.displayToggle = config.toggle && domain === 'light';
+    this.displayValue = !this.displayToggle;
+    this.displaySlider = false;
   }
 
   statusString(stateObj) {
@@ -152,42 +154,12 @@ class SliderEntityRow extends Polymer.Element {
     return this.controller.string(stateObj, l18n);
   }
 
-  updateSliders()
-  {
-    this.displayTop = false;
-    this.displayBottom = false;
-    this.displayToggle = true;
-    this.displayStatus = false;
-
-    if(this.hideToggle) this.displayToggle = false;
-
-    if(this.showValue) {
-      this.displayToggle = false;
-      this.displayStatus = true;
-    }
-
-    if(!(this.stateObj.state === 'on' || this.stateObj.state === 'off')) {
-      this.displayToggle = false;
-      this.displayStatus = true;
-    }
-
-    if(this.stateObj.state === 'on' || !this.hideWhenOff) {
-      this.displayBottom = this.breakSlider;
-      this.displayTop = !this.breakSlider;
-    }
-
-    if(!this.controller.supported(this.stateObj)) {
-      this.displayTop = this.displayBottom = false;
-    }
-
-  }
-
   set hass(hass) {
     this._hass = hass;
     this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
     if(this.stateObj) {
       this.value = this.controller.get(this.stateObj);
-      this.updateSliders();
+      this.displaySlider = this.controller.supported(this.stateObj);
     }
   }