data model whew
This commit is contained in:
@ -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();
|
||||
|
@ -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">
|
||||
|
Reference in New Issue
Block a user