ui: Select by class instead of (multiple) id (#1370)

* ui: Select by class instead of (multiple) id In case of multiple property of same types, UI events were forwarded to 1st instance of widget. This change is a follow up of the switch change: Origin: #1370 Bug: #1148 Relate-to: #1249 Change-Id: I2018092168af14eb8f6f1e9e230e04a432490045 Signed-off-by: Philippe Coval <p.coval@samsung.com> * ui: Prevent duplicated id This change has no real effect, only for making code more uniform, Note that slider id has been renamed to slider-level to remove ambiguity with slider, and counter suffix adjusted. Forwarded: #1370 Change-Id: I64fe6a78a8ae9d300bab58561a7b0eec7bfb09db Signed-off-by: Philippe Coval <p.coval@samsung.com>
WebThingsIO · Sep 25, 2018 · 0d0fc3c · 0d0fc3c
1 parent ec294ef
commit 0d0fc3c
Show file tree

Hide file tree

Showing 14 changed files with 162 additions and 137 deletions.
diff --git a/src/test/browser/page-object/thing-detail-page.js b/src/test/browser/page-object/thing-detail-page.js
@@ -102,7 +102,7 @@ class BrightnessPropertySection extends InputPropertySection {
 class LevelPropertySection extends InputPropertySection {
   constructor(browser, rootElement) {
     super(browser, rootElement);
-    this.defineElement('slider', '#slider');
+    this.defineElement('slider', '#slider-level-6');
   }
 
   async setValue(value) {

diff --git a/static/js/components/capability/label.js b/static/js/components/capability/label.js
@@ -54,8 +54,10 @@ class LabelCapability extends BaseComponent {
   constructor() {
     super(template);
 
-    this._value = this.shadowRoot.querySelector('#value');
-    this._unit = this.shadowRoot.querySelector('#unit');
+    this._value = this.shadowRoot.querySelector(
+      '.webthing-label-capability-value');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-label-capability-unit');
     this._precision = 0;
     this._level = 0;
   }

diff --git a/static/js/components/capability/multi-level-switch.js b/static/js/components/capability/multi-level-switch.js
@@ -79,10 +79,12 @@ const ON_BLANK = 'white';
 class MultiLevelSwitchCapability extends BaseComponent {
   constructor() {
     super(template);
-
-    this._container = this.shadowRoot.querySelector('#container');
-    this._bar = this.shadowRoot.querySelector('#bar');
-    this._label = this.shadowRoot.querySelector('#label');
+    this._container = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-container');
+    this._bar = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-bar');
+    this._label = this.shadowRoot.querySelector(
+      '.webthing-multi-level-switch-capability-label');
     this._on = false;
     this._level = 0;
     this._onClick = this.__onClick.bind(this);

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,19 @@ 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(
+      '.webthing-action-button');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-action-name');
     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
@@ -72,17 +72,17 @@ class BooleanProperty extends BaseComponent {
       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">
+  <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 class="webthing-boolean-property-label" for='checkbox-${BaseComponent.count}'>
         </label>
       </form>
     </div>
   </div>
-  <div id="name" class="webthing-boolean-property-name"></div>
+  <div id="name-${BaseComponent.count}" class="webthing-boolean-property-name"></div>
 `;
     super(template);
     this._input =

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,19 @@ 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(
+      '.webthing-color-property-color');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-color-property-name');
 
     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,22 @@ 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(
+      '.webthing-enum-property-select');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-enum-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-enum-property-name');
 
     this._type = 'string';
 

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,40 @@ 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">
-        <input type="range" id="slider" class="webthing-level-property-slider">
+      <form id="form-${BaseComponent.count}" class="webthing-level-property-form">
+        <input type="number" id="number-${BaseComponent.count}" class="webthing-level-property-number">
+        <input type="range" id="slider-level-${BaseComponent.count}" 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(
+      '.webthing-level-property-text');
+    this._barContainer = this.shadowRoot.querySelector(
+      '.webthing-level-property-bar-container');
+    this._bar = this.shadowRoot.querySelector(
+      '.webthing-level-property-bar');
+    this._form = this.shadowRoot.querySelector(
+      '.webthing-level-property-form');
+    this._number = this.shadowRoot.querySelector(
+      '.webthing-level-property-number');
+    this._slider = this.shadowRoot.querySelector(
+      '.webthing-level-property-slider');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-level-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-level-property-name');
 
     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,27 @@ 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(
+      '.webthing-number-property-form');
+    this._input = this.shadowRoot.querySelector(
+      '.webthing-number-property-input');
+    this._unit = this.shadowRoot.querySelector(
+      '.webthing-number-property-unit');
+    this._name = this.shadowRoot.querySelector(
+      '.webthing-number-property-name');
 
     this._onClick = this.__onClick.bind(this);
     this._onSubmit = this.__onSubmit.bind(this);

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