WebUi: New Internet API logic, correct switch to last instance after refresh, current instance notification (#608)

* Added new restricted ip api checkbox, initial instance localStorage support

* Added instance notification, added correct instance switch after page refresh (to last current instance)

* Optimize intention in wizard.js

* ":" from i18n json to code

* Changes for Responsive about site

assets/webconfig/content/about.html

@@ -60,7 +60,7 @@
 		else
 		{
 			response.text().then(function(text) {
-				$("#3rdpartylicenses").text(text);
+				$("#3rdpartylicenses").html('<code>'+text+'</code>');
 			});
 		}
 	})

assets/webconfig/i18n/de.json

@@ -76,6 +76,7 @@
 	"dashboard_alert_message_confsave_success" : "Deine Hyperion Konfiguration wurde erfolgreich gespeichert. Deine Änderungen sind somit übernommen.",
 	"dashboard_message_global_setting_t": "Instanzunabhängige Einstellung",
 	"dashboard_message_global_setting": "Die Einstellungen auf dieser Seite sind instanzunabhängig. Änderungen werden global übernommen.",
+	"dashboard_active_instance": "Ausgewählte Instanz",
 	"main_menu_dashboard_token": "Dashboard",
 	"main_menu_configuration_token": "Konfiguration",
 	"main_menu_general_conf_token": "Allgemein",
@@ -611,6 +612,8 @@
 	"edt_conf_net_apiAuth_expl":"Zwinge alle Anwendungen welche die Hyperion API nutzen sich zu authentifizieren. Aktivieren für höhere Sicherheit, da nun jede neue Anwendung einmalig von dir bestätigt werden muss.",
 	"edt_conf_net_localApiAuth_title" : "Lokale API Authentifizierung",
 	"edt_conf_net_localApiAuth_expl" : "Wenn aktiviert, müssen Verbindungen aus dem Heimnetzwerk mit einem Token authentifiziert werden.",
+	"edt_conf_net_restirctedInternetAccessAPI_title" : "Auf IP's beschränken",
+	"edt_conf_net_restirctedInternetAccessAPI_expl": "Den Zugriff auf die API durch das Internet auf bestimmte IP's beschränken",
 	"edt_conf_js_heading_title": "JSON Server",
 	"edt_conf_fbs_heading_title": "Flatbuffers Server",
 	"edt_conf_fbs_timeout_title": "Zeitüberschreitung",

assets/webconfig/i18n/en.json

@@ -75,6 +75,7 @@
 	"dashboard_alert_message_confsave_success" : "Your Hyperion configuration has been saved successfully. Your changes are now active.",
 	"dashboard_message_global_setting_t": "Instance independent setting",
 	"dashboard_message_global_setting": "The settings on this page are not depending on a specific instance. Changes will be stored globally for all instances.",
+	"dashboard_active_instance": "Selected instance",
 	"main_menu_dashboard_token" : "Dashboard",
 	"main_menu_configuration_token" : "Configuration",
 	"main_menu_general_conf_token" : "General",
@@ -610,6 +611,8 @@
 	"edt_conf_net_apiAuth_expl":"Enforce all applications that use the Hyperion API to authenticate themself against Hyperion (Exception see \"Local API Authentication\"). Higher security, as you control the access and revoke it at any time.",
 	"edt_conf_net_localApiAuth_title" : "Local API Authentication",
 	"edt_conf_net_localApiAuth_expl" : "When enabled, connections from your home network needs to authenticate themself against Hyperion too.",
+	"edt_conf_net_restirctedInternetAccessAPI_title" : "Restrict to IP's",
+	"edt_conf_net_restirctedInternetAccessAPI_expl": "You can restrict the access to the API through the internet to certain IP's.",
 	"edt_conf_js_heading_title" : "JSON Server",
 	"edt_conf_fbs_heading_title" : "Flatbuffers Server",
 	"edt_conf_fbs_timeout_title" : "Timeout",

assets/webconfig/index.html

@@ -211,6 +211,11 @@
 
 		<!-- Page Content -->
 		<div id="page-wrapper" style="padding-top:10px; overflow: hidden;">
