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 := .Get "src" | md5 }} {{ partial "chart.html" (dict "src" (.Get "src")
|
||||||
"id" $id) }}
|
"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")
|
<script>
|
||||||
"id" $id) }}
|
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