Toggle-Buttons for Component Remote Control (#677) (#778)

* Toggle-Buttons for Component Remote Control (#677)

* Update remote.js

* Handle Component Updates individually

* Avoid unnecessary updates

Co-authored-by: brindosch <edeltraud70@gmx.de>

assets/webconfig/content/about.html

@@ -18,7 +18,7 @@
 	performTranslation();
 
 	var si = sysInfo.hyperion;
-	var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" };
+	var libs = { "Bootstrap 3": "http://getbootstrap.com/", "JQuery": "https://jquery.com/", "Bootstrap Colorpicker": "https://itsjavi.com/bootstrap-colorpicker/", "Bootstrap Toggle": "https://www.bootstraptoggle.com/", "JSON-Editor": "http://jeremydorn.com/json-editor/", "jQuery.i18n": "https://github.com/wikimedia/jquery.i18n", "metisMenu": "http://mm.onokumus.com/index.html", "download.js": "http://danml.com/download.html", "gijgo": "http://gijgo.com/" };
 	var libh = "";
 	var lang = [];
 	var dcount = 0;

assets/webconfig/css/bootstrap-toggle.min.css

@@ -0,0 +1,28 @@
+/*! ========================================================================
+ * Bootstrap Toggle: bootstrap-toggle.css v2.2.0
+ * http://www.bootstraptoggle.com
+ * ========================================================================
+ * Copyright 2014 Min Hur, The New York Times Company
+ * Licensed under MIT
+ * ======================================================================== */
+.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px}
+.toggle{position:relative;overflow:hidden}
+.toggle input[type=checkbox]{display:none}
+.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;-webkit-transition:left .35s;-moz-user-select:none;-webkit-user-select:none}
+.toggle.off .toggle-group{left:-100%}
+.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
+.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
+.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
+.toggle.btn{min-width:59px;min-height:34px}
+.toggle-on.btn{padding-right:24px}
+.toggle-off.btn{padding-left:24px}
+.toggle.btn-lg{min-width:79px;min-height:45px}
+.toggle-on.btn-lg{padding-right:31px}
+.toggle-off.btn-lg{padding-left:31px}
+.toggle-handle.btn-lg{width:40px}
+.toggle.btn-sm{min-width:50px;min-height:30px}
+.toggle-on.btn-sm{padding-right:20px}
+.toggle-off.btn-sm{padding-left:20px}
+.toggle.btn-xs{min-width:35px;min-height:22px}
+.toggle-on.btn-xs{padding-right:12px}
+.toggle-off.btn-xs{padding-left:12px}

assets/webconfig/css/hyperion.css

@@ -12,7 +12,6 @@ body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:15
 body{
     overflow-y: scroll;
 }
-.btn{margin: 2px 0;}
 /*
 #page-wrapper a[target=_blank]::after {
     content:"\f08e";
@@ -217,6 +216,8 @@ table label{margin:0}
 }
 
 /*simple ripple effect for li a and btn*/
+/* Breaks Bootstrap toggle; position: relative */
+/*
 .btn, li a{
   position: relative;
   overflow: hidden;
@@ -264,6 +265,7 @@ li a:active:after {
   opacity: .2;
   transition: 0s;
 }
+*/
 
 /*Bootstrap callouts*/
 .bs-callout {

assets/webconfig/index.html

@@ -36,7 +36,6 @@
 
 	<!-- Colorpicker -->
 	<script src="js/lib/bootstrap-colorpicker.min.js"></script>
-	<link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
 
 	<!-- BS Notfiy -->
 	<script src="js/lib/bootstrap-notify.min.js"></script>
@@ -54,6 +53,11 @@
 
 	<!-- Bootstrap Core CSS -->
 	<link href="css/bootstrap.min.css" rel="stylesheet">
+  <link href="css/bootstrap-colorpicker.min.css" rel="stylesheet">
+
+	<!-- BSToggle -->
+  <script src="js/lib/bootstrap-toggle.min.js"></script>
+  <link href="css/bootstrap-toggle.min.css" rel="stylesheet">
 
 	<!-- MetisMenu CSS -->
 	<link href="css/metisMenu.css" rel="stylesheet">

assets/webconfig/js/content_index.js

@@ -221,7 +221,7 @@ $(document).ready(function () {
 			}
 		});
 		// notify the update
