Skip to content

Commit

Permalink
Update scripts.
Browse files Browse the repository at this point in the history
  • Loading branch information
@fiorisi
fiorisi committed Oct 29, 2024
1 parent ef4bab5 commit 20ea63c
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 146 deletions.
23 changes: 13 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,29 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Motor Comparison Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Motor Comparison Tool</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Motor Comparison Table</h1>

<h1>Motor Comparison Tool</h1>
<div id="filters">
<!-- Filters will be generated dynamically -->
<label for="diameter-min">Min Diameter (mm):</label>
<input type="number" id="diameter-min">
<label for="diameter-max">Max Diameter (mm):</label>
<input type="number" id="diameter-max">
<button onclick="filterMotors()">Filter</button>
</div>

<table id="motor-table">
<table id="results-table">
<thead>
<tr>
<th>Name</th>
<th>Cooling</th>
<th>Rated Voltage (V)</th>
<th>Continuous Torque (Nm)</th>
<th>Peak Torque (Nm)</th>
<th>Max Rotation Speed (rpm)</th>
<th>Max Power (W)</th>
<th>Max Speed (RPM)</th>
<th>Pole Pairs</th>
<th>Rotor Inertia (kg·cm²)</th>
<th>Diameter (mm)</th>
Expand All @@ -29,11 +33,10 @@ <h1>Motor Comparison Table</h1>
<th>Rotor Inner Diameter (mm)</th>
</tr>
</thead>
<tbody>
<!-- Motor data will be inserted here -->
<tbody id="results-body">
<!-- Filtered results will appear here -->
</tbody>
</table>

<script src="script.js"></script>
</body>
</html>
164 changes: 38 additions & 126 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `
<td>${motor.name || ''}</td>
<td>${motor.cooling || ''}</td>
<td>${motor.rated_voltage_v || ''}</td>
<td>${motor.continuous_torque_nm || ''}</td>
<td>${motor.peak_torque_nm || ''}</td>
<td>${motor.max_rotation_speed_rpm || ''}</td>
<td>${motor.pole_pairs || ''}</td>
<td>${motor.rotor_inertia_kg_cm2 || ''}</td>
<td>${motor.diameter_mm || ''}</td>
<td>${motor.length_mm || ''}</td>
<td>${motor.weight_g || ''}</td>
<td>${motor.rotor_inner_diameter_mm || ''}</td>
`;
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 = `
<td>${motor.name || "-"}</td>
<td>${motor.cooling || "-"}</td>
<td>${motor.rated_voltage_v !== null ? motor.rated_voltage_v : "-"}</td>
<td>${motor.continuous_torque_nm !== null ? motor.continuous_torque_nm : "-"}</td>
<td>${motor.peak_torque_nm !== null ? motor.peak_torque_nm : "-"}</td>
<td>${motor.max_power_w !== null ? motor.max_power_w : "-"}</td>
<td>${motor.max_rotation_speed_rpm !== null ? motor.max_rotation_speed_rpm : "-"}</td>
<td>${motor.pole_pairs !== null ? motor.pole_pairs : "-"}</td>
<td>${motor.rotor_inertia_kg_cm2 !== null ? motor.rotor_inertia_kg_cm2 : "-"}</td>
<td>${motor.diameter_mm !== null ? motor.diameter_mm : "-"}</td>
<td>${motor.length_mm !== null ? motor.length_mm : "-"}</td>
<td>${motor.weight_g !== null ? motor.weight_g : "-"}</td>
<td>${motor.rotor_inner_diameter_mm !== null ? motor.rotor_inner_diameter_mm : "-"}</td>
`;
resultsBody.appendChild(row);
});

populateTable(filteredMotors);
}
27 changes: 17 additions & 10 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,38 @@
body {
font-family: Arial, sans-serif;
margin: 20px;
}

h1 {
text-align: center;
}

#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;
}

0 comments on commit 20ea63c

Please sign in to comment.