baseddata.io/layouts/partials/table.html

143 lines
4.6 KiB
HTML
Raw Permalink Normal View History

2024-09-22 14:27:13 +01:00
<script>
function createTable(
endpoint,
id,
headers,
maxHeight,
sortable,
valueId,
selectableRows,
filterTargets,
defaultFirstSelected,
2024-09-22 14:27:13 +01:00
) {
2024-09-23 17:46:59 +01:00
async function fetchDataForTable(query) {
2024-09-22 14:27:13 +01:00
try {
2024-09-23 17:46:59 +01:00
const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
2024-09-22 14:27:13 +01:00
const response = await fetch(apiEndpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const fetchedData = await response.json();
data = fetchedData;
generateTable(data);
} catch (error) {
console.error("Fetching data failed:", error);
}
}
function generateTable(data) {
const jsonTableContainer = document.getElementById(`${id}--container`);
2024-09-22 14:27:13 +01:00
jsonTableContainer.className = "jsonTableContainer";
jsonTableContainer.innerHTML = "";
jsonTableContainer.style.maxHeight = maxHeight;
tableHeaderNames = Object.values(headers);
tableHeaderKeys = Object.keys(headers);
const table = document.createElement("table");
2024-09-23 20:11:25 +01:00
table.id = `${id}`;
2024-09-22 14:27:13 +01:00
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");
const headerRow = document.createElement("tr");
tableHeaderNames.forEach((header) => {
const th = document.createElement("th");
th.textContent = header;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
for (const key in data) {
const row = document.createElement("tr");
row.value = data[key][valueId];
tableHeaderKeys.forEach((columnName) => {
const td = document.createElement("td");
const div = document.createElement("div");
div.id = "scrollable";
div.textContent = data[key][columnName];
td.appendChild(div);
row.appendChild(td);
tbody.appendChild(row);
});
}
table.appendChild(thead);
table.appendChild(tbody);
jsonTableContainer.appendChild(table);
// sortable
if (sortable == "true") {
table.className = "sortable";
sorttable.makeSortable(document.getElementById(`${id}`));
}
2024-09-22 14:27:13 +01:00
if (selectableRows === "multi" || selectableRows === "single") {
const rows = table.getElementsByTagName("tr");
for (let i = 1; i < rows.length; i++) {
rows[i].addEventListener("click", function () {
2024-09-23 20:11:25 +01:00
if (selectableRows === "multi") {
this.classList.toggle("selected");
if (this.classList.contains("selected")) {
const event = new CustomEvent("filterChange", {
detail: {
filterId: valueId,
filterValue: this.value,
filterActions: ["selected"],
filterTargets: filterTargets,
2024-09-23 20:11:25 +01:00
},
});
document.dispatchEvent(event);
} else {
const event = new CustomEvent("filterChange", {
detail: {
filterId: valueId,
filterValue: this.value,
filterActions: ["deselected"],
filterTargets: filterTargets,
2024-09-23 20:11:25 +01:00
},
2024-09-22 14:27:13 +01:00
});
2024-09-23 20:11:25 +01:00
document.dispatchEvent(event);
}
} else if (selectableRows === "single") {
if (this.classList.contains("selected")) {
this.classList.remove("selected");
} else {
for (let j = 1; j < rows.length; j++) {
rows[j].classList.remove("selected");
}
this.classList.add("selected");
2024-09-22 14:27:13 +01:00
}
}
});
if (defaultFirstSelected == true) {
if (i == 1) {
rows[i].classList.add("selected");
const event = new CustomEvent("filterChange", {
detail: {
filterId: valueId,
filterValue: rows[i].value,
filterActions: ["selected"],
filterTargets: filterTargets,
},
});
document.dispatchEvent(event);
}
}
2024-09-22 14:27:13 +01:00
}
}
2024-09-23 17:46:59 +01:00
2024-09-22 14:27:13 +01:00
}
2024-09-23 20:11:25 +01:00
// listen for filter events for this target
2024-09-23 17:46:59 +01:00
document.addEventListener("filterChange", function (event) {
tableId = document.getElementById(id).id;
2024-09-23 20:11:25 +01:00
if (event.detail.filterTargets.includes(tableId)) {
query = queryConstructor();
fetchDataForTable(query);
}
2024-09-23 17:46:59 +01:00
});
2024-09-23 20:11:25 +01:00
query = queryConstructor();
2024-09-23 17:46:59 +01:00
fetchDataForTable(query);
2024-09-22 14:27:13 +01:00
}
</script>