catalyx/PSTW_CentralizeSystem
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added 'time' column, fix image sorting generation based on naming format

Browse Source
This commit is contained in:
misya 2025-06-05 16:18:11 +08:00
parent 416b283341
commit 9958a4b1d1
3 changed files with 69 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Areas/MMS/Controllers/MarineController.cs
View File

@ -55,16 +55,17 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
return View();
}
public IActionResult TarBallForm()//Queries the database and returns a view with tarball data
public IActionResult TarBallForm()
{
try
{
var marineTarballs = _context.MarineTarballs //ERRORRRRRRR======================================
var marineTarballs = _context.MarineTarballs
.Select(t => new
{
t.Id,
Date = t.DateSample.ToString("yyyy/MM/dd"),
Station = t.StationID
id = t.Id,
date = t.DateSample.ToString("yyyy/MM/dd"),
station = t.StationID,
time = t.TimeSample.ToString("hh\\:mm\\:ss")
})
.ToList();
@ -73,10 +74,8 @@ namespace PSTW_CentralSystem.Areas.MMS.Controllers
}
catch (Exception ex)
{
// Show the real error in the browser (for debugging only)
return Content($"Error: {ex.Message}<br/>{ex.StackTrace}", "text/html");
}
}
[HttpGet] // Explicitly mark as a GET endpoint

10
Areas/MMS/Models/PDFGenerator/TarBallPDF.cs
View File

@ -308,11 +308,11 @@ namespace PSTW_CentralSystem.Areas.MMS.Models.PDFGenerator
// Row 2: Captions
table.Cell().Element(CellStyle)
.Text(string.IsNullOrEmpty(_photoPath5) ? "" : $"Figure 5: {_optionalName1}")
.Text($"Figure 5: {(_optionalName1 ?? "")}")
.FontSize(12).AlignLeft();
table.Cell().Element(CellStyle)
.Text(string.IsNullOrEmpty(_photoPath6) ? "" : $"Figure 6: {_optionalName2}")
.Text($"Figure 6: {(_optionalName2 ?? "")}")
.FontSize(12).AlignLeft();
// Row 3: Optional images 7 & 8
@ -321,11 +321,11 @@ namespace PSTW_CentralSystem.Areas.MMS.Models.PDFGenerator
// Row 4: Captions
table.Cell().Element(CellStyle)
.Text(string.IsNullOrEmpty(_photoPath7) ? "" : $"Figure 7: {_optionalName3}")
.Text($"Figure 7: {(_optionalName3 ?? "")}")
.FontSize(12).AlignLeft();
table.Cell().Element(CellStyle)
.Text(string.IsNullOrEmpty(_photoPath8) ? "" : $"Figure 8: {_optionalName4}")
.Text($"Figure 8: {(_optionalName4 ?? "")}")
.FontSize(12).AlignLeft();
});
@ -360,7 +360,7 @@ namespace PSTW_CentralSystem.Areas.MMS.Models.PDFGenerator
table.Cell().Element(CellStyle).Text("Signature").FontSize(12);
table.Cell().Element(CellStyle).Text("");
table.Cell().Element(CellStyle).Text("Date").FontSize(12);
table.Cell().Element(CellStyle).Text($"{_dateSample:yyyyMMdd}").FontSize(12);
table.Cell().Element(CellStyle).Text($"{_dateSample:dd/MM/yyyy}").FontSize(12);
table.Cell().Element(CellStyle).Text("Designation").FontSize(12);
table.Cell().ColumnSpan(3).Element(CellStyle).Text(_levelName).FontSize(12);

90
Areas/MMS/Views/Marine/TarBallForm.cshtml
View File

@ -69,6 +69,7 @@
<th>No.</th>
<th>Date</th>
<th>Station</th>
<th>Time</th>
<th>Status</th>
<th>PDF</th>
</tr>
@ -86,16 +87,26 @@
<script>
new Vue({
el: '#app',
data: {
selectedMonth: '',
selectedYear: '',
months: [
'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September',
'October', 'November', 'December'
],
dataFromServer: @Html.Raw(Json.Serialize(Model ?? new List<object>()))
},
data: {
selectedMonth: '',
selectedYear: '',
months: [
'January', 'February', 'March', 'April', 'May',
'June', 'July', 'August', 'September',
'October', 'November', 'December'
],
dataFromServer: @Json.Serialize(Model ?? new List<object>()),
dataTable: null
},
mounted() {
if (this.dataFromServer && this.dataFromServer.length > 0) {
this.$nextTick(() => {
this.initializeDataTable();
});
} else {
console.log("No data received from server");
}
},
computed: {
years() {
if (!this.dataFromServer || this.dataFromServer.length === 0) {
@ -138,31 +149,27 @@
clearFilters() {
this.selectedMonth = '';
this.selectedYear = '';
}
},
mounted() {
// Initialize DataTables after Vue has rendered the table
this.$nextTick(() => {
const table = $('#tarballTable').DataTable({
},
initializeDataTable() {
// Initialize DataTables
const self = this; // Store the Vue instance context
this.dataTable = $('#tarballTable').DataTable({
"pageLength": 10,
"lengthMenu": [5, 10, 15, 20],
"responsive": true,
"order": [[1, "desc"]], // Default sorting by Date column (descending)
"orderMulti": false, // Disable multi-column sorting
"columns": [
{
"data": null,
"render": (data, type, row, meta) => meta.row + 1 // Dynamically generate "No."
},
{ "data": null,"render": (data, type, row, meta) => meta.row + 1},
{ "data": "date", "render": (data) => new Date(data).toLocaleDateString('en-GB') },
{ "data": "station" },
{ "data": "time" }, // Removed the incorrect toLocaleDateString()
{
"data": null,
"render": () => `
<button class="btn btn-success">Approve</button>
<button class="btn btn-danger">Reject</button>
`
<button class="btn btn-success" disabled>Approve</button>
<button class="btn btn-danger" disabled>Reject</button>
`
},
{
"data": null,
@ -174,22 +181,41 @@
],
"rowCallback": function(row, data, index) {
// Update the "No." column to start from 1 for the current page
const pageInfo = table.page.info();
const pageInfo = this.api().page.info();
$('td:first', row).html(pageInfo.start + index + 1);
}
});
// Populate the table with all data on initial load
table.rows.add(this.dataFromServer).draw();
// Populate the table with initial data
this.updateDataTable(this.sortedFilteredData);
//auto-filtering
$('#tarballTable_filter input').on('keyup', function () {
self.dataTable.search(this.value).draw();
});
},
updateDataTable(data) {
if (this.dataTable) {
this.dataTable.clear();
this.dataTable.rows.add(data);
this.dataTable.draw();
}
}
},
mounted() {
// Initialize DataTables after Vue has rendered the table
this.$nextTick(() => {
this.initializeDataTable();
});
},
watch: {
sortedFilteredData() {
sortedFilteredData(newData) {
// Automatically update DataTables whenever the filtered data changes
const table = $('#tarballTable').DataTable();
table.clear();
table.rows.add(this.sortedFilteredData);
table.draw();
this.updateDataTable(newData);
//trigger search function after updating data(?)
if(this.dataTable) {
this.dataTable.search('').draw();//clear existing search
}
}
}
});