Working
This commit is contained in:
112
action.php
112
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);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -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 '<div class="container">';
|
||||
echo '<div class="details"><p><strong>Aircraft Reg: </strong>' . $row['ac_reg'] . "</p>";
|
||||
echo "<p><strong>Aircraft Type:</strong> " . $row['ac_type'] . "</p>";
|
||||
echo "<p><strong>Callsign:</strong> " . $row['ac_call'] . "</p>";
|
||||
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> <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> <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\">" . $row['out_to'] . "</span> <button class=\"edit-button\" onclick=\"editField(this)\">Edit</button></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>";
|
||||
|
||||
echo "<p><strong>Notes:</strong> " . $row['notes'] . "</p>";
|
||||
echo "<p><i>PPR created at:</strong> " . $row['submitted_dt'] . " by " . $row['created_by'] . "</p></div>";
|
||||
echo '<table class="details">';
|
||||
echo '<tr><th>Aircraft Reg:</th><td></td><td>' . $row['ac_reg'] . '</td></tr>';
|
||||
echo '<tr><th>Aircraft Type:</th><td></td><td>' . $row['ac_type'] . '</td></tr>';
|
||||
echo '<tr><th>Callsign:</th><td></td><td>' . $row['ac_call'] . '</td></tr>';
|
||||
echo '<tr><th>Captain\'s Name:</th><td></td><td>' . $row['captain'] . '</td></tr>';
|
||||
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 '<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 '<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 '<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 '<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 '<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 '<tr><th>Notes:</th><td></td><td>' . $row['notes'] . '</td></tr>';
|
||||
echo '<tr><th>PPR created at:</th><td></td><td>' . $row['submitted_dt'] . ' by ' . $row['created_by'] . '</td></tr>';
|
||||
echo '</table>';
|
||||
|
||||
// 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;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user