From 2bb23a5c6cb57651c3171f8ab65a16bf0028ed9e Mon Sep 17 00:00:00 2001
From: Philippe Coval <p.coval@samsung.com>
Date: Thu, 2 Aug 2018 10:38:07 +0200
Subject: [PATCH] ui: Fix boolean and switch widgets (if multiple)

Previously UI item's ids were duplicated,
the observed consequence is that any click on widgets
is catched by 1st declared element.

For example, a thing with 2 switches is displayed correctly,
and click events are also triggered
but event will be "redirected" to 1st switch only,
this is not desired.

The change is only fixing boolean widgets, others to come later.

Note: It was suggested to use nested inputs,
but unfortunately CSS can't traverse (to input)
and get back to parent (label), so "for" facility and id must be used.

Change-Id: I27ef75a95889c37224aa7da6b0fbf8e2ad57ba65
Bug: https://github.com/mozilla-iot/gateway/issues/1148
Forwarded: https://github.com/mozilla-iot/gateway/pull/1249
Origin: https://github.com/tizenteam/gateway
Signed-off-by: Philippe Coval <p.coval@samsung.com>
---
 static/js/components/base-component.js   |  2 ++
 static/js/components/property/boolean.js | 23 +++++++++++-----------
 static/js/components/property/switch.js  | 25 ++++++++++++------------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/static/js/components/base-component.js b/static/js/components/base-component.js
index 5cc352e62..40727353b 100644
--- a/static/js/components/base-component.js
+++ b/static/js/components/base-component.js
@@ -23,6 +23,7 @@ class BaseComponent extends HTMLElement {
     }
 
     this.shadowRoot.appendChild(templateClone);
+    BaseComponent.count++;
   }
 
   connectedCallback() {
@@ -44,4 +45,5 @@ class BaseComponent extends HTMLElement {
   }
 }
 
+BaseComponent.count = 0;
 module.exports = BaseComponent;
diff --git a/static/js/components/property/boolean.js b/static/js/components/property/boolean.js
index 032c9fce3..deede3b5c 100644
--- a/static/js/components/property/boolean.js
+++ b/static/js/components/property/boolean.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class BooleanProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -73,23 +75,20 @@ template.innerHTML = `
   <div id="container" class="webthing-boolean-property-container">
     <div id="contents" class="webthing-boolean-property-contents">
       <form id="form" class="webthing-boolean-property-form">
-        <input type="checkbox" id="checkbox"
-          class="webthing-boolean-property-checkbox">
-        <label id="label" for="checkbox"
-          class="webthing-boolean-property-label">
+         <input type="checkbox" id="checkbox-${BaseComponent.count}"
+            class="webthing-boolean-property-checkbox"/>
+          <label class="webthing-boolean-property-label" for='checkbox-${BaseComponent.count}'>
         </label>
       </form>
     </div>
   </div>
   <div id="name" class="webthing-boolean-property-name"></div>
 `;
-
-class BooleanProperty extends BaseComponent {
-  constructor() {
     super(template);
-
-    this._input = this.shadowRoot.querySelector('#checkbox');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input =
+      this.shadowRoot.querySelector('.webthing-boolean-property-checkbox');
+    this._name =
+      this.shadowRoot.querySelector('.webthing-boolean-property-name');
 
     this._onClick = this.__onClick.bind(this);
     this._onKeyUp = this.__onKeyUp.bind(this);
diff --git a/static/js/components/property/switch.js b/static/js/components/property/switch.js
index 40548d028..0f4c8b36b 100644
--- a/static/js/components/property/switch.js
+++ b/static/js/components/property/switch.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class SwitchProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -62,7 +64,7 @@ template.innerHTML = `
       transition: 0.1s;
     }
 
-    .webthing-switch-property-switch:checked + #slider::after {
+      .webthing-switch-property-switch:checked + .webthing-switch-property-slider::after {
       transform: translate(3.65rem, 0.35rem);
     }
 
@@ -83,9 +85,9 @@ template.innerHTML = `
   <div id="container" class="webthing-switch-property-container">
     <div id="contents" class="webthing-switch-property-contents">
       <form>
-        <input type="checkbox" id="switch"
+          <input type="checkbox" id="switch-${BaseComponent.count}"
           class="webthing-switch-property-switch">
-        <label id="slider" for="switch" class="webthing-switch-property-slider">
+          <label id="slider-${BaseComponent.count}" for="switch-${BaseComponent.count}" class="webthing-switch-property-slider">
         </label>
       </form>
       <div id="label" class="webthing-switch-property-label"></div>
@@ -93,15 +95,14 @@ template.innerHTML = `
   </div>
   <div id="name" class="webthing-switch-property-name"></div>
 `;
-
-class SwitchProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#switch');
-    this._name = this.shadowRoot.querySelector('#name');
-    this._label = this.shadowRoot.querySelector('#label');
-
+    this._input =
+      this.shadowRoot.querySelector('.webthing-switch-property-switch');
+    this._name =
+      this.shadowRoot.querySelector('.webthing-switch-property-name');
+    this._label =
+      this.shadowRoot.querySelector('.webthing-switch-property-label');
     this._onClick = this.__onClick.bind(this);
     this._onKeyUp = this.__onKeyUp.bind(this);
   }