Aberrant/static/aberrant.js

function load() {
	//let intervalID = window.setInterval(get_active_torrents_ajax, 20000);
	let intervalID = window.setInterval(update, 5000);
}

function get_active_torrents_ajax() {
	let httpRequest;
	httpRequest = new XMLHttpRequest();
	httpRequest.onreadystatechange = function() {
		if (httpRequest.readyState !== XMLHttpRequest.DONE) { return; }
		if (httpRequest.status !== 200) { return; }
		torrents = JSON.parse(httpRequest.responseText);
		let html_str = '';
		for (let i = 0; i < torrents.length; i++) {
			html_str += '<tr>'
			html_str += '<td class="name">' + torrents[i].name + '</td>';
			html_str += '<td class="total_size_str">' + torrents[i].total_size_str + '</td>';
			html_str += '<td class="state">' + torrents[i].state + '</td>';
			html_str += '<td class="downrate_str">' + torrents[i].downrate_str + '</td>';
			html_str += '<td class="down_percent">' + torrents[i].down_percent + '%</td>';
			html_str += '<td class="eta_str">' + torrents[i].eta_str + '</td>';
			html_str += '<td class="uprate_str">' + torrents[i].uprate_str + '</td>';
			html_str += '<td class="tracker">' + torrents[i].tracker + '</td>';
			html_str += '<td class="rtorrent_id">' + torrents[i].rtorrent_id + '</td>';
			html_str += '</tr>';
		}
		document.getElementById('torrents').children[1].innerHTML = html_str;
	};
	httpRequest.open('GET', get_torrents_uri, true);
	httpRequest.send();
}

var socket = new WebSocket('wss://' + window.location.hostname + ws_uri);
socket.oldSend = socket.send;
socket.send = function(event_title, data) {
		data = JSON.stringify({event: event_title, data: data});
		socket.oldSend.apply(this, [data]);
}
socket.events = {};
socket.onmessage = function(e) {
		let data = JSON.parse(e.data);
		let event = data.event;
		data = data.data;
		if (socket.events[event] === undefined) { return; }
		socket.events[event](data);
}
socket.onclose = function(e) {
	console.log('WebSocket lost connection to server. Re-trying...');
	// TODO: reconnect
}

/* Websocket receive */
socket.events['active_torrents'] = function(data) {
	let table = document.querySelector('#torrents tbody');
	while (table.firstChild) {
		table.removeChild(table.firstChild);
	}
	data.forEach(function(torrent) {
		let template = document.querySelector('#torrent_template');
		let node = document.importNode(template.content, true);
		for (let field of node.children[0].children) {
			field.textContent = torrent[field.className];
		}
		table.appendChild(node);
	});
}
socket.events['tracker_stats'] = function(data) {
	let table = document.querySelector('#tracker_stats tbody');
	while (table.firstChild) {
		table.removeChild(table.firstChild);
	}
	for (let [tracker, values] of Object.entries(data)) {
		let template = document.querySelector('#tracker_template');
		let node = document.importNode(template.content, true);
		node.children[0].children[0].textContent = tracker;
		for (let i = 0; i < values.length; i++) {
			node.children[0].children[i+1].textContent = values[i];
		}
		table.appendChild(node);
	}
}

/* Websocket send */
function get_active_torrents() {
	socket.send('active_torrents', {});
}
function get_tracker_stats() {
	socket.send('tracker_stats', {});
}

/* Helper */
function update() {
	get_active_torrents();
	get_tracker_stats();
}