more code cleanup

This commit is contained in:
2025-04-17 18:45:15 -04:00
parent 600ed7bbb3
commit 63b823a7a1
49 changed files with 3016 additions and 1658 deletions

View File

@ -1,6 +1,9 @@
<script setup>
import { state } from '../../store.js';
import { state } from '@/store.js';
import moment from 'moment';
import { computed } from 'vue';
const mqttMetrics = computed(() => state.selectedNodeMqttMetrics);
</script>
<template>
<div>
@ -8,34 +11,27 @@ import moment from 'moment';
<div class="font-semibold">MQTT</div>
<div class="text-sm text-gray-600">Topics this node sent packets to</div>
</div>
<!-- List of MQTT Topics or No Data -->
<ul role="list" class="flex-1 divide-y divide-gray-200">
<template v-if="state.selectedNodeMqttMetrics.length > 0">
<li v-for="mqttMetric of state.selectedNodeMqttMetrics">
<div class="relative flex items-center">
<div class="block flex-1 px-4 py-2">
<div class="relative flex min-w-0 flex-1 items-center">
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">{{ mqttMetric.mqtt_topic }}</p>
<div class="text-sm text-gray-700">Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}</div>
</div>
<li v-if="mqttMetrics.length === 0">
<div class="block flex-1 px-4 py-2">
<div class="text-sm text-gray-700">No packets seen on MQTT</div>
</div>
</li>
<li v-else v-for="(mqttMetric, index) in mqttMetrics" :key="`${mqttMetric.mqtt_topic}-${index}`">
<div class="relative flex items-center">
<div class="block flex-1 px-4 py-2">
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">{{ mqttMetric.mqtt_topic }}</p>
<div class="text-sm text-gray-700">
Last packet {{ moment(new Date(mqttMetric.last_packet_at)).fromNow() }}
</div>
</div>
</div>
</li>
</template>
<template v-else>
<li>
<div class="relative flex items-center">
<div class="block flex-1 px-4 py-2">
<div class="relative flex min-w-0 flex-1 items-center">
<div class="truncate">
<div class="text-sm text-gray-700">No packets seen on MQTT</div>
</div>
</div>
</div>
</div>
</li>
</template>
</div>
</li>
</ul>
</div>
</template>
</template>