ardour/livetrax
13
0
Fork 0
Code

WebSockets: update index page to use JS client lib, cleanup code

Browse Source
This commit is contained in:
Luciano Iam 2020-04-11 17:31:34 +02:00 committed by Robin Gareus
parent 01e25a3199
commit 40a03e4cf5
Signed by: rgareus
GPG Key ID: A090BCE02CF57F04
2 changed files with 25 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
share/web_surfaces/index.html
View File

@ -32,7 +32,6 @@
</div>
</div>
</div>
<script src="shared/ardour.js"></script>
<script src="index/main.js"></script>
<script type="module" src="index/main.js"></script>
</body>
</html>

63
share/web_surfaces/index/main.js
View File

@ -16,48 +16,45 @@
* 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/
import { Ardour } from '../shared/ardour.js';
(() => {
const INDEX_RESOURCE = 'index.json';
async function fetchIndex (url) {
const response = await fetch(url);
if (response.status == 200) {
return await response.json();
} else {
throw new Error(`HTTP response status ${response.status}`);
async function main () {
try {
const index = await new Ardour().getAvailableSurfaces();
printIndex(index);
} catch (err) {
printError(`Error loading index: ${err.message}`);
}
}
function buildItem (groupPath, surface) {
const li = document.createElement('li');
li.innerHTML = `<li>
<a href="${groupPath}/${surface.path}/">${surface.name}</a>
<p>${surface.description}</p>
</li>`;
return li;
document.getElementById('loading').style.display = 'none';
}
function printIndex (index) {
for (let group of index) {
const path = group['path'];
const span = document.querySelector(`#${path} span`);
span.innerHTML = group['diskPath'];
let surfaces = group.surfaces;
for (const group of index) {
const surfaces = group.surfaces;
const groupPath = group['path'];
const groupPathSpan = document.querySelector(`#${groupPath} span`);
groupPathSpan.innerHTML = group['diskPath'];
if (surfaces.length > 0) {
const ul = document.querySelector(`#${path} > ul`);
const ul = document.querySelector(`#${groupPath} > ul`);
surfaces.sort((a, b) => a.name.localeCompare(b.name));
for (surface of surfaces) {
ul.appendChild(buildItem(path, surface));
for (const surface of surfaces) {
const li = document.createElement('li');
li.innerHTML = `<li>
<a href="${groupPath}/${surface.path}/">${surface.name}</a>
<p>${surface.description}</p>
</li>`;
ul.appendChild(li);
}
} else {
const p = document.createElement('p');
p.innerHTML = '<p>No surfaces found</p>';
document.getElementById(path).appendChild(p);
document.getElementById(groupPath).appendChild(p);
}
}
@ -70,18 +67,6 @@
error.style.display = 'inline';
}
async function main () {
try {
const indexUrl = `${location.protocol}//${location.host}/${INDEX_RESOURCE}`;
const index = await fetchIndex (indexUrl);
printIndex(index);
} catch (err) {
printError(`Error loading ${INDEX_RESOURCE}: ${err.message}`);
}
document.getElementById('loading').style.display = 'none';
}
main();
})();