143 lines
4.6 KiB
HTML
143 lines
4.6 KiB
HTML
<script>
|
|
function createTable(
|
|
endpoint,
|
|
id,
|
|
headers,
|
|
maxHeight,
|
|
sortable,
|
|
valueId,
|
|
selectableRows,
|
|
filterTargets,
|
|
defaultFirstSelected,
|
|
) {
|
|
async function fetchDataForTable(query) {
|
|
try {
|
|
const apiEndpoint = `${apiURL}/${endpoint}?${query}`;
|
|
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`);
|
|
jsonTableContainer.className = "jsonTableContainer";
|
|
jsonTableContainer.innerHTML = "";
|
|
jsonTableContainer.style.maxHeight = maxHeight;
|
|
|
|
tableHeaderNames = Object.values(headers);
|
|
tableHeaderKeys = Object.keys(headers);
|
|
|
|
const table = document.createElement("table");
|
|
table.id = `${id}`;
|
|
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}`));
|
|
}
|
|
|
|
if (selectableRows === "multi" || selectableRows === "single") {
|
|
const rows = table.getElementsByTagName("tr");
|
|
for (let i = 1; i < rows.length; i++) {
|
|
rows[i].addEventListener("click", function () {
|
|
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,
|
|
},
|
|
});
|
|
document.dispatchEvent(event);
|
|
} else {
|
|
const event = new CustomEvent("filterChange", {
|
|
detail: {
|
|
filterId: valueId,
|
|
filterValue: this.value,
|
|
filterActions: ["deselected"],
|
|
filterTargets: filterTargets,
|
|
},
|
|
});
|
|
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");
|
|
}
|
|
}
|
|
});
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// listen for filter events for this target
|
|
document.addEventListener("filterChange", function (event) {
|
|
tableId = document.getElementById(id).id;
|
|
if (event.detail.filterTargets.includes(tableId)) {
|
|
query = queryConstructor();
|
|
fetchDataForTable(query);
|
|
}
|
|
});
|
|
|
|
query = queryConstructor();
|
|
fetchDataForTable(query);
|
|
}
|
|
</script>
|