From 20ea63c718688aa3810fa2de9fa0b9a99f689451 Mon Sep 17 00:00:00 2001 From: Luca Fiorio Date: Tue, 29 Oct 2024 13:35:29 +0100 Subject: [PATCH] Update scripts. --- index.html | 23 ++++---- script.js | 164 +++++++++++++---------------------------------------- style.css | 27 +++++---- 3 files changed, 68 insertions(+), 146 deletions(-) diff --git a/index.html b/index.html index 0620644..02d8b72 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,20 @@ - Motor Comparison Table + + Motor Comparison Tool -

Motor Comparison Table

- +

Motor Comparison Tool

- + + + + +
- - +
@@ -20,7 +23,8 @@

Motor Comparison Table

- + + @@ -29,11 +33,10 @@

Motor Comparison Table

- - + +
Name Rated Voltage (V) Continuous Torque (Nm) Peak Torque (Nm)Max Rotation Speed (rpm)Max Power (W)Max Speed (RPM) Pole Pairs Rotor Inertia (kg·cm²) Diameter (mm) Rotor Inner Diameter (mm)
- diff --git a/script.js b/script.js index 3cff360..caf9f58 100644 --- a/script.js +++ b/script.js @@ -1,136 +1,48 @@ -// Fetch the JSON data and populate the table -fetch('motors.json') - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok ' + response.statusText); - } - return response.json(); - }) - .then(motors => { - generateFilters(motors); - populateTable(motors); - }) - .catch(error => console.error('Error fetching data:', error)); - -function populateTable(motors) { - const tbody = document.querySelector('#motor-table tbody'); - tbody.innerHTML = ''; - - motors.forEach(motor => { - const row = document.createElement('tr'); - - row.innerHTML = ` - ${motor.name || ''} - ${motor.cooling || ''} - ${motor.rated_voltage_v || ''} - ${motor.continuous_torque_nm || ''} - ${motor.peak_torque_nm || ''} - ${motor.max_rotation_speed_rpm || ''} - ${motor.pole_pairs || ''} - ${motor.rotor_inertia_kg_cm2 || ''} - ${motor.diameter_mm || ''} - ${motor.length_mm || ''} - ${motor.weight_g || ''} - ${motor.rotor_inner_diameter_mm || ''} - `; +let motorData = []; - tbody.appendChild(row); - }); -} - -function generateFilters(motors) { - const filtersDiv = document.getElementById('filters'); - - // Define the parameters you want to create filters for - const filterParams = [ - { key: 'cooling', label: 'Cooling' }, - { key: 'rated_voltage_v', label: 'Rated Voltage (V)' }, - { key: 'continuous_torque_nm', label: 'Continuous Torque (Nm)' }, - { key: 'peak_torque_nm', label: 'Peak Torque (Nm)' }, - { key: 'max_rotation_speed_rpm', label: 'Max Rotation Speed (rpm)' }, - { key: 'pole_pairs', label: 'Pole Pairs' }, - { key: 'rotor_inertia_kg_cm2', label: 'Rotor Inertia (kg·cm²)' }, - { key: 'diameter_mm', label: 'Diameter (mm)' }, - { key: 'length_mm', label: 'Length (mm)' }, - { key: 'weight_g', label: 'Weight (g)' }, - { key: 'rotor_inner_diameter_mm', label: 'Rotor Inner Diameter (mm)' } - ]; - - filterParams.forEach(param => { - createFilter(motors, param.key, param.label); - }); -} - -function createFilter(motors, key, labelText) { - const filtersDiv = document.getElementById('filters'); - - const values = [...new Set(motors.map(motor => motor[key]).filter(value => value !== null && value !== undefined))]; - - // Sort values if they are numbers - if (typeof values[0] === 'number') { - values.sort((a, b) => a - b); - } else { - values.sort(); - } - - const label = document.createElement('label'); - label.textContent = `${labelText}: `; - label.style.marginRight = '10px'; - - const select = document.createElement('select'); - select.id = `${key}-filter`; - - const allOption = document.createElement('option'); - allOption.value = ''; - allOption.textContent = 'All'; - select.appendChild(allOption); +// Fetch data from the new JSON file structure +fetch("motors.json") + .then(response => response.json()) + .then(data => { + motorData = data.motors; + }) + .catch(error => console.error("Error loading data:", error)); - values.forEach(value => { - const option = document.createElement('option'); - option.value = value; - option.textContent = value; - select.appendChild(option); - }); +// Filter motors based on user input +function filterMotors() { + const minDiameter = parseFloat(document.getElementById("diameter-min").value); + const maxDiameter = parseFloat(document.getElementById("diameter-max").value); - select.addEventListener('change', () => { - applyFilters(motors); + const filteredMotors = motorData.filter(motor => { + return (!minDiameter || motor.diameter_mm >= minDiameter) && + (!maxDiameter || motor.diameter_mm <= maxDiameter); }); - label.appendChild(select); - filtersDiv.appendChild(label); + displayResults(filteredMotors); } -function applyFilters(motors) { - const filterParams = [ - 'cooling', - 'rated_voltage_v', - 'continuous_torque_nm', - 'peak_torque_nm', - 'max_rotation_speed_rpm', - 'pole_pairs', - 'rotor_inertia_kg_cm2', - 'diameter_mm', - 'length_mm', - 'weight_g', - 'rotor_inner_diameter_mm' - ]; - - let filteredMotors = motors; +// Display results in the table +function displayResults(motors) { + const resultsBody = document.getElementById("results-body"); + resultsBody.innerHTML = ""; - filterParams.forEach(param => { - const filterValue = document.getElementById(`${param}-filter`).value; - - if (filterValue) { - filteredMotors = filteredMotors.filter(motor => { - // Handle numerical and string comparison - if (typeof motor[param] === 'number') { - return motor[param] == filterValue; - } else { - return motor[param] === filterValue; - } - }); - } + motors.forEach(motor => { + const row = document.createElement("tr"); + row.innerHTML = ` + ${motor.name || "-"} + ${motor.cooling || "-"} + ${motor.rated_voltage_v !== null ? motor.rated_voltage_v : "-"} + ${motor.continuous_torque_nm !== null ? motor.continuous_torque_nm : "-"} + ${motor.peak_torque_nm !== null ? motor.peak_torque_nm : "-"} + ${motor.max_power_w !== null ? motor.max_power_w : "-"} + ${motor.max_rotation_speed_rpm !== null ? motor.max_rotation_speed_rpm : "-"} + ${motor.pole_pairs !== null ? motor.pole_pairs : "-"} + ${motor.rotor_inertia_kg_cm2 !== null ? motor.rotor_inertia_kg_cm2 : "-"} + ${motor.diameter_mm !== null ? motor.diameter_mm : "-"} + ${motor.length_mm !== null ? motor.length_mm : "-"} + ${motor.weight_g !== null ? motor.weight_g : "-"} + ${motor.rotor_inner_diameter_mm !== null ? motor.rotor_inner_diameter_mm : "-"} + `; + resultsBody.appendChild(row); }); - - populateTable(filteredMotors); } diff --git a/style.css b/style.css index df7dda3..985d788 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,5 @@ body { font-family: Arial, sans-serif; - margin: 20px; } h1 { @@ -8,24 +7,32 @@ h1 { } #filters { + text-align: center; margin-bottom: 20px; } -#filters label { - margin-right: 10px; -} - -#motor-table { +table { width: 100%; border-collapse: collapse; + margin: auto; } -#motor-table th, #motor-table td { - border: 1px solid #ddd; +th, td { padding: 8px; text-align: center; + border: 1px solid #ddd; +} + +th { + background-color: #f4f4f4; +} + +button { + padding: 5px 10px; + font-size: 16px; + cursor: pointer; } -#motor-table th { - background-color: #f2f2f2; +button:hover { + background-color: #ddd; }