<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header" lang="en" data-lang-token="main_menu_general_conf_token">General</h1>
			<div class="introd">
				<h4 lang="en" data-lang-token="remote_general_conf_intro">You can edit the general configuration here.</h4>
			</div>
			<hr>
			<div class="col-lg-12">
        <form id="generalConfForm"></form>
      </div>
		</div>
	</div>
</div>


<script>

	$(document).ready( function() {

		webSocket = new WebSocket('ws://'+document.location.hostname+':19444');
		var serverInfo;

		webSocket.onerror = function(event) {
			alert(event.data);
		};


		webSocket.onopen = function(event) {
			webSocket.send('{"command":"config","subcommand":"getschema"}');
		};

		webSocket.onmessage = function(response){
			logger = JSON.parse(response.data).result.properties.logger;
      jsonServer = JSON.parse(response.data).result.properties.jsonServer;
      protoServer = JSON.parse(response.data).result.properties.protoServer;
      boblightServer = JSON.parse(response.data).result.properties.boblightServer;
      udpListener = JSON.parse(response.data).result.properties.udpListener;
      webConfig = JSON.parse(response.data).result.properties.webConfig;


      $('form').jsonForm({
        schema: {
          logger,
          jsonServer,
          protoServer,
          boblightServer,
          udpListener,
          webConfig,

        },
        onSubmit: function (errors, values) {
          if (errors) {
            console.log(errors);
          }
          else {
            console.log(values);
          }
        }
      });



      enableFormTranslation("generalConfForm", "generalConfForm");

      $("[type='checkbox']").bootstrapSwitch();


		}

  });




</script>