ui: Allow multiple same type properties in thing

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. It was tested for boolean, number related components. Slider not fully updated, to keep passing tests, more refactoring to come in that part (grep '#slider') Change-Id: I27ef75a95889c37224aa7da6b0fbf8e2ad57ba65 Bug: WebThingsIO#1148 Forwarded: WebThingsIO#1249 Origin: https://github.com/tizenteam/gateway Signed-off-by: Philippe Coval <p.coval@samsung.com>
TizenTeam · Aug 4, 2018 · e6af77e · e6af77e
1 parent c8a383f
commit e6af77e
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 129 deletions.
diff --git 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();
+    this.idSuffix = `-${BaseComponent.count++}`;
     this.attachShadow({mode: 'open'});
     const templateClone = template.content.cloneNode(true);
     // Detect whether ShadowRoot has been polyfilled on this browser
@@ -44,4 +45,5 @@ class BaseComponent extends HTMLElement {
   }
 }
 
+BaseComponent.count = 0;
 module.exports = BaseComponent;
diff --git a/static/js/components/property/action.js b/static/js/components/property/action.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class Action extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -77,20 +79,18 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-action-container">
-    <div id="contents" class="webthing-action-contents">
-      <button id="button" type="button" class="webthing-action-button"></button>
+  <div id="container-${BaseComponent.count}" class="webthing-action-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-action-contents">
+      <button id="button-${BaseComponent.count}" type="button" class="webthing-action-button"></button>
     </div>
   </div>
-  <div id="name" class="webthing-action-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-action-name"></div>
 `;
 
-class Action extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._button = this.shadowRoot.querySelector('#button');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._button = this.shadowRoot.querySelector(`#button${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
     this._href = null;
 
     this._onClick = this.__onClick.bind(this);

diff --git 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;
@@ -70,26 +72,24 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <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"
+  <div id="container-${BaseComponent.count}" class="webthing-boolean-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-boolean-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-boolean-property-form">
+        <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>
     </div>
   </div>
-  <div id="name" class="webthing-boolean-property-name"></div>
+  <div id="name-${BaseComponent.count}" 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(`#checkbox${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onClick = this.__onClick.bind(this);
     this._onKeyUp = this.__onKeyUp.bind(this);

diff --git a/static/js/components/property/color.js b/static/js/components/property/color.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class ColorProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -46,20 +48,18 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-color-property-container">
-    <div id="contents" class="webthing-color-property-contents">
-      <input type="color" id="color" class="webthing-color-property-color">
+  <div id="container-${BaseComponent.count}" class="webthing-color-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-color-property-contents">
+      <input type="color" id="color-${BaseComponent.count}" class="webthing-color-property-color">
     </div>
   </div>
-  <div id="name" class="webthing-color-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-color-property-name"></div>
 `;
 
-class ColorProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#color');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#color${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
   }

diff --git a/static/js/components/property/enum.js b/static/js/components/property/enum.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class EnumProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -64,22 +66,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-enum-property-container">
-    <div id="contents" class="webthing-enum-property-contents">
-      <select id="select" class="webthing-enum-property-select"></select>
-      <div id="unit" class="webthing-enum-property-unit"></div>
+  <div id="container-${BaseComponent.count}" class="webthing-enum-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-enum-property-contents">
+      <select id="select-${BaseComponent.count}" class="webthing-enum-property-select"></select>
+      <div id="unit-${BaseComponent.count}" class="webthing-enum-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-enum-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-enum-property-name"></div>
 `;
 
-class EnumProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._select = this.shadowRoot.querySelector('#select');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._select = this.shadowRoot.querySelector(`#select${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._type = 'string';
 

diff --git a/static/js/components/property/label.js b/static/js/components/property/label.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class LabelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -51,22 +53,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-label-property-container">
-    <div id="contents" class="webthing-label-property-contents">
-      <span id="value" class="webthing-label-property-value">
-      </span><span id="unit" class="webthing-label-property-unit"></span>
+  <div id="container-${BaseComponent.count}" class="webthing-label-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-label-property-contents">
+      <span id="value-${BaseComponent.count}" class="webthing-label-property-value">
+      </span><span id="unit-${BaseComponent.count}" class="webthing-label-property-unit"></span>
     </div>
   </div>
-  <div id="name" class="webthing-label-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-label-property-name"></div>
 `;
 
-class LabelProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._name = this.shadowRoot.querySelector('#name');
-    this._value = this.shadowRoot.querySelector('#value');
-    this._unit = this.shadowRoot.querySelector('#unit');
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
+    this._value = this.shadowRoot.querySelector(`#value${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
     this._precision = 0;
   }
 

