added 'time' column, fix image sorting generation based on naming format
This commit is contained in:
parent
416b283341
commit
9958a4b1d1
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -69,6 +69,7 @@
|
||||
<th>No.</th>
|
||||
<th>Date</th>
|
||||
<th>Station</th>
|
||||
<th>Time</th>
|
||||
<th>Status</th>
|
||||
<th>PDF</th>
|
||||
</tr>
|
||||
@ -94,7 +95,17 @@
|
||||
'June', 'July', 'August', 'September',
|
||||
'October', 'November', 'December'
|
||||
],
|
||||
dataFromServer: @Html.Raw(Json.Serialize(Model ?? new List<object>()))
|
||||
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() {
|
||||
@ -138,30 +149,26 @@
|
||||
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>
|
||||
`
|
||||
},
|
||||
{
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user