Create app.js

app.js

@@ -0,0 +1,166 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    // --- DATA & STATE MANAGEMENT ---
+
+    const initialState = {
+        materials: [
+            { name: "5mm Copper Wire", unit: "meters", maxStock: 500, currentStock: 500 },
+            { name: "RG-58 Coaxial Cable", unit: "meters", maxStock: 200, currentStock: 200 },
+            { name: "N-Type Connector", unit: "units", maxStock: 1000, currentStock: 1000 },
+            { name: "Plastic Insulator", unit: "units", maxStock: 4000, currentStock: 4000 },
+        ]
+    };
+
+    const productRecipes = {
+        "Yagi-Uda Model 5": {
+            "5mm Copper Wire": 10,
+            "RG-58 Coaxial Cable": 5,
+            "N-Type Connector": 1,
+            "Plastic Insulator": 8,
+        },
+        "Basic Dipole Antenna": {
+            "5mm Copper Wire": 5,
+            "RG-58 Coaxial Cable": 2,
+            "N-Type Connector": 1,
+            "Plastic Insulator": 2,
+        }
+    };
+
+    let appState;
+
+    function saveState() {
+        localStorage.setItem('antennaTrackerState', JSON.stringify(appState));
+    }
+
+    function loadState() {
+        const savedState = localStorage.getItem('antennaTrackerState');
+        if (savedState) {
+            appState = JSON.parse(savedState);
+        } else {
+            // Use a deep copy to avoid modifying the initialState object
+            appState = JSON.parse(JSON.stringify(initialState));
+        }
+    }
+
+    // --- UI RENDERING ---
+
+    function renderInventory() {
+        appState.materials.forEach(material => {
+            const card = document.querySelector(`.material-card[data-material-name="${material.name}"]`);
+            if (!card) return;
+
+            const currentStockEl = card.querySelector('.current-stock');
+            const progressBarEl = card.querySelector('.progress-bar');
+            
+            currentStockEl.textContent = material.currentStock;
+            
+            const stockPercentage = (material.currentStock / material.maxStock) * 100;
+            progressBarEl.style.width = `${stockPercentage}%`;
+
+            // Update status colors
+            card.classList.remove('status-ok', 'status-warning', 'status-critical');
+            progressBarEl.classList.remove('progress-ok', 'progress-warning', 'progress-critical');
+
+            if (stockPercentage > 50) {
+                card.classList.add('status-ok');
+                progressBarEl.classList.add('progress-ok');
+            } else if (stockPercentage > 20) {
+                card.classList.add('status-warning');
+                progressBarEl.classList.add('progress-warning');
+            } else {
+                card.classList.add('status-critical');
+                progressBarEl.classList.add('progress-critical');
+            }
+        });
+    }
+
+    // --- EVENT HANDLERS & LOGIC ---
+
+    function handleUpdateStock(productName, quantity) {
+        if (quantity <= 0) return;
+
+        const recipe = productRecipes[productName];
+        if (!recipe) {
+            alert(`Error: No recipe found for ${productName}.`);
+            return;
+        }
+
+        // 1. Check if there are enough materials
+        let canProduce = true;
+        let missingMaterials = [];
+        for (const materialName in recipe) {
+            const required = recipe[materialName] * quantity;
+            const material = appState.materials.find(m => m.name === materialName);
+            if (!material || material.currentStock < required) {
+                canProduce = false;
+                missingMaterials.push(`${required} ${material.unit} of ${materialName} (have ${material.currentStock})`);
+            }
+        }
+
+        // 2. If not enough, show an alert
+        if (!canProduce) {
+            alert(`Insufficient materials to produce ${quantity} of ${productName}.\n\nNeeded:\n- ${missingMaterials.join('\n- ')}`);
+            return;
+        }
+
+        // 3. If enough, deduct materials
+        for (const materialName in recipe) {
+            const required = recipe[materialName] * quantity;
+            const material = appState.materials.find(m => m.name === materialName);
+            material.currentStock -= required;
+        }
+
+        // 4. Save state and re-render
+        saveState();
+        renderInventory();
+        
+        // 5. Clear the input field for this product
+        const productCard = document.querySelector(`.product-card[data-product-name="${productName}"]`);
+        if(productCard) {
+            productCard.querySelector('input').value = '0';
+        }
+    }
+    
+    function handleResetData() {
+        if (confirm('Are you sure you want to reset all inventory data? This action cannot be undone.')) {
+            localStorage.removeItem('antennaTrackerState');
+            init(); // Re-initialize the application
+        }
+    }
+    
+    // Modal logic
+    const resetModal = document.getElementById('reset-modal');
+    const showResetModalBtn = document.getElementById('show-reset-modal-btn');
+    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');
+        init();
+        resetModal.classList.add('hidden');
+    });
+
+
+    // --- INITIALIZATION ---
+
+    function init() {
+        loadState();
+        renderInventory();
+
+        // Attach event listeners to all "Update Stock" buttons
+        document.querySelectorAll('.product-card').forEach(card => {
+            const updateBtn = card.querySelector('.update-btn');
+            const input = card.querySelector('input');
+            const productName = card.dataset.productName;
+
+            updateBtn.addEventListener('click', () => {
+                const quantity = parseInt(input.value, 10);
+                handleUpdateStock(productName, quantity);
+            });
+        });
+    }
+
+    init(); // Start the app
+});