updated template creation
This commit is contained in:
@@ -193,153 +193,95 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
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
|
||||
// Handle setting label dimensions
|
||||
setDimensionsBtn.addEventListener('click', () => {
|
||||
const width = document.getElementById('label-width').value;
|
||||
const height = document.getElementById('label-height').value;
|
||||
const widthInput = document.getElementById('label-width').value;
|
||||
const heightInput = document.getElementById('label-height').value;
|
||||
|
||||
if (width && height) {
|
||||
alert(`Label dimensions set to ${width}mm x ${height}mm.`);
|
||||
} else {
|
||||
alert('Please enter valid dimensions.');
|
||||
if (!widthInput || !heightInput) {
|
||||
alert('Please enter valid dimensions for width and height.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert mm to pixels (1 mm = 3.779528 pixels)
|
||||
const widthPixels = parseFloat(widthInput) * 3.779528;
|
||||
const heightPixels = parseFloat(heightInput) * 3.779528;
|
||||
|
||||
// Set the size of the label container
|
||||
labelPreview.style.width = `${widthPixels}px`;
|
||||
labelPreview.style.height = `${heightPixels}px`;
|
||||
|
||||
alert(`Label dimensions set to ${widthPixels.toFixed(2)}px x ${heightPixels.toFixed(2)}px.`);
|
||||
});
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const labelPreview = document.getElementById('label-preview');
|
||||
const addFieldButtons = document.querySelectorAll('.add-field-btn');
|
||||
|
||||
// Add fields dynamically
|
||||
addFieldButtons.forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const fieldType = button.getAttribute('data-type');
|
||||
addFieldToPreview(fieldType);
|
||||
});
|
||||
});
|
||||
|
||||
// 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));
|
||||
});
|
||||
// Function to add a field to the preview
|
||||
function addFieldToPreview(type) {
|
||||
const field = document.createElement('div');
|
||||
field.classList.add('draggable-field');
|
||||
field.setAttribute('draggable', 'true');
|
||||
field.style.position = 'absolute';
|
||||
field.style.top = '10px';
|
||||
field.style.left = '10px';
|
||||
|
||||
// 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'));
|
||||
switch (type) {
|
||||
case 'text-label':
|
||||
field.textContent = 'Text Label';
|
||||
field.style.fontSize = '14px';
|
||||
break;
|
||||
case 'text-input':
|
||||
field.innerHTML = '<input type="text" placeholder="Input Field" style="width: 100px;">';
|
||||
break;
|
||||
case 'barcode':
|
||||
field.textContent = 'Barcode Box';
|
||||
field.style.border = '1px dashed #000';
|
||||
field.style.width = '100px';
|
||||
field.style.height = '50px';
|
||||
break;
|
||||
case 'qrcode':
|
||||
field.textContent = 'QR Code Box';
|
||||
field.style.border = '1px dashed #000';
|
||||
field.style.width = '50px';
|
||||
field.style.height = '50px';
|
||||
break;
|
||||
}
|
||||
|
||||
// Update label preview on checkbox change
|
||||
checkbox.addEventListener('change', updateLabelPreview);
|
||||
});
|
||||
})
|
||||
.catch(error => console.error('Error fetching columns:', error));
|
||||
labelPreview.appendChild(field);
|
||||
|
||||
// Make the field draggable
|
||||
makeFieldDraggable(field);
|
||||
}
|
||||
|
||||
// Update the label preview
|
||||
function updateLabelPreview() {
|
||||
const selectedColumns = Array.from(columnsContainer.querySelectorAll('input[type="checkbox"]:checked'))
|
||||
.map(checkbox => checkbox.value);
|
||||
// Function to make a field draggable
|
||||
function makeFieldDraggable(field) {
|
||||
field.addEventListener('dragstart', (e) => {
|
||||
e.dataTransfer.setData('text/plain', null);
|
||||
field.classList.add('dragging');
|
||||
});
|
||||
|
||||
labelPreview.innerHTML = '<h4>Label Preview:</h4>';
|
||||
selectedColumns.forEach(column => {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = column;
|
||||
labelPreview.appendChild(div);
|
||||
field.addEventListener('dragend', () => {
|
||||
field.classList.remove('dragging');
|
||||
});
|
||||
|
||||
labelPreview.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
const draggingField = document.querySelector('.dragging');
|
||||
const rect = labelPreview.getBoundingClientRect();
|
||||
draggingField.style.left = `${e.clientX - rect.left}px`;
|
||||
draggingField.style.top = `${e.clientY - rect.top}px`;
|
||||
});
|
||||
}
|
||||
|
||||
// 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));
|
||||
});
|
||||
|
||||
document.getElementById('generate-pdf-btn').addEventListener('click', () => {
|
||||
const width = document.getElementById('label-width').value;
|
||||
const height = document.getElementById('label-height').value;
|
||||
const selectedColumns = Array.from(document.querySelectorAll('#columns-container input[type="checkbox"]:checked'))
|
||||
.map(checkbox => checkbox.value);
|
||||
|
||||
if (!width || !height || selectedColumns.length === 0) {
|
||||
alert('Please set dimensions and select at least one column.');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
width: parseFloat(width),
|
||||
height: parseFloat(height),
|
||||
columns: selectedColumns
|
||||
};
|
||||
|
||||
fetch('/generate_pdf', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
alert(result.message);
|
||||
console.log('PDF Path:', result.pdf_path);
|
||||
|
||||
// Provide a link to download the PDF
|
||||
const downloadLink = document.createElement('a');
|
||||
downloadLink.href = result.pdf_path;
|
||||
downloadLink.textContent = 'Download Generated PDF';
|
||||
downloadLink.target = '_blank';
|
||||
document.getElementById('label-preview').appendChild(downloadLink);
|
||||
})
|
||||
.catch(error => console.error('Error generating PDF:', error));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user