Blame for database.html

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pump Database | Pump Doctor Pro</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="stylesheet" href="style.css">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#ef4444',
                        secondary: '#64748b',
                        dark: '#0f172a'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
    <pump-header></pump-header>
    
    <main class="container mx-auto px-4 py-8">
        <section class="mb-8">
            <div class="flex items-center gap-3 mb-6">
                <a href="index.html" class="text-primary hover:text-red-400 transition-colors">
                    <i data-feather="arrow-left"></i>
                </a>
                <h1 class="text-3xl font-bold text-primary">
                    <i data-feather="database" class="inline mr-2"></i> Pump & Motor Database
                </h1>
            </div>
            
            <div class="bg-slate-800 rounded-xl p-6 shadow-lg mb-8">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold text-primary">Stored Pump Specifications</h2>
                    <button id="addPumpBtn" class="bg-primary hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition-colors flex items-center gap-2">
                        <i data-feather="plus"></i> Add New Pump
                    </button>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="border-b border-slate-700">
                            <tr>
                                <th class="pb-3 font-semibold">Model</th>
                                <th class="pb-3 font-semibold">Type</th>
                                <th class="pb-3 font-semibold">Flow (m³/h)</th>
                                <th class="pb-3 font-semibold">Head (m)</th>
                                <th class="pb-3 font-semibold">Power (kW)</th>
                                <th class="pb-3 font-semibold">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="pumpTable">
                            <!-- Filled by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- Add/Edit Pump Modal -->
            <div id="pumpModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
                <div class="bg-slate-800 rounded-xl p-6 w-full max-w-md">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-xl font-semibold text-primary" id="modalTitle">Add New Pump</h3>
                        <button id="closeModal" class="text-gray-400 hover:text-gray-200">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    
                    <div class="space-y-4">
                        <div>
                            <label for="pumpModel" class="block mb-2 font-medium">Model Number</label>
                            <input type="text" id="pumpModel" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        
                        <div>
                            <label for="pumpTypeModal" class="block mb-2 font-medium">Pump Type</label>
                            <select id="pumpTypeModal" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent">
                                <option value="centrifugal">Centrifugal</option>
                                <option value="submersible">Submersible</option>
                                <option value="booster">Booster</option>
                                <option value="multistage">Multistage</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="pumpFlow" class="block mb-2 font-medium">Flow Rate (m³/h)</label>
                            <input type="number" id="pumpFlow" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        
                        <div>
                            <label for="pumpHead" class="block mb-2 font-medium">Head (m)</label>
                            <input type="number" id="pumpHead" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        
                        <div>
                            <label for="pumpPower" class="block mb-2 font-medium">Power (kW)</label>
                            <input type="number" id="pumpPower" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent">
                        </div>
                        
                        <div>
                            <label for="pumpNotes" class="block mb-2 font-medium">Notes</label>
                            <textarea id="pumpNotes" rows="3" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
                        </div>
                        
                        <div class="flex justify-end gap-3 pt-4">
                            <button id="cancelPump" class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded-lg transition-colors">
                                Cancel
                            </button>
                            <button id="savePump" class="bg-primary hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition-colors">
                                Save Pump
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Motor Database Section -->
            <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold text-primary">Motor Specifications</h2>
                    <button id="addMotorBtn" class="bg-primary hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg transition-colors flex items-center gap-2">
                        <i data-feather="plus"></i> Add New Motor
                    </button>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="border-b border-slate-700">
                            <tr>
                                <th class="pb-3 font-semibold">Model</th>
                                <th class="pb-3 font-semibold">Power (kW)</th>
                                <th class="pb-3 font-semibold">Speed (RPM)</th>
                                <th class="pb-3 font-semibold">Voltage (V)</th>
                                <th class="pb-3 font-semibold">Efficiency</th>
                                <th class="pb-3 font-semibold">Actions</th>
                            </tr>
                        </thead>
                        <tbody id="motorTable">
                            <!-- Filled by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>
    
    <pump-footer></pump-footer>
    
    <script src="components/header.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
        
        // Sample data for demonstration
        let pumps = JSON.parse(localStorage.getItem('pumpDatabase') || '[]');
        let motors = JSON.parse(localStorage.getItem('motorDatabase') || '[]');
        
        // Add some default data if empty
        if (pumps.length === 0) {
            pumps = [
                { id: 1, model: 'CP-100', type: 'centrifugal', flow: 50, head: 32, power: 7.5, notes: 'Standard duty' },
                { id: 2, model: 'CP-200', type: 'centrifugal', flow: 100, head: 45, power: 15, notes: 'Heavy duty' },
                { id: 3, model: 'SP-50', type: 'submersible', flow: 30, head: 25, power: 5.5, notes: 'For wastewater' }
            ];
            localStorage.setItem('pumpDatabase', JSON.stringify(pumps));
        }
        
        if (motors.length === 0) {
            motors = [
                { id: 1, model: 'M-7.5', power: 7.5, speed: 1450, voltage: 400, efficiency: 'IE2' },
                { id: 2, model: 'M-15', power: 15, speed: 1450, voltage: 400, efficiency: 'IE3' },
                { id: 3, model: 'M-22', power: 22, speed: 2900, voltage: 400, efficiency: 'IE3' }
            ];
            localStorage.setItem('motorDatabase', JSON.stringify(motors));
        }
        
        // Render pump table
        function renderPumpTable() {
            const table = document.getElementById('pumpTable');
            table.innerHTML = '';
            
            pumps.forEach(pump => {
                const row = document.createElement('tr');
                row.className = 'border-b border-slate-700';
                row.innerHTML = `
                    <td class="py-3">${pump.model}</td>
                    <td>${pump.type}</td>
                    <td>${pump.flow}</td>
                    <td>${pump.head}</td>
                    <td>${pump.power}</td>
                    <td>
                        <button class="text-primary hover:text-red-400 mr-3 edit-pump" data-id="${pump.id}">
                            <i data-feather="edit-2" class="w-4 h-4"></i>
                        </button>
                        <button class="text-red-400 hover:text-red-300 delete-pump" data-id="${pump.id}">
                            <i data-feather="trash-2" class="w-4 h-4"></i>
                        </button>
                    </td>
                `;
                table.appendChild(row);
            });
            
            feather.replace();
        }
        
        // Render motor table
        function renderMotorTable() {
            const table = document.getElementById('motorTable');
            table.innerHTML = '';
            
            motors.forEach(motor => {
                const row = document.createElement('tr');
                row.className = 'border-b border-slate-700';
                row.innerHTML = `
                    <td class="py-3">${motor.model}</td>
                    <td>${motor.power}</td>
                    <td>${motor.speed}</td>
                    <td>${motor.voltage}</td>
                    <td>${motor.efficiency}</td>
                    <td>
                        <button class="text-primary hover:text-red-400 mr-3 edit-motor" data-id="${motor.id}">
                            <i data-feather="edit-2" class="w-4 h-4"></i>
                        </button>
                        <button class="text-red-400 hover:text-red-300 delete-motor" data-id="${motor.id}">
                            <i data-feather="trash-2" class="w-4 h-4"></i>
                        </button>
                    </td>
                `;
                table.appendChild(row);
            });
            
            feather.replace();
        }
        
        // Initial render
        renderPumpTable();
        renderMotorTable();
        
        // Modal handling for pumps
        const modal = document.getElementById('pumpModal');
        const addPumpBtn = document.getElementById('addPumpBtn');
        const closeModal = document.getElementById('closeModal');
        const cancelPump = document.getElementById('cancelPump');
        const savePump = document.getElementById('savePump');
        
        let currentPumpId = null;
        
        addPumpBtn.addEventListener('click', () => {
            currentPumpId = null;
            document.getElementById('modalTitle').textContent = 'Add New Pump';
            document.getElementById('pumpModel').value = '';
            document.getElementById('pumpTypeModal').value = 'centrifugal';
            document.getElementById('pumpFlow').value = '';
            document.getElementById('pumpHead').value = '';
            document.getElementById('pumpPower').value = '';
            document.getElementById('pumpNotes').value = '';
            modal.classList.remove('hidden');
        });
        
        closeModal.addEventListener('click', () => modal.classList.add('hidden'));
        cancelPump.addEventListener('click', () => modal.classList.add('hidden'));
        
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('edit-pump')) {
                const id = parseInt(e.target.getAttribute('data-id'));
                const pump = pumps.find(p => p.id === id);
                if (pump) {
                    currentPumpId = id;
                    document.getElementById('modalTitle').textContent = 'Edit Pump';
                    document.getElementById('pumpModel').value = pump.model;
                    document.getElementById('pumpTypeModal').value = pump.type;
                    document.getElementById('pumpFlow').value = pump.flow;
                    document.getElementById('pumpHead').value = pump.head;
                    document.getElementById('pumpPower').value = pump.power;
                    document.getElementById('pumpNotes').value = pump.notes || '';
                    modal.classList.remove('hidden');
                }
            }
            
            if (e.target.classList.contains('delete-pump')) {
                if (confirm('Are you sure you want to delete this pump?')) {
                    const id = parseInt(e.target.getAttribute('data-id'));
                    pumps = pumps.filter(p => p.id !== id);
                    localStorage.setItem('pumpDatabase', JSON.stringify(pumps));
                    renderPumpTable();
                }
            }
        });
        
        savePump.addEventListener('click', () => {
            const model = document.getElementById('pumpModel').value.trim();
            const type = document.getElementById('pumpTypeModal').value;
            const flow = parseFloat(document.getElementById('pumpFlow').value);
            const head = parseFloat(document.getElementById('pumpHead').value);
            const power = parseFloat(document.getElementById('pumpPower').value);
            const notes = document.getElementById('pumpNotes').value.trim();
            
            if (!model || isNaN(flow) || isNaN(head) || isNaN(power)) {
                alert('Please fill all required fields with valid values');
                return;
            }
            
            if (currentPumpId) {
                // Update existing pump
                const index = pumps.findIndex(p => p.id === currentPumpId);
                if (index !== -1) {
                    pumps[index] = { ...pumps[index], model, type, flow, head, power, notes };
                }
            } else {
                // Add new pump
                const newId = pumps.length > 0 ? Math.max(...pumps.map(p => p.id)) + 1 : 1;
                pumps.push({ id: newId, model, type, flow, head, power, notes });
            }
            
            localStorage.setItem('pumpDatabase', JSON.stringify(pumps));
            renderPumpTable();
            modal.classList.add('hidden');
        });
    </script>
</body>
</html>