-		$(window.hyperion).trigger("components-updated");
+		$(window.hyperion).trigger("components-updated", event.response.data);
 	});
 
 	$(window.hyperion).on("cmd-instance-update", function (event) {

assets/webconfig/js/content_remote.js

@@ -203,7 +203,7 @@ $(document).ready(function() {
 		}
 	}
 
-	function updateComponents()
+	function initComponents()
 	{
 		var components = window.comps;
 		var hyperionEnabled = true;
@@ -214,32 +214,77 @@ $(document).ready(function() {
 			}
 		});
 
-		// create buttons
+		for (const comp of components)
-		$('#componentsbutton').html("");
-		for (var idx=0; idx<components.length;idx++)
 		{
-			if(components[idx].name == "ALL")
+			if(comp.name === "ALL")
 				continue;
 
-			var enable_style = (components[idx].enabled? "btn-success" : "btn-danger");
+			const enable_style = (comp.enabled? "checked" : "");
-			var enable_icon  = (components[idx].enabled? "fa-play" : "fa-stop");
+			const comp_btn_id  = "comp_btn_"+comp.name;
-			var comp_name    = components[idx].name;
-			var comp_btn_id  = "comp_btn_"+comp_name;
-			var comp_goff    = hyperionEnabled? "enabled" : "disabled";
 
-			// create btn if not there
+			if ($("#"+comp_btn_id).length === 0)
-			if ($("#"+comp_btn_id).length == 0)
 			{
-				var d='<span style="display:block;margin:3px"><button type="button" '+comp_goff+' id="'+comp_btn_id+'" class="btn '+enable_style
+				var d='<span style="display:block;margin:3px">'
-					+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)
+						+'<input id="'+comp_btn_id+'"'+enable_style+' type="checkbox"'
-					+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+$.i18n('general_comp_'+components[idx].name)+'</span>';
+						+'data-toggle="toggle" data-onstyle="success" data-on="'+$.i18n('general_btn_on')+'" data-off="'+$.i18n('general_btn_off')+'">'
+						+'&nbsp;&nbsp;&nbsp;<label>'+$.i18n('general_comp_'+comp.name)+'</label>'
+						+'</span>';
+
 				$('#componentsbutton').append(d);
+				$(`#${comp_btn_id}`).bootstrapToggle();
+				$(`#${comp_btn_id}`).bootstrapToggle(hyperionEnabled ? "enable" : "disable")
+				$(`#${comp_btn_id}`).change(e => {
+				  requestSetComponentState(e.currentTarget.id.split('_').pop(), e.currentTarget.checked)
+				  //console.log(e.currentTarget.checked)
+				  });
 			}
-			else // already create, update state
+		}
+	}
+
+	function updateComponent( component )
 	{
-				setClassByBool( $('#'+comp_btn_id)        , components[idx].enabled, "btn-danger", "btn-success" );
+		if (component.name == "ALL")
-				setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop"    , "fa-play" );
+		{
-				$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')').attr(comp_goff);
+			var components = window.comps;
+
+			hyperionEnabled = component.enabled
+			for (const comp of components)
+			{
+
+				if(comp.name === "ALL")
+				continue;
+
+				const comp_btn_id  = "comp_btn_"+comp.name;
+
+				if ( !hyperionEnabled )
+				{
+					$(`#${comp_btn_id}`).bootstrapToggle('off');
+					$(`#${comp_btn_id}`).bootstrapToggle("disable");
+				}
+				else
+				{
+					$(`#${comp_btn_id}`).bootstrapToggle("enable");
+					if ( comp.enabled !== $(`#${comp_btn_id}`).prop("checked") )
+					{
+						$(`#${comp_btn_id}`).bootstrapToggle().prop('checked', comp.enabled).change();
+					}
+				}
+			}
+		}
+		else
+		{
+			const comp_btn_id  = "comp_btn_"+component.name;
+
+			//console.log ("updateComponent: ", component.name, "Current Checked: ", $(`#${comp_btn_id}`).prop("checked"), "New Checked: ", component.enabled,  );
+			
+			// In case Buttons were disabled before, status may be different to component status
+			if ( component.enabled != $(`#${comp_btn_id}`).prop("checked") )
+			{
+				// console.log ("Update status to Checked = ", component.enabled);
+				if ( component.enabled )
+					$(`#${comp_btn_id}`).bootstrapToggle("on");
+				else
+					$(`#${comp_btn_id}`).bootstrapToggle("off");
 			}
 		}
 	}
@@ -345,14 +390,18 @@ $(document).ready(function() {
 	});
 
 	//force first update
-	updateComponents();
+	initComponents();
 	updateInputSelect();
 	updateLedMapping();
 	updateVideoMode();
 	updateEffectlist();
 
 	// interval updates
