flask-practice/app/static/js/ranking.js

const unranked = document.getElementById("unranked-items");
const ranked = document.getElementById("ranked-items");
const ranks = document.getElementById("ranks");
const addItemButton = document.getElementById("add-btn");
const clearButton = document.getElementById("clear-btn");
const lockButton = document.getElementById("lock-rank-btn");
const addRankButton = document.getElementById("add-rank-btn");
const saveButton = document.getElementById("save-rank-btn");
let locked = false;
const unrankedPool = new Sortable(unranked, {
    group: 'items',
    animation: 100,
    sort: false
})

const rankedPool = new Sortable(ranked, {
    group: 'items',
    animation: 100
})

const ranksPool = new Sortable(ranks, {
    group: {
        name: 'items-sorted',
    },
    animation: 100,

    sort: false
})

addItemButton.addEventListener("click", () => {
    const newItem = prompt("Name of new item: ");
    if (newItem) {
        let total = Array.from(unranked.children).length + Array.from(ranked.children).length;
        const li = document.createElement("li");
        li.className = "item";
        li.textContent = newItem;
        li.draggable = true;
        li.id = String(total) + "-item";
        const btn = document.createElement("button");
        btn.className = "delete";
        btn.textContent = "X";
        btn.id = String(total) + "-delete";
        btn.setAttribute("onClick", "deleteItem(id);");
        li.appendChild(btn);
        unranked.appendChild(li);
    }
})

clearButton.addEventListener("click", () => {
    const userConsent = confirm("Are you sure you want to clear all items from Unranked List?");
    if (userConsent) {
        Array.from(unranked.children).forEach((value) => {
            document.getElementById(value.id).remove()
        })
    }
})

lockButton.addEventListener("click", () => {
    if (locked) {
        rankedPool.options.group.name = "items";
        rankedPool.options.filter = ".rank";
        lockButton.innerText = "Lock Ranks";
        Array.from(ranked.children).forEach((value) => {
            if (value.className === "item") {
                value.children[0].hidden = false;
            }
        })
        locked = false;
    } else {
        rankedPool.options.group.name = "items-sorted";
        rankedPool.options.filter = ".item";
        lockButton.innerText = "Unlock Ranks";
        Array.from(ranked.children).forEach((value) => {
            if (value.className === "item") {
                value.children[0].hidden = true;
            }
        })
        locked = true;
    }

})

function deleteItem(id) {
    //console.log("kill me ("+ id + ")")
    const userConsent = confirm("Are you sure?");
    if (userConsent) {
        let liId = id.split("-")[0] + "-item";
        document.getElementById(liId).remove()
        //need to handle the id's naming
        let index = 0;
        Array.from(unranked.children).forEach((value) => {
            value.id = index + "-item";
            value.children[0].id = index + "-delete";
            index++;
        })
        Array.from(ranked.children).forEach((value) => {
            if(value.className === "item"){
            value.id = index + "-item";
            value.children[0].id = index + "-delete";
            index++;
            }
        })
    }
}

/* Basic dragging list options
function dragstart_handler(ev) {
    console.log("dragStart");
    // Change the source element's background color to signify drag has started
    //ev.currentTarget.style.border = "dashed";
    // Add the id of the drag source element to the drag data payload so
    // it is available when the drop event is fired
    ev.dataTransfer.setData("text", ev.target.id);
    // Tell the browser both copy and move are possible
    ev.effectAllowed = "copyMove";
}
function dragover_handler(ev) {
    //console.log("dragOver");
    // Change the target element's border to signify a drag over event
    // has occurred
    ev.currentTarget.style.background = "lightblue";
    ev.preventDefault();
}
function drop_handler(ev) {
    //console.log("Drop");
    ev.preventDefault();
    // Get the id of drag source element (that was added to the drag data
    // payload by the dragstart event handler)
    var id = ev.dataTransfer.getData("text");
    // Only Move the element if the source and destination ids are both "move"
    if (id.includes("src_move") && ev.target.id == "drop-target"){
        ev.target.appendChild(document.getElementById(id));
        ev.target.style.background = "white";
    }
    // Copy the element if the source and destination ids are both "copy"
    if (id == "src_copy" && ev.target.id == "dest_copy") {
        var nodeCopy = document.getElementById(id).cloneNode(true);
        nodeCopy.id = "newId";
        ev.target.appendChild(nodeCopy);
    }
}
function dragend_handler(ev) {
    //console.log("dragEnd");
    // Restore source's border
    //ev.target.style.border = "solid black";
    ev.target.style.background = "white";
} */