data model whew

This commit is contained in:
2025-04-19 13:56:58 -04:00
parent 03b43ce3ab
commit 6178fdd15d
19 changed files with 789 additions and 2099 deletions

View File

@ -336,6 +336,125 @@ async function submitPirateShipLabel() {
}
}
// Show set labels modal
function showSetLabelsModal() {
const modal = document.getElementById('setLabelsModal');
modal.classList.remove('hidden');
modal.classList.add('flex');
fetchAvailableSets();
// Add event listener for search input
const searchInput = document.getElementById('setSearch');
searchInput.addEventListener('input', filterSets);
}
// Close set labels modal
function closeSetLabelsModal() {
const modal = document.getElementById('setLabelsModal');
modal.classList.remove('flex');
modal.classList.add('hidden');
// Clear search input
document.getElementById('setSearch').value = '';
}
// Filter sets based on search input
function filterSets() {
const searchTerm = document.getElementById('setSearch').value.toLowerCase();
const setItems = document.querySelectorAll('#setLabelsList > div');
setItems.forEach(item => {
const label = item.querySelector('label');
const text = label.textContent.toLowerCase();
if (text.includes(searchTerm)) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
}
// Fetch available sets from the API
async function fetchAvailableSets() {
try {
setLoading(true);
const response = await fetch(`${API_BASE_URL}/set-labels/available-sets`);
if (!response.ok) {
throw new Error('Failed to fetch available sets');
}
const sets = await response.json();
displayAvailableSets(sets);
} catch (error) {
showToast('Error fetching available sets: ' + error.message, 'error');
} finally {
setLoading(false);
}
}
// Display available sets in the modal
function displayAvailableSets(sets) {
const setList = document.getElementById('setLabelsList');
setList.innerHTML = '';
if (!sets || sets.length === 0) {
setList.innerHTML = '<div class="text-center text-gray-400 py-4">No sets available</div>';
return;
}
// Sort sets alphabetically by name
sets.sort((a, b) => a.name.localeCompare(b.name));
sets.forEach(set => {
const setItem = document.createElement('div');
setItem.className = 'flex items-center p-2 hover:bg-gray-600 rounded-lg cursor-pointer';
setItem.innerHTML = `
<input type="checkbox" id="set-${set.code}" class="rounded border-gray-600 bg-gray-800 text-teal-600 focus:ring-teal-500">
<label for="set-${set.code}" class="ml-2 text-gray-300">${set.name} (${set.code})</label>
`;
setList.appendChild(setItem);
});
// Trigger initial filter in case there's text in the search box
filterSets();
}
// Submit set labels request
async function submitSetLabels() {
try {
const selectedSets = Array.from(document.querySelectorAll('#setLabelsList input[type="checkbox"]:checked'))
.map(checkbox => checkbox.id.replace('set-', ''));
if (selectedSets.length === 0) {
showToast('Please select at least one set', 'error');
return;
}
setLoading(true);
const response = await fetch(`${API_BASE_URL}/set-labels/generate`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
sets: selectedSets
})
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.detail || 'Failed to generate set labels');
}
showToast('Set labels generated successfully');
closeSetLabelsModal();
} catch (error) {
showToast('Error generating set labels: ' + error.message, 'error');
} finally {
setLoading(false);
}
}
// Load orders when page loads
document.addEventListener('DOMContentLoaded', () => {
fetchOrders();

View File

@ -45,6 +45,9 @@
<button onclick="showPirateShipModal()" class="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
Upload Pirate Ship Label
</button>
<button onclick="showSetLabelsModal()" class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 transition-colors">
Generate Set Labels
</button>
</div>
<div id="labelOptions" class="bg-gray-700 rounded-lg p-4">
<label class="block text-sm font-medium text-gray-300 mb-2">Label Type</label>
@ -93,6 +96,31 @@
</div>
</div>
<!-- Set Labels Modal -->
<div id="setLabelsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
<div class="bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
<h3 class="text-xl font-semibold text-gray-100 mb-4">Generate Set Labels</h3>
<div class="mb-4">
<div class="mb-2">
<label for="setSearch" class="block text-sm font-medium text-gray-300 mb-2">Search Sets</label>
<input type="text" id="setSearch" placeholder="Search sets..." class="w-full rounded-lg border-gray-600 bg-gray-700 text-gray-100 focus:ring-blue-500 focus:border-blue-500">
</div>
<label class="block text-sm font-medium text-gray-300 mb-2">Select Sets</label>
<div id="setLabelsList" class="max-h-60 overflow-y-auto bg-gray-700 rounded-lg p-2">
<!-- Sets will be populated here -->
</div>
</div>
<div class="flex justify-end space-x-3">
<button onclick="closeSetLabelsModal()" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Cancel
</button>
<button onclick="submitSetLabels()" class="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 transition-colors">
Generate
</button>
</div>
</div>
</div>
<!-- Order List Section -->
<div class="bg-gray-800 rounded-xl shadow-sm p-6">
<div class="flex items-center justify-between mb-6">