ctmesh/map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show overlay when showing node neighbours

Browse Source
This commit is contained in:
liamcottle
2024-04-07 12:30:27 +12:00
parent def4e5e1e5
commit 188aeed97b
1 changed files with 84 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/public/index.html
View File

@ -1265,6 +1265,47 @@
</div>
<!-- node neighbours modal -->
<div class="relative z-sidebar" role="dialog" aria-modal="true">
<!-- sidebar -->
<transition
enter-active-class="transition duration-300 ease-in-out transform"
enter-from-class="translate-y-full"
enter-to-class="translate-y-0"
leave-active-class="transition duration-300 ease-in-out transform"
leave-from-class="translate-y-0"
leave-to-class="translate-y-full">
<div v-show="selectedNodeToShowNeighbours != null" class="fixed left-0 right-0 bottom-0">
<div v-if="selectedNodeToShowNeighbours != null" class="mx-auto w-screen max-w-md p-4">
<div class="flex h-full flex-col bg-white shadow-xl rounded-xl">
<div class="p-2">
<div class="flex items-start justify-between">
<div>
<h2 class="font-bold">{{ selectedNodeToShowNeighbours.short_name }} Neighbours</h2>
<h3 v-if="selectedNodeToShowNeighboursType === 'we_heard'" class="text-sm">Nodes heard by {{ selectedNodeToShowNeighbours.short_name }}</h3>
<h3 v-if="selectedNodeToShowNeighboursType === 'heard_us'" class="text-sm">Nodes that heard {{ selectedNodeToShowNeighbours.short_name }}</h3>
</div>
<div class="my-auto ml-3 flex h-7 items-center">
<a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodeNeighbours">
<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>
</div>
</div>
</transition>
</div>
</div>
<script>
@ -1414,6 +1455,9 @@
selectedTraceRoute: null,
selectedNodeToShowNeighbours: null,
selectedNodeToShowNeighboursType: null,
moment: window.moment,
};
@ -1437,6 +1481,18 @@
this.loadNodeTraceroutes(node.node_id);
};
// handle node callback from outside of vue
window._onShowNodeNeighboursWeHeardClick = (node) => {
this.selectedNodeToShowNeighbours = node;
this.selectedNodeToShowNeighboursType = 'we_heard';
};
// handle node callback from outside of vue
window._onShowNodeNeighboursHeardUsClick = (node) => {
this.selectedNodeToShowNeighbours = node;
this.selectedNodeToShowNeighboursType = 'heard_us';
};
// handle nodes updated callback from outside of vue
window._onNodesUpdated = (nodes) => {
this.nodes = nodes;
@ -1791,6 +1847,10 @@
alert("Copied to clipboard!");
},
dismissShowingNodeNeighbours: function() {
window._onHideNodeNeighboursClick();
this.selectedNodeToShowNeighbours = null;
},
},
computed: {
searchedNodes() {
@ -2143,6 +2203,11 @@
}
function getColourForSnr(snr) {
if(snr >= 0) return "#16a34a"; // good
if(snr < 0) return "#dc2626"; // bad
}
function cleanUpNodeNeighbours() {
// close tooltips and popups
@ -2175,6 +2240,9 @@
return;
}
// show overlay for node neighbours
window._onShowNodeNeighboursWeHeardClick(node);
// ensure we have neighbours to show
const neighbours = node.neighbours ?? [];
if(neighbours.length === 0){
@ -2215,8 +2283,9 @@
neighbourNodeMarker.getLatLng(), // from neighbour
nodeMarker.getLatLng(), // to us
], {
color: '#2563eb',
opacity: 0.5,
color: getColourForSnr(neighbour.snr),
weight: 5,
opacity: 1,
}).arrowheads({
size: '10px',
fill: true,
@ -2273,6 +2342,9 @@
return;
}
// show overlay for node neighbours
window._onShowNodeNeighboursHeardUsClick(node);
// find all nodes that have us as a neighbour
const neighbourNodeInfos = [];
for(const nodeThatMayHaveHeardUs of nodes){
@ -2329,8 +2401,9 @@
nodeMarker.getLatLng(), // from us
neighbourNodeMarker.getLatLng(), // to neighbour
], {
color: '#2563eb',
opacity: 0.5,
color: getColourForSnr(neighbour.snr),
weight: 5,
opacity: 1,
}).arrowheads({
size: '10px',
fill: true,
@ -2378,6 +2451,7 @@
clearAllNeighbours();
clearAllWaypoints();
clearNodeOutline();
cleanUpNodeNeighbours();
}
// returns true if the element or one of its parents has the class classname
@ -2806,8 +2880,8 @@
// show details button
tooltip += `<br/><br/><button onclick="showNodeDetails(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Full Details</button>`;
tooltip += `<br/><button onclick="showNodeNeighboursThatWeHeard(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Neighbours (We Heard)</button>`;
tooltip += `<br/><button onclick="showNodeNeighboursThatHeardUs(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200">Show Neighbours (Heard Us)</button>`;
tooltip += `<br/><button onclick="showNodeNeighboursThatHeardUs(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200 mb-1">Show Neighbours (Heard Us)</button>`;
tooltip += `<br/><button onclick="showNodeNeighboursThatWeHeard(${node.node_id});" class="border border-gray-300 bg-gray-100 p-1 w-full rounded hover:bg-gray-200">Show Neighbours (We Heard)</button>`;
return tooltip;
@ -2840,6 +2914,10 @@
}
window._onHideNodeNeighboursClick = function() {
cleanUpNodeNeighbours();
};
// parse url params
var queryParams = new URLSearchParams(location.search);
var queryNodeId = queryParams.get('node_id');