diff --git a/www/index.html b/www/index.html index 4e4f9992..a3015acf 100644 --- a/www/index.html +++ b/www/index.html @@ -121,28 +121,49 @@ function reload() { const url = new URL('api/streams', location.href); + const checkboxStates = {}; + tbody.querySelectorAll('input[type="checkbox"][name]').forEach(checkbox => { + checkboxStates[checkbox.name] = checkbox.checked; + }); fetch(url, {cache: 'no-cache'}).then(r => r.json()).then(data => { - tbody.innerHTML = ''; + const existingIds = Array.from(tbody.querySelectorAll('tr')).map(tr => tr.dataset['id']); + const fetchedIds = []; for (const [key, value] of Object.entries(data)) { const name = key.replace(/[<">]/g, ''); // sanitize + fetchedIds.push(name); + + let tr = tbody.querySelector(`tr[data-id="${name}"]`); const online = value && value.consumers ? value.consumers.length : 0; const src = encodeURIComponent(name); - const links = templates.map(link => { - return link.replace('{name}', src); - }).join(' '); + const links = templates.map(link => link.replace('{name}', src)).join(' '); + + if (!tr) { + tr = document.createElement('tr'); + tr.dataset['id'] = name; + tbody.appendChild(tr); + } - const tr = document.createElement('tr'); - tr.dataset['id'] = name; + const isChecked = checkboxStates[name] ? 'checked' : ''; tr.innerHTML = - `` + + `` + `${online} / info` + `${links}`; - tbody.appendChild(tr); } + + // Remove old rows + existingIds.forEach(id => { + if (!fetchedIds.includes(id)) { + const trToRemove = tbody.querySelector(`tr[data-id="${id}"]`); + tbody.removeChild(trToRemove); + } + }); }); } + // Auto-reload + setInterval(reload, 1000); + const url = new URL('api', location.href); fetch(url, {cache: 'no-cache'}).then(r => r.json()).then(data => { const info = document.querySelector('.info');