Add map and table shortcodes
This commit is contained in:
parent
96f119efe5
commit
6a882b6377
|
@ -1,5 +1,2 @@
|
|||
<script>
|
||||
const apiURL = "{{ .Site.Params.apiURL }}";
|
||||
</script>
|
||||
{{ $id := .Get "src" | md5 }} {{ partial "chart.html" (dict "src" (.Get "src")
|
||||
"id" $id) }}
|
||||
|
|
|
@ -1 +1,15 @@
|
|||
{{ partial "map.html" }}
|
||||
<script src="https://labs.geomatico.es/maplibre-cog-protocol/dist/index.js"></script>
|
||||
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
|
||||
/>
|
||||
<section class="map-container">
|
||||
<div id="{{ .Get `id` }}" style="height: 400px"></div>
|
||||
<script>
|
||||
let map = new maplibregl.Map({
|
||||
container: "{{ .Get `id` }}",
|
||||
style: "{{ .Get `style` }}",
|
||||
});
|
||||
</script>
|
||||
</section>
|
||||
|
|
|
@ -1,2 +1,67 @@
|
|||
{{ $id := .Get "src" | md5 }} {{ partial "table.html" (dict "src" (.Get "src")
|
||||
"id" $id) }}
|
||||
<script>
|
||||
async function fetchDataForTable() {
|
||||
try {
|
||||
const apiEndpoint = `${apiURL}/{{ .Get "endpoint" }}`;
|
||||
const response = await fetch(apiEndpoint);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const fetchedData = await response.json();
|
||||
data = fetchedData;
|
||||
console.log(data);
|
||||
createTable(data);
|
||||
} catch (error) {
|
||||
console.error("Fetching data failed:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function createTable(data) {
|
||||
const jsonTableContainer = document.getElementById("jsonTableContainer");
|
||||
jsonTableContainer.innerHTML = "";
|
||||
jsonTableContainer.style.maxHeight = "{{ .Get `maxHeight` }}"
|
||||
|
||||
tableHeaderNames = Object.values({{ .Get `headers` | safeJS }});
|
||||
tableHeaderKeys = Object.keys({{ .Get `headers` | safeJS }});
|
||||
|
||||
const table = document.createElement("table");
|
||||
table.id = "{{ .Get `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');
|
||||
tableHeaderKeys.forEach((columnName) => {
|
||||
const td = document.createElement("td");
|
||||
const div = document.createElement("div");
|
||||
div.id = "scrollable";
|
||||
if (columnName == "{{ .Get `tableKey` }}") {
|
||||
div.textContent = key;
|
||||
} else {
|
||||
div.textContent = data[key][columnName];
|
||||
};
|
||||
td.appendChild(div);
|
||||
row.appendChild(td);
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
}
|
||||
table.appendChild(thead);
|
||||
table.appendChild(tbody);
|
||||
jsonTableContainer.appendChild(table)
|
||||
{{ if eq (.Get "sortable") "true" }}
|
||||
table.className = "sortable"
|
||||
sorttable.makeSortable(document.getElementById("{{ .Get `id` }}"));
|
||||
{{ end }}
|
||||
|
||||
table.className = ""
|
||||
}
|
||||
</script>
|
||||
<div id="jsonTableContainer"></div>
|
||||
<script src="/js/lib/sorttable.js"></script>
|
||||
|
|
Loading…
Reference in New Issue