aDriv4 - MANAGER
Edit File: script.js
const products = [ { name: '9E - 10 KVA, 1:1 Online UPS with internal Batteries', image: './image/product/On-Line UPS With Internal Batteries.png', application: '9E-IN', power: 500, upsType: 'Online UPS', kva: 10, url: './eaton-make-10-kva-1-1-phase-on-line-ups-with-internal-batteries-9e-series.html' }, { name: 'Eaton 9E IN Online UPS (1000-3000VA)', image: './image/Eaton_UPS_Photos/9E_IN_3KVA/DSC02822 copy.jpg', application: '9E-IN', power: 500, upsType: 'Online UPS', kva: 3, url: './eaton-make-1-to-3-kva-1-1-phase-on-line-ups-with-internal-batteries-9e-series.html' }, { name: '9PX 6 kVA (with internal batteries)', image: './image/product/9PX 6 kVA (with internal batteries)/1.png', application: '9px', power: 600, upsType: 'Line Interactive(LI) UPS', kva: 6, url: './9PX-6-kVA-(with-internal-batteries).html' }, { name: '9PX1000IRT2U', image: './image/product/9PX1000IRT2U/2.png', application: '9px', power: 350, upsType: 'Online UPS', kva: 0, url: './9PX1000IRT2U.html' }, { name: '9SX1000I', image: './image/Eaton_UPS_Photos/9SX_3KVA/DSC03071 copy.jpg', application: '9sx', power: 400, upsType: 'Line Interactive(LI) UPS', kva: 0, url: './9SX1000I.html' }, { name: 'Eaton 6KVA 192V DXRT6KS-IN Online UPS', image: './image/product/Eaton 6KVA 192V DXRT6KS-IN Online UPS.png', application: 'DXRT-IN', power: 700, upsType: 'Online UPS', kva: 6, url: './Eaton 6KVA-192V-DXRT6KS-IN-Online-UPS.html' }, { name: 'Eaton 9145 Online UPS (10-20kVA)', image: './image/product/Eaton 9145 Online UPS (10-20kVA).png', application: '9145', power: 750, upsType: 'Online UPS', kva: 15, url: './Eaton-9145-Online-UPS-(10-20kVA).html' }, { name: 'Eaton ATS rack PDU', image: './image/Eaton_UPS_Photos/ATS/DSC02697 copy.jpg', application: 'ATS', power: 450, upsType: 'PDU', kva: 0, url: './Eaton-ATS-rack-PDU.html' }, { name: 'Eaton Aurora Line Interactive UPS with inbuilt batteries (600-1000VA)', image: './image/product/Eaton Aurora Line Interactive UPS with inbuilt batteries (600-1000VA).png', application: 'Aurora', power: 400, upsType: 'Line Interactive(LI) UPS', kva: 1, url: './Eaton-Aurora-Line-Interactive-UPS-with-inbuilt-batteries-(600-1000VA).html' }, { name: 'Eaton DXRT Online UPS (6-10kW)', image: './image//Eaton_UPS_Photos/DXRT_6_10_KVA/DSC02975 copy.jpg', application: 'DXRT-IN', power: 900, upsType: 'Online UPS', kva: 10, url: './Eaton-DXRT-Online-UPS-(6-10kW).html' }, { name: 'Eaton EATS16N Automatic Transfer Switch ATS 16A', image: './image/Eaton_UPS_Photos/ATS/DSC02697 copy.jpg', application: '', power: 550, upsType: 'ATS(Automatic Transfer Switch)', kva: 0, url: './Eaton-EATS16N-Automatic-Transfer-Switch-ATS-16A.html' }, ]; function generateFilterOptions() { // Extract unique application values const uniqueApplications = [...new Set(products.map(product => product.application).filter(Boolean))]; const applicationFiltersContainer = document.getElementById('application-filters'); uniqueApplications.forEach(application => { const filterHTML = ` <label> <span> <input type="checkbox" name="application" value="${application}" onchange="filterProducts()"> </span> ${application} </label> `; applicationFiltersContainer.innerHTML += filterHTML; }); // Populate Power Range Filters // const powerRanges = [ // { min: 300, max: 400, label: '300-400W' }, // { min: 400, max: 500, label: '400-500W' }, // { min: 500, max: 600, label: '500-600W' }, // { min: 600, max: 700, label: '600-700W' }, // { min: 700, max: 800, label: '700-800W' }, // { min: 800, max: 900, label: '800-900W' }, // ]; // const powerRangeFiltersContainer = document.getElementById('power-range-filters'); // powerRanges.forEach(range => { // const filterHTML = ` // <label> // <span> // <input type="checkbox" name="power-range" data-min="${range.min}" data-max="${range.max}" onchange="filterProducts()"> // </span> ${range.label} // </label> // `; // powerRangeFiltersContainer.innerHTML += filterHTML; // }); // Populate UPS Type Filters const uniqueUpsTypes = [...new Set(products.map(product => product.upsType).filter(Boolean))]; const upsTypeFiltersContainer = document.getElementById('ups-type-filters'); uniqueUpsTypes.forEach(upsType => { const filterHTML = ` <label> <span> <input type="checkbox" name="ups-type" value="${upsType}" onchange="filterProducts()"> </span> ${upsType} </label> `; upsTypeFiltersContainer.innerHTML += filterHTML; }); // Populate kVA Range Filters const kvaRanges = [ { min: 1, max: 5, label: '0-5 kVA' }, { min: 5, max: 10, label: '6-10 kVA' }, { min: 11, max: 20, label: '11-20 kVA' }, ]; const kvaRangeFiltersContainer = document.getElementById('kva-range-filters'); kvaRanges.forEach(range => { const filterHTML = ` <label> <span> <input type="checkbox" name="kva-range" data-min="${range.min}" data-max="${range.max}" onchange="filterProducts()"> </span> ${range.label} </label> `; kvaRangeFiltersContainer.innerHTML += filterHTML; }); } // Call function to generate filter options on page load document.addEventListener('DOMContentLoaded', () => { generateFilterOptions(); displayProducts(products); // Display all products initially }); function displayProducts(filteredProducts) { const grid = document.querySelector('.products-grid'); grid.innerHTML = ''; // Clear the grid first document.querySelector('.product-result').innerText = filteredProducts.length; filteredProducts.forEach(product => { const prodDiv = document.createElement('div'); prodDiv.className = 'product'; prodDiv.innerHTML = ` <a href="${product.url}"> <img src="${product.image}" alt="${product.name}"> <p>${product.name}</p> </a> `; grid.appendChild(prodDiv); }); } function filterProducts() { const searchText = document.getElementById('search-values').value.toLowerCase(); const checkedApplications = Array.from(document.querySelectorAll('input[name="application"]:checked')).map(el => el.value); const checkedPowerRanges = Array.from(document.querySelectorAll('input[name="power-range"]:checked')); const checkedUpsTypes = Array.from(document.querySelectorAll('input[name="ups-type"]:checked')).map(el => el.value); const checkedKVARanges = Array.from(document.querySelectorAll('input[name="kva-range"]:checked')); const filteredProducts = products.filter(product => { const matchesText = product.name.toLowerCase().includes(searchText); const matchesApplication = checkedApplications.length === 0 || checkedApplications.includes(product.application); const matchesPowerRange = checkedPowerRanges.length === 0 || checkedPowerRanges.some(range => { const min = parseInt(range.dataset.min, 10); const max = parseInt(range.dataset.max, 10); return product.power >= min && product.power <= max; }); const matchesUpsType = checkedUpsTypes.length === 0 || checkedUpsTypes.includes(product.upsType); const matchesKVARange = checkedKVARanges.length === 0 || checkedKVARanges.some(range => { const min = parseInt(range.dataset.min, 10); const max = parseInt(range.dataset.max, 10); return product.kva >= min && product.kva <= max; }); return matchesText && matchesApplication && matchesPowerRange && matchesUpsType && matchesKVARange; }); displayProducts(filteredProducts); } function sortProducts() { const sortValue = document.getElementById('power-sort').value; const sortedProducts = [...products].sort((a, b) => { return sortValue === 'lowToHigh' ? a.power - b.power : b.power - a.power; }); displayProducts(sortedProducts); }