implement hyperion restart via webui (#242)

* first try

* implement hyperion restart. core function is good, but needs a beeter structuring- something for next refactoring session ;-)

* several fixes (including osx)
merge with upstream
some refactoring

* add some eye candy to webui

assets/webconfig/content/generalconf.html

@@ -8,7 +8,7 @@
 			<hr>
 			<div class="col-lg-12">
 				<div id='editor_container'></div>
-				<button id='btn_submit'>Submit (console.log)</button>
+				<button id='btn_submit' class="btn btn-danger">Submit - currently will destroy your config!</button>
 			</div>
 		</div>
 	</div>

assets/webconfig/css/hyperion.css

@@ -61,3 +61,7 @@ table.borderless td,table.borderless th{border: none !important;}
 	top: 0;
 	z-index:99999;
 }
+
+#page-content {
+	padding-bottom:50px;
+}

assets/webconfig/index.html

@@ -36,6 +36,11 @@
 	<script src="js/lib/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
 	<script src="js/lib/js.cookie.js"></script>
 
+	<!-- jquery ui -->
+	<link href="css/jquery-ui/jquery-ui.min.css" rel="stylesheet">
+	<link href="css/jquery-ui/jquery-ui.structure.min.css" rel="stylesheet">
+	<link href="css/jquery-ui/jquery-ui.theme.min.css" rel="stylesheet">
+	
 	<script type="text/javascript">
 		// Create language switcher instance
 		var lang = new Lang();
@@ -195,7 +200,7 @@
 			</ul>
 			<!-- /.navbar-top-left -->
 
-			<div class="navbar-default sidebar" role="navigation">
+			<div id="main-nav" class="navbar-default sidebar" role="navigation">
 				<div class="sidebar-nav navbar-collapse">
 					<ul class="nav" id="side-menu">
 						<li> <a class="active" id="load_dashboard"><i class="fa fa-dashboard fa-fw"></i><span lang="en" data-lang-token="main_menu_dashboard_token">Dashboard</span></a> </li>
@@ -225,10 +230,10 @@
 
 		<!-- Page Content -->
 		<div id="page-wrapper" style="padding-top:10px">
-			<div id="hyperion_restart_notify" class="alert alert-warning" style="display:none;padding:10px;margin:0">
+			<div id="hyperion_reload_notify" class="alert alert-warning" style="display:none;padding:10px;margin:0">
 			<div class="panel-danger" style="text-align:right">
 				<div style="float:left">Hyperion Configuration is modified. To make it active, restart Hyperion.</div>
-				<button id="btn_hyperion_restart" class="btn btn-danger">Restart Hyperion</button>
+				<button id="btn_hyperion_reload" class="btn btn-danger">Restart Hyperion</button>
 			</div>
 		</div>
 
@@ -264,6 +269,7 @@
 	<!-- Custom Theme JavaScript -->
 	<script src="/js/lib/sb-admin-2.js"></script>
 
+	<script src="/js/lib/jquery-ui.min.js"></script>
 	<script src="/js/content_index.js"></script>
 </body>
 

assets/webconfig/js/content_generalconf.js

@@ -50,19 +50,19 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 		schema: {
 			title:'',
 			properties: {
-				/*blackborderdetector,
+				blackborderdetector,
 				color,
 				effects,
 				forwarder,
 				initialEffect,
 				kodiVideoChecker,
-				smoothing,*/
-				logger//,
-				/*jsonServer,
+				smoothing,
+				logger,
+				jsonServer,
 				protoServer,
 				boblightServer,
 				udpListener,
-				webConfig*/
+				webConfig
 			}
 		}
 	});