+		<div id="dashboard_active_instance" style="display:none;padding:0 10px;margin:0">
+			<div class="bs-callout bs-callout-success">
+				<h4 id="dashboard_active_instance_friendly_name"></h4>
+			</div>
+		</div>
 		<div id="hyperion_config_write_success_notify" style="display:none;padding:0 10px;margin:0">
 			<div class="bs-callout bs-callout-success">
 				<h4 data-i18n="dashboard_alert_message_confsave_success_t"></h4>

assets/webconfig/js/content_colors.js

@@ -81,4 +81,3 @@ $(document).ready( function() {
 	
 	removeOverlay();
 });
-

assets/webconfig/js/ui_utils.js

@@ -95,6 +95,10 @@ function loadContent(event, forceRefresh)
 {
 	var tag;
 
+	var lastSelectedInstance = getStorage('lastSelectedInstance', false);
+	if(lastSelectedInstance && (lastSelectedInstance != window.currentHyperionInstance))
+		instanceSwitch(lastSelectedInstance);
+
 	if(typeof event != "undefined")
 	{
 		tag = event.currentTarget.hash;
@@ -154,10 +158,7 @@ function updateHyperionInstanceListing()
 
 		$('#hyperioninstance_'+data[key].instance).off().on("click",function(e){
 			var inst = e.currentTarget.id.split("_")[1]
-			requestInstanceSwitch(inst)
+			instanceSwitch(inst)
-			window.currentHyperionInstance = inst;
-			window.currentHyperionInstanceName = getInstanceNameByIndex(inst);
-			updateHyperionInstanceListing()
 		});
 	}
 }
@@ -171,13 +172,26 @@ function updateUiOnInstance(inst)
 			$("#hyperion_global_setting_notify").fadeIn("fast");
 		else
 			$("#hyperion_global_setting_notify").attr("style", "display:none");
+
+		$("#dashboard_active_instance_friendly_name").html($.i18n('dashboard_active_instance') + ': ' + window.serverInfo.instance[inst].friendly_name);
+		$("#dashboard_active_instance").removeAttr("style");
 	}
 	else
 	{
 		$("#hyperion_global_setting_notify").fadeOut("fast");
+		$("#dashboard_active_instance").attr("style", "display:none");
 	}
 }
 
+function instanceSwitch(inst)
+{
+	requestInstanceSwitch(inst)
+	window.currentHyperionInstance = inst;
+	window.currentHyperionInstanceName = getInstanceNameByIndex(inst);
+	setStorage('lastSelectedInstance', inst, false)
+	updateHyperionInstanceListing()
+}
+
 function loadContentTo(containerId, fileName)
 {
 	$(containerId).load("/content/"+fileName+".html");

assets/webconfig/js/wizard.js

@@ -1,6 +1,5 @@
-
+//clear priority and other tasks if people reload the page or lost connection while a wizard was active
-	//clear priority and other tasks if people reload the page or lost connection while a wizard was active
+$(window.hyperion).one("ready", function(event) {
-	$(window.hyperion).one("ready", function(event) {
 	if(getStorage("wizardactive") === 'true')
 	{
 		requestPriorityClear();
@@ -11,10 +10,10 @@
 			sendToKodi("stop");
 		}
 	}
-	});
+});
 
-	function resetWizard()
+function resetWizard()
-	{
+{
 	$("#wizard_modal").modal('hide');
 	clearInterval(wIntveralId);
 	requestPriorityClear();
@@ -27,14 +26,14 @@
 		sendToKodi("stop");
 	step = 0;
 	location.reload();
-	}
+}
 
-	//rgb byte order wizard
+//rgb byte order wizard
-	var wIntveralId;
+var wIntveralId;
-	var new_rgb_order;
+var new_rgb_order;
 
-	function changeColor()
+function changeColor()
-	{
+{
 	var color = $("#wiz_canv_color").css('background-color');
 
 	if (color == 'rgb(255, 0, 0)')
@@ -47,10 +46,10 @@
 		$("#wiz_canv_color").css('background-color','rgb(255, 0, 0)');
 		requestSetColor('255','0','0');
 	}
-	}
+}
 
-	function startWizardRGB()
+function startWizardRGB()
-	{
+{
 	//create html
 	$('#wiz_header').html('<i class="fa fa-magic fa-fw"></i>'+$.i18n('wiz_rgb_title'));
 	$('#wizp1_body').html('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('wiz_rgb_title')+'</h4><p>'+$.i18n('wiz_rgb_intro1')+'</p><p style="font-weight:bold;">'+$.i18n('wiz_rgb_intro2')+'</p>');
@@ -74,10 +73,10 @@
 		$('#wizp1').toggle(false);
 		$('#wizp2').toggle(true);
 	});
-	}
+}
 
