Added basic field editing

2025-03-12 11:43:06 +00:00
parent 8ce6b3d0fd
commit 1e63adf9d5
5 changed files with 155 additions and 9 deletions
--- a/action.php
+++ b/action.php
@@ -71,9 +71,76 @@
        button:hover {
            background-color: #0056b3;
        }
+        .editable {
+            cursor: pointer;
+            padding: 5px;
+            border-radius: 3px;
+            transition: background 0.3s;
+        }
+        .editable:hover {
+            background:rgb(226, 43, 43);
+        }
    </style>
 </head>
 <body>
+<script>
+
+
+
+
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    let id = "<?php echo $_GET['id'];?>";
+
+    // Select all editable elements
+    document.querySelectorAll(".editable").forEach((element) => {
+        let oldValue = element.textContent.trim(); // Store initial value
+
+        element.addEventListener("focus", function () {
+            oldValue = this.textContent.trim(); // Store old value when focused
+        });
+
+        element.addEventListener("blur", function () {
+            let newValue = this.textContent.trim();
+            let column = this.getAttribute("data-column");
+
+            if (newValue !== oldValue) {
+                sendUpdate(id, column, oldValue, newValue, element);
+            }
+        });
+    });
+});
+
+/**
+ * Sends the updated data to the server
+ */
+function sendUpdate(flightId, column, oldValue, newValue, element) {
+    fetch("update_data.php", {
+        method: "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        body: `id=${flightId}&column=${encodeURIComponent(column)}&old_value=${encodeURIComponent(oldValue)}&new_value=${encodeURIComponent(newValue)}`
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            console.log(`Updated: ${data.column} changed from '${data.old_value}' to '${data.new_value}'`);
+            oldValue = newValue; // ✅ Update oldValue to prevent reverting
+        } else {
+            alert("Error updating data");
+            element.textContent = oldValue; // ❌ Revert ONLY if update fails
+        }
+    })
+    .catch(error => {
+        console.error("Fetch error:", error);
+        element.textContent = oldValue; // ❌ Revert only on network failure
+    });
+}
+
+
+
+
+    </script>

 <?php
 include("functions.php");
@@ -156,9 +223,9 @@ function opDetail() {

        echo "<p><strong>Fuel Required:</strong> " . $row['fuel'] . "</p>";

-        echo "<p><strong>POB OUT:</strong> " . $row['pob_out'] . "</p>";
-        echo "<p><strong>Outbound To:</strong> " . $row['out_to'] . "</p>";
-        echo "<p><strong>ETD:</strong> " . $row['etd'] . "</p>";
+        echo "<p><strong>POB OUT:</strong><span class=\"editable\" data-column=\"pob_out\" contenteditable=\"true\">" . $row['pob_out'] . "</p>";
+        echo "<p><strong>Outbound To:</strong><span class=\"editable\" data-column=\"out_to\" contenteditable=\"true\">" . $row['out_to'] . "</p>";
+        echo "<p><strong>ETD:</strong><span class=\"editable\" data-column=\"etd\" contenteditable=\"true\">" . $row['etd'] . "</p>";


        echo "<p><strong>Email Address:</strong> " . $row['email'] . "</p>";