test mock data
This commit is contained in:
parent
e8a290c4e4
commit
5b0553527b
@ -8,6 +8,8 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
|
|||||||
{
|
{
|
||||||
[Area("MMS")]
|
[Area("MMS")]
|
||||||
|
|
||||||
|
//testing from main laptop
|
||||||
|
|
||||||
//[Authorize(Policy = "RoleModulePolicy")]
|
//[Authorize(Policy = "RoleModulePolicy")]
|
||||||
public class MarineController : Controller
|
public class MarineController : Controller
|
||||||
{
|
{
|
||||||
@ -19,21 +21,21 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
|
|||||||
{
|
{
|
||||||
return View();
|
return View();
|
||||||
}
|
}
|
||||||
// Generates and returns a Tar Ball Sampling Report PDF
|
|
||||||
public IActionResult GenerateReport()
|
public IActionResult GenerateReport()
|
||||||
{
|
{
|
||||||
try
|
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 pdf = document.GeneratePdf();
|
||||||
var fileName = $"TarBallReport_{DateTime.Now:yyyyMMdd_HHmmss}.pdf";
|
var fileName = $"TarBallReport_{DateTime.Now:yyyyMMdd_HHmmss}.pdf";
|
||||||
return File(pdf, "application/pdf", fileName);
|
return File(pdf, "application/pdf", fileName);
|
||||||
}
|
}
|
||||||
catch (Exception ex)
|
catch (Exception ex)
|
||||||
{
|
{
|
||||||
// Log the error (use a logger if configured)
|
|
||||||
Console.WriteLine(ex.Message);
|
Console.WriteLine(ex.Message);
|
||||||
return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while generating the PDF. "+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
|
try
|
||||||
{
|
{
|
||||||
// Generate the PDF document
|
// Retrieve specific data based on the id, if required
|
||||||
var document = new TarBallPDF();
|
var document = new TarBallPDF(); // Use id to customize the PDF if needed
|
||||||
var pdf = document.GeneratePdf();
|
var pdf = document.GeneratePdf();
|
||||||
|
|
||||||
// Return the PDF for inline viewing
|
|
||||||
return File(pdf, "application/pdf");
|
return File(pdf, "application/pdf");
|
||||||
}
|
}
|
||||||
catch (Exception ex)
|
catch (Exception ex)
|
||||||
{
|
{
|
||||||
// Log the error (use a logger if configured)
|
|
||||||
Console.WriteLine(ex.Message);
|
Console.WriteLine(ex.Message);
|
||||||
return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while viewing the PDF. " + ex.Message);
|
return StatusCode(StatusCodes.Status500InternalServerError, "An error occurred while viewing the PDF. " + ex.Message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//ahbsf
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,9 +7,8 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
|
||||||
<h3>Tarball Report</h3>
|
<title>Tarball Report</title>
|
||||||
</title>
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.container {
|
||||||
width: 1200px; /* Approximate width for A4 aspect ratio */
|
width: 1200px; /* Approximate width for A4 aspect ratio */
|
||||||
@ -31,106 +30,111 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
datatable {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tr {
|
th, td {
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
padding:10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
th{
|
.tbhead {
|
||||||
border: 1px solid #ccc;
|
text-align: center;
|
||||||
padding:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbhead {
|
|
||||||
text-align:center;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<!--to be updated later for user input,db connection, etc-->
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div id="app" class="container">
|
||||||
<div>
|
<div>
|
||||||
<h4>Month</h4>
|
<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="default" selected disabled>Filter by Month</option>
|
||||||
<option value="january">January</option>
|
<option v-for="month in months" :value="month">{{ month }}</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>
|
</select>
|
||||||
|
|
||||||
<h4>Year</h4>
|
<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="default" selected disabled>Filter by Year</option>
|
||||||
<option value="January">January</option>
|
<option v-for="year in years" :value="year">{{ year }}</option>
|
||||||
<!--based on database?-->
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="datatable">
|
<div class="datatable">
|
||||||
<table>
|
<table>
|
||||||
<tr class="tbhead">
|
<thead>
|
||||||
<th>???</th>
|
<tr>
|
||||||
<th>Date</th>
|
<th>No.</th>
|
||||||
<th>Station</th>
|
<th>Date</th>
|
||||||
<th>Approval Status</th>
|
<th>Station</th>
|
||||||
<th>PDF</th>
|
<th>Approval Status</th>
|
||||||
</tr>
|
<th>PDF</th>
|
||||||
<tr>
|
</tr>
|
||||||
<th></th>
|
</thead>
|
||||||
<th></th>
|
<tbody>
|
||||||
<th></th>
|
<tr v-for="data in numberedData" :key="data.no">
|
||||||
<th>
|
<td>{{ data.no }}</td>
|
||||||
<button class="btn btn-success">Approve</button>
|
<td>{{ data.date }}</td>
|
||||||
<button class="btn btn-danger">Reject</button>
|
<td>{{ data.station }}</td>
|
||||||
</th>
|
|
||||||
<th>
|
<td>
|
||||||
<a href="/MMS/Marine/ViewPDF" class="btn btn-primary" target="_blank">View PDF</a>
|
<button class="btn btn-success">Approve</button>
|
||||||
<a href="/MMS/Marine/GenerateReport" class="btn btn-primary">Download PDF</a>
|
<button class="btn btn-danger">Reject</button>
|
||||||
</th>
|
</td>
|
||||||
</tr>
|
<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>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div> <!--CONTAINER END-->
|
</div>
|
||||||
</body>
|
</body>
|
||||||
<!--TESTING-->
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
@section Scripts {
|
@section Scripts{
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
new Vue({
|
||||||
const monthDropdown = document.getElementById("month");
|
el: '#app',
|
||||||
const yearDropdown = document.getElementById("year");
|
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);
|
//increment for 'no.' column
|
||||||
yearDropdown.addEventListener("change", filterData);
|
numberedData() {
|
||||||
|
return this.mockData.map((data, index) => ({
|
||||||
function filterData() {
|
no: index + 1,
|
||||||
const selectedMonth = monthDropdown.value;
|
...data
|
||||||
const selectedYear = yearDropdown.value;
|
}));
|
||||||
|
}
|
||||||
console.log("Selected Month:", selectedMonth);
|
}
|
||||||
console.log("Selected Year:", selectedYear);
|
|
||||||
// Logic for updating or sorting data goes here
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
@ -497,6 +497,7 @@
|
|||||||
<i class="mdi mdi-view-dashboard"></i><span class="hide-menu">Inventory Report</span>
|
<i class="mdi mdi-view-dashboard"></i><span class="hide-menu">Inventory Report</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
<!--MMS-->
|
||||||
<li class="sidebar-item">
|
<li class="sidebar-item">
|
||||||
<a class="sidebar-link has-arrow waves-effect waves-dark"
|
<a class="sidebar-link has-arrow waves-effect waves-dark"
|
||||||
href="javascript:void(0)" aria-expanded="false">
|
href="javascript:void(0)" aria-expanded="false">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user