Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move map outside of "select report" conditional template

Browse source 
So we can load it at any time, and not have to reload it.
This commit is contained in:
Eli Ribble 2026-03-07 01:38:05 +00:00
parent f1f9c8f902
commit 2c0d545fe7
No known key found for this signature in database
2 changed files with 31 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

42
html/template/sync/communication-root.html
View file

@ -11,6 +11,7 @@
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
></script> ></script>
<script src="/static/js/time-relative.js"></script> <script src="/static/js/time-relative.js"></script>
<script src="/static/js/map-multipoint.js"></script>
<script> <script>
function onLoad() {} function onLoad() {}
window.addEventListener("load", onLoad); window.addEventListener("load", onLoad);
@ -78,6 +79,21 @@
init() { init() {
this.loadFromAPI(); this.loadFromAPI();
document.addEventListener("DOMContentLoaded", () => {
const map = document.querySelector("map-multipoint");
map.on("load", () => {
map.addLayer({
id: "parcel",
minzoom: 14,
paint: {
"line-color": "#0f0",
},
source: "tegola",
"source-layer": "parcel",
type: "line",
});
});
});
}, },
// Computed property for filtered reports // Computed property for filtered reports
get filteredCommunications() { get filteredCommunications() {
@ -394,6 +410,19 @@
<!-- Middle Column - Report Details --> <!-- Middle Column - Report Details -->
<div class="col-md-6 p-0"> <div class="col-md-6 p-0">
<div class="p-3">
<div class="map-container">
<map-multipoint
id="map"
organization-id="{{ .Organization.ID }}"
tegola="{{ .URL.Tegola }}"
xmin="{{ .Organization.ServiceAreaXmin.GetOr 0 }}"
ymin="{{ .Organization.ServiceAreaYmin.GetOr 0 }}"
xmax="{{ .Organization.ServiceAreaXmax.GetOr 0 }}"
ymax="{{ .Organization.ServiceAreaYmax.GetOr 0 }}"
></map-multipoint>
</div>
</div>
<template x-if="!selectedCommunication"> <template x-if="!selectedCommunication">
<div <div
class="h-100 d-flex flex-column align-items-center justify-content-center text-muted" class="h-100 d-flex flex-column align-items-center justify-content-center text-muted"
@ -405,19 +434,6 @@
<template x-if="selectedCommunication"> <template x-if="selectedCommunication">
<div class="h-100 d-flex flex-column"> <div class="h-100 d-flex flex-column">
<!-- Map Placeholder -->
<div class="p-3">
<div class="map-placeholder" id="map-container">
<div class="text-center text-muted">
<i class="bi bi-map fs-1"></i>
<p class="mb-0">Map View</p>
<small
x-text="selectedCommunication.public_report.location.latitude + ', ' + selectedCommunication.public_report.location.longitude"
></small>
</div>
</div>
</div>
<!-- Report Details --> <!-- Report Details -->
<div class="details-section p-3 border-top"> <div class="details-section p-3 border-top">
<div <div

4
html/template/sync/planning-root.html
View file

@ -79,8 +79,8 @@
// Initialize - runs when component loads // Initialize - runs when component loads
init() { init() {
this.loadData(); this.loadData();
const map = document.querySelector("map-multipoint"); document.addEventListener("DOMContentLoaded", () => {
window.addEventListener("load", () => { const map = document.querySelector("map-multipoint");
map.on("load", () => { map.on("load", () => {
map.addLayer({ map.addLayer({
id: "parcel", id: "parcel",