ardour/ardour
ardour/ardour
13
1
Fork 0
Code Pull Requests Releases Activity

WebSockets: better handle errors in web-based surfaces index

Browse Source
This commit is contained in:
Luciano Iam 2020-04-10 08:35:00 +02:00 committed by Robin Gareus
parent ed427e5704
commit d219cde926
Signed by: rgareus
GPG Key ID: A090BCE02CF57F04
3 changed files with 42 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
share/web_surfaces/css/main.css
View File

@ -35,6 +35,21 @@ a:focus, a:hover {
text-decoration: underline;
}
h1, h2 {
font-weight: normal;
}
h1 {
font-size: 1.8em;
margin: 0 0 2ex 0;
padding-bottom: .8ex;
}
h2 {
font-size: 1.3em;
margin: 2ex 0 1ex 0;
}
#top-bar {
background: #212a30;
padding: 4px;
@ -49,20 +64,7 @@ a:focus, a:hover {
padding: 24px;
}
#content h1, #content h2 {
font-weight: normal;
}
#content h1 {
font-size: 1.8em;
margin: 0 0 2ex 0;
padding-bottom: .8ex;
/*border-bottom: 2px solid #ccc;*/
}
#content h2 {
font-size: 1.3em;
margin: 2ex 0 1ex 0;
#index h2 {
border-bottom: 2px solid #ddd;
}

20
share/web_surfaces/index.html
View File

@ -10,14 +10,18 @@
<img id="logo" src="img/logo.png">
</div>
<div id="content">
<h1>Available Web Surfaces</h1>
<div class="surface-list">
<h2>Built-In</h2>
<ul id="builtin"></ul>
</div>
<div class="surface-list">
<h2>User</h2>
<ul id="user"></ul>
<h2 id="loading">Loading...</h2>
<pre id="error" style="display:none"></pre>
<div id="index" style="display:none">
<h1>Available Web Surfaces</h1>
<div class="surface-list">
<h2>Built-In</h2>
<ul id="builtin"></ul>
</div>
<div class="surface-list">
<h2>User</h2>
<ul id="user"></ul>
</div>
</div>
</div>
<script src="js/main.js"></script>

17
share/web_surfaces/js/main.js
View File

@ -22,6 +22,7 @@
async function fetchIndex (url) {
const response = await fetch(url);
if (response.status == 200) {
return await response.json();
} else {
@ -42,6 +43,7 @@
['builtin', 'user'].forEach((group) => {
const ul = document.getElementById(group);
let models = index[group];
if (models.length > 0) {
models.sort((a, b) => a.name.localeCompare(b.name));
for (model of models) {
@ -51,17 +53,26 @@
ul.parentNode.style.display = 'none';
}
});
document.getElementById('index').style.display = 'inline';
}
function printError (message) {
const error = document.getElementById('error');
error.innerHTML = message;
error.style.display = 'inline';
}
async function main () {
try {
const indexUrl = `${location.protocol}//${location.host}/${INDEX_RESOURCE}`;
const index = await fetchIndex (indexUrl);
printIndex (index);
printIndex(index);
} catch (err) {
const content = document.getElementById('content');
content.innerHTML = `<pre>${INDEX_RESOURCE}: ${err.message}</pre>`;
printError(`Error loading ${INDEX_RESOURCE}: ${err.message}`);
}
document.getElementById('loading').style.display = 'none';
}
main();