add settings panel to hide neighbour lines further than x meters
This commit is contained in:
liamcottle
@ -188,7 +188,7 @@
|
|||||||
<span class="tooltip-text">Devices</span>
|
<span class="tooltip-text">Devices</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="tooltip rounded-full" onclick="goToRandomNode()">
|
<a href="#" class="tooltip rounded-full hidden lg:block" onclick="goToRandomNode()">
|
||||||
<div id="random-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
<div id="random-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
||||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
@ -202,6 +202,17 @@
|
|||||||
<span class="tooltip-text">Random</span>
|
<span class="tooltip-text">Random</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
<a @click="isShowingSettings = true" href="javascript:void(0)" class="tooltip rounded-full">
|
||||||
|
<div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
||||||
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="hidden sm:block">
|
||||||
|
<span class="tooltip-text">Settings</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
<a href="#" class="tooltip rounded-full" onclick="reload()">
|
<a href="#" class="tooltip rounded-full" onclick="reload()">
|
||||||
<div id="reload-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
<div id="reload-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
||||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||||
@ -772,16 +783,98 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- settings modal -->
|
||||||
|
<div class="relative z-sidebar" role="dialog" aria-modal="true">
|
||||||
|
|
||||||
|
<!-- overlay -->
|
||||||
|
<transition
|
||||||
|
enter-active-class="transition-opacity duration-300 ease-linear"
|
||||||
|
enter-from-class="opacity-0"
|
||||||
|
enter-to-class="opacity-100"
|
||||||
|
leave-active-class="transition-opacity duration-300 ease-linear"
|
||||||
|
leave-from-class="opacity-100"
|
||||||
|
leave-to-class="opacity-0">
|
||||||
|
<div v-show="isShowingSettings" @click="isShowingSettings = !isShowingSettings" class="fixed inset-0 bg-gray-900 bg-opacity-75"></div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<!-- sidebar -->
|
||||||
|
<transition
|
||||||
|
enter-active-class="transition duration-300 ease-in-out transform"
|
||||||
|
enter-from-class="-translate-x-full"
|
||||||
|
enter-to-class="translate-x-0"
|
||||||
|
leave-active-class="transition duration-300 ease-in-out transform"
|
||||||
|
leave-from-class="translate-x-0"
|
||||||
|
leave-to-class="-translate-x-full">
|
||||||
|
<div v-show="isShowingSettings" class="fixed top-0 left-0 bottom-0">
|
||||||
|
<div v-if="isShowingSettings" class="w-screen max-w-md overflow-hidden">
|
||||||
|
<div class="flex h-full flex-col bg-white shadow-xl">
|
||||||
|
|
||||||
|
<!-- slideover header -->
|
||||||
|
<div class="p-2 border-b border-gray-200 shadow">
|
||||||
|
<div class="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-bold">Settings</h2>
|
||||||
|
<h3 class="text-sm">Changes are only saved in this browser.</h3>
|
||||||
|
</div>
|
||||||
|
<div class="my-auto ml-3 flex h-7 items-center">
|
||||||
|
<a href="javascript:void(0)" class="rounded-full" @click="isShowingSettings = false">
|
||||||
|
<div class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full">
|
||||||
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||||
|
<path d="M18 6l-12 12"></path>
|
||||||
|
<path d="M6 6l12 12"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overflow-y-auto divide-y divide-gray-200">
|
||||||
|
|
||||||
|
<!-- neighbours_max_distance_in_meters -->
|
||||||
|
<div class="p-2">
|
||||||
|
<label class="block mb-2 text-sm font-medium text-gray-900">Neighbours Max Distance (meters)</label>
|
||||||
|
<input type="number" v-model="configNeighboursMaxDistanceInMeters" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
|
||||||
|
<div class="text-xs text-gray-600">Neighbours further than this are hidden. Reload to update map.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function getConfigNeighboursMaxDistanceInMeters() {
|
||||||
|
const value = localStorage.getItem("config_neighbours_max_distance_in_meters");
|
||||||
|
return value != null ? parseInt(value) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setConfigNeighboursMaxDistanceInMeters(value) {
|
||||||
|
return localStorage.setItem("config_neighbours_max_distance_in_meters", value);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
Vue.createApp({
|
Vue.createApp({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
|
configNeighboursMaxDistanceInMeters: window.getConfigNeighboursMaxDistanceInMeters(),
|
||||||
|
|
||||||
isShowingHardwareModels: false,
|
isShowingHardwareModels: false,
|
||||||
hardwareModelStats: null,
|
hardwareModelStats: null,
|
||||||
|
|
||||||
|
isShowingSettings: false,
|
||||||
|
|
||||||
nodes: [],
|
nodes: [],
|
||||||
searchText: "",
|
searchText: "",
|
||||||
|
|
||||||
@ -1150,6 +1243,11 @@
|
|||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
configNeighboursMaxDistanceInMeters() {
|
||||||
|
window.setConfigNeighboursMaxDistanceInMeters(this.configNeighboursMaxDistanceInMeters);
|
||||||
|
},
|
||||||
|
},
|
||||||
}).mount('#app');
|
}).mount('#app');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -1442,6 +1540,9 @@
|
|||||||
// clear nodes cache
|
// clear nodes cache
|
||||||
nodes = [];
|
nodes = [];
|
||||||
|
|
||||||
|
// get config
|
||||||
|
const configNeighboursMaxDistanceInMeters = getConfigNeighboursMaxDistanceInMeters();
|
||||||
|
|
||||||
// add nodes
|
// add nodes
|
||||||
for(var node of updatedNodes){
|
for(var node of updatedNodes){
|
||||||
|
|
||||||
@ -1533,6 +1634,15 @@
|
|||||||
const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
|
const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
|
||||||
if(neighbourNodeMarker){
|
if(neighbourNodeMarker){
|
||||||
|
|
||||||
|
// calculate distance in meters between nodes (rounded to 2 decimal places)
|
||||||
|
const distanceInMeters = currentNode.getLatLng().distanceTo(neighbourNodeMarker.getLatLng()).toFixed(2);
|
||||||
|
|
||||||
|
// don't show this neighbour connection if further than config allows
|
||||||
|
if(configNeighboursMaxDistanceInMeters != null && parseFloat(distanceInMeters) > configNeighboursMaxDistanceInMeters){
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// add neighbour line to map
|
||||||
const line = L.polyline([
|
const line = L.polyline([
|
||||||
currentNode.getLatLng(),
|
currentNode.getLatLng(),
|
||||||
neighbourNodeMarker.getLatLng(),
|
neighbourNodeMarker.getLatLng(),
|
||||||
@ -1541,9 +1651,6 @@
|
|||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
}).addTo(neighboursLayerGroup);
|
}).addTo(neighboursLayerGroup);
|
||||||
|
|
||||||
// calculate distance in meters between nodes (rounded to 2 decimal places)
|
|
||||||
const distanceInMeters = currentNode.getLatLng().distanceTo(neighbourNodeMarker.getLatLng()).toFixed(2);
|
|
||||||
|
|
||||||
// default to showing distance in meters
|
// default to showing distance in meters
|
||||||
var distance = `${distanceInMeters} meters`;
|
var distance = `${distanceInMeters} meters`;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user