Add map and table shortcodes

This commit is contained in:
Sam 2024-09-10 09:15:00 +01:00
parent 96f119efe5
commit 6a882b6377
3 changed files with 82 additions and 6 deletions

View File

@ -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) }}

View File

@ -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>

View File

@ -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>