From 78ebf0e782b5ea1cf35391b1e3a3dc1b59e681b0 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: Allow multiple same properties type in single thing

Previously item ids were duplicated,
the observed consequence is that any click on widgets
is seen as click on 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.

This change fix it for boolean related widget,
and once solution merged,
it can be easly replicated to others WoT types (level, text etc).

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 | 16 +++++++++-------
 static/js/components/property/switch.js  | 16 +++++++++-------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/static/js/components/base-component.js b/static/js/components/base-component.js
index 2096a80f85..4d5fa65e8a 100644
--- a/static/js/components/base-component.js
+++ b/static/js/components/base-component.js
@@ -12,6 +12,7 @@
 class BaseComponent extends HTMLElement {
   constructor(template) {
     super();
+    const idSuffix = ++(BaseComponent.count);
     this.attachShadow({mode: 'open'});
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
@@ -35,4 +36,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 032c9fce38..79030102e1 100644
--- a/static/js/components/property/boolean.js
+++ b/static/js/components/property/boolean.js
@@ -11,8 +11,12 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class BooleanProperty extends BaseComponent {
+  constructor() {
+    const element = 'checkbox';
+    const id=`${element}${BaseComponent.count}`;
+    var template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -73,9 +77,9 @@ 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"
+        <input type="checkbox" id="checkbox${BaseComponent.count}"
           class="webthing-boolean-property-checkbox">
-        <label id="label" for="checkbox"
+        <label id="label" for="checkbox${BaseComponent.count}"
           class="webthing-boolean-property-label">
         </label>
       </form>
@@ -84,11 +88,9 @@ template.innerHTML = `
   <div id="name" class="webthing-boolean-property-name"></div>
 `;
 
-class BooleanProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#checkbox');
+    this._input = this.shadowRoot.querySelector(`#${id}`);
     this._name = this.shadowRoot.querySelector('#name');
 
     this._onClick = this.__onClick.bind(this);
diff --git a/static/js/components/property/switch.js b/static/js/components/property/switch.js
index 40548d0286..6506065c54 100644
--- a/static/js/components/property/switch.js
+++ b/static/js/components/property/switch.js
@@ -11,8 +11,12 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class SwitchProperty extends BaseComponent {
+  constructor() {
+    const element = 'switch';
+    const id=`${element}${BaseComponent.count}`;
+    var template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -83,9 +87,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" for="switch${BaseComponent.count}" class="webthing-switch-property-slider">
         </label>
       </form>
       <div id="label" class="webthing-switch-property-label"></div>
@@ -94,11 +98,9 @@ template.innerHTML = `
   <div id="name" class="webthing-switch-property-name"></div>
 `;
 
-class SwitchProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#switch');
+    this._input = this.shadowRoot.querySelector(`#${id}`);
     this._name = this.shadowRoot.querySelector('#name');
     this._label = this.shadowRoot.querySelector('#label');