WebSockets: better handle errors in web-based surfaces index
This commit is contained in:
parent
ed427e5704
commit
d219cde926
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user