gammatools/web/pages/display_tables.html

99 lines
2.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<title>Table View</title>
<script src="../assets/js/config.js"></script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>
<table id="yield-table">
<thead></thead>
<tbody></tbody>
</table>
<script>
function createTable(data) {
const table = document.createElement('table');
// Get all row and column indexes
const colIndexes = Object.keys(data[Object.keys(data)[0]]);
const rowIndexes = Object.keys(data);
const thead = document.createElement('thead');
const hRow = document.createElement('tr');
// Empty cell in the top-left corner
hRow.appendChild(document.createElement('th'));
colIndexes.forEach(colIndex => {
const cell = document.createElement('th');
cell.textContent = colIndex;
hRow.appendChild(cell);
});
thead.appendChild(hRow);
table.appendChild(thead);
const tbody = document.createElement('tbody');
rowIndexes.forEach(rowIndex => {
const tRow = document.createElement('tr');
const rowHeader = document.createElement('th');
rowHeader.textContent = rowIndex;
tRow.appendChild(rowHeader);
colIndexes.forEach(colIndex => {
const cell = document.createElement('td');
cell.textContent = data[rowIndex][colIndex];
tRow.appendChild(cell);
});
tbody.appendChild(tRow);
});
table.appendChild(tbody);
return table;
}
function parseAndRenderData(data) {
for (const [tableName, tableData] of Object.entries(data)) {
// Parse JSON into object
const parsedData = JSON.parse(tableData);
const tableTitle = document.createElement('H2');
tableTitle.innerHTML = tableName;
document.body.appendChild(tableTitle);
// Create table and header
const table = createTable(parsedData);
// Append table to the body of the HTML
document.body.appendChild(table);
}
}
document.addEventListener('DOMContentLoaded', function () {
fetch(`${window.BASE_URL}/rules/tables`)
.then(response => response.json())
.then(data => {
parseAndRenderData(data)
});
});
</script>
</body>
</html>