isbn-sort/isbn_sort/static/dynamicUpdate.js

// change the color of a row for 2 seconds and clear it to normal
let blink = (elem, color) => {
    // change the color of each td
    let cells = elem.getElementsByTagName("td");
    for (let j = 0; j < cells.length; j++) {
        cells[j].style.backgroundColor = color;
    }
    // wait 2s and clear the color
    setTimeout(() => {
        for (let j = 0; j < cells.length; j++) {
            cells[j].style.backgroundColor = "";
        }
    }, 2000);
}


function viewAddBook(book) {
    for (let key in book) {
        if (book[key] === null) {
            book[key] = "None";
        }
    }

    let p = (arg) => {
        if (arg === "None") {
            return '<p class="red">';
        }
        return '<p>';
    }
    let ps = (arg) => {
        if (arg == 0) return p("None");
        if (arg == 1) return '<p style="color=var(--color-orange);">'
        else return '<p style="color=var(--color-blue);">';
    }

    let booksTableBody = document.getElementById("books-table").getElementsByTagName('tbody')[0];
    
    var newRow = booksTableBody.insertRow(1);

    newRow.innerHTML = '<tr>'+
    '<td>'+book.isbn+'</td>'+
    '<td>'+p(book.title)+book.title+'</p></td>'+
    '<td>'+p(book.author)+book.author+'</p></td>'+
    '<td>'+ps(book.status)+book.status_text+'</p></td>'+
    '<td>'+p(book.owner)+book.owner+'</p></td>'+
    '<td>'+p(book.category)+book.category+'</p></td>'+
    '<td>'+
    '    <button class="action" onclick="openEditBookDialog('+book.isbn+')">✏️</button>'+
    '    <button class="action" onclick="openDeleteBookDialog('+book.isbn+')">🗑️</button>'+
    '</td>'+
    '</tr>';

    blink(newRow, "var(--color-action)");
}

function viewUpdateBook(book) {
    for (let key in book) {
        if (book[key] === null) {
            book[key] = "None";
        }
    }

    let p = (arg) => {
        if (arg === "None") {
            return '<p class="red">';
        }
        return '<p>';
    }
    let pc = (arg) => { if (arg > 1) return p("None"); else return p(arg); }

    let booksTableBody = document.getElementById("books-table").getElementsByTagName('tbody')[0];
    
    let rows = booksTableBody.getElementsByTagName("tr");
    
    for (let i = 1; i < rows.length; i++) {
        let cells = rows[i].getElementsByTagName("td");
        
        if (cells[0].innerText == book.isbn) {
            cells[1].innerHTML = p(book.title)+book.title+'</p>';
            cells[2].innerHTML = p(book.author)+book.author+'</p>';
            cells[3].innerHTML = p(book.publish_date)+book.publish_date+'</p>';
            cells[4].innerHTML = p(book.publisher)+book.publisher+'</p>';
            cells[5].innerHTML = p(book.category)+book.category+'</p>';
            cells[6].innerHTML = pc(book.count)+book.count+'</p>';

            blink(rows[i], "var(--color-action)");
            return;
        }
    }
}

function viewDeleteBook(book) {
    let booksTableBody = document.getElementById("books-table").getElementsByTagName('tbody')[0];
    
    let rows = booksTableBody.getElementsByTagName("tr");
    
    for (let i = 1; i < rows.length; i++) {
        let cells = rows[i].getElementsByTagName("td");
        
        if (cells[0].innerText == book.isbn) {
            let row = rows[i];
            blink(row, "#f1acbb");
            setTimeout(() => {
                booksTableBody.removeChild(row);
            }, 2000);
        }
    }
}


const listener = new EventSource("/app/listen");

listener.onmessage = (e) => {
    let data = JSON.parse(e.data);
    
    switch (data.type) {
        case "pong":
            console.log("pong!");
            break;
        case "add_book":
            viewAddBook(data.book);
            break;
        case "update_book":
            viewUpdateBook(data.book);
            break;
        case "delete_book":
            viewDeleteBook(data.book);
            break;
        default:
            console.log("Unexpected response from SSE:", data);
    }
};