136 lines
4.1 KiB
Plaintext
136 lines
4.1 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Tarball Report";
|
|
Layout = "~/Views/Shared/_Layout.cshtml";
|
|
}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>
|
|
<h3>Tarball Report</h3>
|
|
</title>
|
|
<style>
|
|
.container {
|
|
width: 1200px; /* Approximate width for A4 aspect ratio */
|
|
margin: 20px auto;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
div {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
h4 {
|
|
padding-top: 15px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
table {
|
|
width:100%;
|
|
}
|
|
|
|
datatable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
tr {
|
|
border: 1px solid #ccc;
|
|
padding:10px;
|
|
}
|
|
|
|
th{
|
|
border: 1px solid #ccc;
|
|
padding:10px;
|
|
}
|
|
|
|
tbhead {
|
|
text-align:center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<!--to be updated later for user input,db connection, etc-->
|
|
<body>
|
|
<div class="container">
|
|
<div>
|
|
<h4>Month</h4>
|
|
<select name="month" id="month" style="width: 100%; padding: 5px;">
|
|
<option value="default" selected disabled>Filter by Month</option>
|
|
<option value="january">January</option>
|
|
<option value="february">February</option>
|
|
<option value="march">March</option>
|
|
<option value="april">April</option>
|
|
<option value="may">May</option>
|
|
<option value="june">June</option>
|
|
<option value="july">July</option>
|
|
<option value="august">August</option>
|
|
<option value="september">September</option>
|
|
<option value="october">October</option>
|
|
<option value="november">November</option>
|
|
<option value="december">December</option>
|
|
</select>
|
|
|
|
<h4>Year</h4>
|
|
<select name="year" id="year" style="width: 100%; padding: 5px;">
|
|
<option value="default" selected disabled>Filter by Year</option>
|
|
<option value="January">January</option>
|
|
<!--based on database?-->
|
|
</select>
|
|
</div>
|
|
|
|
<div class="datatable">
|
|
<table>
|
|
<tr class="tbhead">
|
|
<th>???</th>
|
|
<th>Date</th>
|
|
<th>Station</th>
|
|
<th>Approval Status</th>
|
|
<th>PDF</th>
|
|
</tr>
|
|
<tr>
|
|
<th></th>
|
|
<th></th>
|
|
<th></th>
|
|
<th>
|
|
<button class="btn btn-success">Approve</button>
|
|
<button class="btn btn-danger">Reject</button>
|
|
</th>
|
|
<th>
|
|
<a href="/MMS/Marine/ViewPDF" class="btn btn-primary" target="_blank">View PDF</a>
|
|
<a href="/MMS/Marine/GenerateReport" class="btn btn-primary">Download PDF</a>
|
|
</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div> <!--CONTAINER END-->
|
|
</body>
|
|
<!--TESTING-->
|
|
</html>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const monthDropdown = document.getElementById("month");
|
|
const yearDropdown = document.getElementById("year");
|
|
|
|
monthDropdown.addEventListener("change", filterData);
|
|
yearDropdown.addEventListener("change", filterData);
|
|
|
|
function filterData() {
|
|
const selectedMonth = monthDropdown.value;
|
|
const selectedYear = yearDropdown.value;
|
|
|
|
console.log("Selected Month:", selectedMonth);
|
|
console.log("Selected Year:", selectedYear);
|
|
// Logic for updating or sorting data goes here
|
|
}
|
|
});
|
|
</script>
|
|
} |