Working

action.php

@@ -33,6 +33,10 @@
             background-color: #f9f9f9;
         }
 
+        .details th {
+            text-align: right; /* Justify table headings to the right */
+        }
+
         .details p {
             margin: 10px 0;
             font-size: 16px;
@@ -70,14 +74,38 @@
         button:hover {
             background-color: #0056b3;
         }
+
         .editable {
-            cursor: pointer;
             padding: 5px;
-            border-radius: 3px;
+            font-size: 16px;
-            transition: background 0.3s;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            width: 90%;
+            box-sizing: border-box;
         }
-        .editable:hover {
+
-            background:rgb(226, 43, 43);
+        input:focus {
+            border-color: #007bff;
+            outline: none;
+        }
+
+        .edit-button {
+            margin-left: 10px;
+            padding: 5px 10px;
+            font-size: 0.9rem;
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+            transition: 0.3s;
+        }
+
+        .edit-button img {
+            width: 20px;
+            height: 20px;
+        }
+
+        .edit-button:hover img {
+            filter: brightness(0.8);
         }
 
     </style>
@@ -90,23 +118,59 @@ 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
+            }
         });
     });
 
+    // Select all edit buttons
+    document.querySelectorAll(".edit-button").forEach((button) => {
+        button.addEventListener("click", function () {
+            editField(button);
+        });
+    });
+});
+
+/**
+ * Enables editing for the field
+ */
+function editField(button) {
+    let element = button.parentElement.nextElementSibling.firstElementChild;
+    if (element.tagName === "INPUT") {
+        element.readOnly = false;
+        element.focus();
+    } else {
+        element.contentEditable = true;
+        element.focus();
+    }
+
+    element.addEventListener("blur", function () {
+        if (element.tagName === "INPUT") {
+            element.readOnly = true;
+        } else {
+            element.contentEditable = false;
+        }
+    }, { once: true });
+}
+
 /**
  * Sends the updated data to the server
  */
@@ -123,12 +187,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
+        }
     });
 }
 
@@ -208,28 +280,26 @@ function opDetail() {
         // Output data of the row
         $row = $result->fetch_assoc();
         echo '<div class="container">';
-        echo '<div class="details"><p><strong>Aircraft Reg: </strong>' . $row['ac_reg'] . "</p>";
+        echo '<table class="details">';
-        echo "<p><strong>Aircraft Type:</strong> " . $row['ac_type'] . "</p>";
+        echo '<tr><th>Aircraft Reg:</th><td></td><td>' . $row['ac_reg'] . '</td></tr>';
-        echo "<p><strong>Callsign:</strong> " . $row['ac_call'] . "</p>";
+        echo '<tr><th>Aircraft Type:</th><td></td><td>' . $row['ac_type'] . '</td></tr>';
-        echo "<p><strong>Captain's Name:</strong> " . $row['captain'] . "</p>";
+        echo '<tr><th>Callsign:</th><td></td><td>' . $row['ac_call'] . '</td></tr>';
-        echo "<p><strong>Arriving From:</strong> " . $row['in_from'] . "</p>";
+        echo '<tr><th>Captain\'s Name:</th><td></td><td>' . $row['captain'] . '</td></tr>';
-        echo "<p><strong>POB IN:</strong> " . $row['pob_in'] . "</p>";
+        echo '<tr><th>Arriving From:</th><td><button class="edit-button" onclick="editField(this)"><img src="edit.png" alt="Edit"></button></td><td><span class="editable" data-column="in_from">' . $row['in_from'] . '</span></td></tr>';
-        echo "<p><strong>ETA:</strong> " . $row['eta'] . "</p>";
+        echo '<tr><th>POB IN:</th><td></td><td>' . $row['pob_in'] . '</td></tr>';
-
+        echo '<tr><th>ETA:</th><td><button class="edit-button" onclick="editField(this)"><img src="edit.png" alt="Edit"></button></td><td><input type="datetime-local" class="editable" data-column="eta" value="' . date('Y-m-d\TH:i', strtotime($row['eta'])) . '" readonly></td></tr>';
-        echo "<p><strong>Fuel Required:</strong> " . $row['fuel'] . "</p>";
+        echo '<tr><th>Fuel Required:</th><td></td><td>' . $row['fuel'] . '</td></tr>';
-
+        echo '<tr><th>POB OUT:</th><td><button class="edit-button" onclick="editField(this)"><img src="edit.png" alt="Edit"></button></td><td><input type="number" class="editable" data-column="pob_out" value="' . $row['pob_out'] . '" readonly></td></tr>';
-        echo "<p><strong>POB OUT:</strong><span class=\"editable\" data-column=\"pob_out\" contenteditable=\"true\">" . $row['pob_out'] . "</p>";
+        echo '<tr><th>Outbound To:</th><td><button class="edit-button" onclick="editField(this)"><img src="edit.png" alt="Edit"></button></td><td><span class="editable" data-column="out_to">' . $row['out_to'] . '</span></td></tr>';
-        echo "<p><strong>Outbound To:</strong><span class=\"editable\" data-column=\"out_to\" contenteditable=\"true\">" . $row['out_to'] . "</p>";
+        echo '<tr><th>ETD:</th><td><button class="edit-button" onclick="editField(this)"><img src="edit.png" alt="Edit"></button></td><td><input type="datetime-local" class="editable" data-column="etd" value="' . date('Y-m-d\TH:i', strtotime($row['etd'])) . '" readonly></td></tr>';
-        echo "<p><strong>ETD:</strong><span class=\"editable\" data-column=\"etd\" contenteditable=\"true\">" . $row['etd'] . "</p>";
+        echo '<tr><th>Email Address:</th><td></td><td>' . $row['email'] . '</td></tr>';
-
+        echo '<tr><th>Phone:</th><td></td><td>' . $row['phone'] . '</td></tr>';
-        echo "<p><strong>Email Address:</strong> " . $row['email'] . "</p>";
+        echo '<tr><th>Notes:</th><td></td><td>' . $row['notes'] . '</td></tr>';
-        echo "<p><strong>Phone:</strong> " . $row['phone'] . "</p>";
+        echo '<tr><th>PPR created at:</th><td></td><td>' . $row['submitted_dt'] . ' by ' . $row['created_by'] . '</td></tr>';
-
+        echo '</table>';
-        echo "<p><strong>Notes:</strong> " . $row['notes'] . "</p>";
-        echo "<p><i>PPR created at:</strong> " . $row['submitted_dt'] . " by " . $row['created_by'] . "</p></div>";
 
         // Fetch journal entries
-        $journalSql = "SELECT * FROM journal WHERE ppr_id = " . $_GET['id'];
+        $journalSql = "SELECT * FROM journal WHERE ppr_id = " . $_GET['id'] . " ORDER BY id DESC";
         $journalResult = $conn->query($journalSql);
         $journalCount = $journalResult->num_rows;
 
@@ -323,5 +393,33 @@ function toggleJournal() {
     .journal-table tr:hover {
         background-color: #f1f1f1;
     }
+
+    .edit-button {
+        margin-left: 10px;
+        padding: 5px 10px;
+        font-size: 0.9rem;
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        transition: 0.3s;
+    }
+
+    .edit-button img {
+        width: 20px;
+        height: 20px;
+    }
+
+    .edit-button:hover img {
+        filter: brightness(0.8);
+    }
+
+    .editable {
+    background-color: transparent;
+    transition: background-color 0.3s ease;
+    }
+
+    .editable:focus {
+        background-color: white;
+    }
 </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": {