Create events.js

events.js

@@ -0,0 +1,102 @@
+// events.js - Manages all event listeners
+
+import { appState, saveState } from './state.js';
+import { handleUpdateStock, handleRestock } from './services.js';
+import { refreshUI, showToast } from './ui.js';
+
+export function attachAllListeners() {
+    attachProductInputListeners();
+    attachMaxStockEditListeners();
+    attachRestockListeners();
+    attachModalListeners();
+}
+
+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.previousElementSibling;
+            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');
+    const showResetModalBtn = document.getElementById('show-reset-modal-btn');
+    if (showResetModalBtn.dataset.listenerAttached) return;
+
+    const cancelResetBtn = document.getElementById('cancel-reset-btn');
+    const confirmResetBtn = document.getElementById('confirm-reset-btn');
+    
+    showResetModalBtn.addEventListener('click', () => resetModal.classList.remove('hidden'));
+    cancelResetBtn.addEventListener('click', () => resetModal.classList.add('hidden'));
+    confirmResetBtn.addEventListener('click', () => {
+        localStorage.removeItem('antennaTrackerState');
+        loadState(); // This is a placeholder as loadState is not directly imported. A full reload is better.
+        window.location.reload(); // Simple and effective way to reset to config defaults.
+    });
+
+    showResetModalBtn.dataset.listenerAttached = true;
+}