89 lines
2.6 KiB
Plaintext
89 lines
2.6 KiB
Plaintext
<h1>Excel Replacement Dashboard</h1>
|
|
|
|
<!-- Dropdown Filters (No submit button needed, JS handles it) -->
|
|
<%= form_with url: dashboard_path, method: :get, id: "filter-form" do |f| %>
|
|
<div>
|
|
<%= f.label :joint, "Select Joint:" %>
|
|
<%= f.select :joint, options_for_select(@available_joints, params[:joint]), include_blank: "Select a joint", id: "joint" %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<hr>
|
|
|
|
<h2>Dashboard Results</h2>
|
|
<div style="overflow-x: auto;">
|
|
<table border="1" id="results-table">
|
|
<thead>
|
|
<tr id="table-headers">
|
|
<!-- Dynamically populated headers -->
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-body">
|
|
<!-- Dynamically populated rows (supports 4 to 20+ values) -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const jointSelect = document.getElementById("joint");
|
|
const tableHeaders = document.getElementById("table-headers");
|
|
const tableBody = document.getElementById("table-body");
|
|
|
|
function fetchFilteredData() {
|
|
const joint = jointSelect.value;
|
|
|
|
// Build query parameters
|
|
const params = new URLSearchParams();
|
|
if (joint) params.append("joint", joint);
|
|
|
|
// Fetch data from Rails with JSON format
|
|
fetch(`/dashboard?${params.toString()}`, {
|
|
headers: { "Accept": "application/json" }
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
renderTable(data);
|
|
})
|
|
.catch(error => console.error("Error fetching dashboard data:", error));
|
|
}
|
|
|
|
function renderTable(records) {
|
|
tableHeaders.innerHTML = "";
|
|
tableBody.innerHTML = "";
|
|
|
|
if (records.length === 0) {
|
|
tableBody.innerHTML = "<tr><td colspan='100'>No records found</td></tr>";
|
|
return;
|
|
}
|
|
|
|
// Extract column keys dynamically from the first record (handles variable lengths)
|
|
const columns = Object.keys(records[0]);
|
|
|
|
// 1. Build dynamic headers
|
|
columns.forEach(col => {
|
|
const th = document.createElement("th");
|
|
th.textContent = col.replace(/_/g, " ").toUpperCase();
|
|
tableHeaders.appendChild(th);
|
|
});
|
|
|
|
// 2. Build dynamic rows (whether 4 or 20 attributes long)
|
|
records.forEach(record => {
|
|
const tr = document.createElement("tr");
|
|
columns.forEach(col => {
|
|
const td = document.createElement("td");
|
|
td.textContent = record[col] !== null ? record[col] : "";
|
|
tr.appendChild(td);
|
|
});
|
|
tableBody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
// Trigger fetch when either dropdown changes
|
|
jointSelect.addEventListener("change", fetchFilteredData);
|
|
|
|
// Load initial data on page load
|
|
fetchFilteredData();
|
|
});
|
|
</script>
|