-	function beginWizardRGB()
+function beginWizardRGB()
-	{
+{
 	$("#wiz_switchtime_select").off().on('change',function() {
 		clearInterval(wIntveralId);
 		var time = $("#wiz_switchtime_select").val();
@@ -157,38 +156,38 @@
 		window.serverConfig.device.colorOrder = new_rgb_order;
 		requestWriteConfig({"device" : window.serverConfig.device});
 	});
-	}
+}
 
-	$('#btn_wizard_byteorder').off().on('click',startWizardRGB);
+$('#btn_wizard_byteorder').off().on('click',startWizardRGB);
 
-	//color calibration wizard
+//color calibration wizard
-	var kodiAddress = document.location.hostname+':8080';
+var kodiAddress = document.location.hostname+':8080';
-	var wiz_editor;
+var wiz_editor;
-	var colorLength;
+var colorLength;
-	var cobj;
+var cobj;
-	var step = 0;
+var step = 0;
-	var withKodi = false;
+var withKodi = false;
-	var profile = 0;
+var profile = 0;
-	var websAddress;
+var websAddress;
-	var imgAddress;
+var imgAddress;
-	var vidAddress = "https://sourceforge.net/projects/hyperion-project/files/resources/vid/";
+var vidAddress = "https://sourceforge.net/projects/hyperion-project/files/resources/vid/";
-	var picnr = 0;
+var picnr = 0;
-	var availVideos = ["Sweet_Cocoon","Caminandes_2_GranDillama","Caminandes_3_Llamigos"];
+var availVideos = ["Sweet_Cocoon","Caminandes_2_GranDillama","Caminandes_3_Llamigos"];
 
-	if(getStorage("kodiAddress") != null)
+if(getStorage("kodiAddress") != null)
 	kodiAddress = getStorage("kodiAddress");
 
-	function switchPicture(pictures)
+function switchPicture(pictures)
-	{
+{
 	if(typeof pictures[picnr] === 'undefined')
 		picnr = 0;
 
 	sendToKodi('playP',pictures[picnr]);
 	picnr++;
-	}
+}
 
-	function sendToKodi(type, content, cb)
+function sendToKodi(type, content, cb)
-	{
+{
 	var command;
 
 	if(type == "playP")
@@ -223,10 +222,10 @@
 		if ( jqXHR.status != 200 && type == "msg")
 			cb("error")
 	});
-	}
+}
 
-	function performAction()
+function performAction()
-	{
+{
 	var h;
 
 	if(step == 1)
@@ -396,10 +395,10 @@
 		$('#btn_wiz_next').attr("disabled", false);
 		$('#btn_wiz_save').toggle(false);
 	}
-	}
+}
 
-	function updateWEditor(el, all)
+function updateWEditor(el, all)
-	{
+{
 	for (var key in cobj)
 	{
 		if(all === true || el[0] == key || el[1] == key || el[2] == key)
@@ -407,10 +406,10 @@
 		else
 			$('#editor_container_wiz [data-schemapath*=".'+profile+'.'+key+'"]').toggle(false);
 	}
-	}
+}
 
