ardour/livetrax
13
0
Fork 0
Code

WebSockets: update web index to handle latest index.json format and show surface paths on disk

Browse Source
This commit is contained in:
Luciano Iam 2020-04-11 10:08:54 +02:00 committed by Robin Gareus
parent 9aef431818
commit b7acaf1193
Signed by: rgareus
GPG Key ID: A090BCE02CF57F04
3 changed files with 41 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
share/web_surfaces/index.html
View File

@ -14,16 +14,25 @@
<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 class="surface-list" id="builtin">
<h2>
Built-In
&emsp;
<span class="disk-path"></span>
</h2>
<ul></ul>
</div>
<div class="surface-list">
<h2>User</h2>
<ul id="user"></ul>
<div class="surface-list" id="user">
<h2>
User
&emsp;
<span class="disk-path"></span>
</h2>
<ul></ul>
</div>
</div>
</div>
<script src="shared/ardour.js"></script>
<script src="index/main.js"></script>
</body>
</html>

8
share/web_surfaces/index/main.css
View File

@ -78,4 +78,10 @@ h2 {
.surface-list > ul > li {
margin: 4ex 0;
}
}
.disk-path {
font-family: Monaco, monospace;
font-size: 0.66em;
color: #bbb;
}

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

@ -30,29 +30,36 @@
}
}
function buildItem (group, model) {
function buildItem (groupPath, surface) {
const li = document.createElement('li');
li.innerHTML = `<li>
<a href="${group}/${model.id}/">${model.name}</a>
<p>${model.description}</p>
<a href="${groupPath}/${surface.path}/">${surface.name}</a>
<p>${surface.description}</p>
</li>`;
return li;
}
function printIndex (index) {
['builtin', 'user'].forEach((group) => {
const ul = document.getElementById(group);
let models = index[group];
for (let group of index) {
const path = group['path'];
const span = document.querySelector(`#${path} span`);
span.innerHTML = group['diskPath'];
if (models.length > 0) {
models.sort((a, b) => a.name.localeCompare(b.name));
for (model of models) {
ul.appendChild(buildItem(group, model));
let surfaces = group.surfaces;
if (surfaces.length > 0) {
const ul = document.querySelector(`#${path} > ul`);
surfaces.sort((a, b) => a.name.localeCompare(b.name));
for (surface of surfaces) {
ul.appendChild(buildItem(path, surface));
}
} else {
ul.parentNode.style.display = 'none';
const p = document.createElement('p');
p.innerHTML = '<p>No surfaces found</p>';
document.getElementById(path).appendChild(p);
}
});
}
document.getElementById('index').style.display = 'inline';
}