WebUi: Beauty Tweaks (Instance, 3rd party Licenses) (#597)

* WebUi: Instance Management Tweaks and Chars Needed Information

* WebUi: 3rd Party Licenses Tweaks

* WebUi: Apply changes from Brindosch PR #596

* WebUi: Changing i18n tokens and adding catch event for connection error

* WebUi: Adding Link to GitHub License Ressource if an error is catched

assets/webconfig/content/about.html

@@ -3,6 +3,7 @@
 	<div class="row">
 		<div class="col-lg-12">
 			<div id="about_cont"></div>
+			
 		</div>
 		<div id="danger_act"class="col-lg-6" style="display:none;padding-top:20px">
 			<h4>You found a hidden service menu!</h4>
@@ -26,12 +27,10 @@
 	for(key in libs)
 		libh += '<a href="'+libs[key]+'" target="_blank">'+key+'</a>, ';
 	libh += "<br/>"+$.i18n("about_credits");
-	libh += "<br/><a target='_blank' rel='noopener noreferrer' href='https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/3RD_PARTY_LICENSES'>"+$.i18n("about_3rd_party_licenses")+"</a>";
-
 	lang = lang.toString().replace(/,/g,", ");
 
-	var fc = ['<span id="danger_trig">'+$.i18n("about_version")+'<span>',$.i18n("about_build"),$.i18n("about_builddate"),$.i18n("about_translations"),$.i18n("about_resources", $.i18n("general_webui_title"))];
+	var fc = ['<span id="danger_trig">'+$.i18n("about_version")+'<span>',$.i18n("about_build"),$.i18n("about_builddate"),$.i18n("about_translations"),$.i18n("about_resources", $.i18n("general_webui_title")), $.i18n("about_3rd_party_licenses")];
-	var sc = [currentVersion,si.build,si.time,'('+availLang.length+')<p>'+lang+'</p><p><a href="https://github.com/hyperion-project/hyperion.ng" target="_blank">'+$.i18n("about_contribute")+'</a></p>',libh];
+	var sc = [currentVersion,si.build,si.time,'('+availLang.length+')<p>'+lang+'</p><p><a href="https://github.com/hyperion-project/hyperion.ng" target="_blank">'+$.i18n("about_contribute")+'</a></p>',libh, '<pre><div id="3rdpartylicenses" style="overflow:scroll;max-height:400px"></div></pre>'];
 
 	createTable("","atb","about_cont");
 	for(var i = 0; i<fc.length; i++)
@@ -51,5 +50,23 @@
 		initRestart();
 	});
 
+	var url = 'https://raw.githubusercontent.com/hyperion-project/hyperion.ng/master/3RD_PARTY_LICENSES';
+	fetch(url)
+	.then(function(response) {
+		if(!response.ok)
+		{
+			$("#3rdpartylicenses").html('<a href="' + url + '">' + $.i18n("about_3rd_party_licenses_error") + '</a>');
+		}
+		else
+		{
+			response.text().then(function(text) {
+				$("#3rdpartylicenses").text(text);
+			});
+		}
+	})
+	.catch(function(rejected) {
+		$("#3rdpartylicenses").html('<a href="' + url + '">' + $.i18n("about_3rd_party_licenses_error") + '</a>');
+	});
+
 	removeOverlay();
 </script>

assets/webconfig/content/conf_general.html

@@ -18,10 +18,13 @@
 								<div class="col-lg-6">
 									<input class="form-control" id="inst_name" type="text"></input>
 								</div>
+								<div class="col-lg-6">
+									<span id="inst_chars_needed"><br /></span>
+								</div>
 							</div>
-							<div>
+						</div>
-								<button class="btn btn-primary" id="btn_create_inst" data-i18n="conf_general_createInst_btn" disabled>Create New Token</button>
+						<div class="panel-footer" style="text-align: right;">
-							</div>
+							<button class="btn btn-primary" id="btn_create_inst" data-i18n="conf_general_createInst_btn" disabled>Create New Instance</button>
 						</div>
 					</div>
 				</div>

assets/webconfig/i18n/de.json

@@ -45,6 +45,7 @@
 	"general_btn_next": "Weiter",
 	"general_btn_back": "Zurück",
 	"general_btn_iswitch": "Switch",
+	"general_chars_needed": "weitere Zeichen benötigt",
 	"general_wiki_moreto": "Mehr Informationen zu \"$1\" findest du in unserem Wiki",
 	"dashboard_label_intro": "Das Dashboard zeigt dir Informationen zum Systemstatus, ob Updates verfügbar sind, den Komponentenstatus sowie die letzten Blog-Posts vom Hyperion Team.",
 	"dashboard_infobox_label_title": "Information",
