diff --git a/action.php b/action.php index 8ec40a9..c28383d 100644 --- a/action.php +++ b/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; @@ -71,12 +75,12 @@ background-color: #0056b3; } - input { + .editable { padding: 5px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; - width: 50%; + width: 90%; box-sizing: border-box; } @@ -85,6 +89,25 @@ 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); + } + @@ -117,13 +140,20 @@ document.addEventListener("DOMContentLoaded", function () { } }); }); + + // 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.previousElementSibling; + let element = button.parentElement.nextElementSibling.firstElementChild; if (element.tagName === "INPUT") { element.readOnly = false; element.focus(); @@ -131,18 +161,6 @@ function editField(button) { 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") { @@ -150,10 +168,6 @@ function editField(button) { } else { element.contentEditable = false; } - button.textContent = "Edit"; - button.onclick = function() { - editField(button); - }; }, { once: true }); } @@ -266,28 +280,26 @@ function opDetail() { // Output data of the row $row = $result->fetch_assoc(); echo '
'; - echo '

Aircraft Reg: ' . $row['ac_reg'] . "

"; - echo "

Aircraft Type: " . $row['ac_type'] . "

"; - echo "

Callsign: " . $row['ac_call'] . "

"; - echo "

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

"; - echo "

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

"; - echo "

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

"; - echo "

ETA:

"; - - echo "

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

"; - - echo "

POB OUT:

"; - echo "

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

"; - echo "

ETD:

"; - - echo "

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

"; - echo "

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

"; - - echo "

Notes: " . $row['notes'] . "

"; - echo "

PPR created at: " . $row['submitted_dt'] . " by " . $row['created_by'] . "

"; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo ''; + echo '
Aircraft Reg:' . $row['ac_reg'] . '
Aircraft Type:' . $row['ac_type'] . '
Callsign:' . $row['ac_call'] . '
Captain\'s Name:' . $row['captain'] . '
Arriving From:' . $row['in_from'] . '
POB IN:' . $row['pob_in'] . '
ETA:
Fuel Required:' . $row['fuel'] . '
POB OUT:
Outbound To:' . $row['out_to'] . '
ETD:
Email Address:' . $row['email'] . '
Phone:' . $row['phone'] . '
Notes:' . $row['notes'] . '
PPR created at:' . $row['submitted_dt'] . ' by ' . $row['created_by'] . '
'; // 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; @@ -386,16 +398,28 @@ function toggleJournal() { margin-left: 10px; padding: 5px 10px; font-size: 0.9rem; - background-color: #007bff; - color: white; + background-color: transparent; border: none; - border-radius: 3px; cursor: pointer; transition: 0.3s; } - .edit-button:hover { - background-color: #0056b3; + .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; } diff --git a/edit.png b/edit.png new file mode 100644 index 0000000..cd63cfe Binary files /dev/null and b/edit.png differ