Hugging Face's logo

Spaces:
MavinGC
/
pump-doctor-pro
Running

App Files Community
pump-doctor-pro / database.html
MavinGC's picture
MavinGC
Create an app that resolves all kinds of centrifugal pump problems, diagnoses, and more based on optimizations by the use of calculations with inputs and results. It should also have the ability to display pump & motor details inputs.
2140345 verified
Raw History Blame Contribute Delete
16.5 kB
<!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>