test mock data

This commit is contained in:
misya 2025-04-08 10:59:13 +08:00
parent e8a290c4e4
commit 5b0553527b
3 changed files with 87 additions and 83 deletions

View File

@ -8,6 +8,8 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
{
[Area("MMS")]
//testing from main laptop
//[Authorize(Policy = "RoleModulePolicy")]
public class MarineController : Controller
{
@ -19,19 +21,19 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
{
return View();
}
// Generates and returns a Tar Ball Sampling Report PDF
public IActionResult GenerateReport()
{
try
{
var document = new TarBallPDF();
// Retrieve specific data based on the id, if required
var document = new TarBallPDF(); // Use id to customize the report if needed
var pdf = document.GeneratePdf();
var fileName = $"TarBallReport_{DateTime.Now:yyyyMMdd_HHmmss}.pdf";
return File(pdf, "application/pdf", fileName);
}
catch (Exception ex)
{
// Log the error (use a logger if configured)
Console.WriteLine(ex.Message);
return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while generating the PDF. " + ex.Message);
}
@ -41,20 +43,17 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
{
try
{
// Generate the PDF document
var document = new TarBallPDF();
// Retrieve specific data based on the id, if required
var document = new TarBallPDF(); // Use id to customize the PDF if needed
var pdf = document.GeneratePdf();
// Return the PDF for inline viewing
return File(pdf, "application/pdf");
}
catch (Exception ex)
{
// Log the error (use a logger if configured)
Console.WriteLine(ex.Message);
return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while viewing the PDF. " + ex.Message);
}
}
//ahbsf
}
}

View File

@ -7,9 +7,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<h3>Tarball Report</h3>
</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<title>Tarball Report</title>
<style>
.container {
width: 1200px; /* Approximate width for A4 aspect ratio */
@ -32,104 +31,109 @@
table {
width: 100%;
}
datatable {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
tr {
th, td {
border: 1px solid #ccc;
padding: 10px;
}
th{
border: 1px solid #ccc;
padding:10px;
}
tbhead {
.tbhead {
text-align: center;
}
</style>
</head>
<!--to be updated later for user input,db connection, etc-->
<body>
<div class="container">
<div id="app" class="container">
<div>
<h4>Month</h4>
<select name="month" id="month" style="width: 100%; padding: 5px;">
<select v-model="selectedMonth" 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>
<option v-for="month in months" :value="month">{{ month }}</option>
</select>
<h4>Year</h4>
<select name="year" id="year" style="width: 100%; padding: 5px;">
<select v-model="selectedYear" style="width: 100%; padding: 5px;">
<option value="default" selected disabled>Filter by Year</option>
<option value="January">January</option>
<!--based on database?-->
<option v-for="year in years" :value="year">{{ year }}</option>
</select>
</div>
<div class="datatable">
<table>
<tr class="tbhead">
<th>???</th>
<thead>
<tr>
<th>No.</th>
<th>Date</th>
<th>Station</th>
<th>Approval Status</th>
<th>PDF</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th>
</thead>
<tbody>
<tr v-for="data in numberedData" :key="data.no">
<td>{{ data.no }}</td>
<td>{{ data.date }}</td>
<td>{{ data.station }}</td>
<td>
<button class="btn btn-success">Approve</button>
<button class="btn btn-danger">Reject</button>
</th>
<th>
</td>
<td>
<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>
</td>
</tr>
</tbody>
</table>
</div>
</div> <!--CONTAINER END-->
</div>
</body>
<!--TESTING-->
</html>
@section Scripts{
<script>
document.addEventListener("DOMContentLoaded", function () {
const monthDropdown = document.getElementById("month");
const yearDropdown = document.getElementById("year");
new Vue({
el: '#app',
data: {
selectedMonth: '',
selectedYear: '',
months: [
'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September',
'October', 'November', 'December'
],
mockData: [
{ date: '2023-01-15', station: 'Station A' },
{ date: '2024-02-20', station: 'Station B' },
{ date: '2023-03-10', station: 'Station C' },
{ date: '2025-04-05', station: 'Station A' },
{ date: '2023-05-18', station: 'Station B' },
{ date: '2024-06-11', station: 'Station C' },
{ date: '2025-07-23', station: 'Station A' },
{ date: '2023-08-09', station: 'Station B' },
{ date: '2024-09-25', station: 'Station C' },
{ date: '2025-10-14', station: 'Station A' }
]
},
computed: {
years() {
const allYears = this.mockData.map(data => new Date(data.date).getFullYear());
const minYear = Math.min(...allYears);
const maxYear = Math.max(...allYears);
return Array.from({ length: maxYear - minYear + 1 }, (_, i) => (minYear + i).toString());
},
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
//increment for 'no.' column
numberedData() {
return this.mockData.map((data, index) => ({
no: index + 1,
...data
}));
}
}
});
</script>

View File

@ -497,6 +497,7 @@
<i class="mdi mdi-view-dashboard"></i><span class="hide-menu">Inventory Report</span>
</a>
</li>
<!--MMS-->
<li class="sidebar-item">
<a class="sidebar-link has-arrow waves-effect waves-dark"
href="javascript:void(0)" aria-expanded="false">