Basic UI: display value for switch element when requested (#3343)

handle label and value color Signed-off-by: Laurent Garnier <lg.hc@free.fr>
eclipse-archived · May 4, 2017 · 55fd9c9 · 55fd9c9
1 parent cbb3c63
commit 55fd9c9
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 10 deletions.
diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/switch.html b/extensions/ui/org.eclipse.smarthome.ui.basic/snippets/switch.html
@@ -2,13 +2,17 @@
 	<span class="mdl-form__icon">
 		<img data-icon="%category%" src="../icon/%category%?state=%state%&format=%icon_type%" />
 	</span>
-	<div class="mdl-form__label">
+	<span %labelstyle% class="mdl-form__label">
 		%label%
-	</div>
+	</span>
+	<span %valuestyle% class="mdl-form__value mdl-form__value--switch">
+		%value%
+	</span>
 	<label
 		class="mdl-form__control mdl-switch mdl-js-switch mdl-js-ripple-effect"
 		data-control-type="checkbox"
 		data-item="%item%"
+		data-has-value="%has_value%"
 		data-widget-id="%widget_id%"
 		for="oh-checkbox-%item%"
 	>

diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.js b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.js
@@ -1192,21 +1192,32 @@
 				item: _t.item,
 				value: _t.input.checked ? "ON" : "OFF"
 			}));
-			_t.suppressUpdate();
 		});
 
+		_t.hasValue = _t.parentNode.getAttribute("data-has-value") === "true";
+		_t.valueNode = _t.parentNode.parentNode.querySelector(o.formValue);
+
 		_t.setValuePrivate = function(value, itemState) {
 			var
 				val = itemState === "ON";
 
-			_t.input.checked = val;
+			if (_t.input.checked !== val) {
+				_t.input.checked = val;
+				if (val) {
+					_t.parentNode.MaterialSwitch.on();
+				} else {
+					_t.parentNode.MaterialSwitch.off();
+				}
+			}
 
-			if (val) {
-				_t.parentNode.MaterialSwitch.on();
-			} else {
-				_t.parentNode.MaterialSwitch.off();
+			if (_t.hasValue) {
+				_t.valueNode.innerHTML = value;
 			}
 		};
+
+		_t.setValueColor = function(color) {
+			_t.valueNode.style.color = color;
+		};
 	}
 
 	/* class ControlSlider extends Control */

diff --git a/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.less b/extensions/ui/org.eclipse.smarthome.ui.basic/web-src/smarthome.less
@@ -368,6 +368,9 @@
 		&--text-link {
 			font-weight: normal;
 		}
+		&--switch {
+			padding: 0 10px 0 10px;
+		}
 	}
 	&__text {
 		overflow: hidden;