jamesp/ppr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Editing working somewhat

Browse Source
This commit is contained in:
James Pattinson
2025-03-14 17:27:47 +00:00
parent 9c77d8ffb0
commit f0d26295d8
2 changed files with 91 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
action.php
View File

@@ -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;
}
</style>
@@ -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 "<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> " . $row['eta'] . "</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><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>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>";
@@ -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;
}
</style>

2
testhook.json
View File

@@ -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": {