const Endpoint = '/scopes/status'; const Interval = 1000; let updateTimeoutId = null; function updateScopeState() { if (updateTimeoutId) { clearTimeout(updateTimeoutId); } updateTimeoutId = setTimeout(() => { updateTimeoutId = null; fetch(Endpoint) .then(response => response.json()) .then((data) => { updateScopes(data.scope); }) .catch((error) => { console.error(error); }) .finally(() => { updateScopeState(); }); }, Interval); } function updateScopes(scopes) { scopes.forEach((scope) => { if (scope.state) { const scopeId = `${scope.name}_${scope.id}`; const scopeEl = document.querySelector(`#${scopeId}`); const stateCls = ['state--on', 'state--off']; scopeEl.classList.remove(...stateCls); const stateClass = `state--${scope.state}`; scopeEl.classList.add(stateClass); const iconEl = document.querySelector(`#${scopeId} .nav-icon`); const iconCls = ['fas', 'far', 'text-danger', 'text-success']; iconEl.classList.remove(...iconCls); let newIconCls = []; if (scope.state === 'on') { newIconCls.push('fas', 'text-success'); } else { newIconCls.push('far', 'text-danger'); } iconEl.classList.add(...newIconCls); } if (scope.scope) { // This is a level so we should update all childs updateScopes(scope.scope); } }); } function unfoldAll() { $('#scopes .collapse').collapse('show'); }