how do I apply a check on a class check?
I have the following html5 logic. My style applies the format to my razor page view.
I want to apply the css setting, can I add any ID fields into my somehow?
<style>
.billable {
background-color: #e2efda;
}
.nonbillable_row{
background-color: #ddebf7;
}
.week_row{
background-color: #fce4d6;
}
.title_row{
background-color: #222222;
color: #e7e7e9;
}
</style>
This class is then assigned to a table row.
<div id="timesheetset1">
<table class="display nowrap table table-bordered" style="width:95%">
<thead>
<tr class="title_row">
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.code)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.billable)</th>
<th>Project</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.taskName)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.comments)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.afterHours)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.work)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.assigneeDisplayName)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.start)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.billingTYPE)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.status)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.summaryRootCause)</th>
<th>@Html.DisplayNameFor(model => Model.TimesheetSingle.declinedReason)</th>
</tr>
<tr>
@if(Model.TitleTimesheet1 == null)
{
<th></th>
}
else
{
<th colspan="13" class="week_row">@Model.TitleTimesheet1</th>
}
</tr>
</thead>
<tbody style="font-size:x-small">
@if (Model.BTimesheet1.Count > 0)
{
<tr class="billable" data-row-type="billable">
<th>Billable</th>
<th>Billable</th>
<th>Billable</th>
<th>Billable</th>
<th>Total Billable timesheets: (@Model.BTimesheet1.Count)</th>
<th></th>
<th>
@{
double SumHours = Model.BTimesheet1.Sum(item => item.work);
<text>@SumHours.ToString("F2")</text>
}
</th>
<th></th>
<th></th>
<th>Billable</th>
<th>Billable</th>
<th>Billable</th>
<th>Billable</th>
</tr>
@foreach (var item in Model.BTimesheet1)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.id)</td>
<td>@(item.billable ? "Billable" : "Non-Billable")</td>
<td>@Html.DisplayFor(modelItem => item.projectExternalName)</td>
<td>@Html.DisplayFor(modelItem => item.taskName)</td>
<td>@Html.DisplayFor(modelItem => item.comments)</td>
<td>@Html.DisplayFor(modelItem => item.afterHours)</td>
<td>@Html.DisplayFor(modelItem => item.work)</td>
<td>@Html.DisplayFor(modelItem => item.assigneeDisplayName)</td>
<td>@DateTime.Parse(item.start).ToString("yyyy-MM-dd")</td>
<td>@Html.DisplayFor(modelItem => item.billingTYPE)</td>
<td>@Html.DisplayFor(modelItem => item.status)</td>
<td>@Html.DisplayFor(modelItem => item.summaryRootCause)</td>
<td>@Html.DisplayFor(modelItem => item.declinedReason)</td>
</tr>
}
}
@if (Model.NBTimesheet1.Count > 0)
{
<tr class="nonbillable" data-row-type="nonbillable">
<th>Non-Billable</th>
<th>Non-Billable</th>
<th>Non-Billable</th>
<th>Non-Billable</th>
<th>Total Billable timesheets: (@Model.NBTimesheet1.Count)</th>
<th></th>
<th>
@{
double SumHours = Model.NBTimesheet1.Sum(item => item.work);
<text>@SumHours.ToString("F2")</text>
}
</th>
<th></th>
<th></th>
<th>Non-Billable</th>
<th>Non-Billable</th>
<th>Non-Billable</th>
<th>Non-Billable</th>
</tr>
@foreach (var item in Model.NBTimesheet1)
{
<tr>
<td>@Html.DisplayFor(modelItem => item.id)</td>
<td>@(item.billable ? "Billable" : "Non-Billable")</td>
<td>@Html.DisplayFor(modelItem => item.projectExternalName)</td>
<td>@Html.DisplayFor(modelItem => item.taskName)</td>
<td>@Html.DisplayFor(modelItem => item.comments)</td>
<td>@Html.DisplayFor(modelItem => item.afterHours)</td>
<td>@Html.DisplayFor(modelItem => item.work)</td>
<td>@Html.DisplayFor(modelItem => item.assigneeDisplayName)</td>
<td>@DateTime.Parse(item.start).ToString("yyyy-MM-dd")</td>
<td>@Html.DisplayFor(modelItem => item.billingTYPE)</td>
<td>@Html.DisplayFor(modelItem => item.status)</td>
<td>@Html.DisplayFor(modelItem => item.summaryRootCause)</td>
<td>@Html.DisplayFor(modelItem => item.declinedReason)</td>
</tr>
}
}
</tbody>
</table>
</div>
I then have a duplication of the above razor logic for timesheet set 1 through to 6.
I then need to merge this table set into 1 and run the following script set.
<script>
// Function to get current timestamp in 'dd_MM_yyyy_hh:mm:ss' format
function getFormattedTimestamp() {
const now = new Date();
const pad = (num) => (num < 10 ? '0' + num : num);
const day = pad(now.getDate());
const month = pad(now.getMonth() + 1); // Month is zero-based
const year = now.getFullYear();
const hours = pad(now.getHours());
const minutes = pad(now.getMinutes());
const seconds = pad(now.getSeconds());
return `${day}_${month}_${year}_${hours}:${minutes}:${seconds}`;
}
// Function to concatenate the tables' contents
function concatenateTables() {
const tableSets = [
"#timesheetset1 table",
"#timesheetset2 table",
"#timesheetset3 table",
"#timesheetset4 table",
"#timesheetset5 table",
"#timesheetset6 table"
];
const concatenatedTable = document.createElement("table");
tableSets.forEach(selector => {
const table = document.querySelector(selector).cloneNode(true);
Array.from(table.rows).forEach(row => {
const rowType = row.getAttribute('data-row-type');
if (rowType === 'billable') {
row.style.backgroundColor = '#E2EFDA'; // Light green for billable
} else if (rowType === 'nonbillable') {
row.style.backgroundColor = '#DDEBF7'; // Light blue for non-billable
}
concatenatedTable.appendChild(row);
});
});
return concatenatedTable;
}
function exportToPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF({ orientation: "landscape" });
const concatenatedTable = concatenateTables();
const tableData = Array.from(concatenatedTable.rows).slice(1).map((row, rowIndex) => {
return {
cells: Array.from(row.cells).map(cell => {
if (cell.colSpan === 13) {
return { content: cell.textContent.trim(), colSpan: 13 };
}
return cell.textContent.trim();
}),
type: row.getAttribute('data-row-type') // Add the row type for color processing
};
});
const header = [
['CODE', 'Billing Type', 'Project', 'NAME', 'NOTE', 'SUPPORT HOURS', 'ACTUAL WORK', 'Assignee', 'START', 'BILLING TYPE', 'APPROVALS', 'SUMMARY ROOT CAUSE', 'DECLINED REASON']
];
doc.autoTable({
head: header,
body: tableData.map(row => row.cells.map(cell => {
if (typeof cell === 'object' && cell.colSpan === 13) {
return {
content: cell.content,
colSpan: 13,
styles: { halign: 'left', fillColor: [252, 228, 218], textColor: [0, 0, 0], fontStyle: 'bold', fontSize: 6 }
};
}
return cell;
})),
startY: 10,
theme: 'grid',
styles: {
fontSize: 5,
halign: 'left',
lineWidth: 0.1,
lineColor: [0, 0, 0]
},
headStyles: {
fillColor: [0, 0, 0],
textColor: [255, 255, 255],
lineColor: [0, 0, 0]
},
margin: { top: 20, left: 10, right: 10, bottom:20 },
didParseCell: function (data) {
if (data.section === 'head') {
data.cell.styles.fontSize = 6;
}
},
didDrawCell: function (data) {
const rowType = tableData[data.row.index]?.type; // Retrieve the row type metadata
if (rowType === 'nonbillable') {
data.cell.styles.fillColor = [221, 235, 247]; // Light blue for non-billable
} else if (rowType === 'billable') {
data.cell.styles.fillColor = [226, 239, 218]; // Light green for billable
}
},
pageBreak: 'avoid', // Avoid breaking rows across pages
pageBreak: 'auto',
});
let now = new Date();
let hours = now.getHours().toString().padStart(2, '0');
let minutes = now.getMinutes().toString().padStart(2, '0');
let seconds = now.getSeconds().toString().padStart(2, '0');
let formattedTime = `${hours}h${minutes}m${seconds}`;
let filename = `@Model.FileName${formattedTime}.pdf`;
doc.save(filename);
}
// Export to Excel function with dynamic file name
function exportToExcel() {
const concatenatedTable = concatenateTables();
const workbook = XLSX.utils.table_to_book(concatenatedTable, { sheet: "Sheet1" });
// Get the current time
let now = new Date();
let hours = now.getHours().toString().padStart(2, '0');
let minutes = now.getMinutes().toString().padStart(2, '0');
let seconds = now.getSeconds().toString().padStart(2, '0');
let formattedTime = `${hours}h${minutes}m${seconds}`;
let filename = `@Model.FileName run_${formattedTime}.xlsx`;
filename = filename.replace(/+/g, '+');
XLSX.writeFile(workbook, filename);
}
</script>
However on the jspdf my colors are not holding for the billable lines to be green and the nonbillable headers to be blue.
Not sure where I am missing something that is causing the colors not to pull through?
For reference the billable rows are only the headers of the data and not every line.