-	function startWizardCC()
+function startWizardCC()
-	{
+{
 	//create html
 	$('#wiz_header').html('<i class="fa fa-magic fa-fw"></i>'+$.i18n('wiz_cc_title'));
 	$('#wizp1_body').html('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('wiz_cc_title')+'</h4><p>'+$.i18n('wiz_cc_intro1')+'</p><label>'+$.i18n('wiz_cc_kwebs')+'</label><input class="form-control" style="width:170px;margin:auto" id="wiz_cc_kodiip" type="text" placeholder="'+kodiAddress+'" value="'+kodiAddress+'" /><span id="kodi_status"></span><span id="multi_cali"></span>');
@@ -480,10 +479,10 @@
 	$('#editor_container_wiz [data-schemapath="root.color.imageToLedMappingType"]').toggle(false);
 	for(var i = 0; i<colorLength.length; i++)
 		$('#editor_container_wiz [data-schemapath*="root.color.channelAdjustment.'+i+'."]').toggle(false);
-	}
+}
 
-	function beginWizardCC()
+function beginWizardCC()
-	{
+{
 
 	$('#btn_wiz_next').off().on('click',function() {
 		step++;
@@ -511,22 +510,22 @@
 
 	step++
 	performAction();
-	}
+}
 
-	$('#btn_wizard_colorcalibration').off().on('click', startWizardCC);
+$('#btn_wizard_colorcalibration').off().on('click', startWizardCC);
 
-	//hue wizard
+//hue wizard
-	var hueIPs = [];
+var hueIPs = [];
-	var hueIPsinc = 0;
+var hueIPsinc = 0;
-	var lightIDs = null;
+var lightIDs = null;
-	var huePosTop =    {hscan: {maximum: 0.85,minimum: 0.15},index: 0,vscan: {maximum: 0.2,minimum: 0}};
+var huePosTop =    {hscan: {maximum: 0.85,minimum: 0.15},index: 0,vscan: {maximum: 0.2,minimum: 0}};
-	var huePosBottom = {hscan: {maximum: 0.85,minimum: 0.15},index: 2,vscan: {maximum: 1,minimum: 0.8}};
+var huePosBottom = {hscan: {maximum: 0.85,minimum: 0.15},index: 2,vscan: {maximum: 1,minimum: 0.8}};
-	var huePosLeft =   {hscan: {maximum: 0.15,minimum: 0},index: 1,vscan: {maximum: 0.85,minimum: 0.15}};
+var huePosLeft =   {hscan: {maximum: 0.15,minimum: 0},index: 1,vscan: {maximum: 0.85,minimum: 0.15}};
-	var huePosRight =  {hscan: {maximum: 1,minimum: 0.85},index: 3,vscan: {maximum: 0.85,minimum: 0.15}};
+var huePosRight =  {hscan: {maximum: 1,minimum: 0.85},index: 3,vscan: {maximum: 0.85,minimum: 0.15}};
-	var huePosEntire = {hscan: {maximum: 1.0,minimum: 0.0},index: 0,vscan: {maximum: 1.0,minimum: 0.0}};
+var huePosEntire = {hscan: {maximum: 1.0,minimum: 0.0},index: 0,vscan: {maximum: 1.0,minimum: 0.0}};
 
-	function startWizardPhilipsHue()
+function startWizardPhilipsHue()
-	{
+{
 	//create html
 	$('#wiz_header').html('<i class="fa fa-magic fa-fw"></i>'+$.i18n('wiz_hue_title'));
 	$('#wizp1_body').html('<h4 style="font-weight:bold;text-transform:uppercase;">'+$.i18n('wiz_hue_title')+'</h4><p>'+$.i18n('wiz_hue_intro1')+'</p>');
@@ -553,9 +552,9 @@
 		$('#wizp1').toggle(false);
 		$('#wizp2').toggle(true);
 	});
-	}
+}
 
-	function checkHueBridge(cb,hueUser){
+function checkHueBridge(cb,hueUser){
 	var usr = "";
 
 	if(typeof hueUser != "undefined")
@@ -578,9 +577,9 @@
 	.fail( function( jqXHR, textStatus ) {
 		cb(false);
 	});
-	}
+}
 
-	function checkUserResult(reply){
+function checkUserResult(reply){
 	if(reply)
 	{
 		$('#wiz_hue_usrstate').html("");
@@ -592,9 +591,9 @@
 		$('#wiz_hue_usrstate').html($.i18n('wiz_hue_failure_user'));
 		$('#wiz_hue_create_user').toggle(true);
 	}
-	};
+};
 
-	function checkBridgeResult(reply){
+function checkBridgeResult(reply){
 	if(reply)
 	{
 		//abort checking, first reachable result is used
@@ -619,10 +618,10 @@
 			$('#wiz_hue_ipstate').html($.i18n('wiz_hue_failure_ip'));
 		}
 	}
-	};
+};
 
-	function assignHuePos(id, pos, inc)
+function assignHuePos(id, pos, inc)
-	{
+{
 	var i = null;
 
 	if(pos == "top")
@@ -638,10 +637,10 @@
 
 	i.index = inc;
 	return i;
-	}
+}
 
-	function identHueId(id, off)
+function identHueId(id, off)
-	{
+{
 	var on = true;
 	if(off !== true)
 		setTimeout(identHueId,1500,id,true);
@@ -654,9 +653,9 @@
 		timeout: 2000,
 		data: '	{"on":'+on+', "sat":254, "bri":254,"hue":47000}'
 	})