@@ -191,7 +192,6 @@
 	"conf_network_tok_desc" : "Tokens erlauben andere Anwendungen auf die Hyperion API zuzugreifen. Eine Anwendung kann ein Token anfordern welches von dir bestätigt werden muss oder du erstellst dir selbst ein neues Token. Diese Tokens werden nur benötigt, wenn \"API Autorisierung\" in den Netzwerkeinstellungen aktiviert ist.",
 	"conf_network_tok_cidhead" : "Beschreibung",
 	"conf_network_tok_lastuse" : "Zuletzt genutzt",
-	"conf_network_tok_chars_needed" : "weitere Zeichen benötigt",
 	"conf_network_tok_comment_title" : "Token Beschreibung",
 	"conf_network_createToken_btn" : "Erstelle Token",
 	"conf_network_tok_diaTitle" : "Neues Token erstellt!",
@@ -289,6 +289,7 @@
 	"about_contribute": "Entwickel Hyperion mit uns weiter!",
 	"about_credits": "Einen Dank an alle Entwickler!",
 	"about_3rd_party_licenses": "Drittanbieter Lizenzen",
+	"about_3rd_party_licenses_error": "Wir hatten Probleme beim Laden der Drittanbieter Lizenzen aus dem Internet. <br />Klicke hier um die Datei auf GitHub aufzurufen.",
 	"info_conlost_label_title": "Verbindung zum Hyperion Service unterbrochen!",
 	"info_conlost_label_reason": "Mögliche Ursachen:",
 	"info_conlost_label_reason1": "- Schlechte WLAN Verbindung",

assets/webconfig/i18n/en.json

@@ -44,6 +44,7 @@
 	"general_btn_next" : "Next",
 	"general_btn_back" : "Back",
 	"general_btn_iswitch" : "Switch",
+	"general_chars_needed": "more characters needed",
 	"general_wiki_moreto" : "More informations to \"$1\" at our Wiki",
 	"dashboard_label_intro" : "The dashboard give you a quick overview about the status of Hyperion and show you the latest news of the Hyperion Blog.",
 	"dashboard_infobox_label_title" : "Information",
@@ -191,7 +192,6 @@
 	"conf_network_tok_cidhead" : "Description",
 	"conf_network_tok_lastuse" : "Last use",
 	"conf_network_tok_comment_title" : "Token description",
-	"conf_network_tok_chars_needed" : "more characters needed",
 	"conf_network_createToken_btn" : "Create Token",
 	"conf_network_tok_diaTitle" : "New Token created!",
 	"conf_network_tok_diaMsg" : "Here is your new token which can be used to grant an application access to the Hyperion API. For security reasons you can't view it again so use/note it now.",
@@ -287,7 +287,8 @@
 	"about_resources" : "$1 libraries",
 	"about_contribute" : "Develop Hyperion further with us!",
 	"about_credits" : "Credits to all these developers!",
-	"about_3rd_party_licenses": "View 3rd party licenses",
+	"about_3rd_party_licenses": "3rd party licenses",
+	"about_3rd_party_licenses_error": "We had trouble collecting 3rd party licenses information from web. <br />Please follow this link to the GitHub Resource.",
 	"info_conlost_label_title" : "Lost connection to Hyperion service!",
 	"info_conlost_label_reason" : "Possible reasons:",
 	"info_conlost_label_reason1" : "- Bad WLAN connection",

assets/webconfig/js/content_general.js

@@ -86,6 +86,10 @@ $(document).ready( function() {
 
 	$('#inst_name').off().on('input',function(e) {
 		(e.currentTarget.value.length >= 5) ? $('#btn_create_inst').attr('disabled', false) : $('#btn_create_inst').attr('disabled', true);
+		if(5-e.currentTarget.value.length >= 1 && 5-e.currentTarget.value.length <= 4)
+			$('#inst_chars_needed').html(5-e.currentTarget.value.length + " " + $.i18n('general_chars_needed'))
+		else
+		$('#inst_chars_needed').html("<br />")
 	});
 
 	$('#btn_create_inst').off().on('click',function(e) {

assets/webconfig/js/content_network.js

@@ -185,7 +185,7 @@ $(document).ready( function() {
 	$('#tok_comment').off().on('input',function(e) {
 		(e.currentTarget.value.length >= 10) ? $('#btn_create_tok').attr('disabled', false) : $('#btn_create_tok').attr('disabled', true);
 		if(10-e.currentTarget.value.length >= 1 && 10-e.currentTarget.value.length <= 9)
-			$('#tok_chars_needed').html(10-e.currentTarget.value.length + " " + $.i18n('conf_network_tok_chars_needed'))
+			$('#tok_chars_needed').html(10-e.currentTarget.value.length + " " + $.i18n('general_chars_needed'))
 		else
 		$('#tok_chars_needed').html("<br />")
 	});