added report styles
This commit is contained in:
@@ -118,7 +118,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
reportButtons.forEach((button) => {
|
||||
button.addEventListener('click', () => {
|
||||
// Skip buttons that have their own handlers
|
||||
if (button.id === 'select-day-report' || button.id === 'date-range-report' || button.id === 'select-day-defects-report') {
|
||||
if (button.id === 'select-day-report' || button.id === 'date-range-report' || button.id === 'select-day-defects-report' || button.id === 'date-range-defects-report') {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -744,9 +744,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// ===== DATE RANGE MODAL FUNCTIONALITY =====
|
||||
|
||||
const dateRangeReportBtn = document.getElementById('date-range-report');
|
||||
const dateRangeDefectsBtn = document.getElementById('date-range-defects-report');
|
||||
const dateRangeModal = document.getElementById('date-range-modal');
|
||||
const closeDateRange = document.getElementById('close-date-range');
|
||||
const cancelDateRange = document.getElementById('cancel-date-range');
|
||||
|
||||
// Track which date range report type was requested
|
||||
let currentDateRangeReportType = 'standard'; // 'standard' or 'defects'
|
||||
const confirmDateRange = document.getElementById('confirm-date-range');
|
||||
const startDateInput = document.getElementById('start-date');
|
||||
const endDateInput = document.getElementById('end-date');
|
||||
@@ -755,6 +759,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// Open date range modal
|
||||
dateRangeReportBtn.addEventListener('click', () => {
|
||||
console.log('DEBUG: Date Range Report button clicked!');
|
||||
currentDateRangeReportType = 'standard';
|
||||
|
||||
// Set default dates (last 7 days to today)
|
||||
const today = new Date();
|
||||
@@ -773,6 +778,30 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
validateDateRange(); // Enable/disable confirm button based on inputs
|
||||
});
|
||||
|
||||
// Add handler for date range defects report
|
||||
if (dateRangeDefectsBtn) {
|
||||
dateRangeDefectsBtn.addEventListener('click', () => {
|
||||
console.log('DEBUG: Date Range Quality Defects Report button clicked!');
|
||||
currentDateRangeReportType = 'defects';
|
||||
|
||||
// Set default dates (last 7 days to today)
|
||||
const today = new Date();
|
||||
const weekAgo = new Date();
|
||||
weekAgo.setDate(today.getDate() - 6); // Last 7 days including today
|
||||
|
||||
const todayStr = formatDateForInput(today);
|
||||
const weekAgoStr = formatDateForInput(weekAgo);
|
||||
|
||||
startDateInput.value = weekAgoStr;
|
||||
endDateInput.value = todayStr;
|
||||
|
||||
console.log(`DEBUG: Default date range for defects report set to ${weekAgoStr} - ${todayStr}`);
|
||||
|
||||
dateRangeModal.style.display = 'block';
|
||||
validateDateRange(); // Enable/disable confirm button based on inputs
|
||||
});
|
||||
}
|
||||
|
||||
// Close modal functions
|
||||
function closeDateRangeModal() {
|
||||
dateRangeModal.style.display = 'none';
|
||||
@@ -822,11 +851,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const startDate = startDateInput.value;
|
||||
const endDate = endDateInput.value;
|
||||
|
||||
console.log(`DEBUG: Generating date range report from ${startDate} to ${endDate}`);
|
||||
console.log(`DEBUG: Generating ${currentDateRangeReportType} date range report from ${startDate} to ${endDate}`);
|
||||
closeDateRangeModal();
|
||||
|
||||
// Fetch report data for the selected date range
|
||||
fetchDateRangeReport(startDate, endDate);
|
||||
// Fetch report data for the selected date range based on report type
|
||||
if (currentDateRangeReportType === 'defects') {
|
||||
fetchDateRangeDefectsReport(startDate, endDate);
|
||||
} else {
|
||||
fetchDateRangeReport(startDate, endDate);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -931,4 +964,102 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
localPopulateTable({ headers: [], rows: [] });
|
||||
});
|
||||
}
|
||||
|
||||
// Function to fetch date range quality defects report
|
||||
function fetchDateRangeDefectsReport(startDate, endDate) {
|
||||
console.log(`DEBUG: Fetching date range quality defects report from ${startDate} to ${endDate}`);
|
||||
|
||||
// Get elements directly to avoid scope issues
|
||||
const reportTitleElement = document.getElementById('report-title');
|
||||
const reportTableElement = document.getElementById('report-table');
|
||||
|
||||
if (!reportTitleElement) {
|
||||
console.error('ERROR: report-title element not found!');
|
||||
return;
|
||||
}
|
||||
|
||||
reportTitleElement.textContent = `Loading quality defects report for ${startDate} to ${endDate}...`;
|
||||
|
||||
// Local function to populate table to avoid scope issues
|
||||
function localPopulateTable(data) {
|
||||
const tableHead = reportTableElement.querySelector('thead tr');
|
||||
const tableBody = reportTableElement.querySelector('tbody');
|
||||
|
||||
// Clear existing table content
|
||||
tableHead.innerHTML = '';
|
||||
tableBody.innerHTML = '';
|
||||
|
||||
if (data.headers && data.rows && data.rows.length > 0) {
|
||||
// Populate table headers
|
||||
data.headers.forEach((header) => {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = header;
|
||||
tableHead.appendChild(th);
|
||||
});
|
||||
|
||||
// Populate table rows
|
||||
data.rows.forEach((row) => {
|
||||
const tr = document.createElement('tr');
|
||||
row.forEach((cell, index) => {
|
||||
const td = document.createElement('td');
|
||||
td.textContent = cell;
|
||||
tr.appendChild(td);
|
||||
});
|
||||
tableBody.appendChild(tr);
|
||||
});
|
||||
} else {
|
||||
// Handle no data scenarios
|
||||
const tr = document.createElement('tr');
|
||||
const td = document.createElement('td');
|
||||
td.colSpan = 10; // Span all columns
|
||||
td.textContent = 'No quality defects found for the selected date range.';
|
||||
td.style.textAlign = 'center';
|
||||
tr.appendChild(td);
|
||||
tableBody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
|
||||
const url = `/generate_report?report=9&start_date=${startDate}&end_date=${endDate}`;
|
||||
console.log(`DEBUG: Making date range defects request to URL: ${url}`);
|
||||
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
console.log(`DEBUG: Response status: ${response.status}`);
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log('DEBUG: Date range defects response data:', data);
|
||||
|
||||
if (data.error) {
|
||||
reportTitleElement.textContent = `Error: ${data.error}`;
|
||||
localPopulateTable({ headers: [], rows: [] });
|
||||
} else if (data.message) {
|
||||
reportTitleElement.textContent = data.message;
|
||||
localPopulateTable({ headers: [], rows: [] });
|
||||
} else if (data.rows && data.rows.length === 0) {
|
||||
reportTitleElement.textContent = `No quality defects found for ${startDate} to ${endDate}`;
|
||||
localPopulateTable(data);
|
||||
} else {
|
||||
const recordCount = data.rows ? data.rows.length : 0;
|
||||
let titleText = `Quality Defects Report: ${startDate} to ${endDate} (${recordCount} defective items)`;
|
||||
|
||||
// Add defects summary info if available
|
||||
if (data.defects_summary) {
|
||||
const summary = data.defects_summary;
|
||||
titleText += ` | Rejected Qty: ${summary.total_rejected_quantity || 0}, Defect Types: ${summary.unique_defect_types || 0}`;
|
||||
if (summary.days_with_defects) {
|
||||
titleText += `, Days: ${summary.days_with_defects}`;
|
||||
}
|
||||
}
|
||||
|
||||
reportTitleElement.textContent = titleText;
|
||||
localPopulateTable(data);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching date range defects report:', error);
|
||||
reportTitleElement.textContent = 'Error loading date range quality defects report';
|
||||
localPopulateTable({ headers: [], rows: [] });
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user