more code cleanup
This commit is contained in:
907
webapp/frontend/package-lock.json
generated
907
webapp/frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -14,8 +14,11 @@
|
||||
"axios": "^1.8.4",
|
||||
"chart.js": "^4.4.8",
|
||||
"chartjs-adapter-moment": "^1.0.1",
|
||||
"lodash": "^4.17.21",
|
||||
"maplibre-gl": "^5.3.1",
|
||||
"moment": "^2.30.1",
|
||||
"pinia": "^3.0.2",
|
||||
"pinia-plugin-persistedstate": "^4.2.0",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
<script setup>
|
||||
import { state } from '../store.js';
|
||||
import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '../config.js';
|
||||
import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '@/config';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
const ui = useUIStore();
|
||||
|
||||
function dismissAnnouncement() {
|
||||
if (lastSeenAnnouncementId.value != CURRENT_ANNOUNCEMENT_ID) {
|
||||
lastSeenAnnouncementId.value = CURRENT_ANNOUNCEMENT_ID;
|
||||
}
|
||||
state.announcementVisible = false;
|
||||
ui.hideAnnouncement();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<!-- announcement -->
|
||||
<div v-if="state.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
|
||||
<div v-if="ui.announcementVisible" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
|
||||
<!-- info -->
|
||||
<div class="my-auto leading-tight">
|
||||
<div class="font-bold">Service Announcement</div>
|
||||
<div class="text-sm">
|
||||
<span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="state.infoModalVisible = true" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
|
||||
<span>Changes were made to mqtt.meshtastic.org. Uplink your nodes to <button @click="ui.showInfoModal()" type="button" class="link">our MQTT server</button> to continue showing on this map.</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- action buttons -->
|
||||
|
||||
17
webapp/frontend/src/components/Chart/Legend.vue
Normal file
17
webapp/frontend/src/components/Chart/Legend.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
legendData: { // Object with legend labels as keys and Tailwind color classes as values
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<!-- Chart Legend -->
|
||||
<div class="flex justify-center space-x-4 py-2">
|
||||
<div v-for="(colorClass, label) in legendData" :key="label" class="flex items-center space-x-1">
|
||||
<div :class="['w-2 h-2', colorClass]" class="rounded-full"></div>
|
||||
<div class="text-sm text-gray-500">{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
137
webapp/frontend/src/components/Chart/Metrics.vue
Normal file
137
webapp/frontend/src/components/Chart/Metrics.vue
Normal file
@ -0,0 +1,137 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, defineProps, onUnmounted, nextTick } from 'vue';
|
||||
import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
|
||||
import 'chartjs-adapter-moment';
|
||||
import ChartLegend from '@/components/Chart/Legend.vue';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import { getTimeSpans } from '@/utils';
|
||||
// Props for chart data, type, and customization
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
data: Object,
|
||||
chartType: String,
|
||||
timeRangeKey: String,
|
||||
legendData: Object,
|
||||
scales: Array,
|
||||
chartConfig: Object,
|
||||
});
|
||||
|
||||
const configStore = useConfigStore();
|
||||
const chartEl = ref(null);
|
||||
|
||||
async function initChart() {
|
||||
await nextTick();
|
||||
|
||||
// Check if chart element is present
|
||||
if (!chartEl.value) {
|
||||
console.error('initChart(): Canvas element is not available.');
|
||||
return;
|
||||
}
|
||||
|
||||
const labels = props.data?.labels || [];
|
||||
|
||||
// Destroy existing chart to avoid conflicts with new data
|
||||
const existingChart = chartEl.value ? Chart.getChart(chartEl.value) : null;
|
||||
if (existingChart) {
|
||||
existingChart.destroy();
|
||||
}
|
||||
|
||||
// determine if we actually have data
|
||||
const hasEmptyDataset = labels.length === 0;
|
||||
|
||||
// Use an empty dataset for no data
|
||||
const datasets = !hasEmptyDataset
|
||||
? props.data.datasets
|
||||
: [{
|
||||
label: 'No Data',
|
||||
data: [],
|
||||
borderColor: '#e5e7eb',
|
||||
backgroundColor: '#e5e7eb',
|
||||
borderDash: [5, 5], // Dashed border for the placeholder line
|
||||
pointRadius: 0,
|
||||
fill: false,
|
||||
}];
|
||||
|
||||
const chartData = {
|
||||
labels: !hasEmptyDataset ? labels : [new Date()], // Show empty chart with a placeholder date if no data
|
||||
datasets,
|
||||
};
|
||||
|
||||
|
||||
new Chart(chartEl.value, {
|
||||
type: props.chartType,
|
||||
data: chartData,
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: props.chartConfig.scales,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: props.chartConfig.legendDisplay ?? false,
|
||||
labels: {
|
||||
generateLabels: () => Object.keys(props.legendData).map((key) => ({
|
||||
text: key,
|
||||
fillStyle: props.legendData[key],
|
||||
})),
|
||||
},
|
||||
},
|
||||
tooltip: props.chartConfig.tooltipOptions,
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Call initChart again if the props.data changes (e.g., when time range changes)
|
||||
// Watch for changes in the props.data and trigger chart initialization only when the data changes
|
||||
watch(
|
||||
() => props.data,
|
||||
async (newData, oldData) => {
|
||||
if (typeof oldData === 'undefined') return; // first load
|
||||
if (JSON.stringify(newData) !== JSON.stringify(oldData)) {
|
||||
// Now check if chartEl is available
|
||||
if (chartEl.value) {
|
||||
await initChart(); // Initialize the chart after the DOM update
|
||||
} else {
|
||||
console.error('watch(): Canvas element is not available.');
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
onMounted(async () => {
|
||||
Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement);
|
||||
// Now check if chartEl is available
|
||||
if (chartEl.value) {
|
||||
await initChart(); // Initialize the chart after the DOM update
|
||||
} else {
|
||||
console.error('onMounted(): Canvas element is not available.');
|
||||
}
|
||||
})
|
||||
onUnmounted(() => {
|
||||
const existingChart = chartEl.value ? Chart.getChart(chartEl.value) : null;
|
||||
if (existingChart) existingChart.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">{{ props.title }}</div>
|
||||
<div class="ml-auto">
|
||||
<select v-model="configStore[props.timeRangeKey]" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
|
||||
<option v-for="(range, index) in getTimeSpans()" :key="index" :value="index">{{ range.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<li>
|
||||
<div class="px-4 py-2">
|
||||
<div class="w-full min-h-[150px]">
|
||||
<canvas ref="chartEl" class="h-[150px]"></canvas>
|
||||
<ChartLegend :legendData="legendData" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -0,0 +1,25 @@
|
||||
|
||||
<script setup>
|
||||
import { selectedNodeLatestPowerMetric } from '@/store.js';
|
||||
const props = defineProps({
|
||||
channel: Number, // Channel number (1, 2, or 3)
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Channel {{ channel }}</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="selectedNodeLatestPowerMetric">
|
||||
<span v-if="selectedNodeLatestPowerMetric[`ch${channel}_voltage`]" >
|
||||
{{ Number(selectedNodeLatestPowerMetric[`ch${channel}_voltage`]).toFixed(2) }}V
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
<span v-if="selectedNodeLatestPowerMetric[`ch${channel}_current`]">
|
||||
/ {{ Number(selectedNodeLatestPowerMetric[`ch${channel}_current`]).toFixed(2) }}mA
|
||||
</span>
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
27
webapp/frontend/src/components/CloseActionButton.vue
Normal file
27
webapp/frontend/src/components/CloseActionButton.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
// Emits a click event for parent to handle
|
||||
defineEmits(['click']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
@click="$emit('click')"
|
||||
class="p-2 rounded-full bg-gray-100 hover:bg-gray-200"
|
||||
aria-label="Close"
|
||||
>
|
||||
<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" />
|
||||
<path d="M18 6L6 18" />
|
||||
<path d="M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</template>
|
||||
@ -1,16 +1,19 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { state } from '../store.js';
|
||||
import { buildPath } from '../utils.js';
|
||||
import { buildPath } from '@/utils';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
const ui = useUIStore();
|
||||
const hardwareModelStats = ref([]);
|
||||
onMounted(() => {
|
||||
axios.get(buildPath('/api/v1/stats/hardware-models')).then((response) => {
|
||||
hardwareModelStats.value = response.data.hardware_model_stats;
|
||||
}).catch((error) => {
|
||||
// do nothing
|
||||
});
|
||||
});
|
||||
async function loadHardwareStats() {
|
||||
try {
|
||||
const { data } = await axios.get(buildPath('/api/v1/stats/hardware-models'));
|
||||
hardwareModelStats.value = data.hardware_model_stats;
|
||||
} catch (error) {
|
||||
console.warn('Failed to fetch hardware model stats:', error);
|
||||
}
|
||||
}
|
||||
onMounted(loadHardwareStats);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -24,7 +27,7 @@ onMounted(() => {
|
||||
leave-active-class="transition-opacity duration-300 ease-linear"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0">
|
||||
<div v-show="state.hardwareStatsVisible" @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" class="fixed inset-0 bg-gray-900/75"></div>
|
||||
<div v-show="ui.hardwareStatsVisible" @click="ui.toggleHardwareStats" class="fixed inset-0 bg-gray-900/75"></div>
|
||||
</transition>
|
||||
|
||||
<!-- sidebar -->
|
||||
@ -35,7 +38,7 @@ onMounted(() => {
|
||||
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="state.hardwareStatsVisible" class="fixed top-0 left-0 bottom-0">
|
||||
<div v-show="ui.hardwareStatsVisible" class="fixed top-0 left-0 bottom-0">
|
||||
<div class="w-screen h-full max-w-md overflow-hidden">
|
||||
<div class="flex h-full flex-col bg-white shadow-xl">
|
||||
|
||||
@ -47,7 +50,7 @@ onMounted(() => {
|
||||
<h3 class="text-sm">Ordered by most popular</h3>
|
||||
</div>
|
||||
<div class="my-auto ml-3 flex h-7 items-center">
|
||||
<a href="javascript:void(0)" class="rounded-full" @click="state.hardwareStatsVisible = false">
|
||||
<a href="javascript:void(0)" class="rounded-full" @click="ui.hideHardwareStats">
|
||||
<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>
|
||||
@ -62,13 +65,13 @@ onMounted(() => {
|
||||
|
||||
<!-- list of hardware models -->
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200 overflow-y-auto">
|
||||
<li v-for="hardwareModel of hardwareModelStats">
|
||||
<li v-for="hardwareModel in hardwareModelStats" :key="hardwareModel.hardware_model_name">
|
||||
<div class="group relative flex items-center">
|
||||
<a href="#" class="block flex-1 px-4 py-2">
|
||||
<div class="absolute inset-0 group-hover:bg-gray-100" aria-hidden="true"></div>
|
||||
<div class="relative flex min-w-0 flex-1 items-center">
|
||||
<span class="relative inline-block flex-shrink-0 mr-4">
|
||||
<img class="h-20 w-20 rounded-sm object-contain" :src="`/images/devices/${hardwareModel.hardware_model_name}.png`" alt="" onerror="if(this.src != '/images/no_image.png') this.src = '/images/no_image.png';">
|
||||
<img class="h-20 w-20 rounded-sm object-contain" :src="`/images/devices/${hardwareModel.hardware_model_name}.png`" alt="" @error="(e) => e.target.src = '/images/no_image.png'">
|
||||
</span>
|
||||
<div class="truncate">
|
||||
<p class="truncate text-sm font-medium text-gray-900">{{ hardwareModel.hardware_model_name }}</p>
|
||||
|
||||
@ -1,141 +1,109 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
import { useSearchedNodes } from '@/composables/useSearchedNodes';
|
||||
import ActionButton from '@/components/Header/ActionButton.vue';
|
||||
import MobileCloseIcon from '@/icons/MobileCloseIcon.Vue';
|
||||
|
||||
const emit = defineEmits(['reload', 'randomNode', 'searchClick']);
|
||||
import { ref } from 'vue';
|
||||
import { state, searchedNodes } from '../store.js';
|
||||
import { getNodeColor, getNodeTextColor } from '../utils.js';
|
||||
|
||||
const ui = useUIStore();
|
||||
const mapData = useMapStore();
|
||||
const { searchedNodes } = useSearchedNodes();
|
||||
|
||||
const search = computed({
|
||||
get: () => ui.searchText,
|
||||
set: val => ui.search(val),
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex bg-white p-2 border-gray-300 border-b h-16">
|
||||
<div class="flex h-16 items-center bg-white p-2 border-b border-gray-300">
|
||||
|
||||
<!-- close mobile search button -->
|
||||
<div v-if="state.mobileSearchVisible" class="my-auto">
|
||||
<a @click="state.mobileSearchVisible = false" href="javascript:void(0)" class="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="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- icon -->
|
||||
<div v-if="!state.mobileSearchVisible" class="hidden sm:block my-auto mr-3">
|
||||
<img class="w-10 h-10 rounded" src="/images/icon.png"/>
|
||||
</div>
|
||||
|
||||
<!-- app info -->
|
||||
<div v-if="!state.mobileSearchVisible" class="my-auto leading-tight">
|
||||
<div class="font-bold">CT Mesh Map</div>
|
||||
<div class="text-sm">
|
||||
Created by <a class="link" target="_blank" href="https://liamcottle.com">Liam Cottle</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- search bar -->
|
||||
<div class="mx-3 flex-1 relative" :class="{ 'hidden lg:block': !state.mobileSearchVisible }">
|
||||
<input v-model="state.searchText" type="text" 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" :placeholder="`Search ${state.nodes.length} nodes...`">
|
||||
<div v-if="state.searchText !== ''" class="absolute z-search bg-white w-full border border-gray-200 rounded-lg shadow-md mt-1 overflow-y-scroll max-h-80 divide-y divide-gray-200">
|
||||
|
||||
<template v-if="searchedNodes.length > 0">
|
||||
<div @click="$emit('searchClick', node)" class="flex space-x-2 p-2 hover:bg-gray-100 cursor-pointer" v-for="node of searchedNodes">
|
||||
<div>
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(node.node_id)}" :class="[ `text-[${getNodeTextColor(node.node_id)}]` ]">
|
||||
<div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-gray-900" :class="{ 'text-red-500': node.latitude == null || node.longitude == null }">{{ node.long_name !== '' ? node.long_name : "-" }}</div>
|
||||
<div class="flex space-x-1 text-sm text-gray-700">
|
||||
<div>{{ node.node_id_hex }} / {{ node.node_id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="searchedNodes.length === 500" class="text-gray-500 text-sm px-2 py-1">
|
||||
Only the first 500 results are shown.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="p-2">
|
||||
No results found...
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- header action buttons -->
|
||||
<div v-if="!state.mobileSearchVisible" class="flex my-auto ml-auto mr-0 sm:mr-2 space-x-1 sm:space-x-2">
|
||||
<a @click="state.infoModalVisible = !state.infoModalVisible" 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="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<span class="tooltip-text">About</span>
|
||||
</div>
|
||||
</a>
|
||||
<a @click="state.mobileSearchVisible = true" href="javascript:void(0)" class="tooltip rounded-full block lg:hidden">
|
||||
<div id="search-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">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
|
||||
<path d="M21 21l-6 -6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<span class="tooltip-text">Search</span>
|
||||
</div>
|
||||
</a>
|
||||
<a @click="state.hardwareStatsVisible = !state.hardwareStatsVisible" href="javascript:void(0)" class="tooltip rounded-full hidden sm:block">
|
||||
<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="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<span class="tooltip-text">Devices</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="tooltip rounded-full hidden lg:block" @click="$emit('randomNode')">
|
||||
<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">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M18 4l3 3l-3 3"></path>
|
||||
<path d="M18 20l3 -3l-3 -3"></path>
|
||||
<path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
|
||||
<path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<span class="tooltip-text">Random</span>
|
||||
</div>
|
||||
</a>
|
||||
<a @click="state.settingsVisible = !state.settingsVisible" 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" @click="$emit('reload')">
|
||||
<div id="reload-button" class="bg-gray-100 hover:bg-gray-200 p-2 rounded-full" :class="{'animate-spin': state.loading}">
|
||||
<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="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path>
|
||||
<path d="M20 4v5h-5"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<span class="tooltip-text">Reload</span>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Close button (mobile only) -->
|
||||
<button v-if="ui.mobileSearchVisible" @click="ui.hideMobileSearch" class="p-2 bg-gray-100 hover:bg-gray-200 rounded-full">
|
||||
<MobileCloseIcon />
|
||||
</button>
|
||||
|
||||
<!-- Logo and title (desktop only) -->
|
||||
<div v-if="!ui.mobileSearchVisible" class="hidden sm:flex items-center mr-3 space-x-2">
|
||||
<img class="w-10 h-10 rounded" src="/images/icon.png" />
|
||||
<div>
|
||||
<div class="font-bold">CT Mesh Map</div>
|
||||
<div class="text-sm">
|
||||
Created by <a class="link" href="https://liamcottle.com" target="_blank">Liam Cottle</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<div class="flex-1 mx-3 relative" :class="{ 'hidden lg:block': !ui.mobileSearchVisible }">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="w-full p-2.5 text-sm rounded-lg border border-gray-300 bg-gray-50 focus:ring-blue-500 focus:border-blue-500"
|
||||
:placeholder="`Search ${mapData.nodes.length} nodes...`"
|
||||
/>
|
||||
|
||||
<!-- Search results -->
|
||||
<div
|
||||
v-if="ui.searchText !== ''"
|
||||
class="absolute z-search w-full mt-1 max-h-80 overflow-y-scroll bg-white border border-gray-200 rounded-lg shadow divide-y divide-gray-200"
|
||||
>
|
||||
<template v-if="searchedNodes.length > 0">
|
||||
<div
|
||||
v-for="node in searchedNodes"
|
||||
:key="node.node_id"
|
||||
@click="$emit('searchClick', node)"
|
||||
class="flex p-2 space-x-2 hover:bg-gray-100 cursor-pointer"
|
||||
>
|
||||
<div class="flex items-center justify-center w-12 h-12 rounded-full text-white shadow" :style="{ backgroundColor: node.backgroundColor, color: node.textColor }">
|
||||
<span class="drop-shadow-sm">{{ node.short_name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div :class="['text-gray-900', { 'text-red-500': !node.latitude || !node.longitude }]">
|
||||
{{ node.long_name || '-' }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-700">
|
||||
{{ node.node_id_hex }} / {{ node.node_id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="searchedNodes.length === 500" class="px-2 py-1 text-sm text-gray-500">
|
||||
Only the first 500 results are shown.
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="p-2">No results found...</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div v-if="!ui.mobileSearchVisible" class="flex items-center ml-auto space-x-1 sm:space-x-2">
|
||||
<!-- Info -->
|
||||
<ActionButton @click="ui.toggleInfoModal" icon="info" tooltip="About" />
|
||||
|
||||
<!-- Search (mobile only) -->
|
||||
<ActionButton class="block lg:hidden" @click="ui.showMobileSearch" icon="search" tooltip="Search" />
|
||||
|
||||
<!-- Hardware Stats -->
|
||||
<ActionButton class="hidden sm:block" @click="ui.toggleHardwareStats" icon="device" tooltip="Devices" />
|
||||
|
||||
<!-- Random Node -->
|
||||
<ActionButton class="hidden lg:block" @click="$emit('randomNode')" icon="random" tooltip="Random" />
|
||||
|
||||
<!-- Settings -->
|
||||
<ActionButton @click="ui.toggleSettings" icon="settings" tooltip="Settings" />
|
||||
|
||||
<!-- Reload -->
|
||||
<ActionButton
|
||||
@click="$emit('reload')"
|
||||
icon="reload"
|
||||
:loading="ui.loading"
|
||||
tooltip="Reload"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
36
webapp/frontend/src/components/Header/ActionButton.vue
Normal file
36
webapp/frontend/src/components/Header/ActionButton.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<script setup>
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
const emit = defineEmits(['click']);
|
||||
defineProps({
|
||||
icon: String,
|
||||
tooltip: String,
|
||||
loading: Boolean,
|
||||
})
|
||||
|
||||
const getIcon = (iconName) => {
|
||||
const icons = {
|
||||
info: defineAsyncComponent(() => import('@/icons/InfoIcon.vue')),
|
||||
search: defineAsyncComponent(() => import('@/icons/SearchIcon.vue')),
|
||||
device: defineAsyncComponent(() => import('@/icons/DeviceIcon.vue')),
|
||||
random: defineAsyncComponent(() => import('@/icons/RandomIcon.vue')),
|
||||
settings: defineAsyncComponent(() => import('@/icons/SettingsIcon.vue')),
|
||||
reload: defineAsyncComponent(() => import('@/icons/ReloadIcon.vue')),
|
||||
};
|
||||
|
||||
return icons[iconName] || icons.info;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button class="tooltip rounded-full relative" @click="$emit('click')">
|
||||
<div
|
||||
:class="[
|
||||
'p-2 rounded-full bg-gray-100 hover:bg-gray-200',
|
||||
{ 'animate-spin': loading }
|
||||
]"
|
||||
>
|
||||
<component :is="getIcon(icon)" class="w-6 h-6" />
|
||||
</div>
|
||||
<span v-if="tooltip" class="hidden sm:block tooltip-text">{{ tooltip }}</span>
|
||||
</button>
|
||||
</template>
|
||||
@ -1,12 +1,14 @@
|
||||
<script setup>
|
||||
import { state } from '../store.js';
|
||||
import { hasSeenInfoModal } from '../config.js';
|
||||
import { hasSeenInfoModal } from '@/config';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
|
||||
const ui = useUIStore();
|
||||
|
||||
function dismissInfoModal() {
|
||||
if (hasSeenInfoModal.value === false) {
|
||||
hasSeenInfoModal.value = true;
|
||||
}
|
||||
state.infoModalVisible = false;
|
||||
ui.hideInfoModal();
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
@ -21,7 +23,7 @@ function dismissInfoModal() {
|
||||
leave-active-class="transition-opacity duration-300 ease-linear"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0">
|
||||
<div v-show="state.infoModalVisible" @click="dismissInfoModal" class="fixed inset-0 bg-gray-900/75"></div>
|
||||
<div v-show="ui.infoModalVisible" @click="dismissInfoModal" class="fixed inset-0 bg-gray-900/75"></div>
|
||||
</transition>
|
||||
|
||||
<!-- modal -->
|
||||
@ -32,7 +34,7 @@ function dismissInfoModal() {
|
||||
leave-active-class="transition duration-300 ease-in-out transform"
|
||||
leave-from-class="translate-y-0"
|
||||
leave-to-class="translate-y-full">
|
||||
<div @click="dismissInfoModal" v-show="state.infoModalVisible" class="fixed left-0 right-0 top-0 bottom-0 lg:pointer-events-none">
|
||||
<div @click="dismissInfoModal" v-show="ui.infoModalVisible" class="fixed left-0 right-0 top-0 bottom-0 lg:pointer-events-none">
|
||||
<div class="flex w-full h-full overflow-y-auto p-4">
|
||||
<div @click.stop class="mx-auto my-auto w-full max-w-2xl flex-col bg-white shadow-xl rounded-xl p-2 lg:pointer-events-auto">
|
||||
<div class="relative flex">
|
||||
|
||||
@ -4,20 +4,24 @@ import moment from 'moment';
|
||||
import { Chart } from 'chart.js';
|
||||
import 'chartjs-adapter-moment';
|
||||
import { onMounted, useTemplateRef, ref, watch } from 'vue';
|
||||
import { state } from '../store.js';
|
||||
import { environmentMetricsTimeRange, powerMetricsTimeRange, deviceMetricsTimeRange } from '../config.js';
|
||||
import DeviceMetricsChart from './NodeInfo/DeviceMetricsChart.vue';
|
||||
import PowerMetricsChart from './NodeInfo/PowerMetricsChart.vue';
|
||||
import EnvironmentMetricsChart from './NodeInfo/EnvironmentMetricsChart.vue';
|
||||
import LoraConfig from './NodeInfo/LoraConfig.vue';
|
||||
import NodeDetails from './NodeInfo/NodeDetails.vue';
|
||||
import MqttHistory from './NodeInfo/MqttHistory.vue';
|
||||
import OtherInfo from './NodeInfo/OtherInfo.vue';
|
||||
import Share from './NodeInfo/Share.vue';
|
||||
import Traceroutes from './NodeInfo/Traceroutes.vue';
|
||||
import Position from './NodeInfo/Position.vue';
|
||||
import { getNodeColor, getNodeTextColor, copyShareLinkForNode, getTimeSpan, buildPath } from '../utils.js';
|
||||
import { state } from '@/store';
|
||||
import DeviceMetricsChart from '@/components/NodeInfo/DeviceMetricsChart.vue';
|
||||
import PowerMetricsChart from '@/components/NodeInfo/PowerMetricsChart.vue';
|
||||
import EnvironmentMetricsChart from '@/components/NodeInfo/EnvironmentMetricsChart.vue';
|
||||
import LoraConfig from '@/components/NodeInfo/LoraConfig.vue';
|
||||
import NodeDetails from '@/components/NodeInfo/NodeDetails.vue';
|
||||
import MqttHistory from '@/components/NodeInfo/MqttHistory.vue';
|
||||
import OtherInfo from '@/components/NodeInfo/OtherInfo.vue';
|
||||
import Share from '@/components/NodeInfo/Share.vue';
|
||||
import Traceroutes from '@/components/NodeInfo/Traceroutes.vue';
|
||||
import Position from '@/components/NodeInfo/Position.vue';
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
import { copyShareLinkForNode, getTimeSpan, buildPath } from '@/utils';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
|
||||
const configStore = useConfigStore();
|
||||
const emit = defineEmits(['showPositionHistory']);
|
||||
const mapData = useMapStore();
|
||||
|
||||
function showPositionHistory(id) {
|
||||
emit('showPositionHistory', id);
|
||||
@ -28,11 +32,6 @@ function showTraceRoute(traceroute) {
|
||||
state.selectedTraceRoute = traceroute;
|
||||
}
|
||||
|
||||
// find node marker by id
|
||||
function findNodeMarkerById(id) {
|
||||
return state.nodeMarkers[id] ?? null;
|
||||
}
|
||||
|
||||
function loadNode(nodeId) {
|
||||
loadNodeMqttMetrics(nodeId);
|
||||
loadNodeTraceroutes(nodeId);
|
||||
@ -64,7 +63,7 @@ function loadNodeTraceroutes(nodeId) {
|
||||
}
|
||||
|
||||
function loadNodeDeviceMetrics(nodeId) {
|
||||
const time = getTimeSpan(deviceMetricsTimeRange.value).amount
|
||||
const time = getTimeSpan(configStore.deviceMetricsTimeRange).amount
|
||||
const timeFrom = new Date().getTime() - (time * 1000);
|
||||
axios.get(buildPath(`/api/v1/nodes/${nodeId}/device-metrics`), {
|
||||
params: {
|
||||
@ -79,7 +78,7 @@ function loadNodeDeviceMetrics(nodeId) {
|
||||
}
|
||||
|
||||
function loadNodeEnvironmentMetrics(nodeId) {
|
||||
const time = getTimeSpan(environmentMetricsTimeRange.value).amount
|
||||
const time = getTimeSpan(configStore.environmentMetricsTimeRange).amount
|
||||
const timeFrom = new Date().getTime() - (time * 1000);
|
||||
axios.get(buildPath(`/api/v1/nodes/${nodeId}/environment-metrics`), {
|
||||
params: {
|
||||
@ -94,7 +93,7 @@ function loadNodeEnvironmentMetrics(nodeId) {
|
||||
}
|
||||
|
||||
function loadNodePowerMetrics(nodeId) {
|
||||
const time = getTimeSpan(powerMetricsTimeRange.value).amount
|
||||
const time = getTimeSpan(configStore.powerMetricsTimeRange).amount
|
||||
const timeFrom = new Date().getTime() - (time * 1000);
|
||||
axios.get(buildPath(`/api/v1/nodes/${nodeId}/power-metrics`), {
|
||||
params: {
|
||||
@ -118,25 +117,28 @@ watch(
|
||||
)
|
||||
|
||||
watch(
|
||||
() => deviceMetricsTimeRange.value,
|
||||
() => configStore.deviceMetricsTimeRange,
|
||||
(newValue) => {
|
||||
loadNodeDeviceMetrics(state.selectedNode.node_id)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => powerMetricsTimeRange.value,
|
||||
() => configStore.powerMetricsTimeRange,
|
||||
(newValue) => {
|
||||
loadNodePowerMetrics(state.selectedNode.node_id)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => environmentMetricsTimeRange.value,
|
||||
(newValue) => {
|
||||
loadNodeEnvironmentMetrics(state.selectedNode.node_id)
|
||||
() => configStore.environmentMetricsTimeRange,
|
||||
(newValue) => {
|
||||
if (state.selectedNode?.node_id) {
|
||||
loadNodeEnvironmentMetrics(state.selectedNode.node_id);
|
||||
}
|
||||
)
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="relative z-sidebar" role="dialog" aria-modal="true">
|
||||
@ -168,7 +170,7 @@ watch(
|
||||
<div class="p-2 border-b border-gray-200 shadow-sm">
|
||||
<div class="flex">
|
||||
<div class="my-auto mr-2">
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedNode.node_id)}" :class="[ `text-[${getNodeTextColor(state.selectedNode.node_id)}]` ]">
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: state.selectedNode.backgroundColor, color: state.selectedNode.textColor}">
|
||||
<div class="mx-auto my-auto drop-shadow-sm">{{ state.selectedNode.short_name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -200,7 +202,7 @@ watch(
|
||||
<div class="overflow-y-auto">
|
||||
|
||||
<!-- no position banner -->
|
||||
<div v-if="findNodeMarkerById(state.selectedNode.node_id) == null" class="flex bg-orange-500 text-white p-2">
|
||||
<div v-if="mapData.findNodeMarkerById(state.selectedNode.node_id) == null" class="flex bg-orange-500 text-white p-2">
|
||||
<div class="my-auto mr-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
|
||||
<path fill-rule="evenodd" d="m11.54 22.351.07.04.028.016a.76.76 0 0 0 .723 0l.028-.015.071-.041a16.975 16.975 0 0 0 1.144-.742 19.58 19.58 0 0 0 2.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 0 0-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 0 0 2.682 2.282 16.975 16.975 0 0 0 1.145.742ZM12 13.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
|
||||
|
||||
@ -1,207 +1,137 @@
|
||||
<script setup>
|
||||
const props = defineProps(['node']);
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
|
||||
import 'chartjs-adapter-moment';
|
||||
import { onMounted, useTemplateRef, watch } from 'vue';
|
||||
import { state } from '../../store.js';
|
||||
import { deviceMetricsTimeRange } from '../../config.js';
|
||||
import { formatUptimeSeconds, getTimeSpans } from '../../utils.js';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
const deviceMetricsChartEl = useTemplateRef('device-metrics-chart');
|
||||
|
||||
function initChart() {
|
||||
// destroy existing chart
|
||||
const existingChart = Chart.getChart(deviceMetricsChartEl.value);
|
||||
if (existingChart != null) {
|
||||
existingChart.destroy();
|
||||
}
|
||||
// create chart data
|
||||
const labels = [];
|
||||
const batteryMetrics = [];
|
||||
const channelUtilizationMetrics = [];
|
||||
const airUtilTxMetrics = [];
|
||||
for(const deviceMetric of state.selectedNodeDeviceMetrics) {
|
||||
labels.push(moment(deviceMetric.created_at));
|
||||
batteryMetrics.push(deviceMetric.battery_level);
|
||||
channelUtilizationMetrics.push(deviceMetric.channel_utilization);
|
||||
airUtilTxMetrics.push(deviceMetric.air_util_tx);
|
||||
}
|
||||
// create chart
|
||||
new Chart(deviceMetricsChartEl.value, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Battery Level',
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#3b82f6',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: batteryMetrics,
|
||||
},
|
||||
{
|
||||
label: 'Channel Util',
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: '#22c55e',
|
||||
showLine: false, // no lines between points
|
||||
fill: false,
|
||||
data: channelUtilizationMetrics,
|
||||
},
|
||||
{
|
||||
label: 'Air Util TX',
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: '#f97316',
|
||||
showLine: false, // no lines between points
|
||||
fill: false,
|
||||
data: airUtilTxMetrics,
|
||||
},
|
||||
],
|
||||
import { computed } from 'vue';
|
||||
import { state } from '@/store.js';
|
||||
import MetricsChart from '@/components/Chart/Metrics.vue';
|
||||
|
||||
const chartData = computed(() => {
|
||||
const metrics = state.selectedNodeDeviceMetrics;
|
||||
|
||||
return {
|
||||
labels: metrics.map(m => m.created_at),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Battery Level',
|
||||
data: metrics.map(m => m.battery_level),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#3b82f6',
|
||||
pointStyle: false,
|
||||
fill: false,
|
||||
},
|
||||
{
|
||||
label: 'Channel Util',
|
||||
data: metrics.map(m => m.channel_utilization),
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: '#22c55e',
|
||||
showLine: false,
|
||||
fill: false,
|
||||
},
|
||||
{
|
||||
label: 'Air Util TX',
|
||||
data: metrics.map(m => m.air_util_tx),
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: '#f97316',
|
||||
showLine: false,
|
||||
fill: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
const legendData = {
|
||||
'Battery Level': 'bg-blue-500',
|
||||
'Channel Util': 'bg-green-500',
|
||||
'Air Util TX': 'bg-orange-500',
|
||||
};
|
||||
|
||||
const chartConfig = {
|
||||
legendDisplay: false, // or true if you want Chart.js legend too
|
||||
tooltipOptions: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (item) => `${item.dataset.label}: ${item.formattedValue}%`,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top',
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
displayFormats: {
|
||||
day: 'MMM DD',
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
borderWidth: 2,
|
||||
elements: {
|
||||
point: {
|
||||
radius: 2,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top',
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
displayFormats: {
|
||||
day: 'MMM DD', // Jan 01
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
max: 101, // 101 is "Plugged In", need to include for tooltip to work
|
||||
ticks: {
|
||||
callback: (label) => `${label}%`,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (item) => {
|
||||
return `${item.dataset.label}: ${item.formattedValue}%`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
watch(
|
||||
() => state.selectedNodeDeviceMetrics,
|
||||
(newValue) => {
|
||||
if (newValue !== []) {
|
||||
initChart()
|
||||
}
|
||||
}, {deep: true}
|
||||
)
|
||||
onMounted(() => {
|
||||
Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
|
||||
})
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
max: 101,
|
||||
ticks: {
|
||||
callback: (label) => `${label}%`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- device metrics -->
|
||||
<div>
|
||||
<div class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">Device Metrics</div>
|
||||
<div class="my-auto ml-auto">
|
||||
<select v-model="deviceMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
|
||||
<option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
|
||||
</select>
|
||||
<MetricsChart
|
||||
title="Device Metrics"
|
||||
:data="chartData"
|
||||
chartType="line"
|
||||
timeRangeKey="deviceMetricsTimeRange"
|
||||
:legendData="legendData"
|
||||
:chartConfig="chartConfig"
|
||||
>
|
||||
<!-- Battery Level -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Battery Level</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.battery_level">
|
||||
<span v-if="props.node.battery_level > 100">Plugged In</span>
|
||||
<span v-else>{{ props.node.battery_level }}%</span>
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
</li>
|
||||
|
||||
<!-- device metrics chart -->
|
||||
<li>
|
||||
<div class="px-4 py-2">
|
||||
<div class="w-full">
|
||||
<canvas id="deviceMetricsChart" style="height:150px;" ref="device-metrics-chart"></canvas>
|
||||
<div class="flex">
|
||||
<div class="mx-auto flex space-x-2">
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Battery Level</div>
|
||||
</div>
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Channel Utilization</div>
|
||||
</div>
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Air Util TX</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Voltage -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Voltage</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.voltage">{{ Number(props.node.voltage).toFixed(2) }}V</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- battery level -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Battery Level</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.battery_level">
|
||||
<span v-if="props.node.battery_level > 100">Plugged In</span>
|
||||
<span v-else>{{ props.node.battery_level }}%</span>
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Channel Utilization -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Channel Utilization</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.channel_utilization">{{ Number(props.node.channel_utilization).toFixed(2) }}%</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- voltage -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Voltage</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.voltage">{{ Number(props.node.voltage).toFixed(2) }}V</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Air Util TX -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Air Util Tx</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.air_util_tx">{{ Number(props.node.air_util_tx).toFixed(2) }}%</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- channel utilization -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Channel Utilization</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.channel_utilization">{{ Number(props.node.channel_utilization).toFixed(2) }}%</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- air util tx -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Air Util Tx</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.air_util_tx">{{ Number(props.node.air_util_tx).toFixed(2) }}%</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- air util tx -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Uptime</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.uptime_seconds">{{ formatUptimeSeconds(props.node.uptime_seconds) }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Uptime -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Uptime</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.uptime_seconds">{{ formatUptimeSeconds(props.node.uptime_seconds) }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</MetricsChart>
|
||||
</template>
|
||||
@ -1,202 +1,140 @@
|
||||
<script setup>
|
||||
const props = defineProps(['node']);
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
|
||||
import 'chartjs-adapter-moment';
|
||||
import { onMounted, useTemplateRef, watch } from 'vue';
|
||||
import { state } from '../../store.js';
|
||||
import { environmentMetricsTimeRange } from '../../config.js';
|
||||
import { formatTemperature, getTimeSpans } from '../../utils.js';
|
||||
const environmentMetricsChartEl = useTemplateRef('environment-metrics-chart');
|
||||
|
||||
function initChart() {
|
||||
// destroy existing chart
|
||||
const existingChart = Chart.getChart(environmentMetricsChartEl.value);
|
||||
if (existingChart != null) {
|
||||
existingChart.destroy();
|
||||
}
|
||||
// create chart data
|
||||
const labels = [];
|
||||
const temperatureMetrics = [];
|
||||
const relativeHumidityMetrics = [];
|
||||
const barometricPressureMetrics = [];
|
||||
for(const deviceMetric of state.selectedNodeEnvironmentMetrics){
|
||||
labels.push(moment(deviceMetric.created_at));
|
||||
temperatureMetrics.push(deviceMetric.temperature);
|
||||
relativeHumidityMetrics.push(deviceMetric.relative_humidity);
|
||||
barometricPressureMetrics.push(deviceMetric.barometric_pressure);
|
||||
}
|
||||
// create chart
|
||||
new Chart(environmentMetricsChartEl.value, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperature',
|
||||
suffix: 'ºC',
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#3b82f6',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: temperatureMetrics,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
{
|
||||
label: 'Humidity',
|
||||
suffix: '%',
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: '#22c55e',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: relativeHumidityMetrics,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
{
|
||||
label: 'Pressure',
|
||||
suffix: 'hPa',
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: '#f97316',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: barometricPressureMetrics,
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
],
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import { state } from '@/store.js';
|
||||
import { formatTemperature } from '@/utils.js';
|
||||
import MetricsChart from '@/components/Chart/Metrics.vue';
|
||||
|
||||
const configStore = useConfigStore();
|
||||
|
||||
// Chart data prep
|
||||
const labels = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.created_at));
|
||||
const temperatureMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.temperature));
|
||||
const relativeHumidityMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.relative_humidity));
|
||||
const barometricPressureMetrics = computed(() => state.selectedNodeEnvironmentMetrics.map(m => m.barometric_pressure));
|
||||
|
||||
const chartData = computed(() => ({
|
||||
labels: labels.value,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Temperature',
|
||||
suffix: 'ºC',
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#3b82f6',
|
||||
pointStyle: false,
|
||||
fill: false,
|
||||
data: temperatureMetrics.value,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
{
|
||||
label: 'Humidity',
|
||||
suffix: '%',
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: '#22c55e',
|
||||
pointStyle: false,
|
||||
fill: false,
|
||||
data: relativeHumidityMetrics.value,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
{
|
||||
label: 'Pressure',
|
||||
suffix: 'hPa',
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: '#f97316',
|
||||
pointStyle: false,
|
||||
fill: false,
|
||||
data: barometricPressureMetrics.value,
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
],
|
||||
}));
|
||||
|
||||
const chartConfig = {
|
||||
legendDisplay: false,
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top',
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
displayFormats: {
|
||||
day: 'MMM DD',
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
borderWidth: 2,
|
||||
spanGaps: 1000 * 60 * 60 * 3, // only show lines between metrics with a 3 hour or less gap
|
||||
elements: {
|
||||
point: {
|
||||
radius: 2,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top',
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
displayFormats: {
|
||||
day: 'MMM DD', // Jan 01
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: -20,
|
||||
max: 100,
|
||||
},
|
||||
y1: {
|
||||
min: 800,
|
||||
max: 1100,
|
||||
ticks: {
|
||||
stepSize: 10,
|
||||
callback: (label) => `${label} hPa`,
|
||||
},
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (item) => {
|
||||
return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: -20,
|
||||
max: 100,
|
||||
},
|
||||
y1: {
|
||||
min: 800,
|
||||
max: 1100,
|
||||
ticks: {
|
||||
stepSize: 10,
|
||||
callback: (label) => `${label} hPa`,
|
||||
},
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltipOptions: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (item) => {
|
||||
return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
watch(
|
||||
() => state.selectedNodeEnvironmentMetrics,
|
||||
(newValue) => {
|
||||
if (newValue !== []) {
|
||||
initChart()
|
||||
}
|
||||
}, {deep: true}
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
|
||||
})
|
||||
const legendData = {
|
||||
Temperature: 'bg-blue-500',
|
||||
Humidity: 'bg-green-500',
|
||||
Pressure: 'bg-orange-500',
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">Environment Metrics</div>
|
||||
<div class="my-auto ml-auto">
|
||||
<select v-model="environmentMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
|
||||
<option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<MetricsChart
|
||||
title="Environment Metrics"
|
||||
:data="chartData"
|
||||
chartType="line"
|
||||
timeRangeKey="environmentMetricsTimeRange"
|
||||
:legendData="legendData"
|
||||
:chartConfig="chartConfig"
|
||||
>
|
||||
<!-- Chart Details (below the chart) -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Temperature</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="state.selectedNode?.temperature">{{ formatTemperature(state.selectedNode.temperature) }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
|
||||
<!-- environment metrics chart -->
|
||||
<li>
|
||||
<div class="px-4 py-2">
|
||||
<div class="w-full">
|
||||
<canvas id="environmentMetricsChart" style="height:150px;" ref="environment-metrics-chart"></canvas>
|
||||
<div class="flex">
|
||||
<div class="mx-auto flex space-x-2">
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Temperature</div>
|
||||
</div>
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Humidity</div>
|
||||
</div>
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Pressure</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- temperature -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Temperature</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.temperature">{{ formatTemperature(props.node.temperature) }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- relative humidity -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Relative Humidity</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.relative_humidity">{{ Number(props.node.relative_humidity).toFixed(0) }}%</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- barometric pressure -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Barometric Pressure</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.barometric_pressure">{{ Number(props.node.barometric_pressure).toFixed(1) }}hPa</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Relative Humidity</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="state.selectedNode?.relative_humidity">
|
||||
{{ Number(state.selectedNode.relative_humidity).toFixed(0) }}%
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Barometric Pressure</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="state.selectedNode?.barometric_pressure">
|
||||
{{ Number(state.selectedNode.barometric_pressure).toFixed(1) }} hPa
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</MetricsChart>
|
||||
</template>
|
||||
@ -1,40 +1,40 @@
|
||||
<script setup>
|
||||
import { getRegionFrequencyRange } from '../../utils.js';
|
||||
const props = defineProps(['node']);
|
||||
import { getRegionFrequencyRange } from '@/utils.js';
|
||||
const props = defineProps({
|
||||
node: Object,
|
||||
});
|
||||
|
||||
// Define a structure for the LoRa config fields
|
||||
const loraConfigFields = [
|
||||
{
|
||||
label: 'Region',
|
||||
key: 'region_name',
|
||||
value: (node) => node.region_name ? `${node.region_name} (${getRegionFrequencyRange(node.region_name)})` : '???',
|
||||
},
|
||||
{
|
||||
label: 'Modem Preset',
|
||||
key: 'modem_preset_name',
|
||||
value: (node) => node.modem_preset_name || '???',
|
||||
},
|
||||
{
|
||||
label: 'Has Default Channel',
|
||||
key: 'has_default_channel',
|
||||
value: (node) => node.has_default_channel != null ? (node.has_default_channel ? 'Yes' : 'No') : '???',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- lora config -->
|
||||
<div>
|
||||
<div class="bg-gray-200 p-2 font-semibold">LoRa Config</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
|
||||
<!-- region -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Region</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.region_name">{{ props.node.region_name }} ({{ getRegionFrequencyRange(props.node.region_name) }})</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- modem preset -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Modem Preset</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.modem_preset_name">{{ props.node.modem_preset_name }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- has default channel -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Has Default Channel</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.has_default_channel != null">{{ props.node.has_default_channel ? "Yes" : "No" }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="bg-gray-200 p-2 font-semibold">LoRa Config</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<!-- Iterate through loraConfigFields to display each item -->
|
||||
<li v-for="(field, index) in loraConfigFields" :key="index" class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
{{ field.value(props.node) }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -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>
|
||||
@ -1,45 +1,32 @@
|
||||
|
||||
<script setup>
|
||||
const props = defineProps(['node']);
|
||||
const props = defineProps({
|
||||
node: Object,
|
||||
});
|
||||
const details = [
|
||||
{ label: 'ID', value: 'node_id' },
|
||||
{ label: 'Hex ID', value: 'node_id_hex' },
|
||||
{ label: 'Role', value: 'role_name' },
|
||||
{ label: 'Hardware', value: 'hardware_model_name' },
|
||||
{ label: 'Firmware', value: 'firmware_version' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-gray-200 p-2 font-semibold">Details</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
|
||||
<!-- id -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">ID</div>
|
||||
<div class="ml-auto text-sm text-gray-700">{{ props.node.node_id }}</div>
|
||||
</li>
|
||||
|
||||
<!-- hex id -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Hex ID</div>
|
||||
<div class="ml-auto text-sm text-gray-700">{{ props.node.node_id_hex }}</div>
|
||||
</li>
|
||||
|
||||
<!-- role -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Role</div>
|
||||
<div class="ml-auto text-sm text-gray-700">{{ props.node.role_name }}</div>
|
||||
</li>
|
||||
|
||||
<!-- hardware -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Hardware</div>
|
||||
<div class="ml-auto text-sm text-gray-700">{{ props.node.hardware_model_name }}</div>
|
||||
</li>
|
||||
|
||||
<!-- firmware version -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Firmware</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.firmware_version">{{ props.node.firmware_version }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="bg-gray-200 p-2 font-semibold">Details</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<!-- Iterate through the details array to display each item -->
|
||||
<li v-for="(detail, index) in details" :key="index" class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">{{ detail.label }}</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<!-- Check for firmware version as special case -->
|
||||
<span v-if="detail.value === 'firmware_version'">
|
||||
{{ props.node[detail.value] || '???' }}
|
||||
</span>
|
||||
<!-- For other fields, use the node property directly -->
|
||||
<span v-else>{{ props.node[detail.value] }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,40 +1,45 @@
|
||||
<script setup>
|
||||
const props = defineProps(['node']);
|
||||
import moment from 'moment';
|
||||
const props = defineProps({
|
||||
node: Object,
|
||||
});
|
||||
|
||||
// Define structure for 'Other' fields
|
||||
const otherFields = [
|
||||
{
|
||||
label: 'First Seen',
|
||||
key: 'created_at',
|
||||
value: (node) => moment(new Date(node.created_at)).fromNow(),
|
||||
},
|
||||
{
|
||||
label: 'Last Seen',
|
||||
key: 'updated_at',
|
||||
value: (node) => moment(new Date(node.updated_at)).fromNow(),
|
||||
},
|
||||
{
|
||||
label: 'Neighbours Updated',
|
||||
key: 'neighbours_updated_at',
|
||||
value: (node) => node.neighbours_updated_at ? moment(new Date(node.neighbours_updated_at)).fromNow() : '???',
|
||||
},
|
||||
{
|
||||
label: 'Position Updated',
|
||||
key: 'position_updated_at',
|
||||
value: (node) => node.position_updated_at ? moment(new Date(node.position_updated_at)).fromNow() : '???',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="bg-gray-200 p-2 font-semibold">Other</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<!-- first seen -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">First Seen</div>
|
||||
<div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.created_at)).fromNow() }}</div>
|
||||
</li>
|
||||
|
||||
<!-- last seen -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Last Seen</div>
|
||||
<div class="ml-auto text-sm text-gray-700">{{ moment(new Date(props.node.updated_at)).fromNow() }}</div>
|
||||
</li>
|
||||
|
||||
<!-- neighbours updated -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Neighbours Updated</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.neighbours_updated_at">{{ moment(new Date(props.node.neighbours_updated_at)).fromNow() }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- position updated -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Position Updated</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.position_updated_at">{{ moment(new Date(props.node.position_updated_at)).fromNow() }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="bg-gray-200 p-2 font-semibold">Other</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<!-- Iterate through otherFields to display each item -->
|
||||
<li v-for="(field, index) in otherFields" :key="index" class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
{{ field.value(props.node) }}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,34 +1,43 @@
|
||||
<script setup>
|
||||
const props = defineProps(['node']);
|
||||
const props = defineProps({
|
||||
node: Object,
|
||||
});
|
||||
const emit = defineEmits(['showPositionHistory']);
|
||||
|
||||
const positionFields = [
|
||||
{
|
||||
label: 'Lat/Long',
|
||||
key: ['latitude', 'longitude'],
|
||||
value: (node) => node.latitude && node.longitude ? `${node.latitude}, ${node.longitude}` : '???',
|
||||
},
|
||||
{
|
||||
label: 'Altitude',
|
||||
key: 'altitude',
|
||||
value: (node) => node.altitude ? `${node.altitude}m` : '???',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div @click.stop class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">Position</div>
|
||||
<div class="ml-auto">
|
||||
<button @click="$emit('showPositionHistory', props.node.node_id)" type="button" class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
|
||||
Show History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<!-- position -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Lat/Long</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.latitude && props.node.longitude">{{ props.node.latitude }}, {{ props.node.longitude }}</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
<!-- altitude -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Altitude</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="props.node.altitude">{{ props.node.altitude }}m</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<div @click.stop class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">Position</div>
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
@click="$emit('showPositionHistory', props.node.node_id)"
|
||||
type="button"
|
||||
class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
|
||||
>
|
||||
Show History
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<li v-for="(field, index) in positionFields" :key="index" class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">{{ field.label }}</div>
|
||||
<div class="ml-auto text-sm text-gray-700">{{ field.value(props.node) }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,251 +1,114 @@
|
||||
<script setup>
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import { Chart, TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
|
||||
import 'chartjs-adapter-moment';
|
||||
import { onMounted, useTemplateRef, watch } from 'vue';
|
||||
import { state, selectedNodeLatestPowerMetric } from '../../store.js';
|
||||
import { powerMetricsTimeRange } from '../../config.js';
|
||||
import { getTimeSpans } from '../../utils.js';
|
||||
const powerMetricsChartEl = useTemplateRef('power-metrics-chart');
|
||||
import { computed } from 'vue';
|
||||
import { state, selectedNodeLatestPowerMetric } from '@/store.js';
|
||||
import MetricsChart from '@/components/Chart/Metrics.vue';
|
||||
import ChannelData from '@/components/Chart/PowerMetrics/ChannelData.vue';
|
||||
|
||||
function initChart() {
|
||||
// destroy existing chart
|
||||
const existingChart = Chart.getChart(powerMetricsChartEl.value);
|
||||
if (existingChart != null) {
|
||||
existingChart.destroy();
|
||||
}
|
||||
// create chart data
|
||||
const labels = [];
|
||||
const channel1VoltageReadings = [];
|
||||
const channel2VoltageReadings = [];
|
||||
const channel3VoltageReadings = [];
|
||||
const channel1CurrentReadings = [];
|
||||
const channel2CurrentReadings = [];
|
||||
const channel3CurrentReadings = [];
|
||||
for(const powerMetric of state.selectedNodePowerMetrics) {
|
||||
labels.push(moment(powerMetric.created_at));
|
||||
channel1VoltageReadings.push(powerMetric.ch1_voltage);
|
||||
channel2VoltageReadings.push(powerMetric.ch2_voltage);
|
||||
channel3VoltageReadings.push(powerMetric.ch3_voltage);
|
||||
channel1CurrentReadings.push(powerMetric.ch1_current);
|
||||
channel2CurrentReadings.push(powerMetric.ch2_current);
|
||||
channel3CurrentReadings.push(powerMetric.ch3_current);
|
||||
}
|
||||
// create chart
|
||||
new Chart(powerMetricsChartEl.value, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Ch1 Voltage',
|
||||
suffix: "V",
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: '#3b82f6',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: channel1VoltageReadings,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
{
|
||||
label: 'Ch2 Voltage',
|
||||
suffix: "V",
|
||||
borderColor: '#22c55e',
|
||||
backgroundColor: '#22c55e',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: channel2VoltageReadings,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
{
|
||||
label: 'Ch3 Voltage',
|
||||
suffix: "V",
|
||||
borderColor: '#f97316',
|
||||
backgroundColor: '#f97316',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: channel3VoltageReadings,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
{
|
||||
label: 'Ch1 Current',
|
||||
suffix: "mA",
|
||||
borderColor: '#93c5fd',
|
||||
backgroundColor: '#93c5fd',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: channel1CurrentReadings,
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
{
|
||||
label: 'Ch2 Current',
|
||||
suffix: "mA",
|
||||
borderColor: '#86efac',
|
||||
backgroundColor: '#86efac',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: channel2CurrentReadings,
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
{
|
||||
label: 'Ch3 Current',
|
||||
suffix: "mA",
|
||||
borderColor: '#fdba74',
|
||||
backgroundColor: '#fdba74',
|
||||
pointStyle: false, // no points
|
||||
fill: false,
|
||||
data: channel3CurrentReadings,
|
||||
yAxisID: 'y1',
|
||||
},
|
||||
],
|
||||
const legendData = {
|
||||
'Channel 1': 'bg-blue-500',
|
||||
'Channel 2': 'bg-green-500',
|
||||
'Channel 3': 'bg-orange-500',
|
||||
};
|
||||
|
||||
// Computed dataset for the chart container
|
||||
const chartData = computed(() => {
|
||||
const metrics = state.selectedNodePowerMetrics;
|
||||
const labels = metrics.map(m => m.created_at);
|
||||
|
||||
const colors = ['#3b82f6', '#22c55e', '#f97316'];
|
||||
const currentColors = ['#93c5fd', '#86efac', '#fdba74'];
|
||||
|
||||
const voltage = [[], [], []];
|
||||
const current = [[], [], []];
|
||||
|
||||
for (const m of metrics) {
|
||||
voltage[0].push(m.ch1_voltage);
|
||||
voltage[1].push(m.ch2_voltage);
|
||||
voltage[2].push(m.ch3_voltage);
|
||||
current[0].push(m.ch1_current);
|
||||
current[1].push(m.ch2_current);
|
||||
current[2].push(m.ch3_current);
|
||||
}
|
||||
|
||||
return {
|
||||
labels,
|
||||
datasets: [
|
||||
...voltage.map((data, i) => ({
|
||||
label: `Ch${i + 1} Voltage`,
|
||||
suffix: 'V',
|
||||
data,
|
||||
borderColor: colors[i],
|
||||
backgroundColor: colors[i],
|
||||
pointStyle: false,
|
||||
fill: false,
|
||||
yAxisID: 'y',
|
||||
})),
|
||||
...current.map((data, i) => ({
|
||||
label: `Ch${i + 1} Current`,
|
||||
suffix: 'mA',
|
||||
data,
|
||||
borderColor: currentColors[i],
|
||||
backgroundColor: currentColors[i],
|
||||
pointStyle: false,
|
||||
fill: false,
|
||||
yAxisID: 'y1',
|
||||
})),
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
// Chart config for axes, tooltips, etc.
|
||||
const chartConfig = {
|
||||
legendDisplay: false,
|
||||
tooltipOptions: {
|
||||
mode: 'index',
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (item) => `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix || ''}`,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top',
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
displayFormats: {
|
||||
day: 'MMM DD',
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
borderWidth: 2,
|
||||
spanGaps: 1000 * 60 * 60 * 3, // only show lines between metrics with a 3 hour or less gap
|
||||
elements: {
|
||||
point: {
|
||||
radius: 2,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
position: 'top',
|
||||
type: 'time',
|
||||
time: {
|
||||
unit: 'day',
|
||||
displayFormats: {
|
||||
day: 'MMM DD', // Jan 01
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
max: 30,
|
||||
ticks: {
|
||||
callback: (label) => `${label}V`,
|
||||
},
|
||||
},
|
||||
y1: {
|
||||
min: -500,
|
||||
max: 500,
|
||||
ticks: {
|
||||
stepSize: 50,
|
||||
callback: (label) => `${label}mA`,
|
||||
},
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false, // only want the grid lines for one axis to show up
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: (item) => {
|
||||
return `${item.dataset.label}: ${item.formattedValue}${item.dataset.suffix}`;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
watch(
|
||||
() => state.selectedNodePowerMetrics,
|
||||
(newValue) => {
|
||||
if (newValue !== []) {
|
||||
initChart()
|
||||
}
|
||||
}, {deep: true}
|
||||
)
|
||||
onMounted(() => {
|
||||
Chart.register(TimeScale, LinearScale, LineController, Tooltip, Legend, PointElement, LineElement)
|
||||
})
|
||||
},
|
||||
},
|
||||
y: {
|
||||
min: 0,
|
||||
max: 30,
|
||||
ticks: {
|
||||
callback: (label) => `${label}V`,
|
||||
},
|
||||
},
|
||||
y1: {
|
||||
min: -500,
|
||||
max: 500,
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawOnChartArea: false,
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 50,
|
||||
callback: (label) => `${label}mA`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<!-- power metrics -->
|
||||
<div>
|
||||
<div class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">Power Metrics</div>
|
||||
<div class="my-auto ml-auto">
|
||||
<select v-model="powerMetricsTimeRange" class="block w-full rounded-md border-0 py-0.5 pl-2 pr-8 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-blue-500 sm:text-sm sm:leading-6">
|
||||
<option v-for="(range, index) in getTimeSpans()" :value="index">{{ range.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
|
||||
<!-- power metrics chart -->
|
||||
<li>
|
||||
<div class="px-4 py-2">
|
||||
<div class="w-full">
|
||||
<canvas id="powerMetricsChart" style="height:150px;" ref="power-metrics-chart"></canvas>
|
||||
<div class="flex">
|
||||
<div class="mx-auto flex space-x-2">
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Channel 1</div>
|
||||
</div>
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-green-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Channel 2</div>
|
||||
</div>
|
||||
<div class="flex mx-auto">
|
||||
<div class="my-auto w-2 h-2 bg-orange-500 rounded-full"></div>
|
||||
<div class="my-auto ml-1 text-sm text-gray-500">Channel 3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- channel 1 -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Channel 1</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="selectedNodeLatestPowerMetric">
|
||||
<span v-if="selectedNodeLatestPowerMetric?.ch1_voltage">{{ Number(selectedNodeLatestPowerMetric.ch1_voltage).toFixed(2) }}V</span>
|
||||
<span v-else>???</span>
|
||||
<span v-if="selectedNodeLatestPowerMetric?.ch1_current"> / {{ Number(selectedNodeLatestPowerMetric.ch1_current).toFixed(2) }}mA</span>
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- channel 2 -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Channel 2</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="selectedNodeLatestPowerMetric">
|
||||
<span v-if="selectedNodeLatestPowerMetric?.ch2_voltage">{{ Number(selectedNodeLatestPowerMetric.ch2_voltage).toFixed(2) }}V</span>
|
||||
<span v-else>???</span>
|
||||
<span v-if="selectedNodeLatestPowerMetric?.ch2_current"> / {{ Number(selectedNodeLatestPowerMetric.ch2_current).toFixed(2) }}mA</span>
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- channel 3 -->
|
||||
<li class="flex p-3">
|
||||
<div class="text-sm font-medium text-gray-900">Channel 3</div>
|
||||
<div class="ml-auto text-sm text-gray-700">
|
||||
<span v-if="selectedNodeLatestPowerMetric">
|
||||
<span v-if="selectedNodeLatestPowerMetric?.ch3_voltage">{{ Number(selectedNodeLatestPowerMetric.ch3_voltage).toFixed(2) }}V</span>
|
||||
<span v-else>???</span>
|
||||
<span v-if="selectedNodeLatestPowerMetric?.ch3_current"> / {{ Number(selectedNodeLatestPowerMetric.ch3_current).toFixed(2) }}mA</span>
|
||||
</span>
|
||||
<span v-else>???</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<MetricsChart
|
||||
title="Power Metrics"
|
||||
:data="chartData"
|
||||
chartType="line"
|
||||
timeRangeKey="powerMetricsTimeRange"
|
||||
:legendData="legendData"
|
||||
:chartConfig="chartConfig"
|
||||
>
|
||||
<ChannelData v-for="i in [1, 2, 3]" :key="i" :channel="i" />
|
||||
</MetricsChart>
|
||||
</template>
|
||||
@ -1,27 +1,35 @@
|
||||
<script setup>
|
||||
const props = defineProps(['node']);
|
||||
import { getShareLinkForNode, copyShareLinkForNode } from '../../utils.js';
|
||||
const props = defineProps({
|
||||
node: Object,
|
||||
});
|
||||
import { getShareLinkForNode, copyShareLinkForNode } from '@/utils.js';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">Share Link</div>
|
||||
<div class="ml-auto">
|
||||
<button @click="copyShareLinkForNode(props.node.node_id)" type="button" class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<li>
|
||||
<div class="relative flex items-center">
|
||||
<div class="block flex-1 p-2">
|
||||
<div class="flex space-x-2">
|
||||
<input type="text" readonly 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" :value="getShareLinkForNode(props.node.node_id)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<div class="flex bg-gray-200 p-2 font-semibold">
|
||||
<div class="my-auto">Share Link</div>
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
@click="copyShareLinkForNode(props.node.node_id)"
|
||||
type="button"
|
||||
class="rounded-sm bg-white px-2 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ul role="list" class="flex-1 divide-y divide-gray-200">
|
||||
<li class="p-3">
|
||||
<div class="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
readonly
|
||||
:value="getShareLinkForNode(props.node.node_id)"
|
||||
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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,8 +1,9 @@
|
||||
<script setup>
|
||||
const emit = defineEmits(['showTraceRoute']);
|
||||
import moment from 'moment';
|
||||
import { state } from '../../store.js';
|
||||
import { findNodeById } from '../../utils.js';
|
||||
import { state } from '@/store.js';
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
const mapData = useMapStore();
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
@ -17,7 +18,7 @@ import { findNodeById } from '../../utils.js';
|
||||
<div class="block flex-1 px-4 py-2">
|
||||
<div class="relative flex min-w-0 flex-1 items-center">
|
||||
<div>
|
||||
<p class="text-sm text-gray-900"><span class="font-medium">{{ findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
|
||||
<p class="text-sm text-gray-900"><span class="font-medium">{{ mapData.findNodeById(traceroute.to)?.long_name || '???' }}</span> to <span class="font-medium">{{ mapData.findNodeById(traceroute.from)?.long_name || '???' }}</span></p>
|
||||
<div class="text-sm text-gray-700">{{ moment(new Date(traceroute.updated_at)).fromNow() }} - {{ traceroute.route.length }} hops {{ traceroute.channel_id ? `on ${traceroute.channel_id}` : '' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,47 +1,57 @@
|
||||
<script setup>
|
||||
// TODO: close node details tooltip when this opens
|
||||
import { state } from '@/store';
|
||||
import CloseActionButton from '@/components/CloseActionButton.vue';
|
||||
|
||||
const emit = defineEmits(['dismiss']);
|
||||
import { state } from '../store.js';
|
||||
|
||||
function dismissShowingNodeNeighbours() {
|
||||
state.selectedNodeToShowNeighbours = null;
|
||||
emit('dismiss');
|
||||
state.selectedNodeToShowNeighbours = null;
|
||||
emit('dismiss');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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="state.selectedNodeToShowNeighbours != null" class="fixed left-0 right-0 bottom-0">
|
||||
<div v-if="state.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 border">
|
||||
<div class="p-2">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 class="font-bold">{{ state.selectedNodeToShowNeighbours.short_name }} Neighbours</h2>
|
||||
<h3 v-if="state.selectedNodeToShowNeighboursType === 'weHeard'" class="text-sm">Nodes heard by {{ state.selectedNodeToShowNeighbours.short_name }}</h3>
|
||||
<h3 v-if="state.selectedNodeToShowNeighboursType === 'theyHeard'" class="text-sm">Nodes that heard {{ state.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 class="relative z-sidebar" role="dialog" aria-modal="true">
|
||||
<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="state.selectedNodeToShowNeighbours" class="fixed left-0 right-0 bottom-0">
|
||||
<div v-if="state.selectedNodeToShowNeighbours" class="mx-auto w-screen max-w-md p-4">
|
||||
<div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
|
||||
<div class="p-2">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 class="font-bold">
|
||||
{{ state.selectedNodeToShowNeighbours.short_name }} Neighbors
|
||||
</h2>
|
||||
<h3
|
||||
v-if="state.selectedNodeToShowNeighboursType === 'weHeard'"
|
||||
class="text-sm"
|
||||
>
|
||||
Nodes heard by {{ state.selectedNodeToShowNeighbours.short_name }}
|
||||
</h3>
|
||||
<h3
|
||||
v-if="state.selectedNodeToShowNeighboursType === 'theyHeard'"
|
||||
class="text-sm"
|
||||
>
|
||||
Nodes that heard {{ state.selectedNodeToShowNeighbours.short_name }}
|
||||
</h3>
|
||||
</div>
|
||||
<CloseActionButton
|
||||
@click="dismissShowingNodeNeighbours"
|
||||
class="my-auto ml-3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,11 +1,14 @@
|
||||
<script setup>
|
||||
const emit = defineEmits(['dismiss']);
|
||||
import { state } from '../store.js';
|
||||
import { state } from '@/store';
|
||||
import moment from 'moment';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
|
||||
const ui = useUIStore();
|
||||
function dismissShowingNodePositionHistory() {
|
||||
state.selectedNodePositionHistory = [];
|
||||
state.selectedNodeToShowPositionHistory = null;
|
||||
state.positionHistoryModalExpanded = false;
|
||||
ui.collapsePositionHistoryModal();
|
||||
emit('dismiss');
|
||||
}
|
||||
function onPositionHistoryQuickRangeClick(range) {
|
||||
@ -47,9 +50,9 @@ function onPositionHistoryQuickRangeClick(range) {
|
||||
<div>
|
||||
<div class="flex p-2">
|
||||
<div class="flex my-auto mr-3 space-x-2">
|
||||
<a href="javascript:void(0)" @click="state.positionHistoryModalExpanded = !state.positionHistoryModalExpanded" class="rounded-full">
|
||||
<a href="javascript:void(0)" @click="ui.togglePositionHistoryModalExpansion" class="rounded-full">
|
||||
<div class="bg-gray-100 hover:bg-gray-200 p-1 rounded-full">
|
||||
<svg v-if="state.positionHistoryModalExpanded" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<svg v-if="ui.positionHistoryModalExpanded" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
<svg v-else xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
@ -71,7 +74,7 @@ function onPositionHistoryQuickRangeClick(range) {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="state.positionHistoryModalExpanded" class="divide-y border-t">
|
||||
<div v-if="ui.positionHistoryModalExpanded" class="divide-y border-t">
|
||||
|
||||
<!-- quick range -->
|
||||
<div class="flex p-2 space-x-2">
|
||||
|
||||
138
webapp/frontend/src/components/NodeTooltip.vue
Normal file
138
webapp/frontend/src/components/NodeTooltip.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import moment from 'moment';
|
||||
import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, formatPositionPrecision } from '@/utils';
|
||||
import { state } from '@/store';
|
||||
const emit = defineEmits(['showNeighbors']);
|
||||
|
||||
const props = defineProps({
|
||||
node: Object,
|
||||
});
|
||||
const popupContent = ref(null);
|
||||
const hideImage = ref(false);
|
||||
const hardwareImage = `/images/devices/${props.node.hardware_model_name}.png`;
|
||||
|
||||
const mqttStatus = hasNodeUplinkedToMqttRecently(props.node);
|
||||
const mqttClass = mqttStatus ? 'text-green-700' : 'text-blue-700';
|
||||
const mqttLabel = mqttStatus ? 'Connected' : 'Disconnected';
|
||||
const mqttUpdatedAt = props.node.mqtt_connection_state_updated_at
|
||||
? moment(props.node.mqtt_connection_state_updated_at).fromNow()
|
||||
: null;
|
||||
|
||||
const loraFrequencyRange = getRegionFrequencyRange(props.node.region_name);
|
||||
|
||||
const formattedVoltage = computed(() => {
|
||||
return typeof props.node.value?.voltage === 'number'
|
||||
? `${props.node.value.voltage.toFixed(2)}V`
|
||||
: null;
|
||||
});
|
||||
|
||||
const formattedChannelUtilization = computed(() => {
|
||||
return typeof props.node.value?.channel_utilization === 'number'
|
||||
? `${props.node.value.channel_utilization.toFixed(2)}%`
|
||||
: null;
|
||||
});
|
||||
|
||||
const formattedAirUtil = computed(() => {
|
||||
return typeof props.node.value?.air_util_tx === 'number'
|
||||
? `${props.node.value.air_util_tx.toFixed(2)}%`
|
||||
: null;
|
||||
});
|
||||
|
||||
function formatDate(date) {
|
||||
return moment(date).fromNow();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="popupContent">
|
||||
<img
|
||||
v-if="hardwareImage"
|
||||
class="mb-4 w-40 mx-auto"
|
||||
:src="hardwareImage"
|
||||
@error="hideImage = true"
|
||||
v-show="!hideImage"
|
||||
/>
|
||||
<div class="font-bold text-center">{{ node.long_name }}</div>
|
||||
Short Name: {{ node.short_name }}
|
||||
<br />MQTT:
|
||||
<span>
|
||||
<span :class="mqttClass">{{ mqttLabel }}</span>
|
||||
<span v-if="mqttUpdatedAt"> ({{ mqttUpdatedAt }})</span>
|
||||
</span>
|
||||
|
||||
<br v-if="node.num_online_local_nodes !== null" />
|
||||
<span v-if="node.num_online_local_nodes !== null">
|
||||
Local Nodes Online: {{ node.num_online_local_nodes }}
|
||||
</span>
|
||||
|
||||
<br v-if="node.position_precision !== 32 && node.position_precision !== null" />
|
||||
<span v-if="node.position_precision !== 32 && node.position_precision !== null">
|
||||
Position Precision: {{ formatPositionPrecision(node.position_precision) }}
|
||||
</span>
|
||||
|
||||
<br /><br />Role: {{ node.role_name }}
|
||||
<br />Hardware: {{ node.hardware_model_name }}
|
||||
|
||||
<br v-if="node.firmware_version" />
|
||||
<span v-if="node.firmware_version">Firmware: {{ node.firmware_version }}</span>
|
||||
|
||||
<br v-if="node.region_name" />
|
||||
<span v-if="node.region_name">
|
||||
LoRa Region: {{ node.region_name }} ({{ loraFrequencyRange }})
|
||||
</span>
|
||||
|
||||
<br v-if="node.modem_preset_name" />
|
||||
<span v-if="node.modem_preset_name">Modem Preset: {{ node.modem_preset_name }}</span>
|
||||
|
||||
<br v-if="node.has_default_channel !== null" />
|
||||
<span v-if="node.has_default_channel !== null">
|
||||
Has Default Channel: {{ node.has_default_channel ? 'Yes' : 'No' }}
|
||||
</span>
|
||||
|
||||
<br v-if="node.battery_level" />
|
||||
<span v-if="node.battery_level">
|
||||
Battery:
|
||||
{{
|
||||
node.battery_level > 100
|
||||
? 'Plugged In'
|
||||
: `${node.battery_level}%`
|
||||
}}
|
||||
</span>
|
||||
|
||||
<br v-if="formattedVoltage" />
|
||||
<span v-if="formattedVoltage">Voltage: {{ formattedVoltage }}</span>
|
||||
|
||||
<br v-if="formattedChannelUtilization" />
|
||||
<span v-if="formattedChannelUtilization">
|
||||
Ch Util: {{ formattedChannelUtilization }}
|
||||
</span>
|
||||
|
||||
<br v-if="formattedAirUtil" />
|
||||
<span v-if="formattedAirUtil">Air Util: {{ formattedAirUtil }}</span>
|
||||
|
||||
<br v-if="node.altitude && node.altitude < 42949000" />
|
||||
<span v-if="node.altitude && node.altitude < 42949000">
|
||||
Altitude: {{ node.altitude }}m
|
||||
</span>
|
||||
|
||||
<br /><br />ID: {{ node.node_id }}
|
||||
<br />Hex ID: {{ node.node_id_hex }}
|
||||
<br />Updated: {{ formatDate(node.updated_at) }}
|
||||
<br v-if="node.neighbours_updated_at" />
|
||||
<span v-if="node.neighbours_updated_at">
|
||||
Neighbours Updated: {{ formatDate(node.neighbours_updated_at) }}
|
||||
</span>
|
||||
<br v-if="node.position_updated_at" />
|
||||
<span v-if="node.position_updated_at">
|
||||
Position Updated: {{ formatDate(node.position_updated_at) }}
|
||||
</span>
|
||||
|
||||
<br /><br />
|
||||
<button @click="state.selectedNode = node" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200 mb-1">Show Full Details</button>
|
||||
<br />
|
||||
<button @click="$emit('showNeighbors', 'theyHeard', node.node_id)" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200 mb-1">Show Neighbours (Heard Us)</button>
|
||||
<br />
|
||||
<button @click="$emit('showNeighbors', 'weHeard', node.node_id)" class="border border-gray-300 bg-gray-100 p-1 w-full rounded-sm hover:bg-gray-200">Show Neighbours (We Heard)</button>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,210 +1,144 @@
|
||||
<script setup>
|
||||
import { state } from '../store.js';
|
||||
import {
|
||||
nodesMaxAge,
|
||||
nodesDisconnectedAge,
|
||||
nodesOfflineAge,
|
||||
waypointsMaxAge,
|
||||
neighboursMaxDistance,
|
||||
goToNodeZoomLevel,
|
||||
temperatureFormat,
|
||||
autoUpdatePositionInUrl,
|
||||
enableMapAnimations,
|
||||
} from '../config.js';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import SettingField from '@/components/Settings/Field.vue';
|
||||
|
||||
const ui = useUIStore();
|
||||
const configStore = useConfigStore();
|
||||
|
||||
const timeOptions = [
|
||||
{ value: null, label: 'Show All' },
|
||||
{ value: 900, label: '15 minutes' },
|
||||
{ value: 1800, label: '30 minutes' },
|
||||
{ value: 3600, label: '1 hour' },
|
||||
{ value: 10800, label: '3 hours' },
|
||||
{ value: 21600, label: '6 hours' },
|
||||
{ value: 43200, label: '12 hours' },
|
||||
{ value: 86400, label: '24 hours' },
|
||||
{ value: 172800, label: '2 days' },
|
||||
{ value: 259200, label: '3 days' },
|
||||
{ value: 345600, label: '4 days' },
|
||||
{ value: 432000, label: '5 days' },
|
||||
{ value: 518400, label: '6 days' },
|
||||
{ value: 604800, label: '7 days' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- settings sidebar -->
|
||||
<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="state.settingsVisible" @click="state.settingsVisible = !state.settingsVisible" class="fixed inset-0 bg-gray-900/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="state.settingsVisible" class="fixed top-0 left-0 bottom-0">
|
||||
<div v-if="state.settingsVisible" class="w-screen h-full 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-sm">
|
||||
<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="state.settingsVisible = 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">
|
||||
|
||||
<!-- configNodesMaxAgeInSeconds -->
|
||||
<div class="p-2">
|
||||
<label class="block text-sm font-medium text-gray-900">Nodes Max Age</label>
|
||||
<div class="text-xs text-gray-600 mb-2">Nodes not updated within this time are hidden. Reload to update map.</div>
|
||||
<select v-model="nodesMaxAge" 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">Show All</option>
|
||||
<option value="900">15 minutes</option>
|
||||
<option value="1800">30 minutes</option>
|
||||
<option value="3600">1 hour</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>
|
||||
|
||||
<!-- 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 uplinked to MQTT in this time will show as blue icons. Reload to update map.</div>
|
||||
<select v-model="nodesDisconnectedAge" 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="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>
|
||||
<div class="text-xs text-gray-600 mb-2">Nodes not updated within this time will show as red icons. Reload to update map.</div>
|
||||
<select v-model="nodesOfflineAge" 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>
|
||||
|
||||
<!-- configWaypointsMaxAgeInSeconds -->
|
||||
<div class="p-2">
|
||||
<label class="block text-sm font-medium text-gray-900">Waypoints Max Age</label>
|
||||
<div class="text-xs text-gray-600 mb-2">Waypoints not updated within this time are hidden. Reload to update map.</div>
|
||||
<select v-model="waypointsMaxAge" 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">Show All</option>
|
||||
<option value="900">15 minutes</option>
|
||||
<option value="1800">30 minutes</option>
|
||||
<option value="3600">1 hour</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>
|
||||
|
||||
<!-- configNeighboursMaxDistanceInMeters -->
|
||||
<div class="p-2">
|
||||
<label class="block text-sm font-medium text-gray-900">Neighbours Max Distance (meters)</label>
|
||||
<div class="text-xs text-gray-600 mb-2">Neighbours further than this are hidden. Reload to update map.</div>
|
||||
<input type="number" v-model="neighboursMaxDistance" 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>
|
||||
|
||||
<!-- configZoomLevelGoToNode -->
|
||||
<div class="p-2">
|
||||
<label class="block text-sm font-medium text-gray-900">Zoom Level (go to node)</label>
|
||||
<div class="text-xs text-gray-600 mb-2">How far to zoom map when navigating to a node.</div>
|
||||
<input type="number" v-model="goToNodeZoomLevel" 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>
|
||||
|
||||
<!-- configTemperatureFormat -->
|
||||
<div class="p-2">
|
||||
<label class="block text-sm font-medium text-gray-900">Temperature Format</label>
|
||||
<div class="text-xs text-gray-600 mb-2">Metrics will be shown in the selected format.</div>
|
||||
<select v-model="temperatureFormat" 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="celsius">Celsius (ºC)</option>
|
||||
<option value="fahrenheit">Fahrenheit (ºF)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- configAutoUpdatePositionInUrl -->
|
||||
<div class="p-2">
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input type="checkbox" v-model="autoUpdatePositionInUrl" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
|
||||
</div>
|
||||
<label class="ml-2 text-sm font-medium text-gray-900">Auto Update Position in URL</label>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">Sets lat/lng/zoom as query parameters.</div>
|
||||
</div>
|
||||
|
||||
<!-- configEnableMapAnimations -->
|
||||
<div class="p-2">
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input type="checkbox" v-model="enableMapAnimations" class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300" required>
|
||||
</div>
|
||||
<label class="ml-2 text-sm font-medium text-gray-900">Enable Map Animations</label>
|
||||
</div>
|
||||
<div class="text-xs text-gray-600">Map will animate flying to nodes.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 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="ui.settingsVisible" @click="ui.toggleSettings" class="fixed inset-0 bg-gray-900/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="ui.settingsVisible" class="fixed top-0 left-0 bottom-0">
|
||||
<div v-if="ui.settingsVisible" class="w-screen h-full max-w-md overflow-hidden">
|
||||
<div class="flex h-full flex-col bg-white shadow-xl">
|
||||
<!-- Header -->
|
||||
<div class="p-2 border-b border-gray-200 shadow-sm">
|
||||
<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>
|
||||
<button class="ml-3 p-2 bg-gray-100 hover:bg-gray-200 rounded-full" @click="ui.hideSettings">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="overflow-y-auto divide-y divide-gray-200">
|
||||
<SettingField
|
||||
label="Nodes Max Age"
|
||||
helpText="Nodes not updated within this time are hidden. Reload to update map."
|
||||
v-model="configStore.nodesMaxAge"
|
||||
:options="timeOptions"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Nodes Disconnected Age"
|
||||
helpText="Nodes without recent MQTT uplinks appear blue. Reload to update map."
|
||||
v-model="configStore.nodesDisconnectedAge"
|
||||
:options="timeOptions.filter(o => o.value !== null)"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Nodes Offline Age"
|
||||
helpText="Nodes not updated within this time appear red. Reload to update map."
|
||||
v-model="configStore.nodesOfflineAge"
|
||||
:options="[
|
||||
{ value: null, label: `Don't show as offline` },
|
||||
...timeOptions.filter(o => o.value !== null)
|
||||
]"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Waypoints Max Age"
|
||||
helpText="Old waypoints are hidden. Reload to update map."
|
||||
v-model="configStore.waypointsMaxAge"
|
||||
:options="timeOptions"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Neighbours Max Distance (meters)"
|
||||
helpText="Hides neighbours further than this distance."
|
||||
v-model="configStore.neighboursMaxDistance"
|
||||
type="number"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Zoom Level (go to node)"
|
||||
helpText="How far to zoom map when navigating to a node."
|
||||
v-model="configStore.goToNodeZoomLevel"
|
||||
type="number"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Temperature Format"
|
||||
helpText="Display temperatures in this format."
|
||||
v-model="configStore.temperatureFormat"
|
||||
:options="[
|
||||
{ value: 'celsius', label: 'Celsius (ºC)' },
|
||||
{ value: 'fahrenheit', label: 'Fahrenheit (ºF)' }
|
||||
]"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Auto Update Position in URL"
|
||||
helpText="Sets lat/lng/zoom as query parameters."
|
||||
v-model="configStore.autoUpdatePositionInUrl"
|
||||
type="checkbox"
|
||||
/>
|
||||
|
||||
<SettingField
|
||||
label="Enable Map Animations"
|
||||
helpText="Map will animate flying to nodes."
|
||||
v-model="configStore.enableMapAnimations"
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
55
webapp/frontend/src/components/Settings/Field.vue
Normal file
55
webapp/frontend/src/components/Settings/Field.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
label: String,
|
||||
helpText: String,
|
||||
modelValue: [String, Number, Boolean, null],
|
||||
options: Array,
|
||||
type: {
|
||||
type: String,
|
||||
default: 'select', // "select", "number", or "checkbox"
|
||||
},
|
||||
});
|
||||
defineEmits(['update:modelValue']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<label class="block text-sm font-medium text-gray-900">{{ label }}</label>
|
||||
<div class="text-xs text-gray-600 mb-2">{{ helpText }}</div>
|
||||
|
||||
<template v-if="type === 'select'">
|
||||
<select
|
||||
:value="modelValue === null ? 'null' : modelValue"
|
||||
@change="$emit('update:modelValue', $event.target.value === 'null' ? null : Number($event.target.value))"
|
||||
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 v-for="opt in options" :key="opt.value" :value="opt.value === null ? 'null' : opt.value">
|
||||
{{ opt.label }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
|
||||
<template v-else-if="type === 'number'">
|
||||
<input
|
||||
type="number"
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', $event.target.valueAsNumber)"
|
||||
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"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-else-if="type === 'checkbox'">
|
||||
<div class="flex items-start">
|
||||
<div class="flex items-center h-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="modelValue"
|
||||
@change="$emit('update:modelValue', $event.target.checked)"
|
||||
class="w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300"
|
||||
/>
|
||||
</div>
|
||||
<label class="ml-2 text-sm font-medium text-gray-900">{{ label }}</label>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
28
webapp/frontend/src/components/Traceroute/NodeEntry.vue
Normal file
28
webapp/frontend/src/components/Traceroute/NodeEntry.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
node: Object,
|
||||
description: String,
|
||||
});
|
||||
const emit = defineEmits(['goTo']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li @click.prevent="$emit('goTo', node.node_id)" :key="node.node_id" class="relative flex gap-x-4" role="button" tabindex="0">
|
||||
<div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
|
||||
<div class="w-px bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="my-auto relative flex flex-none items-center justify-center">
|
||||
<div>
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow-sm"
|
||||
:style="{backgroundColor: node.backgroundColor, color: node.textColor}">
|
||||
<div class="mx-auto my-auto drop-shadow-sm">{{ node.short_name ?? '?' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
|
||||
<div class="font-medium text-gray-900">{{ node.long_name || '???' }}</div>
|
||||
<div>Hex ID: !{{ Number(node.node_id).toString(16) }}</div>
|
||||
<div>{{ description }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
@ -1,8 +1,22 @@
|
||||
<script setup>
|
||||
const emit = defineEmits(['goTo']);
|
||||
import moment from 'moment';
|
||||
import { state } from '../store.js';
|
||||
import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from '../utils.js';
|
||||
import { computed } from 'vue';
|
||||
import { state } from '@/store';
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
import NodeEntry from '@/components/Traceroute/NodeEntry.vue';
|
||||
const mapData = useMapStore();
|
||||
// selected node IDs
|
||||
const toNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.to));
|
||||
const fromNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.from));
|
||||
const gatewayNode = computed(() => mapData.findNodeById(state.selectedTraceRoute.gateway_id));
|
||||
// pre-resolve the route nodes into an array
|
||||
const routeNodes = computed(() =>
|
||||
state.selectedTraceRoute.route?.map(id => ({
|
||||
id,
|
||||
node: mapData.findNodeById(id),
|
||||
})) ?? []
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<div class="relative z-sidebar" role="dialog" aria-modal="true">
|
||||
@ -52,89 +66,18 @@ import { getNodeColor, getNodeTextColor, findNodeById, findNodeMarkerById } from
|
||||
</div>
|
||||
|
||||
<div class="overflow-y-auto">
|
||||
|
||||
<!-- details -->
|
||||
<div class="p-2">
|
||||
<ul role="list" class="space-y-3">
|
||||
|
||||
<!-- node that initiated traceroute -->
|
||||
<li @click="$emit('goTo', state.selectedTraceRoute.to)" class="relative flex gap-x-4">
|
||||
<div class="absolute left-0 top-0 flex w-12 justify-center top-3 -bottom-3">
|
||||
<div class="w-px bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="my-auto relative flex flex-none items-center justify-center">
|
||||
<div>
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow-sm" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.to)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.to)}]` ]">
|
||||
<div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.to)?.short_name ?? "?" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
|
||||
<div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.to)?.long_name || '???' }}</div>
|
||||
<div>Hex ID: !{{ Number(state.selectedTraceRoute.to).toString(16) }}</div>
|
||||
<div>Started the traceroute</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<NodeEntry :node="toNode" description="Started the traceroute" @go-to="$emit('goTo', toNode.node_id)"/>
|
||||
<!-- middleman nodes -->
|
||||
<li @click="$emit('goTo', route)" v-for="route of state.selectedTraceRoute.route" class="relative flex gap-x-4">
|
||||
<div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
|
||||
<div class="w-px bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="my-auto relative flex flex-none items-center justify-center">
|
||||
<div>
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(route)}" :class="[ `text-[${getNodeTextColor(route)}]` ]">
|
||||
<div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(route)?.short_name ?? "?" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
|
||||
<div class="font-medium text-gray-900">{{ findNodeById(route)?.long_name || '???' }}</div>
|
||||
<div>Hex ID: !{{ Number(route).toString(16) }}</div>
|
||||
<div>Forwarded the packet</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<NodeEntry v-for="{ id, node } in routeNodes" :key="id" :node="node" description="Forwarded the packet" @go-to="$emit('goTo', id)"/>
|
||||
<!-- node that replied to traceroute -->
|
||||
<li @click="$emit('goTo', state.selectedTraceRoute.from)" v-if="state.selectedTraceRoute.from" class="relative flex gap-x-4">
|
||||
<div class="absolute left-0 top-0 flex w-12 justify-center -bottom-3">
|
||||
<div class="w-px bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="my-auto relative flex flex-none items-center justify-center">
|
||||
<div>
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.from)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.from)}]` ]">
|
||||
<div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.from)?.short_name ?? "?" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
|
||||
<div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.from)?.long_name || '???' }}</div>
|
||||
<div>Hex ID: !{{ Number(state.selectedTraceRoute.from).toString(16) }}</div>
|
||||
<div>Replied to traceroute</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<NodeEntry v-if="fromNode" :node="fromNode" description="Replied to traceroute" @go-to="$emit('goTo', fromNode.node_id)"/>
|
||||
<!-- node that gated traceroute to mqtt -->
|
||||
<li @click="$emit('goTo', state.selectedTraceRoute.gateway_id)" v-if="state.selectedTraceRoute.gateway_id" class="relative flex gap-x-4">
|
||||
<div class="absolute left-0 top-0 flex w-12 justify-center h-6">
|
||||
<div class="w-px bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="my-auto relative flex flex-none items-center justify-center">
|
||||
<div>
|
||||
<div class="flex rounded-full h-12 w-12 text-white shadow" :style="{backgroundColor: getNodeColor(state.selectedTraceRoute.gateway_id)}" :class="[ `text-[${getNodeTextColor(state.selectedTraceRoute.gateway_id)}]` ]">
|
||||
<div class="mx-auto my-auto drop-shadow-sm">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.short_name ?? "?" }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-auto py-0.5 text-sm leading-5 text-gray-500">
|
||||
<div class="font-medium text-gray-900">{{ findNodeById(state.selectedTraceRoute.gateway_id)?.long_name || '???' }}</div>
|
||||
<div>Hex ID: !{{ Number(state.selectedTraceRoute.gateway_id).toString(16) }}</div>
|
||||
<div>Gated the packet to MQTT</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<NodeEntry v-if="gatewayNode" :node="gatewayNode" description="Gated the packet to MQTT" @go-to="$emit('goTo', gatewayNode.node_id)" />
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
117
webapp/frontend/src/composables/useNodeProcessor.js
Normal file
117
webapp/frontend/src/composables/useNodeProcessor.js
Normal file
@ -0,0 +1,117 @@
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
import moment from 'moment';
|
||||
import { nodesMaxAge, nodesOfflineAge } from '@/config'; // TODO: use config store
|
||||
import { icons } from '@/map';
|
||||
import { hasNodeUplinkedToMqttRecently, isValidCoordinates } from '@/utils';
|
||||
|
||||
export function useNodeProcessor() {
|
||||
const mapStore = useMapStore(); // Access your mapStore from Pinia
|
||||
|
||||
// This function processes new node data
|
||||
const processNewNodes = (newNodes) => {
|
||||
const now = moment();
|
||||
const processedNodes = [];
|
||||
const processedMarkers = {};
|
||||
|
||||
for (const node of newNodes) {
|
||||
// Skip nodes older than configured node max age
|
||||
if (nodesMaxAge.value) {
|
||||
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
|
||||
if (lastUpdatedAgeInMillis > nodesMaxAge.value * 1000) {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
// Compute background/text colors beforehand
|
||||
node.backgroundColor = getNodeColor(node.node_id) || '#888'; // Default to '#888' if undefined
|
||||
node.textColor = getNodeTextColor(node.node_id) || '#FFFFFF'; // Default to white if undefined
|
||||
|
||||
// Add node to the processed list regardless of its position
|
||||
processedNodes.push(node);
|
||||
|
||||
// Skip nodes with invalid or missing position
|
||||
if (!node.latitude || !node.longitude || isNaN(node.latitude) || isNaN(node.longitude)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Fix latitude and longitude
|
||||
node.latitude = node.latitude / 10000000;
|
||||
node.longitude = node.longitude / 10000000;
|
||||
|
||||
// Icon based on MQTT connection state
|
||||
let icon = icons.mqttDisconnected;
|
||||
|
||||
// Use offline icon for nodes older than configured node offline age
|
||||
if (nodesOfflineAge.value) {
|
||||
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
|
||||
if (lastUpdatedAgeInMillis > nodesOfflineAge.value * 1000) {
|
||||
icon = icons.offline;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if node has uplinked to MQTT recently
|
||||
if (hasNodeUplinkedToMqttRecently(node)) {
|
||||
icon = icons.mqttDisconnected;
|
||||
}
|
||||
|
||||
// Filter invalid coordinates
|
||||
if (!isValidCoordinates(node.latitude, node.longitude)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Prepare marker data
|
||||
const marker = {
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
id: node.node_id,
|
||||
role: node.role_name,
|
||||
layer: 'nodes',
|
||||
color: icon,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [node.longitude, node.latitude],
|
||||
},
|
||||
};
|
||||
|
||||
// Add the marker to the processed markers dictionary (using node_id as the key)
|
||||
processedMarkers[node.node_id] = marker;
|
||||
}
|
||||
|
||||
// Return processed data (nodes and markers)
|
||||
return { processedNodes, processedMarkers };
|
||||
};
|
||||
|
||||
// Process new data and store it (bulk processing)
|
||||
const parseNodesResponse = (newNodes) => {
|
||||
const { processedNodes, processedMarkers } = processNewNodes(newNodes);
|
||||
|
||||
// Clear old data and update in bulk
|
||||
mapStore.clearNodes();
|
||||
mapStore.setNodes(processedNodes);
|
||||
mapStore.setNodeMarkers(processedMarkers);
|
||||
};
|
||||
|
||||
return {
|
||||
parseNodesResponse,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
// convert node id to a hex colour
|
||||
function getNodeColor(nodeId) {
|
||||
return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
|
||||
};
|
||||
|
||||
function getNodeTextColor(nodeId) {
|
||||
// extract rgb components
|
||||
const r = (nodeId & 0xFF0000) >> 16;
|
||||
const g = (nodeId & 0x00FF00) >> 8;
|
||||
const b = nodeId & 0x0000FF;
|
||||
|
||||
// calculate brightness
|
||||
const brightness = ((r * 0.299) + (g * 0.587) + (b * 0.114)) / 255;
|
||||
|
||||
// determine text color based on brightness
|
||||
return brightness > 0.5 ? "#000000" : "#FFFFFF";
|
||||
};
|
||||
51
webapp/frontend/src/composables/useSearchedNodes.js
Normal file
51
webapp/frontend/src/composables/useSearchedNodes.js
Normal file
@ -0,0 +1,51 @@
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
import { debounce } from 'lodash';
|
||||
|
||||
export const useSearchedNodes = () => {
|
||||
const uiStore = useUIStore();
|
||||
const mapStore = useMapStore();
|
||||
|
||||
const searchText = ref(uiStore.searchText);
|
||||
|
||||
// Use a debounced version of the search text to minimize re-computation
|
||||
const debouncedSearchText = ref(searchText.value);
|
||||
const updateSearchText = debounce((newSearchText) => {
|
||||
debouncedSearchText.value = newSearchText;
|
||||
}, 300); // Adjust debounce time (300ms is just an example)
|
||||
|
||||
// Watch for changes to the search text and apply debouncing
|
||||
watch(() => uiStore.searchText, (newSearchText) => {
|
||||
updateSearchText(newSearchText);
|
||||
});
|
||||
|
||||
// Computed property for searched nodes
|
||||
const searchedNodes = computed(() => {
|
||||
const nodes = mapStore.nodes;
|
||||
const query = debouncedSearchText.value.toLowerCase();
|
||||
|
||||
// Filter nodes based on search query, only once per update
|
||||
const filteredNodes = nodes.filter((node) => {
|
||||
const matchesId = node.node_id?.toLowerCase()?.includes(query);
|
||||
const matchesHexId = node.node_id_hex?.toLowerCase()?.includes(query);
|
||||
const matchesLongName = node.long_name?.toLowerCase()?.includes(query);
|
||||
const matchesShortName = node.short_name?.toLowerCase()?.includes(query);
|
||||
return matchesId || matchesHexId || matchesLongName || matchesShortName;
|
||||
});
|
||||
|
||||
// Sort alphabetically by long name
|
||||
const sortedNodes = filteredNodes.sort((nodeA, nodeB) => {
|
||||
const nodeALongName = nodeA.long_name || "";
|
||||
const nodeBLongName = nodeB.long_name || "";
|
||||
return nodeALongName.localeCompare(nodeBLongName);
|
||||
});
|
||||
|
||||
// Only return the first 500 results to avoid UI lag
|
||||
return sortedNodes.slice(0, 500);
|
||||
});
|
||||
|
||||
return {
|
||||
searchedNodes,
|
||||
};
|
||||
};
|
||||
@ -4,8 +4,6 @@ import { useStorage } from '@vueuse/core';
|
||||
export const CURRENT_ANNOUNCEMENT_ID = 1;
|
||||
export const BASE_PATH = 'http://localhost:9090';
|
||||
|
||||
// string
|
||||
export const temperatureFormat = useStorage('temperature-display', 'fahrenheit');
|
||||
// boolean
|
||||
export const autoUpdatePositionInUrl = useStorage('auto-update-url', true);
|
||||
export const enableMapAnimations = useStorage('map-animations', true);
|
||||
|
||||
16
webapp/frontend/src/directives/v-click-outside.js
Normal file
16
webapp/frontend/src/directives/v-click-outside.js
Normal file
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
mounted(el, binding) {
|
||||
console.log('mounted')
|
||||
el._clickOutsideHandler = (event) => {
|
||||
console.log('handler')
|
||||
if (!(el === event.target || el.contains(event.target))) {
|
||||
binding.value(event);
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', el._clickOutsideHandler);
|
||||
},
|
||||
unmounted(el) {
|
||||
document.removeEventListener('click', el._clickOutsideHandler);
|
||||
el._clickOutsideHandler = null;
|
||||
}
|
||||
};
|
||||
5
webapp/frontend/src/icons/DeviceIcon.vue
Normal file
5
webapp/frontend/src/icons/DeviceIcon.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
|
||||
</svg>
|
||||
</template>
|
||||
5
webapp/frontend/src/icons/InfoIcon.vue
Normal file
5
webapp/frontend/src/icons/InfoIcon.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<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="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
|
||||
</svg>
|
||||
</template>
|
||||
5
webapp/frontend/src/icons/MobileCloseIcon.vue
Normal file
5
webapp/frontend/src/icons/MobileCloseIcon.vue
Normal file
@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
|
||||
</svg>
|
||||
</template>
|
||||
9
webapp/frontend/src/icons/RandomIcon.vue
Normal file
9
webapp/frontend/src/icons/RandomIcon.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M18 4l3 3l-3 3"></path>
|
||||
<path d="M18 20l3 -3l-3 -3"></path>
|
||||
<path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path>
|
||||
<path d="M21 7h-5a4.978 4.978 0 0 0 -3 1m-4 8a4.984 4.984 0 0 1 -3 1h-3"></path>
|
||||
</svg>
|
||||
</template>
|
||||
7
webapp/frontend/src/icons/ReloadIcon.vue
Normal file
7
webapp/frontend/src/icons/ReloadIcon.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747"></path>
|
||||
<path d="M20 4v5h-5"></path>
|
||||
</svg>
|
||||
</template>
|
||||
7
webapp/frontend/src/icons/SearchIcon.vue
Normal file
7
webapp/frontend/src/icons/SearchIcon.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
|
||||
<path d="M21 21l-6 -6"></path>
|
||||
</svg>
|
||||
</template>
|
||||
6
webapp/frontend/src/icons/SettingsIcon.vue
Normal file
6
webapp/frontend/src/icons/SettingsIcon.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<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>
|
||||
</template>
|
||||
@ -1,11 +1,19 @@
|
||||
import './assets/main.css'
|
||||
import '@/assets/main.css';
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
|
||||
import App from '@/App.vue';
|
||||
import router from '@/router';
|
||||
import vClickOutside from '@/directives/v-click-outside';
|
||||
|
||||
const app = createApp(App)
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(router)
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
|
||||
app.mount('#app')
|
||||
app.directive('click-outside', vClickOutside);
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { markRaw } from 'vue';
|
||||
import moment from 'moment';
|
||||
import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, escapeString, formatPositionPrecision } from './utils.js';
|
||||
import { hasNodeUplinkedToMqttRecently, getRegionFrequencyRange, escapeString, formatPositionPrecision } from '@/utils';
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
|
||||
// state/config
|
||||
let instance = null;
|
||||
@ -70,7 +71,8 @@ export const icons = {mqttConnected: '#16a34a', mqttDisconnected: '#2563eb', off
|
||||
|
||||
export function getTooltipContentForWaypoint(waypoint) {
|
||||
// get from node name
|
||||
var fromNode = findNodeById(waypoint.from);
|
||||
const mapData = useMapStore();
|
||||
var fromNode = mapData.findNodeById(waypoint.from);
|
||||
|
||||
var tooltip = `<b>${escapeString(waypoint.name)}</b>` +
|
||||
(waypoint.description ? `<br/>${escapeString(waypoint.description)}` : '') +
|
||||
@ -93,75 +95,6 @@ export function getTooltipContentForWaypoint(waypoint) {
|
||||
return tooltip;
|
||||
};
|
||||
|
||||
export function getTooltipContentForNode(node) {
|
||||
// determine if node was recently heard uplinking packets to mqtt
|
||||
const nodeHasUplinkedToMqttRecently = hasNodeUplinkedToMqttRecently(node);
|
||||
var mqttStatus = `<span class="text-blue-700">Disconnected</span>`;
|
||||
if(node.mqtt_connection_state_updated_at){
|
||||
var mqttStatusUpdatedAt = moment(new Date(node.mqtt_connection_state_updated_at)).fromNow();
|
||||
if(nodeHasUplinkedToMqttRecently){
|
||||
mqttStatus = `<span><span class="text-green-700">Connected</span> (${mqttStatusUpdatedAt})</span>`;
|
||||
} else {
|
||||
mqttStatus = `<span><span class="text-blue-700">Disconnected</span> (${mqttStatusUpdatedAt})</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
var loraFrequencyRange = getRegionFrequencyRange(node.region_name);
|
||||
|
||||
var tooltip = `<img class="mb-4 w-40 mx-auto" src="/images/devices/${node.hardware_model_name}.png" onerror="this.classList.add('hidden')"/>` +
|
||||
`<b>${escapeString(node.long_name)}</b>` +
|
||||
`<br/>Short Name: ${escapeString(node.short_name)}` +
|
||||
`<br/>MQTT: ${mqttStatus}` +
|
||||
(node.num_online_local_nodes != null ? `<br/>Local Nodes Online: ${node.num_online_local_nodes}` : '') +
|
||||
(node.position_precision != null && node.position_precision !== 32 ? `<br/>Position Precision: ${formatPositionPrecision(node.position_precision)}` : '') +
|
||||
`<br/><br/>Role: ${node.role_name}` +
|
||||
`<br/>Hardware: ${node.hardware_model_name}` +
|
||||
(node.firmware_version != null ? `<br/>Firmware: ${node.firmware_version}` : '') +
|
||||
(node.region_name != null ? `<br/>LoRa Region: ${node.region_name} (${loraFrequencyRange})` : '') +
|
||||
(node.modem_preset_name != null ? `<br/>Modem Preset: ${node.modem_preset_name}` : '') +
|
||||
(node.has_default_channel != null ? `<br/>Has Default Channel: ${node.has_default_channel ? "Yes" : "No"}` : '');
|
||||
|
||||
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)}%`;
|
||||
}
|
||||
|
||||
// ignore alt above 42949000 due to https://github.com/meshtastic/firmware/issues/3109
|
||||
if(node.altitude && node.altitude < 42949000){
|
||||
tooltip += `<br/>Altitude: ${node.altitude}m`;
|
||||
}
|
||||
|
||||
// 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()}`;
|
||||
tooltip += (node.neighbours_updated_at ? `<br/>Neighbours Updated: ${moment(new Date(node.neighbours_updated_at)).fromNow()}` : '');
|
||||
tooltip += (node.position_updated_at ? `<br/>Position Updated: ${moment(new Date(node.position_updated_at)).fromNow()}` : '');
|
||||
|
||||
// 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="window.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="window.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>`;
|
||||
tooltip += `</div>`;
|
||||
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
export function getNeighbourTooltipContent(type, node, neighbourNode, distanceInMeters, snr) {
|
||||
return '';
|
||||
}
|
||||
@ -201,7 +134,7 @@ export function cleanUpNodeNeighbors() {
|
||||
};
|
||||
|
||||
export function clearNodeOutline() {
|
||||
|
||||
getMap().getSource('node-outlines').setData({});
|
||||
};
|
||||
|
||||
export function clearMap() {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import HomeView from '@/views/HomeView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
import { reactive, computed } from 'vue';
|
||||
|
||||
export const state = reactive({
|
||||
// caches
|
||||
nodes: [],
|
||||
waypoints: [],
|
||||
nodeMarkers: {},
|
||||
waypointMarkers: [],
|
||||
|
||||
// state
|
||||
searchText: '',
|
||||
searchText: '', // moved to ui store, maybe should not be there though?
|
||||
selectedNodeOutlineCircle: null,
|
||||
selectedNodeMqttMetrics: [],
|
||||
selectedNodeTraceroutes: [],
|
||||
@ -18,42 +12,11 @@ export const state = reactive({
|
||||
selectedNodeToShowNeighbours: null,
|
||||
selectedNodeToShowNeighbours: null,
|
||||
selectedNodeToShowNeighboursType: null,
|
||||
currentPopup: null,
|
||||
|
||||
// position history
|
||||
selectedNodeToShowPositionHistory: null,
|
||||
positionHistoryDateTimeTo: null,
|
||||
positionHistoryDateTimeFrom: null,
|
||||
|
||||
// ui
|
||||
loading: false,
|
||||
settingsVisible: false,
|
||||
hardwareStatsVisible: false,
|
||||
infoModalVisible: false,
|
||||
mobileSearchVisible: false,
|
||||
positionHistoryModalExpanded: false,
|
||||
announcementVisible: false,
|
||||
});
|
||||
|
||||
export const searchedNodes = computed(() => {
|
||||
// search nodes
|
||||
const nodes = state.nodes.filter((node) => {
|
||||
const matchesId = node.node_id?.toLowerCase()?.includes(state.searchText.toLowerCase());
|
||||
const matchesHexId = node.node_id_hex?.toLowerCase()?.includes(state.searchText.toLowerCase());
|
||||
const matchesLongName = node.long_name?.toLowerCase()?.includes(state.searchText.toLowerCase());
|
||||
const matchesShortName = node.short_name?.toLowerCase()?.includes(state.searchText.toLowerCase());
|
||||
return matchesId || matchesHexId || matchesLongName || matchesShortName;
|
||||
});
|
||||
|
||||
// order alphabetically by long name
|
||||
nodes.sort((nodeA, nodeB) => {
|
||||
const nodeALongName = nodeA.long_name || "";
|
||||
const nodeBLongName = nodeB.long_name || "";
|
||||
return nodeALongName.localeCompare(nodeBLongName);
|
||||
});
|
||||
|
||||
// only return the first 500 results to avoid ui lag...
|
||||
return nodes.slice(0, 500);
|
||||
});
|
||||
|
||||
export const selectedNodeLatestPowerMetric = computed(() => {
|
||||
|
||||
39
webapp/frontend/src/stores/configStore.js
Normal file
39
webapp/frontend/src/stores/configStore.js
Normal file
@ -0,0 +1,39 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
// Define your store
|
||||
export const useConfigStore = defineStore('config', {
|
||||
state: () => ({
|
||||
// String values
|
||||
temperatureFormat: 'fahrenheit', // Default value
|
||||
// Boolean values
|
||||
autoUpdatePositionInUrl: true,
|
||||
enableMapAnimations: true,
|
||||
hasSeenInfoModal: false,
|
||||
|
||||
// Time in seconds (for max age values)
|
||||
nodesMaxAge: null,
|
||||
nodesDisconnectedAge: 604800, // Default value
|
||||
nodesOfflineAge: null,
|
||||
waypointsMaxAge: 604800, // Default value
|
||||
|
||||
// Number values (zoom level, IDs)
|
||||
goToNodeZoomLevel: 15,
|
||||
lastSeenAnnouncementId: 1,
|
||||
|
||||
// Distance values (for max distances)
|
||||
neighboursMaxDistance: null,
|
||||
|
||||
// Device info ranges (can be persisted)
|
||||
deviceMetricsTimeRange: '3d',
|
||||
powerMetricsTimeRange: '3d',
|
||||
environmentMetricsTimeRange: '3d',
|
||||
|
||||
// Map config
|
||||
enabledOverlayLayers: ['Legend', 'Position History'],
|
||||
selectedTileLayerName: 'OpenStreetMap'
|
||||
}),
|
||||
// Automatically persist the state in localStorage
|
||||
persist: {
|
||||
storage: localStorage, // Use localStorage (default is sessionStorage)
|
||||
},
|
||||
});
|
||||
55
webapp/frontend/src/stores/mapStore.js
Normal file
55
webapp/frontend/src/stores/mapStore.js
Normal file
@ -0,0 +1,55 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useMapStore = defineStore('map', {
|
||||
state: () => ({
|
||||
nodes: [],
|
||||
waypoints: [],
|
||||
nodeMarkers: {},
|
||||
waypointMarkers: [],
|
||||
}),
|
||||
actions: {
|
||||
setNodes(nodes) {
|
||||
this.nodes = nodes;
|
||||
},
|
||||
setNodeMarkers(markers) {
|
||||
this.nodeMarkers = markers;
|
||||
},
|
||||
addNode(node, marker) {
|
||||
// TODO do validation i.e. does it exist already?
|
||||
this.nodes.push(node);
|
||||
// allow undefined/null marker (nodes don't always have a marker)
|
||||
if (typeof marker === 'object') this.addNodeMarker(marker);
|
||||
},
|
||||
addNodeMarker(marker) {
|
||||
// TODO do validation checking here -- i.e. do we have the node? is marker.proprties.id set? does it exist already?
|
||||
this.nodeMarkers[marker.properties.id] = marker;
|
||||
},
|
||||
clearNodes() {
|
||||
this.nodes = [];
|
||||
this.nodeMarkers = {};
|
||||
},
|
||||
setWaypoints(waypoints) {
|
||||
this.waypoints = waypoints;
|
||||
},
|
||||
addWaypoint(waypoint, marker) {
|
||||
this.waypoints.push(waypoint);
|
||||
this.addWaypointMarker(marker);
|
||||
},
|
||||
addWaypointMarker(marker) {
|
||||
this.waypointMarkers.push(marker);
|
||||
},
|
||||
clearWaypoints() {
|
||||
this.waypoints = [];
|
||||
this.waypointMarkers = [];
|
||||
},
|
||||
findNodeById(id) {
|
||||
return this.nodes.find((node) => node.node_id.toString() === id.toString()) ?? null;
|
||||
},
|
||||
findNodeMarkerById(id) {
|
||||
return this.nodeMarkers[id] ?? null;
|
||||
},
|
||||
findRandomNode() {
|
||||
return this.nodes[Math.floor(Math.random() * this.nodes.length)] ?? null;
|
||||
},
|
||||
},
|
||||
});
|
||||
82
webapp/frontend/src/stores/uiStore.js
Normal file
82
webapp/frontend/src/stores/uiStore.js
Normal file
@ -0,0 +1,82 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useUIStore = defineStore('ui', {
|
||||
state: () => ({
|
||||
searchText: '',
|
||||
loading: false,
|
||||
settingsVisible: false,
|
||||
hardwareStatsVisible: false,
|
||||
infoModalVisible: false,
|
||||
mobileSearchVisible: false,
|
||||
positionHistoryModalExpanded: false,
|
||||
announcementVisible: false,
|
||||
}),
|
||||
actions: {
|
||||
search(text) {
|
||||
this.searchText = text;
|
||||
},
|
||||
clearSearch() {
|
||||
this.search('');
|
||||
},
|
||||
showMobileSearch() {
|
||||
this.mobileSearchVisible = true;
|
||||
},
|
||||
hideMobileSearch() {
|
||||
this.mobileSearchVisible = false;
|
||||
},
|
||||
toggleMobileSearch() {
|
||||
this.mobileSearchVisible = !this.mobileSearchVisible;
|
||||
},
|
||||
expandPositionHistoryModal() {
|
||||
this.positionHistoryModalExpanded = true;
|
||||
},
|
||||
collapsePositionHistoryModal() {
|
||||
this.positionHistoryModalExpanded = false;
|
||||
},
|
||||
togglePositionHistoryModalExpansion() {
|
||||
this.positionHistoryModalExpanded = !this.positionHistoryModalExpanded;
|
||||
},
|
||||
showSettings() {
|
||||
this.settingsVisible = true;
|
||||
},
|
||||
hideSettings() {
|
||||
this.settingsVisible = false;
|
||||
},
|
||||
toggleSettings() {
|
||||
this.settingsVisible = !this.settingsVisible;
|
||||
},
|
||||
showAnnouncement() {
|
||||
this.showAnnouncement = true;
|
||||
},
|
||||
hideAnnouncement() {
|
||||
this.showAnnouncement = false;
|
||||
},
|
||||
toggleAnnouncement() {
|
||||
this.announcementVisible = !this.announcementVisible;
|
||||
},
|
||||
showInfoModal() {
|
||||
this.infoModalVisible = true;
|
||||
},
|
||||
hideInfoModal() {
|
||||
this.infoModalVisible = false;
|
||||
},
|
||||
toggleInfoModal() {
|
||||
this.infoModalVisible = !this.infoModalVisible;
|
||||
},
|
||||
showHardwareStats() {
|
||||
this.hardwareStatsVisible = true;
|
||||
},
|
||||
hideHardwareStats() {
|
||||
this.hardwareStatsVisible = false;
|
||||
},
|
||||
toggleHardwareStats() {
|
||||
this.hardwareStatsVisible = !this.hardwareStatsVisible;
|
||||
},
|
||||
startLoading() {
|
||||
this.loading = true;
|
||||
},
|
||||
stopLoading() {
|
||||
this.loading = false;
|
||||
},
|
||||
}
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
import { state } from './store.js';
|
||||
import { temperatureFormat, nodesDisconnectedAge, BASE_PATH } from './config.js';
|
||||
import { BASE_PATH } from '@/config';
|
||||
import { useConfigStore } from '@/stores/configStore';
|
||||
import moment from 'moment';
|
||||
|
||||
export const timeSpans = {
|
||||
@ -19,6 +19,10 @@ export function getTimeSpan(value) {
|
||||
return timeSpans[value];
|
||||
};
|
||||
|
||||
export function isValidCoordinates(lat, lng) {
|
||||
return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
|
||||
}
|
||||
|
||||
// convert node id to a hex colour
|
||||
export function getNodeColor(nodeId) {
|
||||
return "#" + (nodeId & 0x00FFFFFF).toString(16).padStart(6, '0');
|
||||
@ -202,25 +206,10 @@ export function celsiusToFahrenheit(celsius) {
|
||||
return (celsius * 9/5) + 32;
|
||||
};
|
||||
|
||||
|
||||
/** operates on state */
|
||||
|
||||
// find node by id
|
||||
export function findNodeById(id) {
|
||||
const node = state.nodes.find((node) => node.node_id.toString() === id.toString());
|
||||
if (node) return node;
|
||||
return null;
|
||||
};
|
||||
|
||||
// find node marker by id
|
||||
export function findNodeMarkerById(id) {
|
||||
return state.nodeMarkers[id] ?? null;
|
||||
};
|
||||
|
||||
/** operates on config */
|
||||
|
||||
export function formatTemperature(celsius) {
|
||||
switch (temperatureFormat.value) {
|
||||
switch (useConfigStore().temperatureFormat) {
|
||||
case "celsius": {
|
||||
return `${Number(celsius).toFixed(0)}ºC`;
|
||||
}
|
||||
@ -232,7 +221,7 @@ export function formatTemperature(celsius) {
|
||||
}
|
||||
|
||||
export function getTemperatureUnit() {
|
||||
switch (temperatureFormat.value) {
|
||||
switch (useConfigStore().temperatureFormat) {
|
||||
case "celsius": return "ºC";
|
||||
case "fahrenheit": return "ºF";
|
||||
}
|
||||
@ -246,5 +235,5 @@ export function buildPath(endpoint) {
|
||||
export function hasNodeUplinkedToMqttRecently(node) {
|
||||
const now = moment();
|
||||
const millisecondsSinceNodeLastUplinkedToMqtt = now.diff(moment(node.mqtt_connection_state_updated_at));
|
||||
return millisecondsSinceNodeLastUplinkedToMqtt < nodesDisconnectedAge.value * 1000;
|
||||
return millisecondsSinceNodeLastUplinkedToMqtt < useConfigStore().nodesDisconnectedAge.value * 1000;
|
||||
}
|
||||
@ -1,27 +1,32 @@
|
||||
<script setup>
|
||||
import Header from '../components/Header.vue';
|
||||
import InfoModal from '../components/InfoModal.vue';
|
||||
import HardwareModelList from '../components/HardwareModelList.vue';
|
||||
import Settings from '../components/Settings.vue';
|
||||
import NodeInfo from '../components/NodeInfo.vue';
|
||||
import NodeNeighborsModal from '../components/NodeNeighborsModal.vue';
|
||||
import NodePositionHistoryModal from '../components/NodePositionHistoryModal.vue';
|
||||
import TracerouteInfo from '../components/TracerouteInfo.vue';
|
||||
import Announcement from '../components/Announcement.vue';
|
||||
import Header from '@/components/Header.vue';
|
||||
import InfoModal from '@/components/InfoModal.vue';
|
||||
import HardwareModelList from '@/components/HardwareModelList.vue';
|
||||
import Settings from '@/components/Settings.vue';
|
||||
import NodeInfo from '@/components/NodeInfo.vue';
|
||||
import NodeNeighborsModal from '@/components/NodeNeighborsModal.vue';
|
||||
import NodePositionHistoryModal from '@/components/NodePositionHistoryModal.vue';
|
||||
import TracerouteInfo from '@/components/TracerouteInfo.vue';
|
||||
import Announcement from '@/components/Announcement.vue';
|
||||
import NodeTooltip from '@/components/NodeTooltip.vue';
|
||||
|
||||
import { useUIStore } from '@/stores/uiStore';
|
||||
import { useMapStore } from '@/stores/mapStore';
|
||||
import { useNodeProcessor } from '@/composables/useNodeProcessor';
|
||||
|
||||
|
||||
import axios from 'axios';
|
||||
import moment from 'moment';
|
||||
import maplibregl from 'maplibre-gl';
|
||||
import LegendControl from '../LegendControl.js';
|
||||
import LayerControl from '../LayerControl.js';
|
||||
import { onMounted, useTemplateRef, ref, watch, markRaw } from 'vue';
|
||||
import { state } from '../store.js';
|
||||
import LegendControl from '@/LegendControl';
|
||||
import LayerControl from '@/LayerControl';
|
||||
import { onMounted, useTemplateRef, ref, watch, markRaw, nextTick, createApp, shallowRef } from 'vue';
|
||||
import { state } from '@/store';
|
||||
import {
|
||||
layerGroups,
|
||||
tileLayers,
|
||||
icons,
|
||||
getTooltipContentForWaypoint,
|
||||
getTooltipContentForNode,
|
||||
getNeighbourTooltipContent,
|
||||
clearAllNodes,
|
||||
clearAllNeighbors,
|
||||
@ -35,7 +40,7 @@ import {
|
||||
clearMap,
|
||||
setMap,
|
||||
getMap,
|
||||
} from '../map.js';
|
||||
} from '@/map';
|
||||
import {
|
||||
nodesMaxAge,
|
||||
nodesDisconnectedAge,
|
||||
@ -50,7 +55,7 @@ import {
|
||||
hasSeenInfoModal,
|
||||
lastSeenAnnouncementId,
|
||||
CURRENT_ANNOUNCEMENT_ID,
|
||||
} from '../config.js';
|
||||
} from '@/config';
|
||||
import {
|
||||
getColorForSnr,
|
||||
getPositionPrecisionInMeters,
|
||||
@ -60,13 +65,22 @@ import {
|
||||
formatPositionPrecision,
|
||||
isMobile,
|
||||
elementOrAnyAncestorHasClass,
|
||||
findNodeById,
|
||||
findNodeMarkerById,
|
||||
hasNodeUplinkedToMqttRecently,
|
||||
buildPath,
|
||||
} from '../utils.js';
|
||||
isValidCoordinates,
|
||||
} from '@/utils';
|
||||
const mapEl = useTemplateRef('appMap');
|
||||
|
||||
// related to node popup on hover/click
|
||||
const popup = shallowRef(null); // Keep a single popup reference
|
||||
const popupTarget = ref(null); // DOM container for Vue teleport
|
||||
const isTooltipLocked = ref(false); // Locked open (via click)
|
||||
const selectedNode = ref(null);
|
||||
|
||||
const ui = useUIStore();
|
||||
const mapData = useMapStore();
|
||||
const { parseNodesResponse } = useNodeProcessor();
|
||||
|
||||
// watchers
|
||||
watch(
|
||||
() => state.positionHistoryDateTimeTo,
|
||||
@ -85,50 +99,82 @@ watch(
|
||||
}, {deep: true}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => mapData.nodeMarkers,
|
||||
(newMarkers, oldMarkers) => {
|
||||
// This will trigger whenever nodeMarkers change
|
||||
updateMapNodeSource(newMarkers);
|
||||
},
|
||||
{ deep: true } // Ensure that nested changes are also observed
|
||||
);
|
||||
|
||||
function updateMapNodeSource(markers) {
|
||||
const source = getMap().getSource('nodes');
|
||||
if (source) {
|
||||
source.setData({
|
||||
type: 'FeatureCollection',
|
||||
features: Object.values(markers),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showNodeOutline(id) {
|
||||
// remove any existing node circle
|
||||
clearNodeOutline();
|
||||
|
||||
// find node marker by id
|
||||
const nodeMarker = state.nodeMarkers[id];
|
||||
const nodeMarker = mapData.findNodeMarkerById(id);
|
||||
if (!nodeMarker) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find node by id
|
||||
const node = findNodeById(id);
|
||||
const node = mapData.findNodeById(id);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
// add position precision circle around node
|
||||
if(node.position_precision != null && node.position_precision > 0 && node.position_precision < 32){
|
||||
state.selectedNodeOutlineCircle = L.circle(nodeMarker.getLatLng(), {
|
||||
radius: getPositionPrecisionInMeters(node.position_precision),
|
||||
}).addTo(getMap());
|
||||
if (node.position_precision != null && node.position_precision > 0 && node.position_precision < 32) {
|
||||
const zoomLevel = getMap().getZoom(); // Get current zoom level
|
||||
const radiusInMeters = getPositionPrecisionInMeters(node.position_precision);
|
||||
const zoomFactor = 1 - (zoomLevel / 20);
|
||||
let adjustedRadius = radiusInMeters * zoomFactor;
|
||||
// Set a minimum radius (e.g., 10 meters) to avoid disappearing circles
|
||||
adjustedRadius = Math.max(adjustedRadius, 10);
|
||||
console.log(adjustedRadius)
|
||||
|
||||
// Create a circle as a GeoJSON feature
|
||||
const geojsonCircle = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: nodeMarker.geometry.coordinates,
|
||||
},
|
||||
properties: {
|
||||
radius: adjustedRadius // You can store the radius in the properties if needed
|
||||
}
|
||||
};
|
||||
getMap().getSource('node-outlines').setData(geojsonCircle);
|
||||
}
|
||||
}
|
||||
|
||||
window.showNodeDetails = function(id) {
|
||||
// find node
|
||||
const node = findNodeById(id);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
state.selectedNode = node;
|
||||
function showNeighbors(type, id) {
|
||||
let func = showNodeNeighboursThatHeardUs;
|
||||
if (type === 'weHeard') func = showNodeNeighboursThatWeHeard;
|
||||
func(id);
|
||||
}
|
||||
|
||||
window.showNodeNeighboursThatHeardUs = function(id) {
|
||||
function showNodeNeighboursThatHeardUs(id) {
|
||||
cleanUpNodeNeighbors();
|
||||
|
||||
// find node
|
||||
const node = findNodeById(id);
|
||||
const node = mapData.findNodeById(id);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find node marker
|
||||
const nodeMarker = findNodeMarkerById(node.node_id);
|
||||
const nodeMarker = mapData.findNodeMarkerById(node.node_id);
|
||||
if (!nodeMarker) {
|
||||
return;
|
||||
}
|
||||
@ -139,7 +185,7 @@ window.showNodeNeighboursThatHeardUs = function(id) {
|
||||
|
||||
// find all nodes that have us as a neighbour
|
||||
const neighbourNodeInfos = [];
|
||||
for (const nodeThatMayHaveHeardUs of state.nodes) {
|
||||
for (const nodeThatMayHaveHeardUs of mapData.nodes) {
|
||||
// find our node in this nodes neighbours
|
||||
const nodeNeighbours = nodeThatMayHaveHeardUs.neighbours ?? [];
|
||||
const neighbour = nodeNeighbours.find(function(neighbour) {
|
||||
@ -172,7 +218,7 @@ window.showNodeNeighboursThatHeardUs = function(id) {
|
||||
}
|
||||
|
||||
// find neighbour node marker
|
||||
const neighbourNodeMarker = findNodeMarkerById(neighbourNode.node_id);
|
||||
const neighbourNodeMarker = mapData.findNodeMarkerById(neighbourNode.node_id);
|
||||
if (!neighbourNodeMarker) {
|
||||
continue;
|
||||
}
|
||||
@ -213,17 +259,17 @@ window.showNodeNeighboursThatHeardUs = function(id) {
|
||||
}
|
||||
}
|
||||
|
||||
window.showNodeNeighboursThatWeHeard = function(id) {
|
||||
function showNodeNeighboursThatWeHeard(id) {
|
||||
cleanUpNodeNeighbors();
|
||||
|
||||
// find node
|
||||
const node = findNodeById(id);
|
||||
const node = mapData.findNodeById(id);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
|
||||
// find node marker
|
||||
const nodeMarker = findNodeMarkerById(node.node_id);
|
||||
const nodeMarker = mapData.findNodeMarkerById(node.node_id);
|
||||
if (!nodeMarker) {
|
||||
return;
|
||||
}
|
||||
@ -243,12 +289,12 @@ window.showNodeNeighboursThatWeHeard = function(id) {
|
||||
continue;
|
||||
}
|
||||
// find neighbor node
|
||||
const neighbourNode = findNodeById(neighbour.node_id);
|
||||
const neighbourNode = mapData.findNodeById(neighbour.node_id);
|
||||
if (!neighbourNode) {
|
||||
continue;
|
||||
}
|
||||
// find neighbor node marker
|
||||
const neighbourNodeMarker = findNodeMarkerById(neighbour.node_id);
|
||||
const neighbourNodeMarker = mapData.findNodeMarkerById(neighbour.node_id);
|
||||
if (!neighbourNodeMarker) {
|
||||
continue;
|
||||
}
|
||||
@ -287,13 +333,10 @@ window.showNodeNeighboursThatWeHeard = function(id) {
|
||||
}
|
||||
}
|
||||
|
||||
function isValidCoordinates(lat, lng) {
|
||||
return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
|
||||
}
|
||||
|
||||
function onNodesUpdated(nodes) {
|
||||
const now = moment();
|
||||
state.nodes = [];
|
||||
// clear cach
|
||||
mapData.clearNodes();
|
||||
for (const node of nodes) {
|
||||
// skip nodes older than configured node max age
|
||||
if (nodesMaxAge.value) {
|
||||
@ -304,7 +347,7 @@ function onNodesUpdated(nodes) {
|
||||
}
|
||||
|
||||
// add node to cache
|
||||
state.nodes.push(node);
|
||||
mapData.addNode(node);
|
||||
|
||||
// skip nodes without position
|
||||
if (!node.latitude || !node.longitude) {
|
||||
@ -356,23 +399,24 @@ function onNodesUpdated(nodes) {
|
||||
}
|
||||
};
|
||||
|
||||
// add maker to cache
|
||||
state.nodeMarkers[node.node_id] = marker;
|
||||
// add marker to cache
|
||||
mapData.addNodeMarker(marker);
|
||||
}
|
||||
// set data
|
||||
const source = getMap().getSource('nodes');
|
||||
if (source) {
|
||||
source.setData({
|
||||
type: 'FeatureCollection',
|
||||
features: Object.values(state.nodeMarkers),
|
||||
features: Object.values(mapData.nodeMarkers),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onWaypointsUpdated(waypoints) {
|
||||
state.waypoints = [];
|
||||
const now = moment();
|
||||
// add nodes
|
||||
// clear cache
|
||||
mapData.clearWaypoints();
|
||||
// add waypoints
|
||||
for (const waypoint of waypoints) {
|
||||
// skip waypoints older than configured waypoint max age
|
||||
if (waypointsMaxAge.value) {
|
||||
@ -401,7 +445,7 @@ function onWaypointsUpdated(waypoints) {
|
||||
waypoint.latitude = waypoint.latitude / 10000000;
|
||||
waypoint.longitude = waypoint.longitude / 10000000;
|
||||
|
||||
// determine emoji to show as marker icon
|
||||
// TODO: determine emoji to show as marker icon
|
||||
const emoji = waypoint.icon === 0 ? 128205 : waypoint.icon;
|
||||
const emojiText = String.fromCodePoint(emoji);
|
||||
|
||||
@ -409,8 +453,6 @@ function onWaypointsUpdated(waypoints) {
|
||||
continue;
|
||||
}
|
||||
|
||||
state.waypoints.push(waypoint);
|
||||
|
||||
// create waypoint marker
|
||||
const marker = {
|
||||
type: 'Feature',
|
||||
@ -422,19 +464,20 @@ function onWaypointsUpdated(waypoints) {
|
||||
coordinates: [waypoint.longitude, waypoint.latitude]
|
||||
}
|
||||
};
|
||||
// add maker to cache
|
||||
state.waypointMarkers.push(marker);
|
||||
// add waypoint & marker to cache
|
||||
mapData.addWaypoint(waypoint, marker);
|
||||
}
|
||||
// set data
|
||||
const source = getMap().getSource('waypoints');
|
||||
if (source) {
|
||||
source.setData({
|
||||
type: 'FeatureCollection',
|
||||
features: Object.values(state.waypointMarkers),
|
||||
features: Object.values(mapData.waypointMarkers),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// TODO
|
||||
function onPositionHistoryUpdated(updatedPositionHistories) {
|
||||
let positionHistoryLinesCords = [];
|
||||
// add nodes
|
||||
@ -445,7 +488,7 @@ function onPositionHistoryUpdated(updatedPositionHistories) {
|
||||
}
|
||||
|
||||
// find node this position is for
|
||||
const node = findNodeById(positionHistory.node_id);
|
||||
const node = mapData.findNodeById(positionHistory.node_id);
|
||||
if (!node) {
|
||||
continue;
|
||||
}
|
||||
@ -483,7 +526,7 @@ function onPositionHistoryUpdated(updatedPositionHistories) {
|
||||
|
||||
// add gateway info if available
|
||||
if (positionHistory.gateway_id) {
|
||||
const gatewayNode = findNodeById(positionHistory.gateway_id);
|
||||
const gatewayNode = mapData.findNodeById(positionHistory.gateway_id);
|
||||
const gatewayNodeInfo = gatewayNode ? `[${gatewayNode.short_name}] ${gatewayNode.long_name}` : "???";
|
||||
tooltip += `<br/>Heard by: <a href="javascript:void(0);" onclick="goToNode(${positionHistory.gateway_id})">${gatewayNodeInfo}</a>`;
|
||||
}
|
||||
@ -504,22 +547,20 @@ function onPositionHistoryUpdated(updatedPositionHistories) {
|
||||
}
|
||||
|
||||
function goToRandomNode() {
|
||||
if (state.nodes.length > 0) {
|
||||
const randomNode = state.nodes[Math.floor(Math.random() * state.nodes.length)];
|
||||
if (randomNode) {
|
||||
// go to node
|
||||
if (goToNode(randomNode.node_id)) {
|
||||
return;
|
||||
}
|
||||
// fallback to showing node details since we can't go to the node
|
||||
window.showNodeDetails(randomNode.node_id);
|
||||
const randomNode = mapData.findRandomNode();
|
||||
if (randomNode) {
|
||||
// go to node
|
||||
if (goToNode(randomNode.node_id)) {
|
||||
return;
|
||||
}
|
||||
// fallback to showing node details since we can't go to the node
|
||||
state.selectedNode = randomNode;
|
||||
}
|
||||
}
|
||||
|
||||
function showNodePositionHistory(nodeId) {
|
||||
// find node
|
||||
const node = findNodeById(nodeId);
|
||||
const node = mapData.findNodeById(nodeId);
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
@ -527,7 +568,7 @@ function showNodePositionHistory(nodeId) {
|
||||
// update ui
|
||||
state.selectedNode = null;
|
||||
state.selectedNodeToShowPositionHistory = node;
|
||||
state.positionHistoryModalExpanded = true;
|
||||
ui.expandPositionHistoryModal();
|
||||
|
||||
// close node info tooltip as position history shows under it
|
||||
closeAllTooltips();
|
||||
@ -560,29 +601,33 @@ function loadNodePositionHistory(nodeId) {
|
||||
});
|
||||
}
|
||||
|
||||
function reload(goToNodeId, zoom) {
|
||||
async function reload(goToNodeId, zoom) {
|
||||
// show loading
|
||||
state.loading = true;
|
||||
ui.startLoading();
|
||||
// clear previous data
|
||||
clearMap();
|
||||
axios.get(buildPath('/api/v1/nodes')).then(response => {
|
||||
// update nodes
|
||||
onNodesUpdated(response.data.nodes);
|
||||
|
||||
try {
|
||||
const response = await axios.get(buildPath('/api/v1/nodes'));
|
||||
parseNodesResponse(response.data.nodes);
|
||||
} catch (e) {
|
||||
console.error('Error fetching nodes:', e);
|
||||
} finally {
|
||||
// hide loading
|
||||
state.loading = false;
|
||||
});
|
||||
ui.stopLoading();
|
||||
}
|
||||
}
|
||||
|
||||
function goToNode(id, animate, zoom){
|
||||
// find node
|
||||
const node = findNodeById(id);
|
||||
const node = mapData.findNodeById(id);
|
||||
if (!node) {
|
||||
alert("Could not find node: " + id);
|
||||
return false;
|
||||
}
|
||||
|
||||
// find node marker by id
|
||||
const nodeMarker = findNodeMarkerById(id);
|
||||
const nodeMarker = mapData.findNodeMarkerById(id);
|
||||
if (!nodeMarker) {
|
||||
return false;
|
||||
}
|
||||
@ -591,19 +636,18 @@ function goToNode(id, animate, zoom){
|
||||
closeAllPopups();
|
||||
closeAllTooltips();
|
||||
|
||||
// select node
|
||||
showNodeOutline(id);
|
||||
|
||||
// fly to node marker
|
||||
const shouldAnimate = animate != null ? animate : true;
|
||||
getMap().flyTo(nodeMarker.getLatLng(), parseFloat(zoom || goToNodeZoomLevel.value), {
|
||||
animate: enableMapAnimations.value ? shouldAnimate : false,
|
||||
const coords = nodeMarker.geometry.coordinates;
|
||||
getMap().flyTo({
|
||||
center: coords,
|
||||
zoom: parseFloat(zoom || goToNodeZoomLevel.value)
|
||||
});
|
||||
|
||||
// open tooltip for node
|
||||
getMap().openTooltip(getTooltipContentForNode(node), nodeMarker.getLatLng(), {
|
||||
interactive: true, // allow clicking buttons inside tooltip
|
||||
permanent: true, // don't auto dismiss when clicking buttons inside tooltip
|
||||
getMap().once('moveend', async () => {
|
||||
// add position bubble for node
|
||||
showNodeOutline(id);
|
||||
// open popup for node
|
||||
await openLockedTooltipFromNode(nodeMarker);
|
||||
});
|
||||
|
||||
// successfully went to node
|
||||
@ -613,10 +657,9 @@ function goToNode(id, animate, zoom){
|
||||
|
||||
function onSearchResultNodeClick(node) {
|
||||
// clear search
|
||||
state.searchText = '';
|
||||
|
||||
// hide search
|
||||
state.mobileSearchVisible = false;
|
||||
ui.search('');
|
||||
// hide mobile search
|
||||
ui.hideMobileSearch();
|
||||
|
||||
// go to node
|
||||
if (goToNode(node.node_id) ){
|
||||
@ -624,7 +667,7 @@ function onSearchResultNodeClick(node) {
|
||||
}
|
||||
|
||||
// fallback to showing node details since we can't go to the node
|
||||
window.showNodeDetails(node.node_id);
|
||||
state.selectedNode = node;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -669,18 +712,18 @@ onMounted(() => {
|
||||
layers: {
|
||||
'All': {
|
||||
type: 'layer_control',
|
||||
hideAllExcept: ['nodes'],
|
||||
hideAllExcept: ['nodes', 'node-outlines'],
|
||||
disableCluster: 'nodes',
|
||||
},
|
||||
'Routers': {
|
||||
type: 'source_filter',
|
||||
source: 'nodes',
|
||||
getter: function() { return Object.values(state.nodeMarkers) },
|
||||
getter: function() { return Object.values(mapData.nodeMarkers) },
|
||||
filter: function (node) { return ['ROUTER', 'ROUTER_CLIENT', 'ROUTER_LATE', 'REPEATER'].includes(node.properties.role); }
|
||||
},
|
||||
'Clustered': {
|
||||
type: 'layer_control',
|
||||
hideAllExcept: ['clusters', 'unclustered-points', 'cluster-count'],
|
||||
hideAllExcept: ['clusters', 'unclustered-points', 'cluster-count', 'node-outlines'],
|
||||
},
|
||||
'None': {
|
||||
type: 'layer_control',
|
||||
@ -729,6 +772,10 @@ onMounted(() => {
|
||||
features: [],
|
||||
}
|
||||
});
|
||||
getMap().addSource('node-outlines', {
|
||||
type: 'geojson',
|
||||
data: [],
|
||||
});
|
||||
map.addLayer({
|
||||
id: 'clusters',
|
||||
type: 'circle',
|
||||
@ -800,6 +847,17 @@ onMounted(() => {
|
||||
'circle-stroke-color': '#ffffff'
|
||||
}
|
||||
});
|
||||
getMap().addLayer({
|
||||
id: 'node-outlines',
|
||||
type: 'circle',
|
||||
source: 'node-outlines',
|
||||
paint: {
|
||||
'circle-radius': ['get', 'radius'], // Use the radius from properties
|
||||
'circle-color': 'rgba(255, 0, 0, 0.5)', // Adjust the color as needed
|
||||
'circle-stroke-width': 2,
|
||||
'circle-stroke-color': '#FF0000'
|
||||
}
|
||||
});
|
||||
|
||||
map.on('mouseenter', 'clusters', () => {
|
||||
map.getCanvas().style.cursor = 'pointer';
|
||||
@ -827,58 +885,161 @@ onMounted(() => {
|
||||
// the unclustered-point layer, open a popup at
|
||||
// the location of the feature, with
|
||||
// description HTML from its properties.
|
||||
map.on('click', 'unclustered-points', showPopupForEvent);
|
||||
map.on('mouseenter', 'unclustered-points', showPopupForEvent);
|
||||
map.on('click', 'nodes', showPopupForEvent);
|
||||
map.on('mouseenter', 'nodes', showPopupForEvent);
|
||||
map.on('click', 'unclustered-points', handleNodePopup);
|
||||
map.on('mouseenter', 'unclustered-points', handleNodePopup);
|
||||
map.on('mouseleave', 'unclustered-points', handleNodePopup);
|
||||
|
||||
map.on('click', 'nodes', handleNodePopup);
|
||||
map.on('mouseenter', 'nodes', handleNodePopup);
|
||||
map.on('mouseleave', 'nodes', handleNodePopup);
|
||||
|
||||
layerControl.applyDefaults();
|
||||
|
||||
reload();
|
||||
})
|
||||
});
|
||||
|
||||
function measurePopupSize(htmlContent) {
|
||||
const popupContainer = document.createElement('div');
|
||||
popupContainer.className = 'maplibregl-popup maplibregl-popup-anchor-bottom';
|
||||
popupContainer.style.position = 'absolute';
|
||||
popupContainer.style.top = '-9999px';
|
||||
popupContainer.style.left = '-9999px';
|
||||
popupContainer.style.visibility = 'hidden';
|
||||
function measureTooltipSize(node) {
|
||||
return new Promise((resolve) => {
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'absolute';
|
||||
container.style.top = '-9999px';
|
||||
container.style.left = '-9999px';
|
||||
container.style.visibility = 'hidden';
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'maplibregl-popup-content';
|
||||
content.innerHTML = htmlContent;
|
||||
document.body.appendChild(container);
|
||||
|
||||
popupContainer.appendChild(content);
|
||||
document.body.appendChild(popupContainer);
|
||||
const app = createApp(NodeTooltip, { node });
|
||||
app.mount(container);
|
||||
|
||||
const width = popupContainer.offsetWidth;
|
||||
const height = popupContainer.offsetHeight;
|
||||
// Let Vue render
|
||||
requestAnimationFrame(() => {
|
||||
const width = container.offsetWidth;
|
||||
const height = container.offsetHeight;
|
||||
|
||||
document.body.removeChild(popupContainer);
|
||||
// Cleanup
|
||||
app.unmount();
|
||||
document.body.removeChild(container);
|
||||
|
||||
return { width, height };
|
||||
resolve({ width, height });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showPopupForEvent(e) {
|
||||
if (e.features[0].popup) {
|
||||
return; // already has a popup open
|
||||
}
|
||||
const map = getMap();
|
||||
const coordinates = e.features[0].geometry.coordinates.slice();
|
||||
const nodeId = e.features[0].properties.id;
|
||||
const html = getTooltipContentForNode(findNodeById(nodeId));
|
||||
async function openLockedTooltipFromNode(feature) {
|
||||
console.log('openLockedTooltipFromNode', feature);
|
||||
const nodeId = feature?.properties?.id;
|
||||
const node = mapData.findNodeById(nodeId ?? '');
|
||||
const coordinates = feature?.geometry?.coordinates?.slice();
|
||||
|
||||
if (!node || !coordinates) return;
|
||||
|
||||
// Close any existing tooltip first
|
||||
cleanupPopup();
|
||||
|
||||
// Show the tooltip (acts like click)
|
||||
await showTooltip(node, coordinates);
|
||||
|
||||
// Lock it so it doesn't close on hover-out
|
||||
isTooltipLocked.value = true;
|
||||
}
|
||||
|
||||
async function handleNodePopup(e) {
|
||||
const nodeId = e.features?.[0]?.properties?.id;
|
||||
const node = mapData.findNodeById(nodeId ?? '');
|
||||
const coordinates = e.features?.[0]?.geometry?.coordinates?.slice();
|
||||
|
||||
if ((!node || !coordinates) && e.type !== 'mouseleave') return;
|
||||
|
||||
// Mouseenter (hover)
|
||||
if (e.type === 'mouseenter') {
|
||||
if (!isTooltipLocked.value) {
|
||||
await showTooltip(node, coordinates);
|
||||
}
|
||||
}
|
||||
|
||||
// Mouseleave
|
||||
if (e.type === 'mouseleave') {
|
||||
if (!isTooltipLocked.value) {
|
||||
cleanupPopup();
|
||||
}
|
||||
}
|
||||
|
||||
// Click locks the popup open
|
||||
if (e.type === 'click') {
|
||||
if (!isTooltipLocked.value) {
|
||||
// Show the tooltip and only then lock it
|
||||
await showTooltip(node, coordinates);
|
||||
isTooltipLocked.value = true; // Lock after showing the tooltip
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function showTooltip(node, coordinates) {
|
||||
// Don't cleanup immediately if it's locked
|
||||
if (!isTooltipLocked.value) {
|
||||
cleanupPopup();
|
||||
}
|
||||
|
||||
// Create a fresh container
|
||||
const container = document.createElement('div');
|
||||
popupTarget.value = container;
|
||||
document.body.appendChild(container);
|
||||
|
||||
// Set it before rendering
|
||||
selectedNode.value = node;
|
||||
|
||||
// Now wait for Vue to mount into the target
|
||||
await new Promise(resolve => requestAnimationFrame(() => resolve()));
|
||||
|
||||
// get best anchor info
|
||||
const bestPosition = await determineAnchorForNode(node, coordinates);
|
||||
|
||||
// Create MapLibre popup
|
||||
const mapPopup = new maplibregl.Popup({
|
||||
closeButton: false,
|
||||
closeOnClick: true,
|
||||
anchor: bestPosition.anchor,
|
||||
})
|
||||
.setLngLat(coordinates)
|
||||
.setDOMContent(container)
|
||||
.addTo(getMap());
|
||||
|
||||
popup.value = mapPopup;
|
||||
|
||||
mapPopup.on('close', () => {
|
||||
isTooltipLocked.value = false;
|
||||
cleanupPopup();
|
||||
});
|
||||
}
|
||||
|
||||
function cleanupPopup() {
|
||||
try {
|
||||
if (popup.value) {
|
||||
popup.value.remove();
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Error removing popup:', e);
|
||||
}
|
||||
popup.value = null;
|
||||
selectedNode.value = null;
|
||||
|
||||
if (popupTarget.value && popupTarget.value.parentNode) {
|
||||
popupTarget.value.parentNode.removeChild(popupTarget.value);
|
||||
}
|
||||
|
||||
popupTarget.value = null;
|
||||
}
|
||||
|
||||
async function determineAnchorForNode(node, coordinates) {
|
||||
// Measure the popup size
|
||||
const map = getMap();
|
||||
const { width: popupWidth, height: popupHeight } = await measureTooltipSize(node);
|
||||
const mapContainer = map.getContainer();
|
||||
const mapWidth = mapContainer.offsetWidth;
|
||||
const mapHeight = mapContainer.offsetHeight;
|
||||
|
||||
// Get screen point of the marker
|
||||
const screenPoint = map.project(coordinates);
|
||||
|
||||
// Measure the popup size
|
||||
const { width: popupWidth, height: popupHeight } = measurePopupSize(html);
|
||||
|
||||
// Calculate available space around the marker
|
||||
const padding = 10;
|
||||
const headerHeight = document.querySelector('header')?.offsetHeight || 0;
|
||||
@ -955,42 +1116,17 @@ function showPopupForEvent(e) {
|
||||
bestScore = visibilityScore;
|
||||
bestOption = key;
|
||||
}
|
||||
});
|
||||
|
||||
const popup = new maplibregl.Popup({
|
||||
closeButton: true,
|
||||
closeOnClick: true,
|
||||
anchor: popupOptions[bestOption].anchor,
|
||||
});
|
||||
|
||||
popup
|
||||
.setLngLat(coordinates)
|
||||
.setHTML(html)
|
||||
.addTo(map);
|
||||
|
||||
if (e.type === 'mouseenter') {
|
||||
const removePopup = () => {
|
||||
popup.remove();
|
||||
getMap().off('mousemove', onMouseMove);
|
||||
getMap().getCanvas().style.cursor = '';
|
||||
};
|
||||
const onMouseMove = (e) => {
|
||||
const features = getMap().queryRenderedFeatures(e.point, { layers: ['unclustered-points'] });
|
||||
if (!features.length) {
|
||||
removePopup();
|
||||
}
|
||||
};
|
||||
getMap().on('mousemove', onMouseMove);
|
||||
}
|
||||
e.features[0].popup = popup;
|
||||
return popupOptions[bestOption];
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (lastSeenAnnouncementId.value !== CURRENT_ANNOUNCEMENT_ID) {
|
||||
state.announcementVisible = true;
|
||||
ui.showAnnouncement();
|
||||
}
|
||||
if (!isMobile() && hasSeenInfoModal.value === false) {
|
||||
state.infoModalVisible = true;
|
||||
ui.showInfoModal();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -998,7 +1134,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<div class="flex flex-col h-full w-full overflow-hidden">
|
||||
<div class="flex flex-col h-full">
|
||||
<header>
|
||||
<header v-click-outside="ui.clearSearch">
|
||||
<Announcement />
|
||||
<Header
|
||||
@reload="reload"
|
||||
@ -1016,4 +1152,7 @@ onMounted(() => {
|
||||
<NodeNeighborsModal @dismiss="cleanUpNodeNeighbors" />
|
||||
<NodePositionHistoryModal @dismiss="cleanUpPositionHistory" />
|
||||
<TracerouteInfo @go-to="goToNode" />
|
||||
<Teleport v-if="popupTarget && selectedNode" :to="popupTarget">
|
||||
<NodeTooltip :node="selectedNode" @show-neighbors="showNeighbors"/>
|
||||
</Teleport>
|
||||
</template>
|
||||
Reference in New Issue
Block a user