webui: add read/write for all editors (#268)

assets/webconfig/content/colors.html

@@ -4,13 +4,12 @@
 		<div class="col-lg-12">
 			<h1 class="page-header" lang="en" data-lang-token="main_menu_grabber_conf_token">Image Processing</h1> 
 			<div class="introd">
-				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
+				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the image and color configuration here.</h4>
 			</div>
 			<hr />
 			<div class="col-lg-12">
-<!--				<form id="grabberConfForm"></form>-->
 				<div id='editor_container'/>
-				<button id='btn_submit'>Submit (console.log)</button>
+				<button  class="btn btn-success" id='btn_submit'>Save Settings</button>
 			</div>
 
 		</div>

assets/webconfig/content/effects.html

@@ -3,12 +3,12 @@
 		<div class="col-lg-12">
 			<h1 class="page-header" lang="en" data-lang-token="main_menu_general_conf_token">Effects</h1>
 			<div class="introd">
-				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
+				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the effect settings here.</h4>
 			</div>
 			<hr>
 			<div class="col-lg-12">
 				<div id='editor_container'></div>
-				<button id='btn_submit' class="btn btn-danger">Submit - currently will destroy your config!</button>
+				<button  class="btn btn-success" id='btn_submit'>Save Settings</button>
 			</div>
 		</div>
 	</div>

assets/webconfig/content/grabber.html

@@ -4,13 +4,12 @@
 		<div class="col-lg-12">
 			<h1 class="page-header" lang="en" data-lang-token="main_menu_grabber_conf_token">Capturing Hardware</h1> 
 			<div class="introd">
-				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
+				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit your capturing hardware configuration here.</h4>
 			</div>
 			<hr />
 			<div class="col-lg-12">
-<!--				<form id="grabberConfForm"></form>-->
 				<div id='editor_container'/>
-				<button id='btn_submit'>Submit (console.log)</button>
+				<button  class="btn btn-success" id='btn_submit'>Save Settings</button>
 			</div>
 
 		</div>

assets/webconfig/content/kodiconf.html

@@ -13,7 +13,7 @@
 
 			<div class="col-lg-12">
 				<div id='editor_container'/>
-				<button id='btn_submit'>Submit (console.log)</button>
+				<button  class="btn btn-success" id='btn_submit'>Save Settings</button>
 			</div>
 
 		</div>

assets/webconfig/content/network.html

@@ -4,13 +4,13 @@
 		<div class="col-lg-12">
 			<h1 class="page-header" lang="en" data-lang-token="main_menu_grabber_conf_token">Network Services</h1> 
 			<div class="introd">
-				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
+				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the network configuration here.</h4>
 			</div>
 			<hr />
 			<div class="col-lg-12">
 <!--				<form id="grabberConfForm"></form>-->
 				<div id='editor_container'/>
-				<button id='btn_submit'>Submit (console.log)</button>
+				<button  class="btn btn-success" id='btn_submit'>Save Settings</button>
 			</div>
 
 		</div>

assets/webconfig/js/content_colors.js

@@ -1,34 +1,20 @@
 
 var conf_editor = null;
 $(hyperion).one("cmd-config-getschema", function(event) {
-	parsedConfSchemaJSON = event.response.result;
 	schema = parsedConfSchemaJSON.properties;
+	conf_editor = createJsonEditor('editor_container', {
+		color              : schema.color,
+		smoothing          : schema.smoothing,
+		blackborderdetector: schema.blackborderdetector,
+	}, true);
 
-	conf_editor = createJsonEditor('editor_container',
+	$('#btn_submit').off().on('click',function() {
-		{
+		requestWriteConfig(conf_editor.getValue());
-			title:'',
+	});
-			properties: {
-				color              : schema.color,
-				smoothing          : schema.smoothing,
-				blackborderdetector: schema.blackborderdetector,
-			}
-		});
-
-	$('#editor_container .well').css("background-color","white");
-	$('#editor_container .well').css("border","none");
-	$('#editor_container .well').css("box-shadow","none");
-	$('#editor_container .btn').addClass("btn-primary");
-	$('#editor_container h3').first().remove();
-
 });
 
 
 $(document).ready( function() {
 	requestServerConfigSchema();
-
-	document.getElementById('btn_submit').addEventListener('click',function() {
-		// Get the value from the editor
-		console.log(conf_editor.getValue());
-	});
 });
 

assets/webconfig/js/content_effects.js

@@ -1,39 +1,14 @@
-
+var conf_editor = null;
 $(hyperion).one("cmd-config-getschema", function(event) {
-	parsedConfSchemaJSON = event.response.result;
-
 	schema = parsedConfSchemaJSON.properties;
-	var general_conf_editor = createJsonEditor('editor_container',
+	conf_editor = createJsonEditor('editor_container', {
-		{
+		effects            : schema.effects,
-			title:'',
+		initialEffect      : schema.initialEffect
-			properties: {
+	}, true);
-				effects            : schema.effects,
-				initialEffect      : schema.initialEffect
-			}
-		});
 
- 	$('#editor_container .well').css("background-color","white");
-// 	$('#editor_container .well').css("border","none");
-// 	$('#editor_container .well').css("box-shadow","none");
-	$('#editor_container .btn').addClass("btn-primary");
-	$('#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());
-// 	});
-
-	//Alternative Function with submit button to get Values
 	$('#btn_submit').off().on('click',function() {
-		console.log(general_conf_editor.getValue());
+		requestWriteConfig(conf_editor.getValue());
 	});
-
-	$(hyperion).on("cmd-config-setconfig",function(event){
-		parsedServerInfoJSON = event.response;
-		console.log(parsedServerInfoJSON);
-	});
-
 });
 
 $(document).ready( function() {

assets/webconfig/js/content_grabber.js

@@ -2,33 +2,20 @@
 
 var conf_editor = null;
 $(hyperion).one("cmd-config-getschema", function(event) {
-	parsedConfSchemaJSON = event.response.result;
 	schema = parsedConfSchemaJSON.properties;
+	conf_editor = createJsonEditor('editor_container', {
+		framegrabber: schema.framegrabber,
+		grabberV4L2 : schema.grabberV4L2
+	}, true);
 
-	conf_editor = createJsonEditor('editor_container',
-		{
-			title:'',
-			properties: {
-				framegrabber: schema.framegrabber,
-				grabberV4L2 : schema.grabberV4L2
-			}
-		});
-
-	$('#editor_container .well').css("background-color","white");
-	$('#editor_container .well').css("border","none");
-	$('#editor_container .well').css("box-shadow","none");
-	$('#editor_container .btn').addClass("btn-primary");
-	$('#editor_container h3').first().remove();
 
+	$('#btn_submit').off().on('click',function() {
+		requestWriteConfig(conf_editor.getValue());
+	});
 });
 
 
 $(document).ready( function() {
 	requestServerConfigSchema();
-
-	document.getElementById('btn_submit').addEventListener('click',function() {
-		// Get the value from the editor
-		console.log(conf_editor.getValue());
-	});
 });
 

assets/webconfig/js/content_index.js

@@ -68,16 +68,20 @@ $(document).ready( function() {
 
 	$(hyperion).one("cmd-config-getschema", function(event) {
 		parsedConfSchemaJSON = event.response.result;
+		requestServerConfig();
+	});
+
+	$(hyperion).one("cmd-config-getconfig", function(event) {
+		parsedConfJSON = event.response.result;
+		requestServerInfo();
 	});
 
-	
 	$(hyperion).on("error",function(event){
 		showErrorDialog("error", event.reason);
 	});
 
 	$(hyperion).on("open",function(event){
 		requestServerConfigSchema();
-		requestServerInfo();
 	});
 
 	$("#btn_hyperion_reload").on("click", function(){

assets/webconfig/js/content_kodi.js

@@ -1,32 +1,20 @@
 
 var conf_editor = null;
 $(hyperion).one("cmd-config-getschema", function(event) {
-	parsedConfSchemaJSON = event.response.result;
 	schema = parsedConfSchemaJSON.properties;
+	conf_editor = createJsonEditor('editor_container', {
+		kodiVideoChecker: schema.kodiVideoChecker
+	}, true);
 
-	conf_editor = createJsonEditor('editor_container',
-		{
-			title:'',
-			properties: {
-				kodiVideoChecker: schema.kodiVideoChecker,
-			}
-		});
-
-	$('#editor_container .well').css("background-color","white");
-	$('#editor_container .well').css("border","none");
-	$('#editor_container .well').css("box-shadow","none");
-	$('#editor_container .btn').addClass("btn-primary");
 	$('#editor_container h3').remove();
 
+	$('#btn_submit').off().on('click',function() {
+		requestWriteConfig(conf_editor.getValue());
+	});
 });
 
 
 $(document).ready( function() {
 	requestServerConfigSchema();
-
-	document.getElementById('btn_submit').addEventListener('click',function() {
-		// Get the value from the editor
-		console.log(conf_editor.getValue());
-	});
 });
 

assets/webconfig/js/content_leds.js

@@ -133,18 +133,14 @@ $(document).ready(function() {
 	});
 
 	// ------------------------------------------------------------------
-	var grabber_conf_editor = null;
+	var conf_editor = null;
 	$("#leddevices").off().on("change", function(event) {
 		generalOptions  = parsedConfSchemaJSON.properties.device;
 		specificOptions = parsedConfSchemaJSON.properties.alldevices[$(this).val()];
 		//$('#ledDeviceOptions').html(JSON.stringify(generalOptions)+"<br>"+JSON.stringify(specificOptions));
-		grabber_conf_editor = createJsonEditor('editor_container',
+		conf_editor = createJsonEditor('editor_container', {
-			{
+			generalOptions : generalOptions,
-				title:' ',
+			specificOptions : specificOptions,
-				properties: {
-					generalOptions : generalOptions,
-					specificOptions : specificOptions,
-			}
 		});
 		
 		values_general = {};
@@ -155,23 +151,21 @@ $(document).ready(function() {
 			if (key != "type" && key in generalOptions.properties)
 				values_general[key] = parsedConfJSON.device[key];
 		};
-		grabber_conf_editor.getEditor("root.generalOptions").setValue( values_general );
+		conf_editor.getEditor("root.generalOptions").setValue( values_general );
 
 		if (isCurrentDevice)
 		{
-			specificOptions_val = grabber_conf_editor.getEditor("root.specificOptions").getValue()
+			specificOptions_val = 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];
 			};
 
-			grabber_conf_editor.getEditor("root.specificOptions").setValue( values_specific );
+			conf_editor.getEditor("root.specificOptions").setValue( values_specific );
 		};
 
 		$('#editor_container .well').css("background-color","white");
 		$('#editor_container .well').css("border","none");
 		$('#editor_container .well').css("box-shadow","none");
-		$('#editor_container .btn').addClass("btn-primary");
-		$('#editor_container h3').first().remove();
 		
 		if ($(this).val() == "philipshue")
 		{
@@ -193,14 +187,14 @@ $(document).ready(function() {
 
 	// ------------------------------------------------------------------
 	$("#btn_submit_controller").off().on("click", function(event) {
-		if (grabber_conf_editor==null)
+		if (conf_editor==null)
 			return;
 
 		ledDevice = $("#leddevices").val();
 		result = {device:{}};
 		
-		general = grabber_conf_editor.getEditor("root.generalOptions").getValue();
+		general = conf_editor.getEditor("root.generalOptions").getValue();
-		specific = grabber_conf_editor.getEditor("root.specificOptions").getValue();
+		specific = conf_editor.getEditor("root.specificOptions").getValue();
 		for(var key in general){
 			result.device[key] = general[key];
 		}

assets/webconfig/js/content_network.js

@@ -1,36 +1,22 @@
 
 var conf_editor = null;
 $(hyperion).one("cmd-config-getschema", function(event) {
-	parsedConfSchemaJSON = event.response.result;
 	schema = parsedConfSchemaJSON.properties;
+	conf_editor = createJsonEditor('editor_container', {
+		jsonServer         : schema.jsonServer,
+		protoServer        : schema.protoServer,
+		boblightServer     : schema.boblightServer,
+		udpListener        : schema.udpListener,
+		forwarder          : schema.forwarder,
+	}, true);
 
-	conf_editor = createJsonEditor('editor_container',
+	$('#btn_submit').off().on('click',function() {
-		{
+		requestWriteConfig(conf_editor.getValue());
-			title:'',
+	});
-			properties: {
-				jsonServer         : schema.jsonServer,
-				protoServer        : schema.protoServer,
-				boblightServer     : schema.boblightServer,
-				udpListener        : schema.udpListener,
-				forwarder          : schema.forwarder,
-			}
-		});
-
-	$('#editor_container .well').css("background-color","white");
-	$('#editor_container .well').css("border","none");
-	$('#editor_container .well').css("box-shadow","none");
-	$('#editor_container .btn').addClass("btn-primary");
-	$('#editor_container h3').first().remove();
-
 });
 
 
 $(document).ready( function() {
 	requestServerConfigSchema();
-
-	document.getElementById('btn_submit').addEventListener('click',function() {
-		// Get the value from the editor
-		console.log(conf_editor.getValue());
-	});
 });
 

assets/webconfig/js/ui_utils.js

@@ -68,12 +68,12 @@ function isJsonString(str)
 }
 
 
-function createJsonEditor(container,schema)
+function createJsonEditor(container,schema,setconfig)
 {
 	$('#'+container).off();
 	$('#'+container).html("");
 
-	return new JSONEditor(document.getElementById(container),
+	var editor = new JSONEditor(document.getElementById(container),
 	{
 		theme: 'bootstrap3',
 		iconlib: "fontawesome4",
@@ -82,6 +82,25 @@ function createJsonEditor(container,schema)
 		disable_edit_json: 'true',
 		disable_properties: 'true',
 		no_additional_properties: 'true',
-		schema: schema
+		schema: {
+			title:'',
+			properties: schema
+		}
 	});
+
+	$('#editor_container .well').css("background-color","white");
+	$('#editor_container .well').css("border","none");
+	$('#editor_container .well').css("box-shadow","none");
+	$('#editor_container .btn').addClass("btn-primary");
+	$('#editor_container h3').first().remove();
+
+	if (setconfig)
+	{
+		for(var key in editor.root.editors)
+		{
+			editor.getEditor("root."+key).setValue( parsedConfJSON[key] );
+		}
+	}
+
+	return editor;
 }