diff --git a/action.php b/action.php index 1af1ef5..8ec40a9 100644 --- a/action.php +++ b/action.php @@ -70,14 +70,19 @@ button:hover { background-color: #0056b3; } - .editable { - cursor: pointer; + + input { padding: 5px; - border-radius: 3px; - transition: background 0.3s; + font-size: 16px; + 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; } @@ -90,23 +95,68 @@ 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"); - element.textContent = oldValue; // ❌ Revert ONLY if update fails + 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); - element.textContent = oldValue; // ❌ Revert only on network failure + if (element.tagName === "INPUT") { + element.value = oldValue; // ❌ Revert only on network failure + } else { + element.textContent = oldValue; // ❌ Revert only on network failure + } }); } @@ -214,14 +272,14 @@ function opDetail() { echo "

Captain's Name: " . $row['captain'] . "

"; echo "

Arriving From: " . $row['in_from'] . "

"; echo "

POB IN: " . $row['pob_in'] . "

"; - echo "

ETA: " . $row['eta'] . "

"; + echo "

ETA:

"; echo "

Fuel Required: " . $row['fuel'] . "

"; - echo "

POB OUT:" . $row['pob_out'] . "

"; - echo "

Outbound To:" . $row['out_to'] . "

"; - echo "

ETD:" . $row['etd'] . "

"; - + echo "

POB OUT:

"; + echo "

Outbound To: " . $row['out_to'] . "

"; + echo "

ETD:

"; + echo "

Email Address: " . $row['email'] . "

"; echo "

Phone: " . $row['phone'] . "

"; @@ -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; + } diff --git a/testhook.json b/testhook.json index 0f4422d..3463d50 100644 --- a/testhook.json +++ b/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": {