306 lines
12 KiB
JavaScript
306 lines
12 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const reportButtons = document.querySelectorAll('.report-btn');
|
|
const reportTitle = document.getElementById('report-title');
|
|
const reportTable = document.getElementById('report-table');
|
|
const exportCsvButton = document.getElementById('export-csv');
|
|
const exportPdfButton = document.getElementById('export-pdf');
|
|
const themeToggleButton = document.getElementById('theme-toggle');
|
|
const body = document.body;
|
|
|
|
// Helper function to update the theme toggle button text
|
|
function updateThemeToggleButtonText() {
|
|
if (body.classList.contains('dark-mode')) {
|
|
themeToggleButton.textContent = 'Change to Light Mode';
|
|
} else {
|
|
themeToggleButton.textContent = 'Change to Dark Mode';
|
|
}
|
|
}
|
|
|
|
// Check and apply the saved theme from localStorage
|
|
const savedTheme = localStorage.getItem('theme');
|
|
if (savedTheme) {
|
|
body.classList.toggle('dark-mode', savedTheme === 'dark');
|
|
}
|
|
|
|
// Update the button text based on the current theme
|
|
updateThemeToggleButtonText();
|
|
|
|
// Toggle the theme on button click
|
|
themeToggleButton.addEventListener('click', () => {
|
|
const isDarkMode = body.classList.toggle('dark-mode');
|
|
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
|
|
updateThemeToggleButtonText(); // Update the button text after toggling
|
|
});
|
|
|
|
// Helper function to format dates
|
|
function formatDate(dateString) {
|
|
const date = new Date(dateString);
|
|
if (!isNaN(date)) {
|
|
return date.toISOString().split('T')[0]; // Format as yyyy-mm-dd
|
|
}
|
|
return dateString; // Fallback if not a valid date
|
|
}
|
|
|
|
// Function to populate the table with data
|
|
function populateTable(data) {
|
|
const tableHead = reportTable.querySelector('thead tr');
|
|
const tableBody = reportTable.querySelector('tbody');
|
|
|
|
// Clear existing table content
|
|
tableHead.innerHTML = '';
|
|
tableBody.innerHTML = '';
|
|
|
|
if (data.headers && data.rows) {
|
|
// 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');
|
|
|
|
// Format the "Date" column
|
|
if (data.headers[index].toLowerCase() === 'date' && cell) {
|
|
td.textContent = formatDate(cell);
|
|
} else {
|
|
td.textContent = cell;
|
|
}
|
|
|
|
tr.appendChild(td);
|
|
});
|
|
tableBody.appendChild(tr);
|
|
});
|
|
} else {
|
|
// No data available
|
|
const tr = document.createElement('tr');
|
|
const td = document.createElement('td');
|
|
td.textContent = 'No data available.';
|
|
td.colSpan = data.headers ? data.headers.length : 1;
|
|
tr.appendChild(td);
|
|
tableBody.appendChild(tr);
|
|
}
|
|
}
|
|
|
|
// Function to export table data as CSV
|
|
function exportTableToCSV(filename) {
|
|
let csv = [];
|
|
const rows = reportTable.querySelectorAll('tr');
|
|
|
|
// Loop through each row in the table
|
|
rows.forEach((row) => {
|
|
const cells = row.querySelectorAll('th, td');
|
|
const rowData = Array.from(cells).map((cell) => `"${cell.textContent.trim()}"`);
|
|
csv.push(rowData.join(','));
|
|
});
|
|
|
|
// Create a Blob from the CSV data
|
|
const csvBlob = new Blob([csv.join('\n')], { type: 'text/csv' });
|
|
|
|
// Create a link element to trigger the download
|
|
const downloadLink = document.createElement('a');
|
|
downloadLink.href = URL.createObjectURL(csvBlob);
|
|
downloadLink.download = filename;
|
|
|
|
// Append the link to the document, trigger the download, and remove the link
|
|
document.body.appendChild(downloadLink);
|
|
downloadLink.click();
|
|
document.body.removeChild(downloadLink);
|
|
}
|
|
|
|
// Handle report button clicks
|
|
reportButtons.forEach((button) => {
|
|
button.addEventListener('click', () => {
|
|
const reportNumber = button.dataset.report;
|
|
const reportLabel = button.textContent.trim();
|
|
|
|
// Update the title dynamically
|
|
reportTitle.textContent = `Data for "${reportLabel}"`;
|
|
|
|
// Fetch data for the selected report
|
|
fetch(`/get_report_data?report=${reportNumber}`)
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
console.log("Fetched data:", data); // Debugging
|
|
populateTable(data);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching report data:', error);
|
|
reportTitle.textContent = 'Error loading data.';
|
|
});
|
|
});
|
|
});
|
|
|
|
// Bind the export functionality to the CSV button
|
|
exportCsvButton.addEventListener('click', () => {
|
|
const rows = reportTable.querySelectorAll('tr');
|
|
if (rows.length === 0) {
|
|
alert('No data available to export.');
|
|
return;
|
|
}
|
|
|
|
const reportTitleText = reportTitle.textContent.trim();
|
|
const filename = `${reportTitleText.replace(/\s+/g, '_')}.csv`; // Generate a filename based on the report title
|
|
exportTableToCSV(filename);
|
|
});
|
|
|
|
// Placeholder for PDF export functionality
|
|
exportPdfButton.addEventListener('click', () => {
|
|
alert('Exporting current report as PDF...');
|
|
// Add logic to export the current report as PDF
|
|
});
|
|
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const templateList = document.getElementById('template-list');
|
|
const createTemplateBtn = document.getElementById('create-template-btn');
|
|
|
|
// Example: Handle the "Create New Template" button click
|
|
createTemplateBtn.addEventListener('click', () => {
|
|
window.location.href = '/create_template';
|
|
});
|
|
|
|
// Example: Handle the "Edit" and "Delete" buttons
|
|
templateList.addEventListener('click', (event) => {
|
|
if (event.target.classList.contains('edit-btn')) {
|
|
const templateId = event.target.closest('li').dataset.id;
|
|
window.location.href = `/edit_template/${templateId}`;
|
|
} else if (event.target.classList.contains('delete-btn')) {
|
|
const templateId = event.target.closest('li').dataset.id;
|
|
if (confirm('Are you sure you want to delete this template?')) {
|
|
fetch(`/delete_template/${templateId}`, { method: 'POST' })
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
alert(data);
|
|
// Optionally, remove the template from the list
|
|
event.target.closest('li').remove();
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const setDimensionsBtn = document.getElementById('set-dimensions-btn');
|
|
const getTablesBtn = document.getElementById('get-tables-btn');
|
|
const tablesContainer = document.getElementById('tables-container');
|
|
const columnsContainer = document.getElementById('columns-container');
|
|
const labelPreview = document.getElementById('label-preview');
|
|
const saveTemplateBtn = document.getElementById('save-template-btn');
|
|
|
|
// Handle setting dimensions
|
|
setDimensionsBtn.addEventListener('click', () => {
|
|
const width = document.getElementById('label-width').value;
|
|
const height = document.getElementById('label-height').value;
|
|
|
|
if (width && height) {
|
|
alert(`Label dimensions set to ${width}mm x ${height}mm.`);
|
|
} else {
|
|
alert('Please enter valid dimensions.');
|
|
}
|
|
});
|
|
|
|
// Handle fetching database tables
|
|
getTablesBtn.addEventListener('click', () => {
|
|
fetch('/get_tables')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
tablesContainer.innerHTML = '<h4>Select a Table:</h4>';
|
|
data.tables.forEach(table => {
|
|
const button = document.createElement('button');
|
|
button.textContent = table;
|
|
button.classList.add('btn');
|
|
button.addEventListener('click', () => fetchColumns(table));
|
|
tablesContainer.appendChild(button);
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching tables:', error));
|
|
});
|
|
|
|
// Fetch columns for a selected table
|
|
function fetchColumns(table) {
|
|
fetch(`/get_columns?table=${table}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
columnsContainer.innerHTML = '<h4>Select Columns:</h4>';
|
|
data.columns.forEach(column => {
|
|
const checkbox = document.createElement('input');
|
|
checkbox.type = 'checkbox';
|
|
checkbox.value = column;
|
|
checkbox.id = `column-${column}`;
|
|
const label = document.createElement('label');
|
|
label.textContent = column;
|
|
label.htmlFor = `column-${column}`;
|
|
columnsContainer.appendChild(checkbox);
|
|
columnsContainer.appendChild(label);
|
|
columnsContainer.appendChild(document.createElement('br'));
|
|
|
|
// Update label preview on checkbox change
|
|
checkbox.addEventListener('change', updateLabelPreview);
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching columns:', error));
|
|
}
|
|
|
|
// Update the label preview
|
|
function updateLabelPreview() {
|
|
const selectedColumns = Array.from(columnsContainer.querySelectorAll('input[type="checkbox"]:checked'))
|
|
.map(checkbox => checkbox.value);
|
|
|
|
labelPreview.innerHTML = '<h4>Label Preview:</h4>';
|
|
selectedColumns.forEach(column => {
|
|
const div = document.createElement('div');
|
|
div.textContent = column;
|
|
labelPreview.appendChild(div);
|
|
});
|
|
}
|
|
|
|
// Handle saving the template
|
|
saveTemplateBtn.addEventListener('click', () => {
|
|
const selectedColumns = Array.from(columnsContainer.querySelectorAll('input[type="checkbox"]:checked'))
|
|
.map(checkbox => checkbox.value);
|
|
|
|
if (selectedColumns.length === 0) {
|
|
alert('Please select at least one column for the label.');
|
|
return;
|
|
}
|
|
|
|
const width = document.getElementById('label-width').value;
|
|
const height = document.getElementById('label-height').value;
|
|
|
|
if (!width || !height) {
|
|
alert('Please set the label dimensions.');
|
|
return;
|
|
}
|
|
|
|
const templateData = {
|
|
width,
|
|
height,
|
|
columns: selectedColumns
|
|
};
|
|
|
|
fetch('/save_template', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(templateData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
alert(data.message);
|
|
})
|
|
.catch(error => console.error('Error saving template:', error));
|
|
});
|
|
}); |