nidus-sync/html/template/sync/review/site.html

{{ template "sync/layout/authenticated.html" . }}

{{ define "title" }}Review - Sites{{ end }}
{{ define "extraheader" }}
	<script
		type="text/javascript"
		src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
	></script>
	<script src="/static/js/address-suggestion.js"></script>
	<script src="/static/js/map-multipoint.js"></script>
	<!-- ordering matters since report table depends on time-relative -->
	<script src="/static/js/time-relative.js"></script>
	<script src="/static/js/table-site.js"></script>
<script>
function formatAddress(props) {
	return `${props.address_number} ${props.address_street} ${props.address_locality}, ${props.address_region}, ${props.address_country}`;
}
// Because features come from tiled vector data, feature geometries may be split
// or duplicated across tile boundaries. As a result, features may appear
// multiple times in query results.
function getUniqueFeatures(features, comparatorProperty) {
	const uniqueIds = new Set();
	const uniqueFeatures = [];
	for (const feature of features) {
		const id = feature.properties[comparatorProperty];
		if (!uniqueIds.has(id)) {
			uniqueIds.add(id);
			let f = structuredClone(feature);
			uniqueFeatures.push(f);
		}
	}
	return uniqueFeatures;
}

function handleLookupFormSubmit(e) {
	const report_id = e.target.elements["address"].value.replace(/-/g, "");
	window.location = "/status/" + report_id;
	return false;
}

function maybeEnableLookupButton(e) {
	const lookupButton = document.getElementById("lookup");
	const lookupButtonTooltip = tooltipByElementId["lookup-tooltip"];
	const reportId = e.target.value.replace(/-/g, "");
	if (reportId.length == 12) {
		lookupButton.disabled = false;
		lookupButton.classList.remove("disabled");
		lookupButtonTooltip.disable()
	} else {
		lookupButton.disabled = true;
		lookupButton.classList.add("disabled");
		lookupButtonTooltip.enable()
	}
}

function onLoad() {
	const map = document.querySelector("map-multipoint");
	const checkboxNuisance = document.getElementById("checkboxNuisance");
	const checkboxWater = document.getElementById("checkboxWater");
	map.addEventListener("load", (event) => {
		map.addSource('tegola', {
			'type': 'vector',
			'tiles': [
				'{{.URL.Tegola}}maps/nidus/{z}/{x}/{y}'
			]
		});
		map.addLayer({
			'id': 'feature-pool',
			'source': 'tegola',
			'source-layer': 'feature-pool',
			'type': 'circle',
			'paint': {
				'circle-color': "#0D6EfD",
				'circle-radius': 7,
				'circle-stroke-width': 2,
				'circle-stroke-color': "#024AB6"
			}
		});
		function _updateSiteList() {
			const features = map.queryRenderedFeatures({target: {layerId: 'feature-pool'}});
			const nidus_features = features.filter((feature) => feature.source == "tegola");
			//const uniqueFeatures = getUniqueFeatures(nidus_features);
			// Populate features for the listing overlay.
			renderFeatures(nidus_features);
		}
		map.once("idle", _updateSiteList);
		map.on('moveend', _updateSiteList);
	});
	const table_site = document.querySelector('table-site');
	table_site.addEventListener("row-clicked", (e) => {
		//window.location = "/status/" + e.detail.reportId;
		console.log("Clicked on site", e.detail);
	})
	document.querySelector("address-input").addEventListener("suggestion-selected", (e) => {
		maybeEnableLookupButton(e)
		if (e.detail.type == "address") {
			map.flyTo({
				center: {
					lng: e.detail.content.geometry.coordinates[0],
					lat: e.detail.content.geometry.coordinates[1],
				},
				zoom: 15,
			});
		}
	});
	document.querySelector("address-input").addEventListener("input", maybeEnableLookupButton);
	document.getElementById("lookup-form").addEventListener("submit", handleLookupFormSubmit);
}
function renderFeatures(features) {
	console.log("render features", features);

	const site_table = document.querySelector('table-site');
	let sites = [];
	for (const feature of features) {
		sites.push({
			address: formatAddress(feature.properties),
			condition: feature.properties.condition,
			id: feature.id,
			type: feature.type,
		});
	}
	site_table.sites = sites;

	const sites_count = document.getElementById("site-count");
	sites_count.innerHTML = sites.length + " Sites Found";
}
document.addEventListener('DOMContentLoaded', onLoad);
</script>
{{ end }}
{{ define "content" }}
	<div class="container my-4">
		<!-- Search Box -->
		<div class="card search-box mb-4">
			<div class="card-body">
				<form class="row g-3 align-items-center" action="#" id="lookup-form">
					<div class="col-md-9">
						<address-input
							name="address"
							placeholder="Enter an address, neighborhood, or zip code"
						></address-input>
					</div>
				</form>
			</div>
		</div>

		<!-- Map Section -->
		<div class="card mb-4">
			<div class="card-header bg-info text-white">
				<h5 class="mb-0"><i class="bi bi-pin-map-fill me-2"></i>Sites Map</h5>
			</div>
			<div class="card-body p-0">
				<div class="map-container">
					<map-multipoint
						id="map"
						xmax="-118.0"
						ymax="37.0"
						xmin="-119.0"
						ymin="36.0"
						tegola="{{ .URL.Tegola }}"
						zoom="9"
					></map-multipoint>
				</div>
			</div>
		</div>

		<!-- Results Section -->
		<div class="card">
			<div
				class="card-header bg-primary text-white d-flex justify-content-between align-items-center"
			>
				<h5 class="mb-0"><i class="bi bi-geo-fill me-2"></i>Sites List</h5>
				<span class="badge bg-light text-dark" id="site-count"
					>- Sites Found</span
				>
			</div>
			<div class="card-body p-0">
				<div class="table-responsive">
					<table-site />
				</div>
			</div>
			<!--
		<div class="card-footer">
			<nav aria-label="Page navigation">
				<ul class="pagination justify-content-center mb-0">
					<li class="page-item disabled">
						<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
					</li>
					<li class="page-item active"><a class="page-link" href="#">1</a></li>
					<li class="page-item"><a class="page-link" href="#">2</a></li>
					<li class="page-item"><a class="page-link" href="#">3</a></li>
					<li class="page-item">
						<a class="page-link" href="#">Next</a>
					</li>
				</ul>
			</nav>
		</div>
		--></div>
	</div>
{{ end }}