all crud ops

static/css/styles.css

@@ -26,6 +26,11 @@ table {
     margin-top: 20px;
 }
 
+tbody tr:hover {
+    background-color: #eee;
+    cursor: pointer;
+}
+
 th,
 td {
     border: 1px solid #ddd;
@@ -50,38 +55,64 @@ button {
     cursor: pointer;
 }
 
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
+button:hover {
+    background-color: #3c8d3e;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+/* Dialog box */
+dialog {
+    width: 400px;
+    height: 420px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+  
+  /* Labels */
+label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+
+}
+  
+/* Text inputs */
+input, form div {
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    display: block;
+    font-size: 16;
+}
+
+input {
+    width: 100%;
+}
+
+form fieldset:last-child {
+    margin-top: 20px;
+    text-align: right;
+}
+  
+iframe {
     width: 100%;
     height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
-    padding-top: 60px;
 }
 
-.modal-content {
-    background-color: #fefefe;
-    margin: 5% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    border-radius: 8px;
+button.danger {
+    margin-top: 50px;
+    width: 100%;
+    background-color: #af4c4c;
 }
 
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
+button.danger:hover {
+    background-color: #8d3c3c;
 }

static/js/main.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', documentReady, false);
+window.onmessage = (event) => {
+    if (event.data == "close") {
+        document.querySelector("dialog[open]").close();
+    }
+}
+
+function documentReady() {
+    const iframe = document.querySelector("iframe");
+    iframe.onload=(event) => {
+        const openDialog = document.querySelector("dialog[open]");
+        if (openDialog) {
+            openDialog.close();
+            window.location.reload();
+        } else {
+            document.querySelector("dialog").showModal()
+        }
+    }
+}