second part of PR #578

Signed-off-by: Paulchen-Panther <Paulchen-Panter@protonmail.com>

assets/webconfig/js/content_dashboard.js

@@ -76,7 +76,7 @@ $(document).ready( function() {
 	// add more info
 	$('#dash_leddevice').html(window.serverInfo.ledDevices.active);
 	$('#dash_currv').html(window.currentChannel+' '+window.currentVersion);
-	$('#dash_instance').html(window.serverConfig.general.name);
+	$('#dash_instance').html(window.currentHyperionInstanceName);
 	$('#dash_ports').html(window.serverConfig.flatbufServer.port+' | '+window.serverConfig.protoServer.port);
 	$('#dash_watchedversionbranch').html(window.serverConfig.general.watchedVersionBranch);
 

assets/webconfig/js/content_general.js

@@ -28,7 +28,6 @@ $(document).ready( function() {
 	// Token handling
 	function buildTokenList()
 	{
-		console.log(tokenList)
 		$('.tktbody').html("");
 		for(var key in tokenList)
 		{
@@ -69,6 +68,59 @@ $(document).ready( function() {
 		buildTokenList()
 	});
 
+	// Instance handling
+	function handleInstanceStartStop(e)
+	{
+		var inst = e.currentTarget.id.split("_")[1];
+		var start = (e.currentTarget.className == "btn btn-danger")
+		requestInstanceStartStop(inst, start)
+	}
+
+	function handleInstanceDelete(e)
+	{
+		var inst = e.currentTarget.id.split("_")[1];
+		showInfoDialog('delplug',$.i18n('conf_general_inst_delreq_h'),$.i18n('conf_general_inst_delreq_t',getInstanceNameByIndex(inst)));
+		$("#id_btn_yes").off().on('click', function(){
+			requestInstanceDelete(inst)
+		});
+	}
+
+	function buildInstanceList()
+	{
+		var inst = serverInfo.instance
+		$('.itbody').html("");
+		for(var key in inst)
+		{
+			var startBtnColor = inst[key].running ? "success" : "danger";
+			var startBtnText = inst[key].running ? $.i18n('general_btn_stop') : $.i18n('general_btn_start');
+			var startBtn = "-"
+			var delBtn = "-";
+			if(inst[key].instance > 0)
+			{
+				delBtn = '<button id="instdel_'+inst[key].instance+'" type="button" class="btn btn-danger">'+$.i18n('general_btn_delete')+'</button>';
+				startBtn = '<button id="inst_'+inst[key].instance+'" type="button" class="btn btn-'+startBtnColor+'">'+startBtnText+'</button>';
+			}
+			$('.itbody').append(createTableRow([inst[key].friendly_name, startBtn, delBtn], false, true));
+			$('#inst_'+inst[key].instance).off().on('click', handleInstanceStartStop);
+			$('#instdel_'+inst[key].instance).off().on('click', handleInstanceDelete);
+		}
+	}
+
+	createTable('ithead', 'itbody', 'itable');
+	$('.ithead').html(createTableRow([$.i18n('conf_general_inst_namehead'), $.i18n('conf_general_inst_actionhead'), $.i18n('general_btn_delete')], true, true));
+	buildInstanceList();
+
+	$('#inst_name').off().on('input',function(e) {
+		(e.currentTarget.value.length >= 5) ? $('#btn_create_inst').attr('disabled', false) : $('#btn_create_inst').attr('disabled', true);
+	});
+	$('#btn_create_inst').off().on('click',function(e) {
+		requestInstanceCreate($('#inst_name').val());
+	});
+
+	$(hyperion).off("instance-updated").on("instance-updated", function(event) {
+		buildInstanceList()
+	});
+
 	//import
 	function dis_imp_btn(state)
 	{
@@ -149,6 +201,7 @@ $(document).ready( function() {
 	if(window.showOptHelp)
 		createHint("intro", $.i18n('conf_general_intro'), "editor_container");
 		createHint("intro", $.i18n('conf_general_tok_desc'), "tok_desc_cont");
+		createHint("intro", $.i18n('conf_general_inst_desc'), "inst_desc_cont");
 
 	removeOverlay();
 });

assets/webconfig/js/content_index.js

@@ -1,3 +1,5 @@
+var instNameInit = false
+
 $(document).ready( function() {
 
 	loadContentTo("#container_connection_lost","connection_lost");
@@ -21,10 +23,19 @@ $(document).ready( function() {
 			}
 		});
 
-		if (window.serverInfo.hyperion.enabled)
-			$("#hyperion_disabled_notify").fadeOut("fast");
+		// determine button visibility
+		var running = window.serverInfo.instance.filter(entry => entry.running);
+		if(running.length > 1)
+			$('#btn_hypinstanceswitch').toggle(true)
 		else
-			$("#hyperion_disabled_notify").fadeIn("fast");
+			$('#btn_hypinstanceswitch').toggle(false)
+		// update listing at button
+		updateHyperionInstanceListing()
+		if(!instNameInit)
+		{
+			window.currentHyperionInstanceName = getInstanceNameByIndex(0);
+			instNameInit = true;
+		}
 
 		updateSessions();
 	}); // end cmd-serverinfo
@@ -113,6 +124,50 @@ $(document).ready( function() {
 		$(window.hyperion).trigger("components-updated");
 	});
 
+	$(window.hyperion).on("cmd-instance-update", function(event) {
+		window.serverInfo.instance = event.response.data
+		var avail = event.response.data;
+		// notify the update
+		$(window.hyperion).trigger("instance-updated");
+
+		// if our current instance is no longer available we are at instance 0 again.
+		var isInData = false;
+		for(var key in avail)
+		{
+			if(avail[key].instance == currentHyperionInstance && avail[key].running)
+			{
+				isInData = true;
+			}
+		}
+
+		if(!isInData)
+		{
+			currentHyperionInstance = 0;
+			currentHyperionInstanceName = getInstanceNameByIndex(0);
+			requestServerConfig();
+			setTimeout(requestServerInfo,100)
+			setTimeout(requestTokenInfo,200)
+			setTimeout(loadContent,300, undefined, true)
+		}
+
+		// determine button visibility
+		var running = serverInfo.instance.filter(entry => entry.running);
+		if(running.length > 1)
+			$('#btn_hypinstanceswitch').toggle(true)
+		else
+			$('#btn_hypinstanceswitch').toggle(false)
+
+		// update listing for button
+		updateHyperionInstanceListing()
+	});
+
+	$(window.hyperion).on("cmd-instance-switchTo", function(event){
+		requestServerConfig();
+		setTimeout(requestServerInfo,200)
+		setTimeout(requestTokenInfo,400)
+		setTimeout(loadContent,400, undefined, true)
+	});
+
 	$(window.hyperion).on("cmd-effects-update", function(event){
 		window.serverInfo.effects = event.response.data.effects
 	});

assets/webconfig/js/content_remote.js

@@ -224,7 +224,7 @@ $(document).ready(function() {
 			var enable_icon  = (components[idx].enabled? "fa-play" : "fa-stop");
 			var comp_name    = components[idx].name;
 			var comp_btn_id  = "comp_btn_"+comp_name;
-			var comp_goff	 = hyperionEnabled? "enabled" : "disabled";
+			var comp_goff    = hyperionEnabled? "enabled" : "disabled";
 
 			// create btn if not there
 			if ($("#"+comp_btn_id).length == 0)

assets/webconfig/js/hyperion.js

@@ -25,6 +25,8 @@ window.loggingHandlerInstalled = false;
 window.watchdog = 0;
 window.debugMessagesActive = true;
 window.wSess = [];
+window.currentHyperionInstance = 0;
+window.currentHyperionInstanceName = "?";
 window.comps = [];
 tokenList = {};
 
@@ -188,9 +190,32 @@ function requestTokenDelete(id)
 	sendToHyperion("authorize","deleteToken",'"id":"'+id+'"');
 }
 
+function requestInstanceStartStop(inst, start)
+{
+	if(start)
+		sendToHyperion("instance","startInstance",'"instance": '+inst);
+	else
+		sendToHyperion("instance","stopInstance",'"instance": '+inst);
+}
+
+function requestInstanceDelete(inst)
+{
+	sendToHyperion("instance","deleteInstance",'"instance": '+inst);
+}
+
+function requestInstanceCreate(name)
+{
+	sendToHyperion("instance","createInstance",'"name": "'+name+'"');
+}
+
+function requestInstanceSwitch(inst)
+{
+	sendToHyperion("instance","switchTo",'"instance": '+inst);
+}
+
 function requestServerInfo()
 {
-	sendToHyperion("serverinfo","",'"subscribe":["components-update","sessions-update","priorities-update", "imageToLedMapping-update", "adjustment-update", "videomode-update", "effects-update", "settings-update"]');
+	sendToHyperion("serverinfo","",'"subscribe":["components-update","sessions-update","priorities-update", "imageToLedMapping-update", "adjustment-update", "videomode-update", "effects-update", "settings-update", "instance-update"]');
 }
 
 function requestSysInfo()

assets/webconfig/js/ui_utils.js

@@ -118,6 +118,49 @@ function loadContent(event, forceRefresh)
 	}
 }
 
+function getInstanceNameByIndex(index)
+{
+	var instData = window.serverInfo.instance
+	for(var key in instData)
+	{
+		if(instData[key].instance == index)
+			return instData[key].friendly_name;
+	}
+	return "unknown"
+}
+
+function updateHyperionInstanceListing()
+{
+	var data = window.serverInfo.instance.filter(entry => entry.running);
+	$('#hyp_inst_listing').html("");
+	for(var key in data)
+	{
+		var currInstMarker = (data[key].instance == window.currentHyperionInstance) ? "component-on" : "";
+
+		var html = '<li id="hyperioninstance_'+data[key].instance+'"> \
+			<a>  \
+				<div>  \
+					<i class="fa fa-circle fa-fw '+currInstMarker+'"></i> \
+					<span>'+data[key].friendly_name+'</span> \
+				</div> \
+			</a> \
+		</li> '
+
+		if(data.length-1 > key)
+			html += '<li class="divider"></li>'
+
+		$('#hyp_inst_listing').append(html);
+
+		$('#hyperioninstance_'+data[key].instance).off().on("click",function(e){
+			var inst = e.currentTarget.id.split("_")[1]
+			requestInstanceSwitch(inst)
+			window.currentHyperionInstance = inst;
+			window.currentHyperionInstanceName = getInstanceNameByIndex(inst);
+			updateHyperionInstanceListing()
+		});
+	}
+}
+
 function loadContentTo(containerId, fileName)
 {
 	$(containerId).load("/content/"+fileName+".html");
@@ -191,6 +234,11 @@ function showInfoDialog(type,header,message)
 		$('#id_footer').html('<button type="button" id="id_btn_import" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-fw fa-save"></i>'+$.i18n('general_btn_saverestart')+'</button>');
 		$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
 	}
+	else if (type == "delplug"){
+		$('#id_body').html('<i style="margin-bottom:20px" class="fa fa-warning modal-icon-warning">');
+		$('#id_footer').html('<button type="button" id="id_btn_yes" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-fw fa-trash"></i>'+$.i18n('general_btn_yes')+'</button>');
+		$('#id_footer').append('<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-fw fa-close"></i>'+$.i18n('general_btn_cancel')+'</button>');
+	}
 	else if (type == "checklist")
 	{
 		$('#id_body').html('<img style="margin-bottom:20px" src="img/hyperion/hyperionlogo.png" alt="Redefine ambient light!">');