Add faker routing
This commit is contained in:
parent
ee7dc1dd08
commit
18c7a5f84b
4 changed files with 283 additions and 30 deletions
250
html/static/js/map-routing.js
Normal file
250
html/static/js/map-routing.js
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
// A test of maplibre-gl in a custom element
|
||||
class MapRouting 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 centroid = JSON.parse(this.getAttribute("centroid"));
|
||||
const organization_id = this.getAttribute("organization-id");
|
||||
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],
|
||||
];
|
||||
|
||||
const mapElement = this.shadowRoot.querySelector("#map");
|
||||
|
||||
/*
|
||||
this._map = new maplibregl.Map({
|
||||
center: centroid.coordinates,
|
||||
container: mapElement,
|
||||
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.dispatchEvent(new CustomEvent("load"), {
|
||||
bubbles: true,
|
||||
composed: true, // Allows event to cross shadow DOM boundary
|
||||
detail: {
|
||||
map: this,
|
||||
},
|
||||
});
|
||||
});
|
||||
*/
|
||||
this._map = new maplibregl.Map({
|
||||
container: mapElement,
|
||||
style: "https://tiles.stadiamaps.com/styles/alidade_smooth.json", // Style URL; see our documentation for more options
|
||||
center: [-122.4194, 37.7749], // San Francisco coordinates
|
||||
zoom: 12,
|
||||
});
|
||||
// Sample GeoJSON for a driving route in San Francisco
|
||||
const routeData = {
|
||||
type: "Feature",
|
||||
properties: {},
|
||||
geometry: {
|
||||
type: "LineString",
|
||||
coordinates: [
|
||||
[-122.4194, 37.7749], // Start: San Francisco downtown
|
||||
[-122.4211, 37.7837],
|
||||
[-122.4156, 37.7908],
|
||||
[-122.4089, 37.7973],
|
||||
[-122.3998, 37.8015],
|
||||
[-122.3919, 37.8057],
|
||||
[-122.3873, 37.8067], // End: Fisherman's Wharf area
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
// Add map controls
|
||||
this._map.addControl(new maplibregl.NavigationControl());
|
||||
// Wait for the map to load
|
||||
this._map.on("load", () => {
|
||||
// Add the route source
|
||||
this._map.addSource("route", {
|
||||
type: "geojson",
|
||||
data: routeData,
|
||||
});
|
||||
|
||||
// Add a layer to display the route
|
||||
this._map.addLayer({
|
||||
id: "route",
|
||||
type: "line",
|
||||
source: "route",
|
||||
layout: {
|
||||
"line-join": "round",
|
||||
"line-cap": "round",
|
||||
},
|
||||
paint: {
|
||||
"line-color": "#3887be",
|
||||
"line-width": 5,
|
||||
"line-opacity": 0.75,
|
||||
},
|
||||
});
|
||||
|
||||
// Add start point
|
||||
this._map.addSource("start-point", {
|
||||
type: "geojson",
|
||||
data: {
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates: routeData.geometry.coordinates[0],
|
||||
},
|
||||
properties: {
|
||||
description: "Start",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this._map.addLayer({
|
||||
id: "start-point",
|
||||
type: "circle",
|
||||
source: "start-point",
|
||||
paint: {
|
||||
"circle-radius": 8,
|
||||
"circle-color": "#3bb2d0",
|
||||
},
|
||||
});
|
||||
|
||||
// Add end point
|
||||
this._map.addSource("end-point", {
|
||||
type: "geojson",
|
||||
data: {
|
||||
type: "Feature",
|
||||
geometry: {
|
||||
type: "Point",
|
||||
coordinates:
|
||||
routeData.geometry.coordinates[
|
||||
routeData.geometry.coordinates.length - 1
|
||||
],
|
||||
},
|
||||
properties: {
|
||||
description: "End",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
this._map.addLayer({
|
||||
id: "end-point",
|
||||
type: "circle",
|
||||
source: "end-point",
|
||||
paint: {
|
||||
"circle-radius": 8,
|
||||
"circle-color": "#f30",
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initial render of component
|
||||
render() {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
@import url('//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.css');
|
||||
.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);
|
||||
}
|
||||
|
||||
setMarker(coords) {
|
||||
console.log("Setting map marker", coords);
|
||||
this._map.jumpTo({
|
||||
center: coords,
|
||||
zoom: 14,
|
||||
});
|
||||
this._markers.forEach((marker) => marker.remove());
|
||||
|
||||
const marker = new mapboxgl.Marker({
|
||||
color: "#FF0000",
|
||||
draggable: true,
|
||||
})
|
||||
.setLngLat(coords)
|
||||
.addTo(map);
|
||||
marker.on("dragend", function (e) {
|
||||
const markerDraggedEvent = new CustomEvent("markerdragend", {
|
||||
detail: {
|
||||
marker: marker,
|
||||
},
|
||||
});
|
||||
mapContainer.dispatchEvent(markerDraggedEvent);
|
||||
});
|
||||
this._markers = [marker];
|
||||
}
|
||||
|
||||
SetLayoutProperty(layout, property, value) {
|
||||
return this._map.setLayoutProperty(layout, property, value);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("map-routing", MapRouting);
|
||||
|
|
@ -6,16 +6,14 @@
|
|||
type="text/javascript"
|
||||
src="//unpkg.com/maplibre-gl@5.0.1/dist/maplibre-gl.js"
|
||||
></script>
|
||||
<script src="/static/js/map-aggregate.js"></script>
|
||||
<script src="/static/js/map-routing.js"></script>
|
||||
<script>
|
||||
function onLoad() {
|
||||
const map = document.querySelector("map-aggregate");
|
||||
const map = document.querySelector("map-routing");
|
||||
map.addEventListener("cell-click", (event) => {
|
||||
window.location.href = "/cell/" + event.detail.cell;
|
||||
});
|
||||
}
|
||||
window.addEventListener("load", onLoad);
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
const checkboxes = document.querySelectorAll(".route-select");
|
||||
const switchBtn = document.getElementById("switchRoutesBtn");
|
||||
|
||||
|
|
@ -37,7 +35,8 @@
|
|||
alert(`Switching routes ${selectedRoutes[0]} and ${selectedRoutes[1]}`);
|
||||
// In a real application, this would trigger the route switching logic
|
||||
});
|
||||
});
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", onLoad);
|
||||
</script>
|
||||
<style>
|
||||
.main-container {
|
||||
|
|
@ -89,17 +88,17 @@
|
|||
<h2 class="h4 mb-0">Route Map</h2>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div
|
||||
class="map-container d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<div class="text-center">
|
||||
<i class="bi bi-map fs-1 text-muted"></i>
|
||||
<h3 class="text-muted">Interactive Map View</h3>
|
||||
<p class="text-muted">
|
||||
Routes are color-coded by technician assignment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<map-routing
|
||||
centroid="{{ if .C.Organization.ServiceAreaCentroidGeojson.IsValue }}
|
||||
{{ .C.Organization.ServiceAreaCentroidGeojson.MustGet|json }}
|
||||
{{ end }}"
|
||||
organization-id="{{ .C.Organization.ID }}"
|
||||
tegola="{{ .URL.Tegola }}"
|
||||
xmin="{{ .C.Organization.ServiceAreaXmin.GetOr 0 }}"
|
||||
ymin="{{ .C.Organization.ServiceAreaYmin.GetOr 0 }}"
|
||||
xmax="{{ .C.Organization.ServiceAreaXmax.GetOr 0 }}"
|
||||
ymax="{{ .C.Organization.ServiceAreaYmax.GetOr 0 }}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,23 @@
|
|||
package sync
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
"context"
|
||||
|
||||
"github.com/Gleipnir-Technology/nidus-sync/db"
|
||||
"github.com/Gleipnir-Technology/nidus-sync/db/models"
|
||||
"github.com/Gleipnir-Technology/nidus-sync/html"
|
||||
)
|
||||
|
||||
type contentRadar struct {
|
||||
URL ContentURL
|
||||
User User
|
||||
Organization *models.Organization
|
||||
}
|
||||
|
||||
func getRadar(w http.ResponseWriter, r *http.Request, u *models.User) {
|
||||
ctx := r.Context()
|
||||
userContent, err := contentForUser(ctx, u)
|
||||
func getRadar(ctx context.Context, user *models.User) (string, contentRadar, *errorWithStatus) {
|
||||
org, err := user.Organization().One(ctx, db.PGInstance.BobDB)
|
||||
if err != nil {
|
||||
respondError(w, "Failed to get user", err, http.StatusInternalServerError)
|
||||
return
|
||||
return "", contentRadar{}, newError("get org: %w", err)
|
||||
}
|
||||
data := contentRadar{
|
||||
URL: newContentURL(),
|
||||
User: userContent,
|
||||
Organization: org,
|
||||
}
|
||||
html.RenderOrError(w, "sync/radar.html", data)
|
||||
return "sync/radar.html", data, nil
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ package sync
|
|||
|
||||
import (
|
||||
"context"
|
||||
"fmt"
|
||||
"net/http"
|
||||
|
||||
"github.com/Gleipnir-Technology/nidus-sync/api"
|
||||
|
|
@ -53,7 +54,7 @@ func Router() chi.Router {
|
|||
r.Method("GET", "/pool/upload", auth.NewEnsureAuth(getPoolUpload))
|
||||
r.Method("GET", "/pool/upload/{id}", auth.NewEnsureAuth(getPoolUploadByID))
|
||||
r.Method("POST", "/pool/upload", auth.NewEnsureAuth(postPoolUpload))
|
||||
r.Method("GET", "/radar", auth.NewEnsureAuth(getRadar))
|
||||
r.Method("GET", "/radar", authenticatedHandler(getRadar))
|
||||
r.Method("GET", "/service-request", authenticatedHandler(getServiceRequestList))
|
||||
r.Method("GET", "/service-request/{id}", authenticatedHandler(getServiceRequestDetail))
|
||||
r.Method("GET", "/setting", auth.NewEnsureAuth(getSetting))
|
||||
|
|
@ -82,6 +83,13 @@ type errorWithStatus struct {
|
|||
func (e *errorWithStatus) Error() string {
|
||||
return e.Message
|
||||
}
|
||||
func newError(mesg_format string, args ...interface{}) *errorWithStatus {
|
||||
w := fmt.Errorf(mesg_format, args...)
|
||||
return &errorWithStatus{
|
||||
Message: w.Error(),
|
||||
Status: http.StatusInternalServerError,
|
||||
}
|
||||
}
|
||||
|
||||
type handlerFunction[T any] func(context.Context, *models.User) (string, T, *errorWithStatus)
|
||||
type wrappedHandler func(http.ResponseWriter, *http.Request)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue