Menu bar and Upcoming PPR
This commit is contained in:
33
tower.php
33
tower.php
@@ -169,10 +169,43 @@ require_db_auth();
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Menu bar styling */
|
||||||
|
.menu-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #333;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-bar a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-bar a:hover {
|
||||||
|
background-color: #575757;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-bar a.active {
|
||||||
|
background-color: #007bff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="tower.php" class="active">HOME</a>
|
||||||
|
<a href="upcoming.php">Future PPRs</a>
|
||||||
|
<a href="admin.php">Reports</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function markAction(id, action, title, buttonText) {
|
function markAction(id, action, title, buttonText) {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
|
|||||||
325
upcoming.php
Normal file
325
upcoming.php
Normal file
@@ -0,0 +1,325 @@
|
|||||||
|
<?php
|
||||||
|
include("functions.php");
|
||||||
|
require_db_auth();
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="refresh" content="300">
|
||||||
|
<!-- Include SweetAlert -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Upcoming Movements</title>
|
||||||
|
<style>
|
||||||
|
/* ...existing styles from tower.php... */
|
||||||
|
|
||||||
|
.menu-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #333;
|
||||||
|
padding: 10px 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-bar a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-bar a:hover {
|
||||||
|
background-color: #575757;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-bar a.active {
|
||||||
|
background-color: #007bff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table styling */
|
||||||
|
table {
|
||||||
|
width: 80%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
table, th, td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
th, td {
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 8px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 16pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-child(even) {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:hover {
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight100LL {
|
||||||
|
background-color: #ADD8E6 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlightJET {
|
||||||
|
background-color: yellow !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add this CSS for the red triangle */
|
||||||
|
.red-triangle {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-triangle::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 10px solid red;
|
||||||
|
border-bottom: 10px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-triangle:hover::after {
|
||||||
|
content: attr(data-notes);
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 0;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 15px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding: 10px;
|
||||||
|
background: #f9f9f9;
|
||||||
|
border-radius: 8px;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
.heading {
|
||||||
|
width: 80%;
|
||||||
|
margin: 20px auto;
|
||||||
|
background-color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 20pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state-CANCELED {
|
||||||
|
text-decoration: line-through;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state-LANDED {
|
||||||
|
font-style: italic;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acreg {
|
||||||
|
padding: 4px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
font-size: 10pt;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="tower.php">HOME</a>
|
||||||
|
<a href="upcoming.php" class="active">Future PPRs</a>
|
||||||
|
<a href="admin.php">Reports</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function markAction(id, action, title, buttonText) {
|
||||||
|
const now = new Date();
|
||||||
|
const currentTime = now.toISOString().slice(11, 16); // Extract HH:MM
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
title: title,
|
||||||
|
html: `<input type="time" id="timepicker" class="swal2-input" value="${currentTime}">`,
|
||||||
|
icon: "info",
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonText: buttonText,
|
||||||
|
preConfirm: () => {
|
||||||
|
const time = document.getElementById("timepicker").value;
|
||||||
|
if (!time) {
|
||||||
|
Swal.showValidationMessage("Please select a time");
|
||||||
|
}
|
||||||
|
return time;
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
const page = `action.php?op=${action}&id=${id}&time=${encodeURIComponent(result.value)}`;
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("GET", page, false); // 'false' makes the request synchronous
|
||||||
|
xhr.send();
|
||||||
|
window.location.reload(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function markCancel(id) {
|
||||||
|
Swal.fire({
|
||||||
|
title: "Are you sure?",
|
||||||
|
text: "This action will cancel the PPR.",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonText: "Yes, cancel it!",
|
||||||
|
cancelButtonText: "No, keep it"
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
const page = `action.php?op=cancel&id=${id}`;
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open("GET", page, false); // 'false' makes the request synchronous
|
||||||
|
xhr.send();
|
||||||
|
window.location.reload(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function openDetail(id) {
|
||||||
|
const page = `action.php?op=detail&id=${id}`;
|
||||||
|
var popupWindow = window.open(page, "PopupWindow", "toolbar=no, location=no, directories=no,status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=600, height=1100");
|
||||||
|
popupWindow.onload = function () {
|
||||||
|
var contentHeight = popupWindow.document.body.scrollHeight;
|
||||||
|
var contentWidth = popupWindow.document.body.scrollWidth;
|
||||||
|
popupWindow.resizeTo(contentWidth + 20, contentHeight + 180); // Adding padding to prevent clipping
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<center><h2>Upcoming Movements</h2></center>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
|
||||||
|
function renderTableCell($key, $value, $row) {
|
||||||
|
if ($key == 'ETA') {
|
||||||
|
return "<td>" . htmlspecialchars($value ?? '') . (!empty($value) ? " Z" : "") . "</td>";
|
||||||
|
}
|
||||||
|
if ($key == 'ac_reg' && $row['ac_call'] != NULL) {
|
||||||
|
$notes = htmlspecialchars($row['notes'] ?? '');
|
||||||
|
$acCall = htmlspecialchars($row['ac_call'] ?? '');
|
||||||
|
$acReg = htmlspecialchars($value ?? '');
|
||||||
|
if (!empty($row['notes'])) {
|
||||||
|
return "<td class='red-triangle' data-notes='$notes'>$acCall<br><span class='acreg'>$acReg</span></td>";
|
||||||
|
}
|
||||||
|
return "<td>$acCall<br><span class='acreg'>$acReg</span></td>";
|
||||||
|
} elseif ($key == 'ac_reg' && !empty($row['notes'])) {
|
||||||
|
$notes = htmlspecialchars($row['notes'] ?? '');
|
||||||
|
$acReg = htmlspecialchars($value ?? '');
|
||||||
|
return "<td class='red-triangle' data-notes='$notes'>$acReg</td>";
|
||||||
|
} else {
|
||||||
|
return "<td>" . htmlspecialchars($value ?? '') . "</td>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderActionsCell($id) {
|
||||||
|
return "<td>
|
||||||
|
<img src='assets/cancel-icon.webp' title='Cancel PPR' style='width: 25px; height: auto;' onclick='markCancel($id)'>
|
||||||
|
<img src='assets/edit.png' title='Edit Details' style='width: 25px; height: auto;' onclick='openDetail($id)'>
|
||||||
|
</td>";
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTableRow($row) {
|
||||||
|
$rowHtml = "<tr>";
|
||||||
|
foreach ($row as $key => $value) {
|
||||||
|
if (!in_array($key, ['id', 'ac_call', 'notes'])) { // Exclude 'notes'
|
||||||
|
$rowHtml .= renderTableCell($key, $value, $row);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$rowHtml .= renderActionsCell($row['id']);
|
||||||
|
$rowHtml .= "</tr>";
|
||||||
|
return $rowHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTable($result) {
|
||||||
|
$tableHtml = "<table border='1'>
|
||||||
|
<thead>
|
||||||
|
<tr>";
|
||||||
|
$fields = $result->fetch_fields();
|
||||||
|
foreach ($fields as $field) {
|
||||||
|
if (!in_array($field->name, ['id', 'ac_call', 'notes'])) { // Exclude 'notes'
|
||||||
|
$tableHtml .= "<th>" . htmlspecialchars($field->name ?? '') . "</th>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$tableHtml .= "<th>Actions</th></tr></thead><tbody>";
|
||||||
|
|
||||||
|
while ($row = $result->fetch_assoc()) {
|
||||||
|
$tableHtml .= renderTableRow($row);
|
||||||
|
}
|
||||||
|
|
||||||
|
$tableHtml .= "</tbody></table>";
|
||||||
|
return $tableHtml;
|
||||||
|
}
|
||||||
|
|
||||||
|
$conn = connectDb();
|
||||||
|
$sql = "SELECT id, ac_reg, ac_type, ac_call, eta AS ETA, fuel, in_from, pob_in, notes
|
||||||
|
FROM submitted
|
||||||
|
WHERE DATE(eta) > CURDATE()
|
||||||
|
ORDER BY eta ASC;";
|
||||||
|
$result = $conn->query($sql);
|
||||||
|
|
||||||
|
if ($result->num_rows > 0) {
|
||||||
|
echo renderTable($result);
|
||||||
|
} else {
|
||||||
|
echo "<center>No upcoming movements found.</center>";
|
||||||
|
}
|
||||||
|
|
||||||
|
$conn->close();
|
||||||
|
?>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user