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

MQTT Status based on Last Packet Received

Browse Source
This commit is contained in:
Skordy
2024-08-28 01:10:14 -07:00
parent 0262dd3ee5
commit 7b8c9f82e5
2 changed files with 64 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/public/index.html
View File

@ -1485,6 +1485,30 @@
</select>
</div>
<!-- configNodesDisconnectedAgeInSeconds -->
<div class="p-2">
<label class="block text-sm font-medium text-gray-900">Nodes Disconnected Age</label>
<div class="text-xs text-gray-600 mb-2">Nodes that have not uploaded to MQTT in this time will show as blue icons. Reload to update map.</div>
<select v-model="configNodesDisconnectedAgeInSeconds" 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">
<option :value="null">Don't show as offline</option>
<option value="900">15 minutes</option>
<option value="1800">30 minutes</option>
<option value="2700">45 minutes</option>
<option value="3600">1 hour</option>
<option value="7200">2 hours</option>
<option value="10800">3 hours</option>
<option value="21600">6 hours</option>
<option value="43200">12 hours</option>
<option value="86400">24 hours</option>
<option value="172800">2 days</option>
<option value="259200">3 days</option>
<option value="345600">4 days</option>
<option value="432000">5 days</option>
<option value="518400">6 days</option>
<option value="604800">7 days</option>
</select>
</div>
<!-- configNodesOfflineAgeInSeconds -->
<div class="p-2">
<label class="block text-sm font-medium text-gray-900">Nodes Offline Age</label>
@ -1777,6 +1801,19 @@
}
}
function getConfigNodesDisconnectedAgeInSeconds() {
const value = localStorage.getItem("config_nodes_disconnected_age_in_seconds");
return value != null ? parseInt(value) : null;
}
function setConfigNodesDisconnectedAgeInSeconds(value) {
if(value != null){
return localStorage.setItem("config_nodes_disconnected_age_in_seconds", value);
} else {
return localStorage.removeItem("config_nodes_disconnected_age_in_seconds");
}
}
function getConfigNodesOfflineAgeInSeconds() {
const value = localStorage.getItem("config_nodes_offline_age_in_seconds");
return value != null ? parseInt(value) : null;
@ -1836,6 +1873,7 @@
isShowingAnnouncement: this.shouldShowAnnouncement(),
configNodesMaxAgeInSeconds: window.getConfigNodesMaxAgeInSeconds(),
configNodesDisconnectedAgeInSeconds: window.getConfigNodesDisconnectedAgeInSeconds(),
configNodesOfflineAgeInSeconds: window.getConfigNodesOfflineAgeInSeconds(),
configWaypointsMaxAgeInSeconds: window.getConfigWaypointsMaxAgeInSeconds(),
configNeighboursMaxDistanceInMeters: window.getConfigNeighboursMaxDistanceInMeters(),
@ -2791,6 +2829,9 @@
configNodesMaxAgeInSeconds() {
window.setConfigNodesMaxAgeInSeconds(this.configNodesMaxAgeInSeconds);
},
configNodesDisconnectedAgeInSeconds() {
window.setConfigNodesDisconnectedAgeInSeconds(this.configNodesDisconnectedAgeInSeconds);
},
configNodesOfflineAgeInSeconds() {
window.setConfigNodesOfflineAgeInSeconds(this.configNodesOfflineAgeInSeconds);
},
@ -3500,12 +3541,15 @@
// icon based on mqtt connection state
var icon = iconMqttDisconnected;
if(node.mqtt_connection_state === "online"){
icon = iconMqttConnected;
const now = moment();
const configNodesDisconnectedAgeInSeconds = getConfigNodesDisconnectedAgeInSeconds();
if(configNodesDisconnectedAgeInSeconds){
if(now.diff(moment(node.mqtt_connection_state_updated_at)) > configNodesDisconnectedAgeInSeconds * 1000){
icon = iconMqttConnected;
}
}
// use offline icon for nodes older than configured node offline age
const now = moment();
const configNodesOfflineAgeInSeconds = getConfigNodesOfflineAgeInSeconds();
if(configNodesOfflineAgeInSeconds){
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
@ -3519,7 +3563,7 @@
icon: icon,
tagName: node.node_id,
// we want to show online nodes above offline, but without needing to use separate layer groups
zIndexOffset: node.mqtt_connection_state === "online" ? 1000 : -1000,
zIndexOffset: now.diff(moment(node.mqtt_connection_state_updated_at)) > configNodesDisconnectedAgeInSeconds * 1000 ? 1000 : -1000,
}).on('click', function(event) {
// close tooltip on click to prevent tooltip and popup showing at same time
event.target.closeTooltip();
@ -3937,13 +3981,13 @@
// human friendly connection state
var mqttStatus = "";
var mqttStatusLastUpdated = node.mqtt_connection_state_updated_at ? `(${moment(new Date(node.mqtt_connection_state_updated_at)).fromNow()})` : "";
if(node.mqtt_connection_state === "online"){
mqttStatus = `<span class="text-green-700">Connected</span> ${mqttStatusLastUpdated}`;
} else if(node.mqtt_connection_state === "offline"){
mqttStatus = `<span class="text-blue-700">Disconnected</span> ${mqttStatusLastUpdated}`;
var mqttStatusLastUpdated = node.mqtt_connection_state_updated_at ? `${moment(new Date(node.mqtt_connection_state_updated_at)).fromNow()}` : "";
if(moment().diff(moment(node.mqtt_connection_state_updated_at)) > getConfigNodesDisconnectedAgeInSeconds() * 1000){
mqttStatus = `<span class="text-green-700">Heard</span> ${mqttStatusLastUpdated}`;
} else if(moment().diff(moment(node.mqtt_connection_state_updated_at)) < getConfigNodesDisconnectedAgeInSeconds() * 1000){
mqttStatus = `<span class="text-blue-700">Last Heard</span> ${mqttStatusLastUpdated}`;
} else {
mqttStatus = `<span class="text-blue-700">Disconnected</span>`;
mqttStatus = `<span class="text-blue-700">Not heard</span>`;
}
var loraFrequencyRange = getRegionFrequencyRange(node.region_name);