var baseurl = (window.location.origin); function get_data() { var xhr = new XMLHttpRequest(); xhr.open('GET', baseurl + '/php/ami_get.php', true); xhr.onreadystatechange = function() { if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // // SIPpeers // var sippeers = response.sippeers; var dom_sippeers = document.getElementById('peers'); // Clear ul dom_sippeers.innerHTML = ''; for(var item in sippeers) { // Create li var node = document.createElement('li'); // Add online or offline class if(sippeers[item] == '0') { node.classList.add('offline'); } if(sippeers[item] == '1') { node.classList.add('online'); } // It's a box node.classList.add('box'); // Add text var text = document.createTextNode(item); node.appendChild(text); // Add attributes node.setAttribute('section', 'sippeers'); node.setAttribute('value', item); // Make it clickable node.addEventListener('click', function() { var section = this.getAttribute('section'); var value = this.getAttribute('value'); ami_set(section, value); }); // Add li to ul dom_sippeers.appendChild(node); } // // QueueMembers // var queuemembers = response.queuemembers; var dom_queuemembers = document.getElementById('queuemembers'); // Clear ul dom_queuemembers.innerHTML = ''; // Asterisk sorts the members the wrong way round queuemembers.reverse(); for(var item in queuemembers) { // Create li var node = document.createElement('li'); // Queue members are always green (TODO: really?) node.classList.add('online'); // It's a box node.classList.add('box'); // Add text var text = document.createTextNode(queuemembers[item]); node.appendChild(text); // Add attributes node.setAttribute('section', 'queuemembers'); node.setAttribute('value', queuemembers[item]); // Make it clickable node.addEventListener('click', function() { var section = this.getAttribute('section'); var value = this.getAttribute('value'); ami_set(section, value); }); // Add li to ul dom_queuemembers.appendChild(node); } } }; xhr.send(); } function ami_set(section, value) { var xhr = new XMLHttpRequest(); xhr.open('GET', baseurl + '/php/ami_set.php?s=' + section + '&v=' + value, true); xhr.send(null); get_data(); } // Run it once, because setInterval executes it _after_ the delay get_data(); // Run every second setInterval(get_data, 1000);