@@ -74,10 +74,10 @@ $(hyperion).one("cmd-config-getschema", function(event) {
 	$('#editor_container h3').first().remove();
 	
 	//Called everytime a Input Field is changed = No need for save button
-	general_conf_editor.off().on('change',function() {
-		console.log(JSON.stringify(general_conf_editor.getValue()));
-		requestWriteConfig(general_conf_editor.getValue());
-	});
+// 	general_conf_editor.off().on('change',function() {
+// 		console.log(JSON.stringify(general_conf_editor.getValue()));
+// 		requestWriteConfig(general_conf_editor.getValue());
+// 	});
 
 	//Alternative Function with submit button to get Values
 	$('btn_submit').off().on('click',function() {

assets/webconfig/js/content_index.js

@@ -1,4 +1,6 @@
 $(document).ready( function() {
+	$("#main-nav").hide();
+	$("#page-content").hide();
 	$("#loading_overlay").addClass("overlay");
 	loadContentTo("#container_connection_lost","connection_lost");
 	initWebSocket();
@@ -22,9 +24,9 @@ $(document).ready( function() {
 		cleanCurrentVersion = currentVersion.replace(/\./g, '');
 
 		if (parsedServerInfoJSON.info.hyperion[0].config_modified)
-			$("#hyperion_restart_notify").fadeIn("fast");
+			$("#hyperion_reload_notify").fadeIn("fast");
 		else
-			$("#hyperion_restart_notify").fadeOut("fast");
+			$("#hyperion_reload_notify").fadeOut("fast");
 
 		// get active led device
 		var leddevice = parsedServerInfoJSON.info.ledDevices.active;
@@ -59,6 +61,9 @@ $(document).ready( function() {
 			}
 		});
 		$("#loading_overlay").removeClass("overlay");
+		$("#main-nav").show('slide', {direction: 'left'}, 1000);
+		$("#page-content").show('slide', {direction: 'down'}, 2000);
+
 	}); // end cmd-serverinfo
 
 	$(hyperion).one("cmd-config-getschema", function(event) {
@@ -75,6 +80,13 @@ $(document).ready( function() {
 		requestServerInfo();
 	});
 
+	$("#btn_hyperion_reload").on("click", function(){
+		$(hyperion).off();
+		requestServerConfigReload();
+		watchdog = 1;
+		$("#wrapper").fadeOut("slow");
+		cron();
+	});
 });
 
 $(function(){

assets/webconfig/js/content_kodi.js

@@ -0,0 +1 @@
+ 

assets/webconfig/js/content_leds.js

@@ -1,6 +1,21 @@
 
 var ledsCustomCfgInitialized = false;
 
+function get_hue_lights(){
+	$.ajax({
+		type: "GET",
+		url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
+		processData: false,
+		contentType: 'application/json',
+		success: function(r) {
+			for(var lightid in r){
+				//console.log(r[lightid].name);
+				$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
+			}
+		}
+	});
+}
+
 
 $(document).ready(function() {
 	// ------------------------------------------------------------------
@@ -157,7 +172,7 @@ $(document).ready(function() {
 		if (isCurrentDevice)
 		{
 			specificOptions_val = grabber_conf_editor.getEditor("root.specificOptions").getValue()
-			for(var key in grabber_conf_editor.getEditor("root.specificOptions").getValue()){
+			for(var key in specificOptions_val){
 					values_specific[key] = (key in parsedConfJSON.device) ? parsedConfJSON.device[key] : specificOptions_val[key];
 			};
 

assets/webconfig/js/hyperion.js

@@ -155,6 +155,10 @@ function requestServerConfig() {
 	websocket.send('{"command":"config", "tan":'+wsTan+',"subcommand":"getconfig"}');
 }
 
+function requestServerConfigReload() {
+	websocket.send('{"command":"config", "tan":'+wsTan+',"subcommand":"reload"}');
+}
+
 function requestLedColorsStart() {
 	ledStreamActive=true;
 	websocket.send('{"command":"ledcolors", "tan":'+wsTan+',"subcommand":"ledstream-start"}');
@@ -197,18 +201,3 @@ function requestWriteConfig(config, create, overwrite)
 	var overwrite = (typeof overwrite !== 'undefined') ?  overwrite : false;
 	websocket.send('{"command":"config","subcommand":"setconfig", "tan":'+wsTan+', "config":'+JSON.stringify(config)+',"create":'+create+', "overwrite":'+overwrite+'}');
 }
-
-function get_hue_lights(){
-	$.ajax({
-		type: "GET",
-		url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
-		processData: false,
-		contentType: 'application/json',
-		success: function(r) {
-			for(var lightid in r){
-				//console.log(r[lightid].name);
-				$('#hue_lights').append('ID: '+lightid+' Name: '+r[lightid].name+'<br />');
-			}
-		}
-	});
-}

assets/webconfig/js/ui_utils.js

@@ -7,7 +7,7 @@ function bindNavToContent(containerId, fileName, loadNow)
 	});
 	if (loadNow)
 	{
-		$("#page-content").load("/content/"+fileName+".html");
+		$(containerId).trigger("click");
 	}
 }