fully (?) working dynamic update

isbn_sort/app.py

@@ -43,7 +43,7 @@ def submit_isbn():
 
     print("Got ", book)
     if isbn_db.add_book(book) == "duplicate":
-        announce_book(book, msg_type="update_book")
+        announce_book(isbn_db.get_book(book.isbn), msg_type="update_book")
         return f"{book.title} ajouté (plusieurs occurrences)"
     announce_book(book)
     return f"{book.title} ajouté"

isbn_sort/static/dynamicUpdate.js

@@ -1,8 +1,112 @@
+// 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 pc = (arg) => { if (arg > 1) return p("None"); else return p(arg); }
+
+    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>'+p(book.publish_date)+book.publish_date+'</p></td>'+
+    '<td>'+p(book.publisher)+book.publisher+'</p></td>'+
+    '<td>'+pc(book.count)+book.count+'</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 = 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);
-    console.log(data);
     
     switch (data.type) {
         case "pong":