Add district setting page and display of district boundary
This commit is contained in:
parent
4c8da3b96a
commit
a1cc2dbaff
11 changed files with 648 additions and 168 deletions
135
html/static/js/map-district.js
Normal file
135
html/static/js/map-district.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
// A test of maplibre-gl in a custom element
|
||||
class MapDistrict extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// Create a shadow DOM
|
||||
this.attachShadow({ mode: "open" });
|
||||
|
||||
// Initial render
|
||||
this.render();
|
||||
|
||||
this._map = null;
|
||||
|
||||
// markers shown on the map
|
||||
this._markers = [];
|
||||
}
|
||||
|
||||
// Lifecycle: when element is added to the DOM
|
||||
connectedCallback() {
|
||||
// Initialize the map when the element is added to the DOM
|
||||
setTimeout(() => this._initializeMap(), 0);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this._map) {
|
||||
this._map.remove();
|
||||
}
|
||||
}
|
||||
|
||||
_initializeMap() {
|
||||
const apiKey = this.getAttribute("api-key");
|
||||
const centroid = JSON.parse(this.getAttribute("centroid"));
|
||||
const csv_file = this.getAttribute("csv-file");
|
||||
const district_id = this.getAttribute("district-id");
|
||||
const lat = Number(this.getAttribute("latitude") || 36.2);
|
||||
const lng = Number(this.getAttribute("longitude") || -119.2);
|
||||
const mapElement = this.shadowRoot.querySelector("#map");
|
||||
const tegola = this.getAttribute("tegola");
|
||||
const xmin = parseFloat(this.getAttribute("xmin"));
|
||||
const ymin = parseFloat(this.getAttribute("ymin"));
|
||||
const xmax = parseFloat(this.getAttribute("xmax"));
|
||||
const ymax = parseFloat(this.getAttribute("ymax"));
|
||||
const bounds = [
|
||||
[xmin, ymin],
|
||||
[xmax, ymax],
|
||||
];
|
||||
console.log("fitting", bounds);
|
||||
this._map = new maplibregl.Map({
|
||||
container: mapElement,
|
||||
center: centroid.coordinates,
|
||||
style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json", // Style URL; see our documentation for more options
|
||||
}).fitBounds(bounds, {
|
||||
padding: { top: 10, bottom: 10, left: 10, right: 10 },
|
||||
});
|
||||
this._map.on("load", () => {
|
||||
this._map.addSource("tegola-nidus", {
|
||||
type: "vector",
|
||||
tiles: [
|
||||
`${tegola}maps/district/{z}/{x}/{y}?district_id=${district_id}`,
|
||||
],
|
||||
});
|
||||
this._map.addLayer({
|
||||
id: "bounds",
|
||||
source: "tegola-nidus",
|
||||
"source-layer": "bounds",
|
||||
type: "fill",
|
||||
paint: {
|
||||
"fill-opacity": 0.4,
|
||||
"fill-color": "#dc3545",
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initial render of component
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
@import url('//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css');
|
||||
.mapboxgl-ctrl-bottom-right {
|
||||
display: none;
|
||||
}
|
||||
.map-container {
|
||||
background-color: #e9ecef;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
#map {
|
||||
height: 500px;
|
||||
width:100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#map img {
|
||||
max-width: none;
|
||||
min-width: 0px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="map-container" class="map-container">
|
||||
<div id="map"></div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
addLayer(a) {
|
||||
return this._map.addLayer(a);
|
||||
}
|
||||
addSource(a, b) {
|
||||
return this._map.addSource(a, b);
|
||||
}
|
||||
jumpTo(args) {
|
||||
return this._map.jumpTo(args);
|
||||
}
|
||||
on(a, b) {
|
||||
return this._map.on(a, b);
|
||||
}
|
||||
once(a, b) {
|
||||
return this._map.once(a, b);
|
||||
}
|
||||
queryRenderedFeatures(a) {
|
||||
return this._map.queryRenderedFeatures(a);
|
||||
}
|
||||
|
||||
SetLayoutProperty(layout, property, value) {
|
||||
return this._map.setLayoutProperty(layout, property, value);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("map-district", MapDistrict);
|
||||
136
html/template/sync/setting-district.html
Normal file
136
html/template/sync/setting-district.html
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
{{ template "sync/layout/authenticated.html" . }}
|
||||
|
||||
{{ define "title" }}Settings - Integrations{{ end }}
|
||||
{{ define "extraheader" }}
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
></script>
|
||||
<script src="/static/js/map-district.js"></script>
|
||||
<style>
|
||||
.settings-card {
|
||||
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
{{ define "content" }}
|
||||
<div class="container py-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1><i class="bi bi-geo-alt-fill text-primary me-2"></i> District Settings</h1>
|
||||
<button class="btn btn-primary"><i class="bi bi-save me-2"></i>Save Changes</button>
|
||||
</div>
|
||||
|
||||
<map-district
|
||||
district-id="{{.District.GID}}"
|
||||
centroid="{{.District.Centroid|json}}"
|
||||
xmin="{{.District.XMin}}"
|
||||
ymin="{{.District.YMin}}"
|
||||
xmax="{{.District.XMax}}"
|
||||
ymax="{{.District.YMax}}"
|
||||
tegola="{{.URL.Tegola}}"></map-district>
|
||||
|
||||
<div class="row">
|
||||
<!-- Basic Information -->
|
||||
<div class="col-md-6">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header bg-light">
|
||||
<h5><i class="bi bi-building me-2"></i> Organization Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="agencyName" class="form-label"><i class="bi bi-briefcase me-1"></i> Agency Name</label>
|
||||
<input type="text" class="form-control" id="agencyName" value="Central District Water Authority">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="website" class="form-label"><i class="bi bi-globe me-1"></i> Website</label>
|
||||
<input type="url" class="form-control" id="website" value="https://cdwa.example.org">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="generalManager" class="form-label"><i class="bi bi-person-badge me-1"></i> General Manager Name</label>
|
||||
<input type="text" class="form-control" id="generalManager" value="Jane Smithson">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="contactPerson" class="form-label"><i class="bi bi-person me-1"></i> Contact Person</label>
|
||||
<input type="text" class="form-control" id="contactPerson" value="John Doe">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Information -->
|
||||
<div class="col-md-6">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header bg-light">
|
||||
<h5><i class="bi bi-telephone me-2"></i> Contact Information</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="address" class="form-label"><i class="bi bi-geo me-1"></i> Address</label>
|
||||
<input type="text" class="form-control" id="address" value="123 Main Street, Suite 400">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="city" class="form-label"><i class="bi bi-building me-1"></i> City</label>
|
||||
<input type="text" class="form-control" id="city" value="Centerville">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="postalCode" class="form-label"><i class="bi bi-mailbox me-1"></i> Postal Code</label>
|
||||
<input type="text" class="form-control" id="postalCode" value="12345">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="phoneNumber" class="form-label"><i class="bi bi-telephone me-1"></i> Phone Number (Primary)</label>
|
||||
<input type="tel" class="form-control" id="phoneNumber" value="(555) 123-4567">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="secondaryPhone" class="form-label"><i class="bi bi-telephone-plus me-1"></i> Phone Number (Secondary)</label>
|
||||
<input type="tel" class="form-control" id="secondaryPhone" value="(555) 987-6543">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="faxNumber" class="form-label"><i class="bi bi-printer me-1"></i> Fax Number</label>
|
||||
<input type="tel" class="form-control" id="faxNumber" value="(555) 765-4321">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- District Coverage Information -->
|
||||
<div class="col-12">
|
||||
<div class="card settings-card">
|
||||
<div class="card-header bg-light">
|
||||
<h5><i class="bi bi-map me-2"></i> District Coverage</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="totalArea" class="form-label"><i class="bi bi-rulers me-1"></i> Total Area (square kilometers)</label>
|
||||
<input type="number" class="form-control" id="totalArea" value="1250">
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="countiesServed" class="form-label"><i class="bi bi-pin-map me-1"></i> Counties Served</label>
|
||||
<select class="form-select" id="countiesServed" multiple size="3">
|
||||
<option selected>Franklin County</option>
|
||||
<option selected>Jefferson County</option>
|
||||
<option selected>Washington County</option>
|
||||
<option>Lincoln County</option>
|
||||
<option>Adams County</option>
|
||||
</select>
|
||||
<small class="form-text text-muted">Hold Ctrl (or Cmd) to select multiple counties</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end mt-3">
|
||||
<button class="btn btn-secondary me-2"><i class="bi bi-x-circle me-1"></i> Cancel</button>
|
||||
<button class="btn btn-primary"><i class="bi bi-save me-1"></i> Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
Manage your district location and information.
|
||||
</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="equipment.html" class="btn btn-outline-danger">
|
||||
<a href="{{ .URL.SettingDistrict }}" class="btn btn-outline-danger">
|
||||
Manage District
|
||||
<i class="bi bi-arrow-right ms-1"></i>
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue