asterisk-queue-manager/js/app.js

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);