diff --git a/static/js/components/property/level.js b/static/js/components/property/level.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class LevelProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -93,35 +95,32 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-level-property-container">
-    <div id="contents" class="webthing-level-property-contents">
-      <div id="text" class="webthing-level-property-text hidden"></div>
-      <div id="bar-container"
+  <div id="container-${BaseComponent.count}" class="webthing-level-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-level-property-contents">
+      <div id="text-${BaseComponent.count}" class="webthing-level-property-text hidden"></div>
+      <div id="bar-container-${BaseComponent.count}"
         class="webthing-level-property-bar-container hidden">
-        <span id="bar" class="webthing-level-property-bar"></span>
+        <span id="bar-${BaseComponent.count}" class="webthing-level-property-bar"></span>
       </div>
-      <form id="form" class="webthing-level-property-form">
-        <input type="number" id="number" class="webthing-level-property-number">
+      <form id="form-${BaseComponent.count}" class="webthing-level-property-form-${BaseComponent.count}">
+        <input type="number" id="number-${BaseComponent.count}" class="webthing-level-property-number">
         <input type="range" id="slider" class="webthing-level-property-slider">
       </form>
-      <div id="unit" class="webthing-level-property-unit"></div>
+      <div id="unit-${BaseComponent.count}" class="webthing-level-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-level-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-level-property-name"></div>
 `;
-
-class LevelProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._text = this.shadowRoot.querySelector('#text');
-    this._barContainer = this.shadowRoot.querySelector('#bar-container');
-    this._bar = this.shadowRoot.querySelector('#bar');
-    this._form = this.shadowRoot.querySelector('#form');
-    this._number = this.shadowRoot.querySelector('#number');
-    this._slider = this.shadowRoot.querySelector('#slider');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._text = this.shadowRoot.querySelector(`#text${this.idSuffix}`);
+    this._barContainer = this.shadowRoot.querySelector(`#bar-container${this.idSuffix}`);
+    this._bar = this.shadowRoot.querySelector(`#bar${this.idSuffix}`);
+    this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+    this._number = this.shadowRoot.querySelector(`#number${this.idSuffix}`);
+    this._slider = this.shadowRoot.querySelector(`#slider`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
     this._onClick = this.__onClick.bind(this);

diff --git a/static/js/components/property/number.js b/static/js/components/property/number.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class NumberProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -72,26 +74,23 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-number-property-container">
-    <div id="contents" class="webthing-number-property-contents">
-      <form id="form" class="webthing-number-property-form">
-        <input type="number" id="input"
+  <div id="container-${BaseComponent.count}" class="webthing-number-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-number-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-number-property-form">
+        <input type="number" id="input-${BaseComponent.count}"
           class="webthing-number-property-input hide-spinner">
       </form>
-      <div id="unit" class="webthing-number-property-unit"></div>
+      <div id="unit-${BaseComponent.count}" class="webthing-number-property-unit"></div>
     </div>
   </div>
-  <div id="name" class="webthing-number-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-number-property-name"></div>
 `;
-
-class NumberProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._form = this.shadowRoot.querySelector('#form');
-    this._input = this.shadowRoot.querySelector('#input');
-    this._unit = this.shadowRoot.querySelector('#unit');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._form = this.shadowRoot.querySelector(`#form${this.idSuffix}`);
+    this._input = this.shadowRoot.querySelector(`#input${this.idSuffix}`);
+    this._unit = this.shadowRoot.querySelector(`#unit${this.idSuffix}`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onClick = this.__onClick.bind(this);
     this._onSubmit = this.__onSubmit.bind(this);

diff --git a/static/js/components/property/slider.js b/static/js/components/property/slider.js
@@ -11,8 +11,10 @@
 
 const BaseComponent = require('../base-component');
 
-const template = document.createElement('template');
-template.innerHTML = `
+class SliderProperty extends BaseComponent {
+  constructor() {
+    const template = document.createElement('template');
+    template.innerHTML = `
   <style>
     :host {
       display: inline-block;
@@ -57,22 +59,20 @@ template.innerHTML = `
       display: inline-block;
     }
   </style>
-  <div id="container" class="webthing-slider-property-container">
-    <div id="contents" class="webthing-slider-property-contents">
-      <form id="form" class="webthing-slider-property-form">
+  <div id="container-${BaseComponent.count}" class="webthing-slider-property-container">
+    <div id="contents-${BaseComponent.count}" class="webthing-slider-property-contents">
+      <form id="form-${BaseComponent.count}" class="webthing-slider-property-form">
         <input type="range" id="slider" class="webthing-slider-property-slider">
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-slider-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-slider-property-name"></div>
 `;
 
-class SliderProperty extends BaseComponent {
-  constructor() {
     super(template);
 
-    this._input = this.shadowRoot.querySelector('#slider');
-    this._name = this.shadowRoot.querySelector('#name');
+    this._input = this.shadowRoot.querySelector(`#slider`);
+    this._name = this.shadowRoot.querySelector(`#name${this.idSuffix}`);
 
     this._onChange = this.__onChange.bind(this);
   }