Editing working somewhat

action.php

@@ -70,14 +70,19 @@
         button:hover {
             background-color: #0056b3;
         }
-        .editable {
+
-            cursor: pointer;
+        input {
             padding: 5px;
-            border-radius: 3px;
+            font-size: 16px;
-            transition: background 0.3s;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            width: 50%;
+            box-sizing: border-box;
         }
-        .editable:hover {
+
-            background:rgb(226, 43, 43);
+        input:focus {
+            border-color: #007bff;
+            outline: none;
         }
 
     </style>
@@ -90,22 +95,67 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Select all editable elements
     document.querySelectorAll(".editable").forEach((element) => {
-        let oldValue = element.textContent.trim(); // Store initial value
+        let oldValue = element.value || element.textContent.trim(); // Store initial value
 
         element.addEventListener("focus", function () {
-            oldValue = this.textContent.trim(); // Store old value when focused
+            oldValue = this.value || this.textContent.trim(); // Store old value when focused
         });
 
         element.addEventListener("blur", function () {
-            let newValue = this.textContent.trim();
+            let newValue = this.value || this.textContent.trim();
             let column = this.getAttribute("data-column");
 
             if (newValue !== oldValue) {
                 sendUpdate(id, column, oldValue, newValue, element);
             }
         });
+
+        element.addEventListener("keydown", function (event) {
+            if (event.key === "Enter") {
+                event.preventDefault(); // Prevent new line
+                this.blur(); // Trigger blur event to save changes
+            }
         });
     });
+});
+
+/**
+ * Enables editing for the field
+ */
+function editField(button) {
+    let element = button.previousElementSibling;
+    if (element.tagName === "INPUT") {
+        element.readOnly = false;
+        element.focus();
+    } else {
+        element.contentEditable = true;
+        element.focus();
+    }
+    button.textContent = "Save";
+    button.onclick = function() {
+        if (element.tagName === "INPUT") {
+            element.readOnly = true;
+        } else {
+            element.contentEditable = false;
+        }
+        button.textContent = "Edit";
+        button.onclick = function() {
+            editField(button);
+        };
+    };
+
+    element.addEventListener("blur", function () {
+        if (element.tagName === "INPUT") {
+            element.readOnly = true;
+        } else {
+            element.contentEditable = false;
+        }
+        button.textContent = "Edit";
+        button.onclick = function() {
+            editField(button);
+        };
+    }, { once: true });
+}
 
 /**
  * Sends the updated data to the server
@@ -123,12 +173,20 @@ function sendUpdate(flightId, column, oldValue, newValue, element) {
             oldValue = newValue; // ✅ Update oldValue to prevent reverting
         } else {
             alert("Error updating data");
+            if (element.tagName === "INPUT") {
+                element.value = oldValue; // ❌ Revert ONLY if update fails
+            } else {
                 element.textContent = oldValue; // ❌ Revert ONLY if update fails
             }
+        }
     })
     .catch(error => {
         console.error("Fetch error:", error);
+        if (element.tagName === "INPUT") {
+            element.value = oldValue; // ❌ Revert only on network failure
+        } else {
             element.textContent = oldValue; // ❌ Revert only on network failure
+        }
     });
 }
 
@@ -214,13 +272,13 @@ function opDetail() {
         echo "<p><strong>Captain's Name:</strong> " . $row['captain'] . "</p>";
         echo "<p><strong>Arriving From:</strong> " . $row['in_from'] . "</p>";
         echo "<p><strong>POB IN:</strong> " . $row['pob_in'] . "</p>";
-        echo "<p><strong>ETA:</strong> " . $row['eta'] . "</p>";
+        echo "<p><strong>ETA:</strong> <input type=\"datetime-local\" class=\"editable\" data-column=\"eta\" value=\"" . date('Y-m-d\TH:i', strtotime($row['eta'])) . "\" readonly> <button class=\"edit-button\" onclick=\"editField(this)\">Edit</button></p>";
 
         echo "<p><strong>Fuel Required:</strong> " . $row['fuel'] . "</p>";
 
-        echo "<p><strong>POB OUT:</strong><span class=\"editable\" data-column=\"pob_out\" contenteditable=\"true\">" . $row['pob_out'] . "</p>";
+        echo "<p><strong>POB OUT:</strong> <input type=\"number\" class=\"editable\" data-column=\"pob_out\" value=\"" . $row['pob_out'] . "\" readonly> <button class=\"edit-button\" onclick=\"editField(this)\">Edit</button></p>";
-        echo "<p><strong>Outbound To:</strong><span class=\"editable\" data-column=\"out_to\" contenteditable=\"true\">" . $row['out_to'] . "</p>";
+        echo "<p><strong>Outbound To:</strong> <span class=\"editable\" data-column=\"out_to\">" . $row['out_to'] . "</span> <button class=\"edit-button\" onclick=\"editField(this)\">Edit</button></p>";
-        echo "<p><strong>ETD:</strong><span class=\"editable\" data-column=\"etd\" contenteditable=\"true\">" . $row['etd'] . "</p>";
+        echo "<p><strong>ETD:</strong> <input type=\"datetime-local\" class=\"editable\" data-column=\"etd\" value=\"" . date('Y-m-d\TH:i', strtotime($row['etd'])) . "\" readonly> <button class=\"edit-button\" onclick=\"editField(this)\">Edit</button></p>";
         
         echo "<p><strong>Email Address:</strong> " . $row['email'] . "</p>";
         echo "<p><strong>Phone:</strong> " . $row['phone'] . "</p>";
@@ -323,5 +381,21 @@ function toggleJournal() {
     .journal-table tr:hover {
         background-color: #f1f1f1;
     }
+
+    .edit-button {
+        margin-left: 10px;
+        padding: 5px 10px;
+        font-size: 0.9rem;
+        background-color: #007bff;
+        color: white;
+        border: none;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: 0.3s;
+    }
+
+    .edit-button:hover {
+        background-color: #0056b3;
+    }
 </style>
 

testhook.json

@@ -39,7 +39,7 @@
             "name": "Arriving From"
         },
         "ca4ac44f-0388-4a70-a072-38276ed2ac13": {
-            "value": "11\/02\/2025 14:33",
+            "value": "14\/03\/2025 14:33",
             "name": "ETA"
         },
         "6fc47c54-7383-48fd-93fc-d8080f5ed8f5": {