gloader/assets/downloads.js

var myCheckedData = [];
var mySavedData = [];

function deleteDownload(data){
	var xhr = new XMLHttpRequest();
	xhr.open("DELETE", "/delete");
	xhr.setRequestHeader("Content-Type", "application/javascript");
	xhr.send(JSON.stringify(data));
}

function setDownload(data){
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "/set");
	xhr.setRequestHeader("Content-Type", "application/javascript");
	xhr.send(JSON.stringify(data));
}

function addDownload(data) {
	var xhr = new XMLHttpRequest();
	xhr.open("POST", "/add");
	xhr.setRequestHeader("Content-Type", "application/javascript");
	xhr.send(JSON.stringify(data));
}

function filename(value,download) {
	const path = (download.subdir + '/' + download.filename).replace(/^\//, "");
	ret = $("<span></span>").text(path).attr("title", download.filepath);
	if (download.status == "Complete") {
		ret = $('<a></a>').attr("href", 'get/' + path).text(path).attr("title", download.filepath);
	}
	return ret.prop("outerHTML");
}
function status(value,download) {
	return $('<span></span>').addClass(value).text(value).prop('outerHTML') + $("<span></span>").addClass(value).text(download.error).prop('outerHTML');
}

function actions(value,download) {
	var action = $("<div></div>").addClass("dropdown");
	var button = $("<button>Actions</button>").addClass("btn btn-secondary dropdown-toggle").attr("type", "button").attr("data-toggle", "dropdown");
	var menu = $("<div></div>").addClass("dropdown-menu");

	var del = $('<a href="#">Delete</a>').addClass("dropdown-item action-delete");
	var resume = $('<a href="#">Resume</a>').addClass("dropdown-item action-resume");
	var stop = $('<a href="#">Stop</a>').addClass("dropdown-item action-stop");
	var retrieve = "";
	if (download.status == "Complete") {
		retrieve = $('<a>retrieve</a>').addClass("dropdown-item action-retrieve").attr("href", 'get/' + (download.subdir + '/' + download.filename).replace(/^\//, "")).attr("title", download.filepath);
	}

	menu.append(del, resume, stop, retrieve);
	action.append(button, menu);
	return action.prop('outerHTML');
}

function progress(value,download) {
	if (download.status == "Complete") {
		download.progress = 100;
	}
	var progress = $("<div></div>").addClass("progress");
	var bar = $("<div></div>").addClass("progress-bar text-dark").css("width", (download.progress ?? "0") + '%')
	.text((download.progress ?? "0") + '%');
	progress.append(bar)
	return progress.prop('outerHTML');
}

function actionsbulk() {
	var action = $("<div></div>").addClass("dropdown").attr("title", "Actions");
	var button = $("<button>Actions</button>").addClass("btn btn-secondary dropdown-toggle").attr("type", "button").attr("data-toggle", "dropdown");
	var menu = $("<div></div>").addClass("dropdown-menu");

	var del = $('<a href="#">Delete</a>').addClass("dropdown-item action-delete").attr("onclick", "bulkDelete();");
	var resume = $('<a href="#">Resume</a>').addClass("dropdown-item action-resume").attr("onclick", "bulkResume();");
	var stop = $('<a href="#">Stop</a>').addClass("dropdown-item action-stop").attr("onclick", "bulkStop();");
	var retrieve = $('<a href="#">retrieve</a>').addClass("dropdown-item action-retrieve").attr("onclick", "bulkRetrieve();");

	menu.append(del, resume, stop, retrieve);
	action.append(button, menu);
	return action.prop('outerHTML');
}

var actionEvents = {
	'click .action-delete': function (e, value, download, index) {
		if (confirm("confirm deletion of " + download.filename)) {
			deleteDownload({
				requests: [{
					url: download.url
				}],
				history: IsHistory,
			});
		}
	},
	'click .action-resume': function(e, value, download, index) {
		setDownload([{
			url: download.url,
			status: "Queue",
			priority: download.priority
		}]);
	},
	'click .action-stop': function(e, value, download, index) {
		setDownload([{
			url: download.url,
			status: "Stop",
			priority: download.priority
		}]);
	},
}
function buttons () {
	return {
		actions: {
			html:actionsbulk,
		},
		checkAll: {
			icon: "fa-check-square",
			text: "Check All",
			attributes: {title: "Check All"},
			event:{
				'click': function() {
					var table = $("#table");
					var downloads = table.bootstrapTable('getData', {useCurrentPage: false, includeHiddenRows: true, unfiltered: false});
					for (var d of downloads){
						d.checked = true;
					}
					table.bootstrapTable('prepend', {});
					table.bootstrapTable('remove', { field: '$index', values: [0]});
				}
			}
		},
		refresh: {
        event: function() {$('#table').bootstrapTable('refresh',{silent:true});},
      },
	};
}
function bulkResume() {
	var selectedDownloads = $("#table").bootstrapTable('getSelections');
	for (var d of selectedDownloads){
		d.status = "Queue";
	}
	setDownload(selectedDownloads);
}
function bulkStop() {
	var selectedDownloads = $("#table").bootstrapTable('getSelections');
	for (var d of selectedDownloads){
		d.status = "Stop";
	}
	setDownload(selectedDownloads);
}
function bulkDelete() {
	var selectedDownloads = $("#table").bootstrapTable('getSelections');
	if (confirm("confirm deletion of:\n" + selectedDownloads.map(d => d.filename).join('\n'))) {
		deleteDownload({
			requests: selectedDownloads,
			history: IsHistory,
		});
	}
}

function bulkRetrieve(){
	var selectedDownloads = $("#table").bootstrapTable('getSelections');
	formPostJSON(selectedDownloads, "/get/", "discard")
}

// o must be an object or an array of objects
// discardFieldName must be a valid json field name
// endpoint must accept Content-Type: text/plain
// awesome hack taken from https://systemoverlord.com/2016/08/24/posting-json-with-an-html-form.html
function formPostJSON(o, url, discardFieldName='discard') {
	var form = $("<form></form>").attr("method", "POST").attr("enctype", "text/plain").attr("action", url);
	var json;
	if (Array.isArray(o)) {
		var name = JSON.stringify(o).slice(0,-2) +',"' + discardFieldName + '":"';
		var value = '"}]';
	} else {
		var name = JSON.stringify(o).slice(0,-1) +',"'+ discardFieldName + '":"';
		var value = '"}';
	}
	var input = $("<input></input>").attr("name", name).attr("value", value).attr("type", "hidden");
	form.append(input);
	$(document.body).append(form);
	form.submit();
	form.remove();
}

function SaveChecked() {
	myCheckedData = $("#table").bootstrapTable('getSelections').map( d => d.url );
	mySavedData = $("#table").bootstrapTable('getData', {useCurrentPage: false, includeHiddenRows: true, unfiltered: true});
}

function LoadChecked(downloads) {
	// console.log("data loaded");
	var loaded = [];
	for (var i = downloads.length - 1; i >= 0; i--) {
		if (myCheckedData.includes(downloads[i].url)) {
			downloads[i].checked = true;
			loaded.push(downloads[i]);
		}
	}
	mySavedData = $("#table").bootstrapTable('getData', {useCurrentPage: false, includeHiddenRows: true, unfiltered: true});
					$('#table').bootstrapTable('prepend', {});
					$('#table').bootstrapTable('remove', { field: '$index', values: [0]});
	// console.log(loaded);
}

function LoadSaved() {
	$('#table').bootstrapTable('load', mySavedData);
}

document.addEventListener("DOMContentLoaded", function(event) {
	$('#table').bootstrapTable({
		onCheck: SaveChecked,
		onCheckAll: SaveChecked,
		onCheckSome: SaveChecked,
		onUncheck: SaveChecked,
		onUncheckAll: SaveChecked,
		onUncheckSome: SaveChecked,
		onLoadSuccess: LoadChecked,
		onLoadError: LoadSaved,
	});
});