150 lines
3.8 KiB
Vue
150 lines
3.8 KiB
Vue
<style scoped>
|
|
.map-container {
|
|
height: 400px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class="card shadow-sm mb-3">
|
|
<div class="card-header bg-white pane-header">
|
|
Active Investigation Workbench
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="map-container" v-if="session.organization"></div>
|
|
<div v-else>
|
|
<p>loading...</p>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<div class="card border">
|
|
<div class="card-body">
|
|
<div class="fw-semibold">Selected Signals</div>
|
|
<div class="text-muted small">
|
|
{{ selectedSignals.length }} Signal{{
|
|
selectedSignals.length !== 1 ? "s" : ""
|
|
}}
|
|
Selected
|
|
</div>
|
|
|
|
<div
|
|
v-if="selectedSignals.length === 0"
|
|
class="text-muted small mt-2 fst-italic"
|
|
>
|
|
Click signals from the left panel to select them
|
|
</div>
|
|
|
|
<div class="mt-2" v-show="selectedSignals.length > 0">
|
|
<div v-for="signal in selectedSignals" :key="signal.id">
|
|
<PlanningColumnDetailEntry :signal="signal" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="session.organization && session.urls">
|
|
<div v-show="showMapTile" class="map-container">
|
|
<MapProxiedArcgisTile
|
|
@map-click="updateSignalLocation"
|
|
:markers="[]"
|
|
:organizationId="session.organization!.id"
|
|
:tegola="session.urls!.tegola"
|
|
:urlTiles="session.urls!.tile"
|
|
v-model="mapFlyoverCamera"
|
|
>
|
|
</MapProxiedArcgisTile>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import MapMultipoint from "@/components/MapMultipoint.vue";
|
|
import MapProxiedArcgisTile from "@/components/MapProxiedArcgisTile.vue";
|
|
import PlanningColumnDetailEntry from "@/components/PlanningColumnDetailEntry.vue";
|
|
import TimeRelative from "@/components/TimeRelative.vue";
|
|
import { shortAddress } from "@/format";
|
|
import { useSessionStore } from "@/store/session";
|
|
import { MapClickEvent, Marker } from "@/types";
|
|
import type { Location, Signal } from "@/type/api";
|
|
import { Camera } from "@/type/map";
|
|
|
|
interface Props {
|
|
markers: Marker[];
|
|
selectedSignals: Array<Signal>;
|
|
}
|
|
const mapFlyoverCamera = ref<Camera>(new Camera());
|
|
const props = defineProps<Props>();
|
|
const session = useSessionStore();
|
|
const configureMapTile = () => {
|
|
/*
|
|
if (!mapTile.value) return;
|
|
|
|
mapTile.value.on("load", () => {
|
|
mapTile.value.addLayer({
|
|
id: "parcel",
|
|
minzoom: 14,
|
|
paint: {
|
|
"line-color": "#0f0",
|
|
},
|
|
source: "tegola",
|
|
"source-layer": "parcel",
|
|
type: "line",
|
|
});
|
|
mapTile.value.addLayer({
|
|
id: "signal-point",
|
|
paint: {
|
|
"circle-color": "#0D6EfD",
|
|
"circle-radius": 7,
|
|
"circle-stroke-width": 2,
|
|
"circle-stroke-color": "#024AB6",
|
|
},
|
|
source: "tegola",
|
|
"source-layer": "signal-point",
|
|
type: "circle",
|
|
});
|
|
});
|
|
*/
|
|
};
|
|
|
|
const selectedSignalLocation = (): Location => {
|
|
const first_pool = props.selectedSignals.reduce(
|
|
(accumulator: Signal | null, current: Signal) => {
|
|
if (accumulator == null && current.type === "flyover pool") {
|
|
return current;
|
|
}
|
|
return accumulator;
|
|
},
|
|
null as Signal | null,
|
|
);
|
|
const loc = first_pool?.location;
|
|
return (
|
|
loc || {
|
|
latitude: 0,
|
|
longitude: 0,
|
|
}
|
|
);
|
|
};
|
|
const showMapTile = () => {
|
|
const hasPool = props.selectedSignals.reduce(
|
|
(accumulator: boolean | null, current: Signal) => {
|
|
return accumulator || current.type === "flyover pool";
|
|
},
|
|
false,
|
|
);
|
|
return selectedSignalLocation() && hasPool;
|
|
};
|
|
const updateSignalLocation = (event: MapClickEvent) => {
|
|
console.log("map click", event.location);
|
|
//const signalId = event.detail.signalId;
|
|
|
|
//const map = event.map;
|
|
//const loc = event.location;
|
|
|
|
//map.SetMarkers([loc]);
|
|
//poolLocations.value[signalId] = loc;
|
|
};
|
|
</script>
|