localStorage for i18n/access (#318)

* upd

* upd

* .

* enumtr

* cleanup

* upd

* update js

* update html

* hide buttons, if browser not comp, fix typo

[skip ci]

* fix empty effect name

assets/webconfig/js/content_effectsconfigurator.js

@@ -1,59 +1,66 @@
-    JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
+JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
 
-		getValue: function() {
-			if ($(this.input).data("colorpicker") !== undefined) {
-				var color = $(this.input).data('colorpicker').color.toRGB();
-				return [color.r,color.g, color.b];
-			}
-			else {
-				return [0,0,0];
-			}
-		},
+    getValue: function() {
+        if ($(this.input).data("colorpicker") !== undefined) {
+            var color = $(this.input).data('colorpicker').color.toRGB();
+            return [color.r,color.g, color.b];
+        }
+        else {
+            return [0,0,0];
+        }
+    },
 
-        setValue: function(val) {
-             function rgb2hex(rgb)
-             {
-                 return "#" +
-                 ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
-                 ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
-                 ("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
-             }
+    setValue: function(val) {
+            function rgb2hex(rgb)
+            {
+                return "#" +
+                ("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
+                ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+                ("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
+            }
 
-            $(this.input).colorpicker('updateInput', 'rgb('+val+')');
-            $(this.input).colorpicker('updateData', val);
-            $(this.input).colorpicker('updatePicker', rgb2hex(val));
-         },
-      
-        build: function() {
-            this._super();
-            var myinput = this;
-            $(myinput.input).colorpicker({
-                format: 'rgb',
-                customClass: 'colorpicker-2x',
-                sliders: {
-                    saturation: {
-                        maxLeft: 200,
-                        maxTop: 200
-                    },
-                    hue: {
-                        maxTop: 200
-                    },
+        $(this.input).colorpicker('updateInput', 'rgb('+val+')');
+        $(this.input).colorpicker('updateData', val);
+        $(this.input).colorpicker('updatePicker', rgb2hex(val));
+        $(this.input).colorpicker('updateComponent', 'rgb('+val+')');
+        },
+   
+   
+   
+    build: function() {
+        this._super();
+        var myinput = this;
+        $(myinput.input).parent().attr("class", $(myinput.input).parent().attr('class') + " colorpicker-element");
+        $(myinput.input).append("<span class='input-group-addon' id='event_catcher'><i></i></span>");
+        $(myinput.input).colorpicker({
+            format: 'rgb',
+            customClass: 'colorpicker-2x',
+            sliders: {
+                saturation: {
+                    maxLeft: 200,
+                    maxTop: 200
                 },
-              
-            })
+                hue: {
+                    maxTop: 200
+                },
+            },
+        })
 
-            $(this.input).colorpicker().on('changeColor', function(e) {
-                $(myinput).val(e.color.toRGB()).change();
-            });      
-        }
-    });
+        $("#event_catcher").detach().insertAfter(myinput.input);
+        $("#event_catcher").attr("id", "selector");
+       
+        $(this.input).colorpicker().on('changeColor', function(e) {
+            $(myinput).val(e.color.toRGB()).change();
+        });     
+    }
+});
 
-    JSONEditor.defaults.resolvers.unshift(function(schema) {
-        if(schema.type === "array" && schema.format === "colorpicker") {
-            return "colorPicker";
-        }
+JSONEditor.defaults.resolvers.unshift(function(schema) {
+    if(schema.type === "array" && schema.format === "colorpicker") {
+        return "colorPicker";
+    }
 
-    });
+});
 
 	var oldDelList = [];
 	

assets/webconfig/js/content_index.js

@@ -16,12 +16,7 @@ $(document).ready( function() {
 	bindNavToContent("#load_confNetwork","network",false);
 	bindNavToContent("#load_effectsconfig","effects_configurator",false);
 	bindNavToContent("#load_logging","logging",false);
-	
-		//$.i18n.debug = true;
-		$.i18n().load({ de: 'i18n/de.json', en:'i18n/en.json'}).done(
-			function() {
-				performTranslation();
-			});
+	bindNavToContent("#load_webconfig","webconfig",false);
 
 	$(hyperion).on("cmd-serverinfo",function(event){
 		parsedServerInfoJSON = event.response;

assets/webconfig/js/content_leds.js

@@ -66,7 +66,7 @@ function createLedPreview(leds, origin){
 			"top:"+(led.vscan.minimum * canvas_height)+"px;"+
 			"width:"+((led.hscan.maximum-led.hscan.minimum) * canvas_width-1)+"px;"+
 			"height:"+((led.vscan.maximum-led.vscan.minimum) * canvas_height-1)+"px;";
-		leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+idx+'"><span id="'+led_id+'_num" class="led_prev_num">'+idx+'</span></div>';
+		leds_html += '<div id="'+led_id+'" class="led" style="'+bgcolor+pos+'" title="'+led.index+'"><span id="'+led_id+'_num" class="led_prev_num">'+led.index+'</span></div>';
 	}
 	$('#leds_preview').html(leds_html);
 	$('#ledc_0').css({"background-color":"black","z-index":"12"});
@@ -108,22 +108,6 @@ function createClassicLeds(){
 	var Hmax = 1.0 - edgeHGap;
 	var ledArray = [];
 	
-	createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
-
-	if(ledsGlength != "0" && validateGap()){
-		ledArray.splice(ledsGPos, ledsGlength);
-	}
-	
-	if (position != "0"){
-		rotateArray(ledArray, position);
-	}
-
-	if (reverse)
-		ledArray.reverse();
-	
-	createLedPreview(ledArray, 'classic');
-	createFinalArray(ledArray);
-	
 	function createFinalArray(array){
 		finalLedArray = [];
 		for(var i = 0; i<array.length; i++){
@@ -133,6 +117,7 @@ function createClassicLeds(){
 			vmax = array[i].vscan.maximum;
 			finalLedArray[i] = { "index" : i, "hscan": { "maximum" : hmax, "minimum" : hmin }, "vscan": { "maximum": vmax, "minimum": vmin}}
 		}
+		createLedPreview(finalLedArray, 'classic');
 	}
 	
 	function validateGap(){
@@ -234,6 +219,21 @@ function createClassicLeds(){
 			hmax -= step;
 		}
 	}
+	
+	createLeftLeds(createBottomLeds(createRightLeds(createTopLeds())));
+
+	if(ledsGlength != "0" && validateGap()){
+		ledArray.splice(ledsGPos, ledsGlength);
+	}
+	
+	if (position != "0"){
+		rotateArray(ledArray, position);
+	}
+
+	if (reverse)
+		ledArray.reverse();
+	
+	createFinalArray(ledArray);
 }
 
 function createMatrixLeds(){
@@ -434,6 +434,8 @@ $(document).ready(function() {
 		}
 		$('#leds_canvas').html(leds_html);
 		$('#led_0').css({"z-index":"10"});
+
+		$('#leds_custom_updsim').trigger('click');
 	});
 
 	// ------------------------------------------------------------------
@@ -464,18 +466,14 @@ $(document).ready(function() {
 	// ------------------------------------------------------------------
 	$("#leds_custom_updsim").off().on("click", function() {
 		if (validateText()){
-			string = $("#ledconfig").val();
-			createLedPreview(JSON.parse(string), 'text');
+			createLedPreview(JSON.parse($("#ledconfig").val()), 'text');
 		}
 	});
 	
 	// ------------------------------------------------------------------
 	$("#leds_custom_save").off().on("click", function() {
 		function createLedConfig(){
-			var string = '{"leds" :';
-			string += $("#ledconfig").val();
-			string += "}";
-			return string
+			var string = '{"leds" :'+$("#ledconfig").val()+'}';
 		}
 		if (validateText())
 			requestWriteConfig(JSON.parse(createLedConfig()));

assets/webconfig/js/content_webconfig.js

@@ -0,0 +1,19 @@
+ 
+var conf_editor = null;
+$(hyperion).one("cmd-config-getschema", function(event) {
+	schema = parsedConfSchemaJSON.properties;
+	conf_editor = createJsonEditor('editor_container', {
+		webConfig : schema.webConfig
+	}, true);
+
+	$('#btn_submit').off().on('click',function() {
+		requestWriteConfig(conf_editor.getValue());
+	});
+});
+
+
+$(document).ready( function() {
+	performTranslation();
+	requestServerConfigSchema();
+});
+

assets/webconfig/js/lib/jsoneditor.js

@@ -1457,6 +1457,15 @@ JSONEditor.AbstractEditor = Class.extend({
     this.updateHeaderText();
     this.register();
     this.onWatchedFieldChange();
+	
+	//disable input field, if it didn't match the current access level
+	var storedAccess = localStorage.getItem("accesslevel");
+
+	if(this.schema.access){
+		if(this.schema.access == 'expert' && storedAccess != 'expert'){
+			this.disable();
+		}	
+	}
   },
 
   setupWatchListeners: function() {

assets/webconfig/js/localStorage.js

@@ -0,0 +1,119 @@
+$(document).ready( function() {
+	
+	var storedLang;
+	var storedAccess;
+	var availLang = ['en','de'];
+	var availAccess = ['default','expert']
+	//$.i18n.debug = true;
+	
+	function storageComp(){
+		if (typeof(Storage) !== "undefined")
+			return true;
+		return false;
+	}
+	
+	function initTrans(lc){
+		if (lc == 'auto')
+		{
+			$.i18n().load().done(
+			function() {
+				performTranslation();
+			});
+		}
+		else
+		{
+			$.i18n().locale = lc;
+			$.i18n().load( "i18n", lc ).done(
+			function() {
+				performTranslation();
+			});	
+		}
+	}
+	
+	//i18n
+	if (storageComp())
+	{
+		storedLang = localStorage.getItem("langcode");
+		if (storedLang == null)
+		{
+			localStorage.langcode = "auto";
+			storedLang = 'auto';
+			initTrans('auto');
+		}
+		else
+		{
+			initTrans(storedLang);
+		}
+	}
+	else
+	{
+		showInfoDialog('warning', "Can't store settings", "Your browser doesn't support localStorage. You can't save a specific language setting (fallback to 'auto detection') and access level (fallback to 'default'). You could still use the webinterface without further issues");
+		initTrans('auto');
+		$('#btn_setlang').toggle();
+		$('#btn_setaccess').toggle();
+	}
+	
+	$('#btn_setlang').off().on('click',function() {
+		$('#modal_select').html('');
+		for (var lcx = 0; lcx<availLang.length; lcx++)
+		{
+			$('#modal_select').append(createSelOpt(availLang[lcx], $.i18n('general_speech_'+availLang[lcx])))
+		}
+		showInfoDialog('select', $.i18n('InfoDialog_lang_title'), $.i18n('InfoDialog_lang_text'),'btn_savelang');
+		
+		if (storedLang != "auto")
+			$('#modal_select').val(storedLang);
+
+		$('#btn_savelang').off().on('click',function() {
+			var newLang = $('#modal_select').val();
+
+			if (newLang != storedLang)
+			{				
+				initTrans(newLang);
+				localStorage.langcode = newLang;
+				storedLang = newLang;
+			}
+		});
+	});
+
+	//access
+	function updateVisibility(){
+		if(storedAccess == 'expert')
+			$('#load_webconfig').toggle(true);
+		else
+			$('#load_webconfig').toggle(false);	
+	}
+	
+	if (storageComp())
+	{
+		storedAccess = localStorage.getItem("accesslevel");
+		if (storedAccess == null)
+		{
+			localStorage.accesslevel = "default";
+			storedAccess = "default";
+			updateVisibility();
+		}
+		else
+		{
+			updateVisibility();
+		}
+	}
+
+	$('#btn_setaccess').off().on('click',function() {
+		$('#modal_select').html('');
+		for (var lcx = 0; lcx<availAccess.length; lcx++)
+		{
+			$('#modal_select').append(createSelOpt(availAccess[lcx], $.i18n('general_access_'+availAccess[lcx])))
+		}
+		showInfoDialog('select', $.i18n('InfoDialog_access_title'), $.i18n('InfoDialog_access_text'), 'btn_saveaccess');
+		
+		$('#modal_select').val(storedAccess);
+
+		$('#btn_saveaccess').off().on('click',function() {
+			storedAccess = $('#modal_select').val();
+			localStorage.accesslevel = storedAccess;
+			updateVisibility();
+		});
+	});
+	
+});

assets/webconfig/js/ui_utils.js

@@ -47,25 +47,39 @@ function setClassByBool(obj,enable,class1,class2)
 	}
 }
 
-function showInfoDialog(type,header,message)
+function showInfoDialog(type,header,message,btnid)
 {
+	if (type != 'select')
+		$('#modal_select').toggle(false);
+	else
+		$('#modal_select').toggle(true);
+	
 	$('#modal_dialog .modal-bodytitle').html(header);
 	$('#modal_dialog .modal-bodycontent').html(message);
 	
 	if (type=="success"){
 		$('#modal_dialog .modal-bodyicon').html('<i class="fa fa-check modal-icon-check">');
-		$('#modal_dialog .modal-footer-button').html('<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>');
+		$('#modal_dialog .modal-footer-button').html('<button type="button" class="btn btn-success" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
 	}
 	else if (type=="warning"){
 		$('#modal_dialog .modal-bodyicon').html('<i class="fa fa-warning modal-icon-warning">');
-		$('#modal_dialog .modal-footer-button').html('<button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>');
+		$('#modal_dialog .modal-footer-button').html('<button type="button" class="btn btn-warning" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
 	}
 	else if (type=="error"){	
 		$('#modal_dialog .modal-bodyicon').html('<i class="fa fa-warning modal-icon-error">');
-		$('#modal_dialog .modal-footer-button').html('<button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>');
+		$('#modal_dialog .modal-footer-button').html('<button type="button" class="btn btn-danger" data-dismiss="modal">'+$.i18n('general_btn_ok')+'</button>');
 	}	
-	$('#modal_dialog').modal('show');
+	else if (type == "select"){
+		$('#modal_dialog .modal-bodyicon').html('<img src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');
+		$('#modal_dialog .modal-footer-button').html('<button type="button" id="'+btnid+'" class="btn btn-success" data-dismiss="modal">'+$.i18n('general_btn_save')+'</button>');
+		$('#modal_dialog .modal-footer-button').append('<button type="button" class="btn btn-danger" data-dismiss="modal">'+$.i18n('general_btn_abort')+'</button>');
+	}
 	
+	$("#modal_dialog").modal({
+		backdrop : "static",
+		keyboard: false,
+		show: true
+	});
 }
 
 function isJsonString(str)
@@ -127,11 +141,14 @@ function createSelGroup(group)
 	return el;
 }
 		
-function createSelOpt(opt)
+function createSelOpt(opt, title)
 {
 	var el = document.createElement('option');
 	el.setAttribute('value', opt);
-	el.innerHTML = opt;
+	if (typeof title == 'undefined')	
+		el.innerHTML = opt;
+	else
+		el.innerHTML = title;
 	return el;
 }