Added Pages
This commit is contained in:
@@ -158,11 +158,149 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
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));
|
||||
});
|
||||
});
|
||||
@@ -561,47 +561,22 @@ body.dark-mode .scan-table tr:nth-child(odd) {
|
||||
/* Dashboard container */
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Allow wrapping to the next row if needed */
|
||||
flex-wrap: wrap; /* Allow cards to wrap to the next row if needed */
|
||||
justify-content: space-between; /* Distribute cards evenly */
|
||||
gap: 20px; /* Add spacing between the cards */
|
||||
margin: 20px auto; /* Center the container */
|
||||
max-width: 1200px; /* Optional: Limit the maximum width of the container */
|
||||
}
|
||||
|
||||
/* Full-width card for the dashboard */
|
||||
.dashboard-full-width-card {
|
||||
flex: 0 0 100%; /* Take up the full width of the container */
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Individual cards for the dashboard */
|
||||
.dashboard-card {
|
||||
flex: 1 1 calc(25% - 20px); /* Ensure cards are evenly distributed */
|
||||
padding: 20px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Light mode styles for dashboard cards */
|
||||
body.light-mode .dashboard-card,
|
||||
body.light-mode .dashboard-full-width-card {
|
||||
background: #fff;
|
||||
color: #000;
|
||||
flex: 1 1 calc(33.333% - 20px); /* Each card takes 1/3 of the row, minus the gap */
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Dark mode styles for dashboard cards */
|
||||
body.dark-mode .dashboard-card,
|
||||
body.dark-mode .dashboard-full-width-card {
|
||||
background: #1e1e1e;
|
||||
color: #fff;
|
||||
border: 1px solid #444;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Ensure cards have consistent height */
|
||||
@@ -630,15 +605,27 @@ body.dark-mode .dashboard-full-width-card {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
/* Dark mode styles for dashboard cards */
|
||||
body.dark-mode .dashboard-card {
|
||||
background-color: #333; /* Dark background color */
|
||||
color: #fff; /* Light text color */
|
||||
border: 1px solid #444; /* Subtle border for dark mode */
|
||||
}
|
||||
|
||||
body.dark-mode .dashboard-card .btn {
|
||||
background-color: #555; /* Darker button background */
|
||||
color: #fff; /* Light button text */
|
||||
}
|
||||
|
||||
body.dark-mode .dashboard-card .btn:hover {
|
||||
background-color: #777; /* Slightly lighter button background on hover */
|
||||
}
|
||||
|
||||
/* Responsive design for smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-card {
|
||||
flex: 1 1 100%; /* Stack cards vertically on smaller screens */
|
||||
}
|
||||
|
||||
.dashboard-full-width-card {
|
||||
flex: 1 1 100%; /* Ensure the full-width card spans the entire width */
|
||||
}
|
||||
}
|
||||
|
||||
/* Style for the export description label */
|
||||
|
||||
Reference in New Issue
Block a user