Update events.js

events.js

@@ -1,6 +1,6 @@
 // events.js - Manages all event listeners
 
-import { appState, saveState } from './state.js';
+import { appState, saveState, loadState } from './state.js';
 import { handleUpdateStock, handleRestock } from './services.js';
 import { refreshUI, showToast, renderReport } from './ui.js';
 
@@ -11,7 +11,76 @@ export function attachAllListeners() {
     attachModalListeners();
 }
 
-// ... attachProductInputListeners, attachMaxStockEditListeners, attachRestockListeners functions are the same ...
+function attachProductInputListeners() {
+    document.querySelectorAll('.product-card .update-btn').forEach(btn => {
+        if (btn.dataset.listenerAttached) return;
+        btn.dataset.listenerAttached = true;
+        btn.addEventListener('click', (e) => {
+            const card = e.target.closest('.product-card');
+            const productName = card.dataset.productName;
+            const quantity = parseInt(card.querySelector('input').value, 10);
+            handleUpdateStock(productName, quantity);
+        });
+    });
+}
+
+function attachMaxStockEditListeners() {
+    document.querySelectorAll('.edit-max-stock').forEach(icon => {
+        if (icon.dataset.listenerAttached) return;
+        icon.dataset.listenerAttached = true;
+        icon.addEventListener('click', (e) => {
+            const valueSpan = e.target.closest('.flex').querySelector('.max-stock-value');
+            const materialName = e.target.closest('.material-card').dataset.materialName;
+            const material = appState.materials.find(m => m.name === materialName);
+            const input = document.createElement('input');
+            input.type = 'number';
+            input.value = material.maxStock;
+            input.className = 'w-20 text-right font-semibold border rounded px-1';
+            valueSpan.replaceWith(input);
+            input.focus();
+            input.select();
+            const saveChange = () => {
+                const newValue = parseInt(input.value, 10);
+                if (!isNaN(newValue) && newValue >= material.currentStock) {
+                    material.maxStock = newValue;
+                    saveState();
+                    refreshUI();
+                } else {
+                    showToast('Max stock must be a number >= current stock.', 'error');
+                    refreshUI();
+                }
+            };
+            input.addEventListener('blur', saveChange);
+            input.addEventListener('keydown', (event) => { if (event.key === 'Enter') input.blur(); });
+        });
+    });
+}
+
+function attachRestockListeners() {
+    const showRestockForm = (e) => {
+        const parentEl = e.target.closest('[data-material-name]');
+        const materialName = parentEl.dataset.materialName;
+        const formContainer = parentEl.querySelector('.restock-form');
+
+        if (formContainer.classList.contains('hidden')) {
+            document.querySelectorAll('.restock-form').forEach(f => { f.classList.add('hidden'); f.innerHTML = ''; });
+            formContainer.classList.remove('hidden');
+            formContainer.innerHTML = `<div class="flex items-center gap-2"><input type="number" placeholder="Qty" class="input-number w-20 px-2 py-1 border border-gray-300 rounded"><button class="confirm-restock-btn px-3 py-1 bg-green-500 text-white text-xs rounded hover:bg-green-600">Add</button></div>`;
+            const input = formContainer.querySelector('input');
+            input.focus();
+            formContainer.querySelector('.confirm-restock-btn').addEventListener('click', () => { handleRestock(materialName, parseInt(input.value, 10)); });
+            input.addEventListener('keydown', (event) => { if (event.key === 'Enter') handleRestock(materialName, parseInt(input.value, 10)); if (event.key === 'Escape') formContainer.classList.add('hidden'); });
+        } else {
+            formContainer.classList.add('hidden');
+            formContainer.innerHTML = '';
+        }
+    };
+    document.querySelectorAll('.restock-icon, .restock-btn-reorder').forEach(btn => {
+        if (btn.dataset.listenerAttached) return;
+        btn.dataset.listenerAttached = true;
+        btn.addEventListener('click', showRestockForm);
+    });
+}
 
 function attachModalListeners() {
     const resetModal = document.getElementById('reset-modal');
@@ -19,20 +88,31 @@ function attachModalListeners() {
     
     // Reset Modal
     const showResetModalBtn = document.getElementById('show-reset-modal-btn');
-    if (!showResetModalBtn.dataset.listenerAttached) {
+    if (!showResetModalBtn.dataset.listenerAttachedForReset) {
         showResetModalBtn.addEventListener('click', () => resetModal.classList.remove('hidden'));
-        document.getElementById('cancel-reset-btn').addEventListener('click', () => resetModal.classList.add('hidden'));
-        document.getElementById('confirm-reset-btn').addEventListener('click', () => { window.location.reload(); });
-        showResetModalBtn.dataset.listenerAttached = true;
+        resetModal.addEventListener('click', (e) => {
+            if (e.target.id === 'cancel-reset-btn' || e.target.id === 'reset-modal') {
+                resetModal.classList.add('hidden');
+            }
+            if (e.target.id === 'confirm-reset-btn') {
+                localStorage.removeItem('antennaTrackerState');
+                window.location.reload();
+            }
+        });
+        showResetModalBtn.dataset.listenerAttachedForReset = true;
     }
 
     // Reports Modal
     const showReportsModalBtn = document.getElementById('show-reports-modal-btn');
-    if (!showReportsModalBtn.dataset.listenerAttached) {
+    if (!showReportsModalBtn.dataset.listenerAttachedForReports) {
         showReportsModalBtn.addEventListener('click', () => reportsModal.classList.remove('hidden'));
-        document.getElementById('close-reports-modal-btn').addEventListener('click', () => reportsModal.classList.add('hidden'));
-        document.getElementById('report-prod-summary').addEventListener('click', () => renderReport('production'));
-        document.getElementById('report-mat-usage').addEventListener('click', () => renderReport('material'));
-        showReportsModalBtn.dataset.listenerAttached = true;
+        reportsModal.addEventListener('click', (e) => {
+            if (e.target.id === 'close-reports-modal-btn' || e.target.id === 'reports-modal') {
+                reportsModal.classList.add('hidden');
+            }
+            if (e.target.id === 'report-prod-summary') renderReport('production');
+            if (e.target.id === 'report-mat-usage') renderReport('material');
+        });
+        showReportsModalBtn.dataset.listenerAttachedForReports = true;
     }
 }