Skip to content

Commit f3aa097

Browse files
fquirinfquirin
committed
updated new start-page once more with satus checks
1 parent a2aabcd commit f3aa097

File tree

1 file changed

+202
-11
lines changed

1 file changed

+202
-11
lines changed

‎sepia-custom-bundle-folder/nginx/www/index.html‎

Lines changed: 202 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
align-items: center;
3737
text-align: center;
3838
width: 100%;
39-
max-width: 1280px;
39+
/*max-width: 1280px;*/
4040
max-height: 100vh;
4141
padding: 16px;
4242
overflow: auto;
@@ -63,23 +63,44 @@
6363
align-items: stretch;
6464
max-width: 480px;
6565
}
66-
.help-links a {
66+
.help-links a,
67+
.help-links button {
6768
padding: 8px 16px;
6869
margin: 8px;
6970
background: #000;
7071
text-decoration: none;
7172
color: #ceff1a;
7273
text-align: center;
74+
border: 0;
7375
border-radius: 8px;
7476
box-shadow: 0px 1px 0px 1px #ccc;
7577
/*min-width: 300px;*/
78+
font-size: 16px;
79+
cursor: pointer;
7680
}
7781
.sections-group {
7882
display: flex;
7983
flex-wrap: wrap;
8084
justify-content: center;
8185
align-items: flex-start;
8286
}
87+
.subgroup {
88+
width: 100%;
89+
margin: 4px 0;
90+
display: flex;
91+
flex-wrap: wrap;
92+
justify-content: space-between;
93+
}
94+
.subgroup > * {
95+
margin: 4px 0;
96+
}
97+
.subgroup label {
98+
margin-right: 4px;
99+
font-weight: bold;
100+
}
101+
.subgroup span.failed {
102+
color: #f35;
103+
}
83104
.card-section {
84105
display: flex;
85106
flex-wrap: wrap;
@@ -149,7 +170,7 @@
149170
position: relative;
150171
width: 90%;
151172
height: auto;
152-
max-width: 480px;
173+
max-width: 512px;
153174
max-height: 85%;
154175
margin-bottom: 7%;
155176
border-radius: 8px;
@@ -215,6 +236,20 @@
215236
justify-content: center;
216237
align-items: center;
217238
}
239+
.status-box {
240+
padding: 0 32px 32px 32px;
241+
color: #eee;
242+
overflow: auto;
243+
}
244+
.status-box h3 {
245+
color: #ceff1a;
246+
}
247+
.status-box label {
248+
color: #4ec48f;
249+
}
250+
.status-box li {
251+
margin: 8px 0;
252+
}
218253
.info-box {
219254
display: flex;
220255
flex-direction: column;
@@ -243,19 +278,37 @@
243278
.info-box a {
244279
color: #4ec48f;
245280
}
281+
.help-button {
282+
display: inline-flex;
283+
background: #eee;
284+
color: #000;
285+
border-radius: 15px;
286+
width: 19px;
287+
height: 19px;
288+
padding: 0;
289+
margin: 0 4px;
290+
text-decoration: none;
291+
font-size: 15px;
292+
justify-content: center;
293+
align-items: center;
294+
}
246295
</style>
247296
</head>
248297
<body>
249298
<div class="page">
250299
<h2>Welcome to your SEPIA Server</h2>
251300
<div class="sepia-logo" onclick="openPopup('sepia');"></div>
301+
<h3>Checks:</h3>
302+
<div class="help-links">
303+
<button onclick="runStatusCheck();">Status Check</button>
304+
</div>
252305
<h3>Places to visit:</h3>
253306
<div class="sections-group">
254307
<section id="sepia-client-section" class="card-section" onclick="openPopup('app');"></section>
255308
<section id="sepia-control-hub-section" class="card-section" onclick="openPopup('cHub');"></section>
256309
<section id="sepia-stt-server-section" class="card-section" onclick="openPopup('sttServer');"></section>
257310
</div>
258-
<h3>Info and help:</h3>
311+
<h3>Info and Help:</h3>
259312
<div class="help-links">
260313
<a href='https://github.com/SEPIA-Framework/sepia-docs/wiki' target=_blank>SEPIA Wiki (Docs)</a>
261314
<a href='https://github.com/SEPIA-Framework/sepia-docs/issues' target=_blank>Ask a question</a>
@@ -313,22 +366,159 @@ <h3>Info and help:</h3>
313366
function openPopup(contentId){
314367
clearTimeout(popupBlendTimer);
315368
infoPopupContent.innerHTML = "";
316-
infoPopupContent.appendChild(infoContent[contentId]);
317-
infoPopupOverlay.style.display = "";
318-
var openLink = infoLinks[contentId];
319-
if (openLink){
320-
infoPopupActions.style.display = "";
321-
infoPopupOpenBtn.href = openLink;
369+
if (typeof contentId == "string"){
370+
//"places" button content
371+
infoPopupContent.appendChild(infoContent[contentId]);
372+
infoPopupOverlay.style.display = "";
373+
var openLink = infoLinks[contentId];
374+
if (openLink){
375+
infoPopupActions.style.display = "";
376+
infoPopupOpenBtn.href = openLink;
377+
}else{
378+
infoPopupActions.style.display = "none";
379+
infoPopupOpenBtn.href = "";
380+
}
322381
}else{
382+
//direct content
383+
infoPopupOverlay.style.display = "";
323384
infoPopupActions.style.display = "none";
324-
infoPopupOpenBtn.href = "";
385+
infoPopupContent.appendChild(contentId);
325386
}
326387
popupBlendTimer = setTimeout(function(){
327388
infoPopupActions.classList.add("active");
328389
infoPopupOverlay.classList.add("open");
329390
}, 0);
330391
}
331392

393+
//info
394+
var serverLinks = {
395+
hostname: location.origin + "/sepia",
396+
assistCheck: location.origin + "/sepia/assist/validate",
397+
sttUrl: location.origin + "/sepia/stt",
398+
sttCheck: location.origin + "/sepia/stt/ping"
399+
}
400+
function runStatusCheck(){
401+
var content = document.createElement("div");
402+
content.className = "status-box";
403+
var mainServerHostname = document.createElement("div");
404+
mainServerHostname.innerHTML = "<h3>SEPIA-Home Server (Required)</h3>";
405+
var mainServerHostnameInfo = buildSubgroupForStatus(mainServerHostname, "Hostname (for client)", serverLinks["hostname"]);
406+
var mainServerCheck = document.createElement("div");
407+
var mainServerCheckInfo = buildSubgroupForStatus(mainServerCheck, "Status", "testing...");
408+
var sttServerUrl = document.createElement("div");
409+
sttServerUrl.innerHTML = "<h3>STT-Server (Optional)</h3>";
410+
var sttServerUrlInfo = buildSubgroupForStatus(sttServerUrl, "URL (for client)", serverLinks["sttUrl"]);
411+
var sttServerCheck = document.createElement("div");
412+
var sttServerCheckInfo = buildSubgroupForStatus(sttServerCheck, "Status", "testing...");
413+
var setupComments = document.createElement("div");
414+
setupComments.innerHTML = "<h3>Comments</h3>";
415+
var setupCommentsInfo = document.createElement("div"); //buildSubgroupForStatus(setupComments, undefined, "Running tests, please wait...");
416+
setupCommentsInfo.textContent = "Running tests, please wait...";
417+
setupComments.appendChild(setupCommentsInfo);
418+
content.appendChild(mainServerHostname);
419+
content.appendChild(mainServerCheck);
420+
content.appendChild(sttServerUrl);
421+
content.appendChild(sttServerCheck);
422+
content.appendChild(setupComments);
423+
openPopup(content);
424+
//run checks
425+
//-MAIN
426+
var assistCheckProm = httpGet(serverLinks.assistCheck).then(function(json){
427+
mainServerCheckInfo.textContent = "Success";
428+
return {check: true, label: "Main server", info: ("Main server version: " + json.version)};
429+
})
430+
.catch(function(err){
431+
mainServerCheckInfo.textContent = "Error: " + (err.message || err.name);
432+
mainServerCheckInfo.classList.add("failed");
433+
return {check: false, label: "Main server", helpLink: "https://github.com/SEPIA-Framework/sepia-installation-and-setup",
434+
info: "Make sure the SEPIA-Home server is running."};
435+
});
436+
//-STT
437+
var sttCheckProm = httpGet(serverLinks.sttCheck).then(function(json){
438+
sttServerCheckInfo.textContent = "Success";
439+
return {check: true, label: "STT server", info: ("STT-Server version: " + json.version)};
440+
})
441+
.catch(function(err){
442+
sttServerCheckInfo.textContent = "Error: " + (err.message || err.name);
443+
sttServerCheckInfo.classList.add("failed");
444+
return {check: false, label: "STT server", helpLink: "https://github.com/SEPIA-Framework/sepia-stt-server#how-to-use-with-sepia-client",
445+
info: "To use the STT-Server make sure it is installed and running and add the correct URL to your SEPIA-Home proxy config (e.g. Nginx)."};
446+
});
447+
//-SSL
448+
var sslCheckProm = new Promise(function(resolve, reject){
449+
if (location.hostname == "localhost" || location.protocol == "https:"){
450+
resolve({check: true, label: "SSL check", info: "Origin is secure (SSL active)."});
451+
}else{
452+
resolve({check: false, label: "SSL check", helpLink: "https://github.com/SEPIA-Framework/sepia-docs/wiki/SSL-for-your-Server#securing-your-server-basic",
453+
info: "Origin is NOT secure. Please add self-signed or official SSL certificates (e.g. via Nginx)."});
454+
}
455+
});
456+
Promise.all([assistCheckProm, sttCheckProm, sslCheckProm]).then((results) => {
457+
console.log("Checks done. Results:", results); //DEBUG
458+
var resHtml = document.createElement("ul");
459+
resHtml.style.cssText = "margin: 0; padding-left: 28px;";
460+
results.forEach(function(res){
461+
var resItem = document.createElement("li");
462+
resItem.textContent = res.info;
463+
if (res.helpLink){
464+
var hl = document.createElement("a");
465+
hl.className = "help-button";
466+
hl.href = res.helpLink;
467+
hl.target = "_blank";
468+
hl.textContent = "?";
469+
resItem.appendChild(hl);
470+
}
471+
resHtml.appendChild(resItem);
472+
});
473+
setupCommentsInfo.innerHTML = "";
474+
setupCommentsInfo.appendChild(resHtml);
475+
});
476+
}
477+
function buildSubgroupForStatus(parentEle, labelName, infoText){
478+
var sub = document.createElement("div");
479+
sub.className = "subgroup";
480+
if (labelName){
481+
var label = document.createElement("label");
482+
label.textContent = labelName + ":";
483+
sub.appendChild(label);
484+
}
485+
if (infoText){
486+
var info = document.createElement("span");
487+
info.textContent = infoText;
488+
sub.appendChild(info);
489+
}
490+
parentEle.appendChild(sub);
491+
return info;
492+
}
493+
function httpGet(url, timeout){
494+
var to = timeout || 8000;
495+
var toController = new AbortController();
496+
var isTimeout = false;
497+
var timerId = setTimeout(function(){ isTimeout = true; toController.abort(); }, to);
498+
return fetch(url, {
499+
signal: toController.signal
500+
})
501+
.then(function(response){
502+
clearTimeout(timerId);
503+
if (response.ok){
504+
console.log("httpGet", url, response); //DEBUG
505+
return response.json();
506+
}else{
507+
throw {name: "GetError", message: response.statusText, code: status};
508+
}
509+
})
510+
.catch(function(err){
511+
clearTimeout(timerId);
512+
console.error("httpGet error for", url, err, isTimeout);
513+
if (isTimeout){
514+
throw {name: "TimeoutError", message: "Timeout"};
515+
}else{
516+
throw err;
517+
}
518+
});
519+
}
520+
521+
//places
332522
var clientSec = document.getElementById("sepia-client-section");
333523
makeCard(clientSec, "app.png", "SEPIA Client App");
334524

@@ -356,6 +546,7 @@ <h3>Info and help:</h3>
356546
content.appendChild(textEle);
357547
return content;
358548
}
549+
359550
var infoLinks = {
360551
app: location.origin + "/sepia/assist/app/index.html",
361552
cHub: location.origin + "/sepia/assist/tools/index.html",

0 commit comments

Comments
 (0)