-	$(window.hyperion).on("components-updated",updateComponents);
+
+  	$(window.hyperion).on('components-updated', function(e, comp){
+		//console.log ("components-updated", e, comp);
+		updateComponent (comp);
+	});
 
 	$(window.hyperion).on("cmd-priorities-update", function(event){
 		window.serverInfo.priorities = event.response.data.priorities;

assets/webconfig/js/lib/bootstrap-toggle.min.js

@@ -0,0 +1,9 @@
+/*! ========================================================================
+ * Bootstrap Toggle: bootstrap-toggle.js v2.2.0
+ * http://www.bootstraptoggle.com
+ * ========================================================================
+ * Copyright 2014 Min Hur, The New York Times Company
+ * Licensed under MIT
+ * ======================================================================== */
++function(a){"use strict";function b(b){return this.each(function(){var d=a(this),e=d.data("bs.toggle"),f="object"==typeof b&&b;e||d.data("bs.toggle",e=new c(this,f)),"string"==typeof b&&e[b]&&e[b]()})}var c=function(b,c){this.$element=a(b),this.options=a.extend({},this.defaults(),c),this.render()};c.VERSION="2.2.0",c.DEFAULTS={on:"On",off:"Off",onstyle:"primary",offstyle:"default",size:"normal",style:"",width:null,height:null},c.prototype.defaults=function(){return{on:this.$element.attr("data-on")||c.DEFAULTS.on,off:this.$element.attr("data-off")||c.DEFAULTS.off,onstyle:this.$element.attr("data-onstyle")||c.DEFAULTS.onstyle,offstyle:this.$element.attr("data-offstyle")||c.DEFAULTS.offstyle,size:this.$element.attr("data-size")||c.DEFAULTS.size,style:this.$element.attr("data-style")||c.DEFAULTS.style,width:this.$element.attr("data-width")||c.DEFAULTS.width,height:this.$element.attr("data-height")||c.DEFAULTS.height}},c.prototype.render=function(){this._onstyle="btn-"+this.options.onstyle,this._offstyle="btn-"+this.options.offstyle;var b="large"===this.options.size?"btn-lg":"small"===this.options.size?"btn-sm":"mini"===this.options.size?"btn-xs":"",c=a('<label class="btn">').html(this.options.on).addClass(this._onstyle+" "+b),d=a('<label class="btn">').html(this.options.off).addClass(this._offstyle+" "+b+" active"),e=a('<span class="toggle-handle btn btn-default">').addClass(b),f=a('<div class="toggle-group">').append(c,d,e),g=a('<div class="toggle btn" data-toggle="toggle">').addClass(this.$element.prop("checked")?this._onstyle:this._offstyle+" off").addClass(b).addClass(this.options.style);this.$element.wrap(g),a.extend(this,{$toggle:this.$element.parent(),$toggleOn:c,$toggleOff:d,$toggleGroup:f}),this.$toggle.append(f);var h=this.options.width||Math.max(c.outerWidth(),d.outerWidth())+e.outerWidth()/2,i=this.options.height||Math.max(c.outerHeight(),d.outerHeight());c.addClass("toggle-on"),d.addClass("toggle-off"),this.$toggle.css({width:h,height:i}),this.options.height&&(c.css("line-height",c.height()+"px"),d.css("line-height",d.height()+"px")),this.update(!0),this.trigger(!0)},c.prototype.toggle=function(){this.$element.prop("checked")?this.off():this.on()},c.prototype.on=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._offstyle+" off").addClass(this._onstyle),this.$element.prop("checked",!0),void(a||this.trigger()))},c.prototype.off=function(a){return this.$element.prop("disabled")?!1:(this.$toggle.removeClass(this._onstyle).addClass(this._offstyle+" off"),this.$element.prop("checked",!1),void(a||this.trigger()))},c.prototype.enable=function(){this.$toggle.removeAttr("disabled"),this.$element.prop("disabled",!1)},c.prototype.disable=function(){this.$toggle.attr("disabled","disabled"),this.$element.prop("disabled",!0)},c.prototype.update=function(a){this.$element.prop("disabled")?this.disable():this.enable(),this.$element.prop("checked")?this.on(a):this.off(a)},c.prototype.trigger=function(b){this.$element.off("change.bs.toggle"),b||this.$element.change(),this.$element.on("change.bs.toggle",a.proxy(function(){this.update()},this))},c.prototype.destroy=function(){this.$element.off("change.bs.toggle"),this.$toggleGroup.remove(),this.$element.removeData("bs.toggle"),this.$element.unwrap()};var d=a.fn.bootstrapToggle;a.fn.bootstrapToggle=b,a.fn.bootstrapToggle.Constructor=c,a.fn.toggle.noConflict=function(){return a.fn.bootstrapToggle=d,this},a(function(){a("input[type=checkbox][data-toggle^=toggle]").bootstrapToggle()}),a(document).on("click.bs.toggle","div[data-toggle^=toggle]",function(b){var c=a(this).find("input[type=checkbox]");c.bootstrapToggle("toggle"),b.preventDefault()})}(jQuery);
+//# sourceMappingURL=bootstrap-toggle.min.js.map