568 lines
22 KiB
JavaScript
568 lines
22 KiB
JavaScript
const API_URL = '/api';
|
||
let allDrugs = [];
|
||
let currentDrug = null;
|
||
let showLowStockOnly = false;
|
||
let searchTerm = '';
|
||
let expandedDrugs = new Set();
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const drugForm = document.getElementById('drugForm');
|
||
const variantForm = document.getElementById('variantForm');
|
||
const editVariantForm = document.getElementById('editVariantForm');
|
||
const dispenseForm = document.getElementById('dispenseForm');
|
||
const editForm = document.getElementById('editForm');
|
||
const addModal = document.getElementById('addModal');
|
||
const addVariantModal = document.getElementById('addVariantModal');
|
||
const editVariantModal = document.getElementById('editVariantModal');
|
||
const dispenseModal = document.getElementById('dispenseModal');
|
||
const editModal = document.getElementById('editModal');
|
||
const addDrugBtn = document.getElementById('addDrugBtn');
|
||
const cancelAddBtn = document.getElementById('cancelAddBtn');
|
||
const cancelVariantBtn = document.getElementById('cancelVariantBtn');
|
||
const cancelEditVariantBtn = document.getElementById('cancelEditVariantBtn');
|
||
const cancelDispenseBtn = document.getElementById('cancelDispenseBtn');
|
||
const cancelEditBtn = document.getElementById('cancelEditBtn');
|
||
const showAllBtn = document.getElementById('showAllBtn');
|
||
const showLowStockBtn = document.getElementById('showLowStockBtn');
|
||
|
||
// Modal close buttons
|
||
const closeButtons = document.querySelectorAll('.close');
|
||
|
||
drugForm.addEventListener('submit', handleAddDrug);
|
||
variantForm.addEventListener('submit', handleAddVariant);
|
||
editVariantForm.addEventListener('submit', handleEditVariant);
|
||
dispenseForm.addEventListener('submit', handleDispenseDrug);
|
||
editForm.addEventListener('submit', handleEditDrug);
|
||
|
||
addDrugBtn.addEventListener('click', () => openModal(addModal));
|
||
|
||
cancelAddBtn.addEventListener('click', () => closeModal(addModal));
|
||
cancelVariantBtn.addEventListener('click', () => closeModal(addVariantModal));
|
||
cancelEditVariantBtn.addEventListener('click', () => closeModal(editVariantModal));
|
||
cancelDispenseBtn.addEventListener('click', () => closeModal(dispenseModal));
|
||
cancelEditBtn.addEventListener('click', closeEditModal);
|
||
const closeHistoryBtn = document.getElementById('closeHistoryBtn');
|
||
closeHistoryBtn.addEventListener('click', () => closeModal(document.getElementById('historyModal')));
|
||
|
||
closeButtons.forEach(btn => btn.addEventListener('click', (e) => {
|
||
const modal = e.target.closest('.modal');
|
||
closeModal(modal);
|
||
}));
|
||
|
||
showAllBtn.addEventListener('click', () => {
|
||
showLowStockOnly = false;
|
||
updateFilterButtons();
|
||
renderDrugs();
|
||
});
|
||
showLowStockBtn.addEventListener('click', () => {
|
||
showLowStockOnly = true;
|
||
updateFilterButtons();
|
||
renderDrugs();
|
||
});
|
||
|
||
// Search functionality
|
||
const drugSearch = document.getElementById('drugSearch');
|
||
if (drugSearch) {
|
||
let searchTimeout;
|
||
drugSearch.addEventListener('input', (e) => {
|
||
clearTimeout(searchTimeout);
|
||
searchTimeout = setTimeout(() => {
|
||
searchTerm = e.target.value.toLowerCase().trim();
|
||
renderDrugs();
|
||
}, 150);
|
||
});
|
||
}
|
||
|
||
// Close modal when clicking outside
|
||
window.addEventListener('click', (e) => {
|
||
if (e.target.classList.contains('modal')) {
|
||
closeModal(e.target);
|
||
}
|
||
});
|
||
|
||
loadDrugs();
|
||
});
|
||
|
||
// Load drugs from API
|
||
async function loadDrugs() {
|
||
try {
|
||
const response = await fetch(`${API_URL}/drugs`);
|
||
if (!response.ok) throw new Error('Failed to load drugs');
|
||
allDrugs = await response.json();
|
||
|
||
renderDrugs();
|
||
updateDispenseDrugSelect();
|
||
} catch (error) {
|
||
console.error('Error loading drugs:', error);
|
||
document.getElementById('drugsList').innerHTML =
|
||
'<p class="empty">Error loading drugs. Make sure the backend is running on http://localhost:8000</p>';
|
||
}
|
||
}
|
||
|
||
// Modal utility functions
|
||
function openModal(modal) {
|
||
modal.classList.add('show');
|
||
document.body.style.overflow = 'hidden';
|
||
}
|
||
|
||
function closeModal(modal) {
|
||
modal.classList.remove('show');
|
||
document.body.style.overflow = 'auto';
|
||
}
|
||
|
||
function closeEditModal() {
|
||
closeModal(document.getElementById('editModal'));
|
||
}
|
||
function updateDispenseDrugSelect() {
|
||
const select = document.getElementById('dispenseDrugSelect');
|
||
select.innerHTML = '<option value="">-- Select a drug variant --</option>';
|
||
|
||
allDrugs.forEach(drug => {
|
||
drug.variants.forEach(variant => {
|
||
const option = document.createElement('option');
|
||
option.value = variant.id;
|
||
option.textContent = `${drug.name} ${variant.strength} (${variant.quantity} ${variant.unit})`;
|
||
select.appendChild(option);
|
||
});
|
||
});
|
||
}
|
||
|
||
// Render drugs list
|
||
function renderDrugs() {
|
||
const drugsList = document.getElementById('drugsList');
|
||
let drugsToShow = allDrugs;
|
||
|
||
// Apply search filter
|
||
if (searchTerm) {
|
||
drugsToShow = drugsToShow.filter(drug =>
|
||
drug.name.toLowerCase().includes(searchTerm) ||
|
||
(drug.description && drug.description.toLowerCase().includes(searchTerm)) ||
|
||
drug.variants.some(variant => variant.strength.toLowerCase().includes(searchTerm))
|
||
);
|
||
}
|
||
|
||
// Apply stock filter
|
||
if (showLowStockOnly) {
|
||
drugsToShow = drugsToShow.filter(drug =>
|
||
drug.variants.some(variant => variant.quantity <= variant.low_stock_threshold)
|
||
);
|
||
}
|
||
|
||
if (drugsToShow.length === 0) {
|
||
drugsList.innerHTML = '<p class="empty">No drugs found matching your criteria</p>';
|
||
return;
|
||
}
|
||
|
||
drugsList.innerHTML = drugsToShow.map(drug => {
|
||
const totalVariants = drug.variants.length;
|
||
const lowStockVariants = drug.variants.filter(v => v.quantity <= v.low_stock_threshold).length;
|
||
const totalQuantity = drug.variants.reduce((sum, v) => sum + v.quantity, 0);
|
||
const isLowStock = lowStockVariants > 0;
|
||
const isExpanded = expandedDrugs.has(drug.id);
|
||
|
||
const variantsHtml = isExpanded ? `
|
||
${drug.variants.map(variant => {
|
||
const variantIsLowStock = variant.quantity <= variant.low_stock_threshold;
|
||
return `
|
||
<div class="variant-item ${variantIsLowStock ? 'low-stock' : ''}">
|
||
<div class="variant-info">
|
||
<div class="variant-details">
|
||
<div class="variant-name">${escapeHtml(drug.name)} ${escapeHtml(variant.strength)}</div>
|
||
<div class="variant-quantity">${variant.quantity} ${escapeHtml(variant.unit)}</div>
|
||
</div>
|
||
<div class="variant-status">
|
||
<span class="variant-badge ${variantIsLowStock ? 'badge-low' : 'badge-normal'}">
|
||
${variantIsLowStock ? 'Low Stock' : 'OK'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="variant-actions">
|
||
<button class="btn btn-success btn-small" onclick="dispenseVariant(${variant.id})">💊 Dispense</button>
|
||
<button class="btn btn-warning btn-small" onclick="openEditVariantModal(${variant.id})">Edit</button>
|
||
<button class="btn btn-danger btn-small" onclick="deleteVariant(${variant.id})">Delete</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('')}` : '';
|
||
|
||
return `
|
||
<div class="drug-item ${isLowStock ? 'low-stock' : ''} ${isExpanded ? 'expanded' : ''}" onclick="toggleDrugExpansion(${drug.id})">
|
||
<div class="drug-info">
|
||
<div class="drug-name">${escapeHtml(drug.name)}</div>
|
||
<div class="drug-description">${drug.description ? escapeHtml(drug.description) : 'No description'}</div>
|
||
<div class="drug-quantity">${totalVariants} variant${totalVariants !== 1 ? 's' : ''} (${totalQuantity} total units)</div>
|
||
<div class="drug-status">
|
||
<span class="drug-badge ${isLowStock ? 'badge-low' : 'badge-normal'}">
|
||
${isLowStock ? `${lowStockVariants} low` : 'All OK'}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="drug-actions">
|
||
<button class="btn btn-primary btn-small" onclick="event.stopPropagation(); openAddVariantModal(${drug.id})">➕ Add</button>
|
||
<button class="btn btn-info btn-small" onclick="event.stopPropagation(); showDrugHistory(${drug.id})">📋 History</button>
|
||
<button class="btn btn-warning btn-small" onclick="event.stopPropagation(); openEditModal(${drug.id})">Edit Drug</button>
|
||
<button class="btn btn-danger btn-small" onclick="event.stopPropagation(); deleteDrug(${drug.id})">Delete</button>
|
||
<span class="expand-icon">${isExpanded ? '▼' : '▶'}</span>
|
||
</div>
|
||
</div>
|
||
<div class="drug-variants ${isExpanded ? 'expanded' : ''}" id="variants-${drug.id}">
|
||
${variantsHtml}
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
}
|
||
|
||
// Handle add drug form
|
||
async function handleAddDrug(e) {
|
||
e.preventDefault();
|
||
|
||
const drugData = {
|
||
name: document.getElementById('drugName').value,
|
||
description: document.getElementById('drugDescription').value
|
||
};
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/drugs`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(drugData)
|
||
});
|
||
|
||
if (!response.ok) throw new Error('Failed to add drug');
|
||
|
||
document.getElementById('drugForm').reset();
|
||
closeModal(document.getElementById('addModal'));
|
||
await loadDrugs();
|
||
alert('Drug added successfully! Now add variants for this drug.');
|
||
} catch (error) {
|
||
console.error('Error adding drug:', error);
|
||
alert('Failed to add drug. Check the console for details.');
|
||
}
|
||
}
|
||
|
||
// Handle dispense drug form
|
||
async function handleDispenseDrug(e) {
|
||
e.preventDefault();
|
||
|
||
const variantId = parseInt(document.getElementById('dispenseDrugSelect').value);
|
||
const quantity = parseFloat(document.getElementById('dispenseQuantity').value);
|
||
const animalName = document.getElementById('dispenseAnimal').value;
|
||
const userName = document.getElementById('dispenseUser').value;
|
||
const notes = document.getElementById('dispenseNotes').value;
|
||
|
||
if (!variantId || !quantity || !animalName || !userName) {
|
||
alert('Please fill in all required fields');
|
||
return;
|
||
}
|
||
|
||
const dispensingData = {
|
||
drug_variant_id: variantId,
|
||
quantity: quantity,
|
||
animal_name: animalName,
|
||
user_name: userName,
|
||
notes: notes || null
|
||
};
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/dispense`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(dispensingData)
|
||
});
|
||
|
||
if (!response.ok) {
|
||
const error = await response.json();
|
||
throw new Error(error.detail || 'Failed to dispense drug');
|
||
}
|
||
|
||
document.getElementById('dispenseForm').reset();
|
||
closeModal(document.getElementById('dispenseModal'));
|
||
await loadDrugs();
|
||
alert('Drug dispensed successfully!');
|
||
} catch (error) {
|
||
console.error('Error dispensing drug:', error);
|
||
alert('Failed to dispense drug: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// Open edit modal
|
||
function openEditModal(drugId) {
|
||
const drug = allDrugs.find(d => d.id === drugId);
|
||
if (!drug) return;
|
||
|
||
document.getElementById('editDrugId').value = drug.id;
|
||
document.getElementById('editDrugName').value = drug.name;
|
||
document.getElementById('editDrugDescription').value = drug.description || '';
|
||
|
||
document.getElementById('editModal').classList.add('show');
|
||
}
|
||
|
||
// Close edit modal
|
||
function closeEditModal() {
|
||
document.getElementById('editModal').classList.remove('show');
|
||
document.getElementById('editForm').reset();
|
||
}
|
||
|
||
// Show variants for a drug
|
||
function toggleDrugExpansion(drugId) {
|
||
if (expandedDrugs.has(drugId)) {
|
||
expandedDrugs.delete(drugId);
|
||
} else {
|
||
expandedDrugs.add(drugId);
|
||
}
|
||
renderDrugs();
|
||
}
|
||
|
||
// Open add variant modal
|
||
function openAddVariantModal(drugId) {
|
||
const drug = allDrugs.find(d => d.id === drugId);
|
||
if (!drug) return;
|
||
|
||
currentDrug = drug;
|
||
document.getElementById('variantDrugId').value = drug.id;
|
||
document.getElementById('addVariantModal').classList.add('show');
|
||
}
|
||
|
||
// Handle add variant form
|
||
async function handleAddVariant(e) {
|
||
e.preventDefault();
|
||
|
||
const drugId = parseInt(document.getElementById('variantDrugId').value);
|
||
const variantData = {
|
||
strength: document.getElementById('variantStrength').value,
|
||
quantity: parseFloat(document.getElementById('variantQuantity').value),
|
||
unit: document.getElementById('variantUnit').value,
|
||
low_stock_threshold: parseFloat(document.getElementById('variantThreshold').value)
|
||
};
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/drugs/${drugId}/variants`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(variantData)
|
||
});
|
||
|
||
if (!response.ok) throw new Error('Failed to add variant');
|
||
|
||
document.getElementById('variantForm').reset();
|
||
closeModal(document.getElementById('addVariantModal'));
|
||
await loadDrugs();
|
||
renderDrugs();
|
||
alert('Variant added successfully!');
|
||
} catch (error) {
|
||
console.error('Error adding variant:', error);
|
||
alert('Failed to add variant. Check the console for details.');
|
||
}
|
||
}
|
||
|
||
// Open edit variant modal
|
||
function openEditVariantModal(variantId) {
|
||
const variant = currentDrug.variants.find(v => v.id === variantId);
|
||
if (!variant) return;
|
||
|
||
document.getElementById('editVariantId').value = variant.id;
|
||
document.getElementById('editVariantStrength').value = variant.strength;
|
||
document.getElementById('editVariantQuantity').value = variant.quantity;
|
||
document.getElementById('editVariantUnit').value = variant.unit;
|
||
document.getElementById('editVariantThreshold').value = variant.low_stock_threshold;
|
||
|
||
document.getElementById('editVariantModal').classList.add('show');
|
||
}
|
||
|
||
// Handle edit variant form
|
||
async function handleEditVariant(e) {
|
||
e.preventDefault();
|
||
|
||
const variantId = parseInt(document.getElementById('editVariantId').value);
|
||
const variantData = {
|
||
strength: document.getElementById('editVariantStrength').value,
|
||
quantity: parseFloat(document.getElementById('editVariantQuantity').value),
|
||
unit: document.getElementById('editVariantUnit').value,
|
||
low_stock_threshold: parseFloat(document.getElementById('editVariantThreshold').value)
|
||
};
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/variants/${variantId}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(variantData)
|
||
});
|
||
|
||
if (!response.ok) throw new Error('Failed to update variant');
|
||
|
||
closeModal(document.getElementById('editVariantModal'));
|
||
await loadDrugs();
|
||
renderDrugs();
|
||
alert('Variant updated successfully!');
|
||
} catch (error) {
|
||
console.error('Error updating variant:', error);
|
||
alert('Failed to update variant. Check the console for details.');
|
||
}
|
||
}
|
||
|
||
// Dispense from variant
|
||
function dispenseVariant(variantId) {
|
||
// Update the dropdown display with all variants
|
||
updateDispenseDrugSelect();
|
||
|
||
// Pre-select the variant in the dispense modal
|
||
const drugSelect = document.getElementById('dispenseDrugSelect');
|
||
drugSelect.value = variantId;
|
||
|
||
// Open dispense modal
|
||
openModal(document.getElementById('dispenseModal'));
|
||
}
|
||
|
||
// Delete variant
|
||
async function deleteVariant(variantId) {
|
||
if (!confirm('Are you sure you want to delete this variant?')) return;
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/variants/${variantId}`, {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
if (!response.ok) throw new Error('Failed to delete variant');
|
||
|
||
await loadDrugs();
|
||
renderDrugs();
|
||
alert('Variant deleted successfully!');
|
||
} catch (error) {
|
||
console.error('Error deleting variant:', error);
|
||
alert('Failed to delete variant. Check the console for details.');
|
||
}
|
||
}
|
||
|
||
// Show dispensing history for a drug
|
||
async function showDrugHistory(drugId) {
|
||
const drug = allDrugs.find(d => d.id === drugId);
|
||
if (!drug) return;
|
||
|
||
const historyModal = document.getElementById('historyModal');
|
||
const historyContent = document.getElementById('historyContent');
|
||
document.getElementById('historyDrugName').textContent = drug.name;
|
||
|
||
historyContent.innerHTML = '<p class="loading">Loading history...</p>';
|
||
openModal(historyModal);
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/dispense/history`);
|
||
if (!response.ok) throw new Error('Failed to fetch history');
|
||
|
||
const allHistory = await response.json();
|
||
|
||
// Filter history for this drug's variants
|
||
const variantIds = drug.variants.map(v => v.id);
|
||
const drugHistory = allHistory.filter(item => variantIds.includes(item.drug_variant_id));
|
||
|
||
if (drugHistory.length === 0) {
|
||
historyContent.innerHTML = '<p class="empty">No dispensing history for this drug.</p>';
|
||
return;
|
||
}
|
||
|
||
// Sort by dispensed_at descending (most recent first)
|
||
drugHistory.sort((a, b) => new Date(b.dispensed_at) - new Date(a.dispensed_at));
|
||
|
||
const historyHtml = drugHistory.map(item => {
|
||
const variant = drug.variants.find(v => v.id === item.drug_variant_id);
|
||
const date = new Date(item.dispensed_at).toLocaleDateString();
|
||
const time = new Date(item.dispensed_at).toLocaleTimeString();
|
||
|
||
return `
|
||
<div class="history-item">
|
||
<div class="history-header">
|
||
<div class="history-variant">${drug.name} ${variant.strength}</div>
|
||
<div class="history-datetime">${date} ${time}</div>
|
||
</div>
|
||
<div class="history-details">
|
||
<div class="history-row">
|
||
<span class="history-label">Quantity:</span>
|
||
<span class="history-value">${item.quantity} ${variant.unit}</span>
|
||
</div>
|
||
<div class="history-row">
|
||
<span class="history-label">Animal:</span>
|
||
<span class="history-value">${escapeHtml(item.animal_name)}</span>
|
||
</div>
|
||
<div class="history-row">
|
||
<span class="history-label">User:</span>
|
||
<span class="history-value">${escapeHtml(item.user_name)}</span>
|
||
</div>
|
||
${item.notes ? `
|
||
<div class="history-row">
|
||
<span class="history-label">Notes:</span>
|
||
<span class="history-value">${escapeHtml(item.notes)}</span>
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
historyContent.innerHTML = historyHtml;
|
||
} catch (error) {
|
||
console.error('Error fetching history:', error);
|
||
historyContent.innerHTML = '<p class="error">Failed to load history. Check the console for details.</p>';
|
||
}
|
||
}
|
||
|
||
// Handle edit drug form
|
||
async function handleEditDrug(e) {
|
||
e.preventDefault();
|
||
|
||
const drugId = parseInt(document.getElementById('editDrugId').value);
|
||
const drugData = {
|
||
name: document.getElementById('editDrugName').value,
|
||
description: document.getElementById('editDrugDescription').value
|
||
};
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/drugs/${drugId}`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(drugData)
|
||
});
|
||
|
||
if (!response.ok) throw new Error('Failed to update drug');
|
||
|
||
closeEditModal();
|
||
await loadDrugs();
|
||
alert('Drug updated successfully!');
|
||
} catch (error) {
|
||
console.error('Error updating drug:', error);
|
||
alert('Failed to update drug. Check the console for details.');
|
||
}
|
||
}
|
||
|
||
// Delete drug
|
||
async function deleteDrug(drugId) {
|
||
if (!confirm('Are you sure you want to delete this drug?')) return;
|
||
|
||
try {
|
||
const response = await fetch(`${API_URL}/drugs/${drugId}`, {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
if (!response.ok) throw new Error('Failed to delete drug');
|
||
|
||
await loadDrugs();
|
||
alert('Drug deleted successfully!');
|
||
} catch (error) {
|
||
console.error('Error deleting drug:', error);
|
||
alert('Failed to delete drug. Check the console for details.');
|
||
}
|
||
}
|
||
|
||
// Update filter button states
|
||
function updateFilterButtons() {
|
||
document.getElementById('showAllBtn').classList.toggle('active', !showLowStockOnly);
|
||
document.getElementById('showLowStockBtn').classList.toggle('active', showLowStockOnly);
|
||
}
|
||
|
||
// Escape HTML to prevent XSS
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|