-	}
+}
 
-	function getHueIPs(){
+function getHueIPs(){
 	$('#wiz_hue_ipstate').html($.i18n('wiz_hue_searchb'));
 	$.ajax({
 		url: 'https://discovery.meethue.com',
@@ -676,10 +675,10 @@
 	.fail( function( jqXHR, textStatus ) {
 		$('#wiz_hue_ipstate').html($.i18n('wiz_hue_failure_ip'));
 	});
-	};
+};
 
-	function beginWizardHue()
+function beginWizardHue()
-	{
+{
 	var usr = conf_editor.getEditor("root.specificOptions.username").getValue();
 	if(usr != "")
 	{
@@ -754,10 +753,10 @@
 	});
 
 	$('#btn_wiz_abort').off().on('click', resetWizard);
-	}
+}
 
-	function createHueUser()
+function createHueUser()
-	{
+{
     var connectionRetries = 30;
 	var data = {"devicetype":"hyperion#"+Date.now()};
 	var UserInterval = setInterval(function(){
@@ -775,15 +774,18 @@
 
 				connectionRetries--;
 				$("#connectionTime").html(connectionRetries);
-						if(connectionRetries == 0) {
+				if(connectionRetries == 0) 
+				{
 					abortConnection(UserInterval);
 				}
 				else
 				{
-							if (typeof r[0].error != 'undefined') {
+					if (typeof r[0].error != 'undefined') 
+					{
 						console.log(connectionRetries+": link not pressed");
 					}
-						  if (typeof r[0].success != 'undefined') {
+					if (typeof r[0].success != 'undefined') 
+					{
 						$('#wizp1').toggle(false);
 						$('#wizp2').toggle(true);
 						$('#wizp3').toggle(false);
@@ -801,9 +803,9 @@
 			}
 		});
 	},1000);
-	}
+}
 
-	function get_hue_lights(){
+function get_hue_lights(){
 	$.ajax({
 		type: "GET",
 		url: 'http://'+$("#ip").val()+'/api/'+$("#user").val()+'/lights',
@@ -841,12 +843,12 @@
 			}
 		}
 	});
-	}
+}
 
-	function abortConnection(UserInterval){
+function abortConnection(UserInterval){
 	clearInterval(UserInterval);
 	$('#wizp1').toggle(false);
 	$('#wizp2').toggle(true);
 	$('#wizp3').toggle(false);
 	$("#wiz_hue_usrstate").html($.i18n('wiz_hue_failure_connection'));
-	}
+}

config/hyperion.config.json.commented

@@ -309,6 +309,7 @@
 	"network" :
 	{
 		"internetAccessAPI" : false,
+		"restirctedInternetAccessAPI" : false,
 		"ipWhitelist" : [],
 		"apiAuth" : true,
 		"localApiAuth" : false

config/hyperion.config.json.default

@@ -178,6 +178,7 @@
 	"network" :
 	{
 		"internetAccessAPI" : false,
+		"restirctedInternetAccessAPI" : false,
 		"ipWhitelist" : [],
 		"apiAuth" : true,
 		"localApiAuth" : false

libsrc/hyperion/schema/schema-network.json

@@ -25,6 +25,19 @@
 			},
 			"propertyOrder" : 2
 		},
+		"restirctedInternetAccessAPI" :
+		{
+			"type" : "boolean",
+			"title" : "edt_conf_net_restirctedInternetAccessAPI_title",
+			"required" : true,
+			"default" : false,
+			"options": {
+				"dependencies": {
+					"internetAccessAPI": true
+				}
+			},
+			"propertyOrder" : 3
+		},
 		"ipWhitelist" :
 		{
 			"type" : "array",
@@ -36,10 +49,10 @@
 			},
 			"options": {
 				"dependencies": {
-					"internetAccessAPI": false
+					"restirctedInternetAccessAPI": true
 				}
 			},
-			"propertyOrder" : 3
+			"propertyOrder" : 4
 		},
 		"localApiAuth" :
 		{
@@ -52,7 +65,7 @@
 					"apiAuth": true
 				}
 			},
-			"propertyOrder" : 4
+			"propertyOrder" : 5
 		}
 	},
 	"additionalProperties" : false