open tooltip when zooming into node
This commit is contained in:
@ -1021,6 +1021,13 @@
|
|||||||
|
|
||||||
function goToNode(id){
|
function goToNode(id){
|
||||||
|
|
||||||
|
// find node
|
||||||
|
var node = findNodeById(id);
|
||||||
|
if(!node){
|
||||||
|
alert("Could not find node: " + id);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// find node marker by id
|
// find node marker by id
|
||||||
var nodeMarker = findNodeMarkerById(id);
|
var nodeMarker = findNodeMarkerById(id);
|
||||||
if(!nodeMarker){
|
if(!nodeMarker){
|
||||||
@ -1040,8 +1047,8 @@
|
|||||||
animate: true,
|
animate: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// open tooltip
|
// open tooltip for node
|
||||||
nodeMarker.openTooltip();
|
map.openTooltip(getTooltipContentForNode(node), nodeMarker.getLatLng());
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1146,37 +1153,6 @@
|
|||||||
|
|
||||||
var icon = iconOnline; // todo status
|
var icon = iconOnline; // todo status
|
||||||
|
|
||||||
var tooltip = `<img class="mb-4 w-40 mx-auto" src="/images/devices/${node.hardware_model_name}.png" onerror="this.classList.add('hidden')"/>` +
|
|
||||||
`<b>${node.long_name}</b>` +
|
|
||||||
`<br/>Short Name: ${node.short_name}` +
|
|
||||||
`<br/><br/>Role: ${node.role_name}` +
|
|
||||||
`<br/>Hardware: ${node.hardware_model_name}`;
|
|
||||||
|
|
||||||
if(node.battery_level){
|
|
||||||
if(node.battery_level > 100){
|
|
||||||
tooltip += `<br/>Battery: ${node.battery_level > 100 ? 'Plugged In' : node.battery_level}`;
|
|
||||||
} else {
|
|
||||||
tooltip += `<br/>Battery: ${node.battery_level}%`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(node.voltage){
|
|
||||||
tooltip += `<br/>Voltage: ${Number(node.voltage).toFixed(2)}V`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(node.channel_utilization){
|
|
||||||
tooltip += `<br/>Ch Util: ${Number(node.channel_utilization).toFixed(2)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(node.air_util_tx){
|
|
||||||
tooltip += `<br/>Air Util: ${Number(node.air_util_tx).toFixed(2)}%`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// bottom info
|
|
||||||
tooltip += `<br/><br/>ID: ${node.node_id}`;
|
|
||||||
tooltip += `<br/>Hex ID: ${node.node_id_hex}`;
|
|
||||||
tooltip += `<br/>Updated: ${moment(new Date(node.updated_at)).fromNow()}`;
|
|
||||||
|
|
||||||
// create node marker
|
// create node marker
|
||||||
var marker = L.marker([node.latitude, node.longitude], {
|
var marker = L.marker([node.latitude, node.longitude], {
|
||||||
icon: icon,
|
icon: icon,
|
||||||
@ -1192,7 +1168,7 @@
|
|||||||
|
|
||||||
// show tooltip on desktop only
|
// show tooltip on desktop only
|
||||||
if(!isMobile()){
|
if(!isMobile()){
|
||||||
marker.bindTooltip(tooltip, {
|
marker.bindTooltip(getTooltipContentForNode(node), {
|
||||||
interactive: true,
|
interactive: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -1323,6 +1299,43 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getTooltipContentForNode(node) {
|
||||||
|
|
||||||
|
var tooltip = `<img class="mb-4 w-40 mx-auto" src="/images/devices/${node.hardware_model_name}.png" onerror="this.classList.add('hidden')"/>` +
|
||||||
|
`<b>${node.long_name}</b>` +
|
||||||
|
`<br/>Short Name: ${node.short_name}` +
|
||||||
|
`<br/><br/>Role: ${node.role_name}` +
|
||||||
|
`<br/>Hardware: ${node.hardware_model_name}`;
|
||||||
|
|
||||||
|
if(node.battery_level){
|
||||||
|
if(node.battery_level > 100){
|
||||||
|
tooltip += `<br/>Battery: ${node.battery_level > 100 ? 'Plugged In' : node.battery_level}`;
|
||||||
|
} else {
|
||||||
|
tooltip += `<br/>Battery: ${node.battery_level}%`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(node.voltage){
|
||||||
|
tooltip += `<br/>Voltage: ${Number(node.voltage).toFixed(2)}V`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(node.channel_utilization){
|
||||||
|
tooltip += `<br/>Ch Util: ${Number(node.channel_utilization).toFixed(2)}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(node.air_util_tx){
|
||||||
|
tooltip += `<br/>Air Util: ${Number(node.air_util_tx).toFixed(2)}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// bottom info
|
||||||
|
tooltip += `<br/><br/>ID: ${node.node_id}`;
|
||||||
|
tooltip += `<br/>Hex ID: ${node.node_id_hex}`;
|
||||||
|
tooltip += `<br/>Updated: ${moment(new Date(node.updated_at)).fromNow()}`;
|
||||||
|
|
||||||
|
return tooltip;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
// parse url params
|
// parse url params
|
||||||
var queryParams = new URLSearchParams(location.search);
|
var queryParams = new URLSearchParams(location.search);
|
||||||
var queryNodeId = queryParams.get('node_id');
|
var queryNodeId = queryParams.get('node_id');
|
||||||
|
Reference in New Issue
Block a user