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

phase out old config stuff

Browse Source
This commit is contained in:
Matt
2025-04-17 19:16:41 -04:00
parent 63b823a7a1
commit 8e99669487
16 changed files with 44 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
webapp/frontend/package-lock.json generated
View File

@ -9,7 +9,6 @@
"version": "0.0.0",
"dependencies": {
"@tailwindcss/vite": "^4.1.4",
"@vueuse/core": "^13.1.0",
"axios": "^1.8.4",
"chart.js": "^4.4.8",
"chartjs-adapter-moment": "^1.0.1",
@ -1741,12 +1740,6 @@
"@types/geojson": "*"
}
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.21",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
"integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
"license": "MIT"
},
"node_modules/@vitejs/plugin-vue": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.3.tgz",
@ -1981,44 +1974,6 @@
"integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
"license": "MIT"
},
"node_modules/@vueuse/core": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.1.0.tgz",
"integrity": "sha512-PAauvdRXZvTWXtGLg8cPUFjiZEddTqmogdwYpnn60t08AA5a8Q4hZokBnpTOnVNqySlFlTcRYIC8OqreV4hv3Q==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.21",
"@vueuse/metadata": "13.1.0",
"@vueuse/shared": "13.1.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/@vueuse/metadata": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.1.0.tgz",
"integrity": "sha512-+TDd7/a78jale5YbHX9KHW3cEDav1lz1JptwDvep2zSG8XjCsVE+9mHIzjTOaPbHUAk5XiE4jXLz51/tS+aKQw==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.1.0.tgz",
"integrity": "sha512-IVS/qRRjhPTZ6C2/AM3jieqXACGwFZwWTdw5sNTSKk2m/ZpkuuN+ri+WCVUP8TqaKwJYt/KuMwmXspMAw8E6ew==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/acorn": {
"version": "8.14.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",

1
webapp/frontend/package.json
View File

@ -10,7 +10,6 @@
},
"dependencies": {
"@tailwindcss/vite": "^4.1.4",
"@vueuse/core": "^13.1.0",
"axios": "^1.8.4",
"chart.js": "^4.4.8",
"chartjs-adapter-moment": "^1.0.1",

8
webapp/frontend/src/components/Announcement.vue
View File

@ -1,11 +1,13 @@
<script setup>
import { lastSeenAnnouncementId, CURRENT_ANNOUNCEMENT_ID } from '@/config';
import { CURRENT_ANNOUNCEMENT_ID } from '@/config';
import { useUIStore } from '@/stores/uiStore';
import { useConfigStore } from '@/stores/configStore';
const ui = useUIStore();
const config = useConfigStore();
function dismissAnnouncement() {
if (lastSeenAnnouncementId.value != CURRENT_ANNOUNCEMENT_ID) {
lastSeenAnnouncementId.value = CURRENT_ANNOUNCEMENT_ID;
if (config.lastSeenAnnouncementId != CURRENT_ANNOUNCEMENT_ID) {
config.lastSeenAnnouncementId = CURRENT_ANNOUNCEMENT_ID;
}
ui.hideAnnouncement();
}

2
webapp/frontend/src/components/Chart/PowerMetrics/ChannelData.vue
View File

@ -1,6 +1,6 @@
<script setup>
import { selectedNodeLatestPowerMetric } from '@/store.js';
import { selectedNodeLatestPowerMetric } from '@/store';
const props = defineProps({
channel: Number, // Channel number (1, 2, or 3)
});

7
webapp/frontend/src/components/InfoModal.vue
View File

@ -1,12 +1,13 @@
<script setup>
import { hasSeenInfoModal } from '@/config';
import { useConfigStore } from '@/stores/configStore';
import { useUIStore } from '@/stores/uiStore';
const ui = useUIStore();
const config = useConfigStore();
function dismissInfoModal() {
if (hasSeenInfoModal.value === false) {
hasSeenInfoModal.value = true;
if (config.hasSeenInfoModal === false) {
config.hasSeenInfoModal = true;
}
ui.hideInfoModal();
}

2
webapp/frontend/src/components/NodeInfo/DeviceMetricsChart.vue
View File

@ -2,7 +2,7 @@
const props = defineProps(['node']);
import { computed } from 'vue';
import { state } from '@/store.js';
import { state } from '@/store';
import MetricsChart from '@/components/Chart/Metrics.vue';
const chartData = computed(() => {

9
webapp/frontend/src/components/NodeInfo/EnvironmentMetricsChart.vue
View File

@ -1,14 +1,11 @@
<script setup>
const props = defineProps(['node']);
import { ref, computed, onMounted, watch } from 'vue';
import { useConfigStore } from '@/stores/configStore';
import { state } from '@/store.js';
import { formatTemperature } from '@/utils.js';
import { computed } from 'vue';
import { state } from '@/store';
import { formatTemperature } from '@/utils';
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));

2
webapp/frontend/src/components/NodeInfo/LoraConfig.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { getRegionFrequencyRange } from '@/utils.js';
import { getRegionFrequencyRange } from '@/utils';
const props = defineProps({
node: Object,
});

2
webapp/frontend/src/components/NodeInfo/MqttHistory.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { state } from '@/store.js';
import { state } from '@/store';
import moment from 'moment';
import { computed } from 'vue';

2
webapp/frontend/src/components/NodeInfo/PowerMetricsChart.vue
View File

@ -1,6 +1,6 @@
<script setup>
import { computed } from 'vue';
import { state, selectedNodeLatestPowerMetric } from '@/store.js';
import { state, selectedNodeLatestPowerMetric } from '@/store';
import MetricsChart from '@/components/Chart/Metrics.vue';
import ChannelData from '@/components/Chart/PowerMetrics/ChannelData.vue';

2
webapp/frontend/src/components/NodeInfo/Share.vue
View File

@ -2,7 +2,7 @@
const props = defineProps({
node: Object,
});
import { getShareLinkForNode, copyShareLinkForNode } from '@/utils.js';
import { getShareLinkForNode, copyShareLinkForNode } from '@/utils';
</script>
<template>

2
webapp/frontend/src/components/NodeInfo/Traceroutes.vue
View File

@ -1,7 +1,7 @@
<script setup>
const emit = defineEmits(['showTraceRoute']);
import moment from 'moment';
import { state } from '@/store.js';
import { state } from '@/store';
import { useMapStore } from '@/stores/mapStore';
const mapData = useMapStore();
</script>

13
webapp/frontend/src/composables/useNodeProcessor.js
View File

@ -1,11 +1,12 @@
import { useMapStore } from '@/stores/mapStore';
import moment from 'moment';
import { nodesMaxAge, nodesOfflineAge } from '@/config'; // TODO: use config store
import { useConfigStore } from '@/stores/configStore';
import { icons } from '@/map';
import { hasNodeUplinkedToMqttRecently, isValidCoordinates } from '@/utils';
export function useNodeProcessor() {
const mapStore = useMapStore(); // Access your mapStore from Pinia
const mapStore = useMapStore();
const config = useConfigStore();
// This function processes new node data
const processNewNodes = (newNodes) => {
@ -15,9 +16,9 @@ export function useNodeProcessor() {
for (const node of newNodes) {
// Skip nodes older than configured node max age
if (nodesMaxAge.value) {
if (config.nodesMaxAge !== null) {
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
if (lastUpdatedAgeInMillis > nodesMaxAge.value * 1000) {
if (lastUpdatedAgeInMillis > config.nodesMaxAge * 1000) {
continue;
}
}
@ -42,9 +43,9 @@ export function useNodeProcessor() {
let icon = icons.mqttDisconnected;
// Use offline icon for nodes older than configured node offline age
if (nodesOfflineAge.value) {
if (config.nodesOfflineAge !== null) {
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
if (lastUpdatedAgeInMillis > nodesOfflineAge.value * 1000) {
if (lastUpdatedAgeInMillis > config.nodesOfflineAge * 1000) {
icon = icons.offline;
}
}

26
webapp/frontend/src/config.js
View File

@ -1,27 +1,3 @@
import { useStorage } from '@vueuse/core';
// static
export const CURRENT_ANNOUNCEMENT_ID = 1;
export const BASE_PATH = 'http://localhost:9090';
// boolean
export const autoUpdatePositionInUrl = useStorage('auto-update-url', true);
export const enableMapAnimations = useStorage('map-animations', true);
export const hasSeenInfoModal = useStorage('seen-info-modal', false);
// time in seconds
export const nodesMaxAge = useStorage('nodes-max-age', null);
export const nodesDisconnectedAge = useStorage('nodes-max-disconnected-age', 604800);
export const nodesOfflineAge = useStorage('nodes-offline-age', null);
export const waypointsMaxAge = useStorage('waypoints-max-age', 604800);
// number
export const goToNodeZoomLevel = useStorage('zoom-to-node', 15);
export const lastSeenAnnouncementId = useStorage('last-seen-announcement-id', 1);
// distance in meters
export const neighboursMaxDistance = useStorage('neighbors-distance', null);
// device info ranges
export const deviceMetricsTimeRange = useStorage('device-metrics-range', '3d');
export const powerMetricsTimeRange = useStorage('power-metrics-range', '3d');
export const environmentMetricsTimeRange = useStorage('environment-metrics-range', '3d');
// map config
export const enabledOverlayLayers = useStorage('enabled-overlay-layers', ['Legend', 'Position History']);
export const selectedTileLayerName = useStorage('selected-tile-layer', 'OpenStreetMap');
export const BASE_PATH = 'http://localhost:9090';

2
webapp/frontend/src/stores/configStore.js
View File

@ -21,7 +21,7 @@ export const useConfigStore = defineStore('config', {
lastSeenAnnouncementId: 1,
// Distance values (for max distances)
neighboursMaxDistance: null,
neighborsMaxDistance: null,
// Device info ranges (can be persisted)
deviceMetricsTimeRange: '3d',

45
webapp/frontend/src/views/HomeView.vue
View File

@ -12,6 +12,7 @@ import NodeTooltip from '@/components/NodeTooltip.vue';
import { useUIStore } from '@/stores/uiStore';
import { useMapStore } from '@/stores/mapStore';
import { useConfigStore } from '@/stores/configStore';
import { useNodeProcessor } from '@/composables/useNodeProcessor';
@ -20,7 +21,7 @@ import moment from 'moment';
import maplibregl from 'maplibre-gl';
import LegendControl from '@/LegendControl';
import LayerControl from '@/LayerControl';
import { onMounted, useTemplateRef, ref, watch, markRaw, nextTick, createApp, shallowRef } from 'vue';
import { onMounted, useTemplateRef, ref, watch, createApp, shallowRef } from 'vue';
import { state } from '@/store';
import {
layerGroups,
@ -41,21 +42,7 @@ import {
setMap,
getMap,
} from '@/map';
import {
nodesMaxAge,
nodesDisconnectedAge,
nodesOfflineAge,
waypointsMaxAge,
enableMapAnimations,
goToNodeZoomLevel,
autoUpdatePositionInUrl,
neighboursMaxDistance,
enabledOverlayLayers,
selectedTileLayerName,
hasSeenInfoModal,
lastSeenAnnouncementId,
CURRENT_ANNOUNCEMENT_ID,
} from '@/config';
import { CURRENT_ANNOUNCEMENT_ID } from '@/config';
import {
getColorForSnr,
getPositionPrecisionInMeters,
@ -75,10 +62,11 @@ const mapEl = useTemplateRef('appMap');
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 selectedNode = ref(null); // related to tooltip only
const ui = useUIStore();
const mapData = useMapStore();
const config = useConfigStore();
const { parseNodesResponse } = useNodeProcessor();
// watchers
@ -227,7 +215,7 @@ function showNodeNeighboursThatHeardUs(id) {
const distanceInMeters = neighbourNodeMarker.getLatLng().distanceTo(nodeMarker.getLatLng()).toFixed(2);
// don't show this neighbour connection if further than config allows
if (neighboursMaxDistance.value != null && parseFloat(distanceInMeters) > neighboursMaxDistance.value) {
if (config.neighborsMaxDistance != null && parseFloat(distanceInMeters) > config.neighborsMaxDistance) {
continue;
}
@ -301,7 +289,7 @@ function showNodeNeighboursThatWeHeard(id) {
// calculate distance in meters between nodes (rounded to 2 decimal places)
const distanceInMeters = nodeMarker.getLatLng().distanceTo(neighbourNodeMarker.getLatLng()).toFixed(2);
if (neighboursMaxDistance.value != null && parseFloat(distanceInMeters) > neighboursMaxDistance.value) {
if (config.neighborsMaxDistance != null && parseFloat(distanceInMeters) > config.neighborsMaxDistance) {
continue;
}
@ -339,9 +327,9 @@ function onNodesUpdated(nodes) {
mapData.clearNodes();
for (const node of nodes) {
// skip nodes older than configured node max age
if (nodesMaxAge.value) {
if (config.nodesMaxAge !== null) {
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
if (lastUpdatedAgeInMillis > nodesMaxAge.value * 1000) {
if (lastUpdatedAgeInMillis > config.nodesMaxAge * 1000) {
continue;
}
}
@ -367,9 +355,9 @@ function onNodesUpdated(nodes) {
let icon = icons.mqttDisconnected;
// use offline icon for nodes older than configured node offline age
if (nodesOfflineAge.value) {
if (config.nodesOfflineAge !== null) {
const lastUpdatedAgeInMillis = now.diff(moment(node.updated_at));
if (lastUpdatedAgeInMillis > nodesOfflineAge.value * 1000) {
if (lastUpdatedAgeInMillis > config.nodesOfflineAge * 1000) {
icon = icons.offline;
}
}
@ -419,9 +407,9 @@ function onWaypointsUpdated(waypoints) {
// add waypoints
for (const waypoint of waypoints) {
// skip waypoints older than configured waypoint max age
if (waypointsMaxAge.value) {
if (config.waypointsMaxAge !== null) {
const lastUpdatedAgeInMillis = now.diff(moment(waypoint.updated_at));
if (lastUpdatedAgeInMillis > waypointsMaxAge.value * 1000) {
if (lastUpdatedAgeInMillis > config.waypointsMaxAge * 1000) {
continue;
}
}
@ -641,7 +629,7 @@ function goToNode(id, animate, zoom){
const coords = nodeMarker.geometry.coordinates;
getMap().flyTo({
center: coords,
zoom: parseFloat(zoom || goToNodeZoomLevel.value)
zoom: parseFloat(zoom || config.goToNodeZoomLevel)
});
getMap().once('moveend', async () => {
// add position bubble for node
@ -927,7 +915,6 @@ function measureTooltipSize(node) {
}
async function openLockedTooltipFromNode(feature) {
console.log('openLockedTooltipFromNode', feature);
const nodeId = feature?.properties?.id;
const node = mapData.findNodeById(nodeId ?? '');
const coordinates = feature?.geometry?.coordinates?.slice();
@ -1122,10 +1109,10 @@ async function determineAnchorForNode(node, coordinates) {
}
onMounted(() => {
if (lastSeenAnnouncementId.value !== CURRENT_ANNOUNCEMENT_ID) {
if (config.lastSeenAnnouncementId !== CURRENT_ANNOUNCEMENT_ID) {
ui.showAnnouncement();
}
if (!isMobile() && hasSeenInfoModal.value === false) {
if (!isMobile() && config.hasSeenInfoModal === false) {
ui.showInfoModal();
}
})