ui: Allow multiple same properties 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 will be "redirected"
to 1st switch only, this is not desired.

Change-Id: I27ef75a95889c37224aa7da6b0fbf8e2ad57ba65
Bug: WebThingsIO#1148
Origin: https://github.com/tizenteam/gateway
Signed-off-by: Philippe Coval <p.coval@samsung.com>

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;

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);

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');