flask-server/kinolist/templates/pages/manage.js

const upload = document.getElementById("upload");
const tbody = document.getElementById("tbody");
const main = document.getElementsByTagName("main")[0];
const choice = document.getElementById("choice");
const textInput = document.getElementById("input-text");

const choiceList = document.createElement("div");
choiceList.classList.add("title-list");
const transpBackground = document.createElement("div");
transpBackground.classList.add("transparent-background");

const extraLine = document.createElement("tr");
extraLine.id = "end";
extraLine.innerHTML = `<td colspan=7><button onclick=changePosition("end")>Here</td>`;

function getText(elem) { // I don't know what I am doing with this function, it may not be portable
    if (elem.nodeType == Node.TEXT_NODE) {
	return elem.data;
    } else if (elem.nodeName === "BR") {
	return "";
    } else {
	let res = "";
	const l = elem.childNodes;
	for (const i of l) {
	    res = res + getText(i);
	}
	if (elem.nodeName === "DIV") res = res + "\n";
	return res;
    }
}

{
    let res = undefined; // sets the receiver of the file
    let rej = undefined;

    function newFile(elem) { // send the file to whoever wants the file
	if (elem.files.length = 1) {
	    res(elem.files[0]);
	}
	else rej();
    }

    function getFile() { // open the upload form, and ask to send the file asynchronously
	upload.click();
	return new Promise((resolve, reject) => {
	    res = resolve;
	    rej = reject;
	})
    }
}

async function newEntry() {
    const form = new FormData();
    const value = choice.value;

    form.append("new", true);
    if (value === "title") {
	form.append("choice", "title");
	form.append("title", textInput.value)
    } else if (value === "imdbid") {
	form.append("choice", "imdbid");
	form.append("imdbid", textInput.value);
    } else if (value === "blank") {
	form.append("choice", "blank");
    } else { return; }
    const html = await (await fetch("/manage", {method: "POST",
						body: form})).text();
    if (value === "title") {
	if (html === "") {
	    alert("Problem requesting title")
	} else {
	    choiceList.innerHTML = html;
	    main.appendChild(choiceList);
	    main.appendChild(transpBackground);
	}
    } else if (html === "") {
	alert("Movie not found");
    } else tbody.innerHTML = tbody.innerHTML + html;
}

async function makeChoice() {
    const radios = choiceList.getElementsByTagName("input");
    for (radio of radios) {
	if (radio.checked) {
	    const form = new FormData();
	    form.append("new", true);
	    form.append("choice","imdbid");
	    form.append("imdbid", radio.parentNode.parentNode.id);
	    const html = await (await fetch("/manage", {method: "POST",
							body: form})).text();
	    tbody.innerHTML = tbody.innerHTML + html;
	    cancelChoice();
	    return;
	}
    }
}

function cancelChoice() {
    main.removeChild(choiceList);
    main.removeChild(transpBackground);
}

{
    let moveStarted = false;
    let source;

    function changePosition(id) {
	const list = tbody.getElementsByTagName("tr");
	if (moveStarted) {
	    moveStarted = false;
	    const tr1 = document.getElementById(source);
	    const tr2 = document.getElementById(id);
	    tbody.insertBefore(tr1, tr2);
	    tbody.removeChild(extraLine);
	    for (const tr of list) {
		tr.children[0].children[0].innerText="Move";
		if (tr.id == source) {
		    tr.classList.remove("selected");
		}
	    }
	    const form = new FormData();
	    form.append("id", id);
	    form.append("move", source);
	    fetch("/manage", {method: "POST",
			      body: form});
	} else {
	    moveStarted = true;
	    source=id;
	    for (const tr of list) {
		tr.children[0].children[0].innerText="Here";
		if (tr.id == id) {
		    tr.classList.add("selected");
		}
	    }
	    tbody.appendChild(extraLine);
	}
    }
}

function changeTitle(elem, id) {
    const title = getText(elem).trim();
    const form = new FormData();
    form.append("id", id);
    form.append("title", title);
    fetch("/manage", {method: "POST",
		      body: form});
}

function to_int(elem) {
    let value = "";
    const oldstring = elem.innerHTML;
    for (let c of oldstring) {
	if (c >= "0" && c <= 9) value = value + c;
    }
    while (value.length > 1 && value[0] === "0") { value = value.substring(1); }
    elem.innerHTML = value;
    return value;
}

function changeYear(elem, id) {
    const year = to_int(elem);
    const form = new FormData();
    form.append("id", id);
    form.append("year", year);
    fetch("/manage", {method: "POST",
		      body: form});
}

async function changePoster(elem, id) {
    poster = await getFile();
    const form = new FormData();
    form.append("id", id);
    form.append("poster", poster);
    file = await(await (fetch("/manage", {method: "POST",
					  body: form}))).text();
    elem.getElementsByTagName("img")[0].src = "/posters/" + file;
}

async function changePlot(elem, id) {
    const plot = getText(elem).trim();
    const form = new FormData();
    form.append("id", id);
    form.append("plot", plot);
    fetch("/manage", {method: "POST",
		      body: form});
}

function changeWatched(elem, id) {
    let watched;
    if (elem.innerText.trim() === "✘") {
	elem.innerHTML = "✔";
	elem.removeAttribute("colspan");
	e = elem.nextElementSibling;
	e.removeAttribute("hidden");
	e.nextElementSibling.removeAttribute("hidden");
	watched = 1;
    } else {
	elem.innerHTML = "✘";
	elem.setAttribute("colspan", 3);
	e = elem.nextElementSibling;
	e.setAttribute("hidden", "");
	e.nextElementSibling.setAttribute("hidden", "");
	watched = 0;
    }
    const form = new FormData();
    form.append("id", id);
    form.append("watched", watched);
    fetch("/manage", {method: "POST",
		      body: form});
}

function changeWatchDate(elem, id) {
    const form = new FormData();
    form.append("id", id);
    form.append("watchDate", elem.getElementsByTagName("input")[0].value);
    fetch("/manage", {method: "POST",
		      body: form});
}

function changeScore(elem, id) {
    const score = to_int(elem);
    const form = new FormData();
    form.append("id", id);
    form.append("score", score);
    fetch("/manage", {method: "POST",
     		      body: form});
}

function deleteRow(id) {
    if (confirm("Are you sure you want to delete this entry?")) {
	const line = document.getElementById(id);
	line.parentNode.removeChild(line);
	const form = new FormData();
	form.append("id", id);
	form.append("delete", true);
	fetch("/manage", {method: "POST",
			  body: form});
    }
}