From 349e1080b173b73a7b551ff3df9d78cd73035039 Mon Sep 17 00:00:00 2001
From: Tilen Komel <me@komelt.dev>
Date: Sun, 4 Aug 2024 16:43:19 +0200
Subject: [PATCH 1/4] Colledct positions by default

---
 src/mqtt.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/mqtt.js b/src/mqtt.js
index e5808bc..137129e 100644
--- a/src/mqtt.js
+++ b/src/mqtt.js
@@ -135,11 +135,11 @@ const mqttUsername = options["mqtt-username"] ?? "meshdev";
 const mqttPassword = options["mqtt-password"] ?? "large4cats";
 const mqttTopic = options["mqtt-topic"] ?? "msh/#";
 const collectServiceEnvelopes = options["collect-service-envelopes"] ?? false;
-const collectPositions = options["collect-positions"] ?? false;
+const collectPositions = options["collect-positions"] ?? true;
 const collectTextMessages = options["collect-text-messages"] ?? false;
 const collectWaypoints = options["collect-waypoints"] ?? true;
 const collectNeighbourInfo = options["collect-neighbour-info"] ?? false;
-const collectMapReports = options["collect-map-reports"] ?? false;
+const collectMapReports = options["collect-map-reports"] ?? true;
 const decryptionKeys = options["decryption-keys"] ?? [
     "1PG7OiApB1nwvP+rz05pAQ==", // add default "AQ==" decryption key
 ];

From fc80d771e8321e871543eaa584a3fcda0bd6228e Mon Sep 17 00:00:00 2001
From: Tilen Komel <me@komelt.dev>
Date: Sun, 4 Aug 2024 16:44:01 +0200
Subject: [PATCH 2/4] Added /position-history api endpint

---
 src/index.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/src/index.js b/src/index.js
index deefe20..6f8245d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -428,6 +428,85 @@ app.get('/api/v1/nodes/:nodeId/traceroutes', async (req, res) => {
     }
 });
 
+app.get('/api/v1/nodes/:nodeId/position-history', async (req, res) => {
+    try {
+
+        const nodeId = parseInt(req.params.nodeId);
+        const timeFrom = req.query.time_from ? parseInt(req.query.time_from) : new Date().getTime() - 3600 * 1000;
+        const timeTo = req.query.time_to ? parseInt(req.query.time_to) : new Date().getTime();
+
+        const node = await prisma.node.findFirst({
+            where: {
+                node_id: nodeId,
+            },
+        });
+
+        // make sure node exists
+        if(!node){
+            res.status(404).json({
+                message: "Not Found",
+            });
+            return;
+        }
+
+        const positions = await prisma.position.findMany({
+            where: {
+                node_id: nodeId,
+                created_at: {
+                    gte: new Date(timeFrom),
+                    lte: new Date(timeTo),
+                },
+            }
+        });
+
+        const mapReports = await prisma.mapReport.findMany({
+            where: {
+                node_id: nodeId,
+                created_at: {
+                    gte: new Date(timeFrom),
+                    lte: new Date(timeTo),
+                },
+            }
+        });
+        
+        const positionHistory = []
+
+        positions.forEach((position) => {
+            positionHistory.push({
+                node_id: position.node_id,
+                latitude: position.latitude,
+                longitude: position.longitude,
+                altitude: position.altitude,
+                accuracy: position.accuracy,
+                time: position.created_at,
+            });
+        });
+
+        mapReports.forEach((mapReport) => {
+            positionHistory.push({
+                node_id: mapReport.node_id,
+                latitude: mapReport.latitude,
+                longitude: mapReport.longitude,
+                altitude: mapReport.altitude,
+                accuracy: mapReport.accuracy,
+                time: mapReport.created_at,
+            });
+        });
+
+        positionHistory.sort((a, b) => a.time - b.time);
+
+        res.json({
+            position_history: positionHistory,
+        });
+
+    } catch(err) {
+        console.error(err);
+        res.status(500).json({
+            message: "Something went wrong, try again later.",
+        });
+    }
+});
+
 app.get('/api/v1/stats/hardware-models', async (req, res) => {
     try {
 

From 9722d23c61bcaaed69eb2b0d901e54b726c9a576 Mon Sep 17 00:00:00 2001
From: Tilen Komel <me@komelt.dev>
Date: Sun, 4 Aug 2024 19:12:51 +0200
Subject: [PATCH 3/4] Working front end

---
 src/public/index.html | 187 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 185 insertions(+), 2 deletions(-)

diff --git a/src/public/index.html b/src/public/index.html
index 10bf900..9b03c6c 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -748,7 +748,14 @@
 
                             <!-- position -->
                             <div>
-                                <div class="bg-gray-200 p-2 font-semibold">Position</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="handleNodePositionHistory(selectedNode.node_id)" type="button" class="rounded 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">
+                                            History
+                                        </button>
+                                    </div>
+                                </div>
                                 <ul role="list" class="flex-1 divide-y divide-gray-200">
 
                                     <li>
@@ -1589,6 +1596,56 @@
 
     </div>
 
+    <!-- node position history modal -->
+    <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="selectedNodeToShowPositionHistory != null" class="fixed left-0 right-0 bottom-0">
+                <div v-if="selectedNodeToShowPositionHistory != 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">{{ selectedNodeToShowPositionHistory.short_name }} Position history</h2>
+                                    <div>
+                                        <div class="flex items-center">
+                                            <label for="datetime-from" class="text-sm pr-1">From:</label>
+                                            <input type="datetime-local" name="datetime-from" id="datetime-from" v-model="this.positionHistoryFromTimeDate" 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-1">
+                                        </div>
+                                        <div class="flex items-center">
+                                            <label for="datetime-to" class="text-sm pr-1">To:</label>
+                                            <input type="datetime-local" name="datetime-to" id="datetime-to" v-model="this.positionHistoryToTimeDate" 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-1">
+                                        </div>
+                                    </div>
+                                    <button @click="loadNodePositionHistory(this.selectedNodeToShowPositionHistory.node_id)" class="bg-blue-500 text-white rounded-lg p-2 mt-2">Fetch</button>
+                                </div>
+                                <div class="my-auto ml-3 flex h-7 items-center">
+                                    <a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodePositionHistory">
+                                        <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>
+            </div>
+        </transition>
+
+    </div>
+
 </div>
 
 <script>
@@ -1652,7 +1709,7 @@
         } catch(e) {}
 
         // overlays enabled by default
-        return ["Legend"];
+        return ["Legend", "Position History"];
 
     }
 
@@ -1755,6 +1812,13 @@
                 selectedNodeMqttMetrics: [],
                 selectedNodeTraceroutes: [],
 
+                positionHistoryFromTimeDate: new Date(new Date().getTime() - 3600 * 1000).toISOString().slice(0, 16),
+                positionHistoryToTimeDate: new Date().toISOString().slice(0, 16),
+                selectedNodePositionHistory: [],
+                selectedNodeToShowPositionHistory: null,
+                selectedNodePositionHistoryMarkers: [],
+                selectedNodePositionHistoryPolyLines: [],
+
                 selectedTraceRoute: null,
 
                 selectedNodeToShowNeighbours: null,
@@ -1783,6 +1847,7 @@
                 this.loadNodePowerMetrics(node.node_id);
                 this.loadNodeMqttMetrics(node.node_id);
                 this.loadNodeTraceroutes(node.node_id);
+                this.loadNodePositionHistory(node.node_id);
             };
 
             // handle node callback from outside of vue
@@ -1877,6 +1942,22 @@
                     // do nothing
                 });
             },
+            loadNodePositionHistory: function(nodeId) {
+                this.selectedNodePositionHistory = [];
+                window.axios.get(`/api/v1/nodes/${nodeId}/position-history?time_from=${new Date(this.positionHistoryFromTimeDate).getTime()}&time_to=${new Date(this.positionHistoryToTimeDate).getTime()}`).then((response) => {
+                    this.selectedNodePositionHistory = response.data.position_history;
+
+                    console.log(this.selectedNodePositionHistory);
+
+                    if (this.selectedNodeToShowPositionHistory != null) {
+                        clearAllPositionHistory();
+                        onPositionHistoryUpdated(response.data.position_history);
+                    }
+
+                }).catch(() => {
+                    // do nothing
+                });
+            },
             renderDeviceMetricCharts: function() {
                 this.updateBatteryLevelChart();
                 this.updateVoltageChart();
@@ -2489,6 +2570,11 @@
             getRegionFrequencyRange: function(regionName) {
                 return window.getRegionFrequencyRange(regionName);
             },
+            handleNodePositionHistory: function(nodeId) {
+                this.selectedNodeToShowPositionHistory = this.selectedNode
+                this.selectedNode = null
+                onPositionHistoryUpdated(this.selectedNodePositionHistory)
+            },
             getShareLinkForNode: function(nodeId) {
                 return window.location.origin + `/?node_id=${nodeId}`;
             },
@@ -2512,6 +2598,13 @@
                 window._onHideNodeNeighboursClick();
                 this.selectedNodeToShowNeighbours = null;
             },
+            dismissShowingNodePositionHistory: function() {
+                this.selectedNodePositionHistory = [],
+                this.selectedNodeToShowPositionHistory = null
+                this.selectedNodePositionHistoryMarkers = [],
+                this.selectedNodePositionHistoryPolyLines = [],
+                cleanUpPositionHistory()
+            },
             formatUptimeSeconds: function(secondsToFormat) {
                 secondsToFormat = Number(secondsToFormat);
                 var days = Math.floor(secondsToFormat / (3600 * 24));
@@ -2615,6 +2708,7 @@
     var nodeMarkers = {};
     var selectedNodeOutlineCircle = null;
     var waypoints = [];
+    var positionHistories = [];
 
     // set map bounds to be a little more than full size to prevent panning off screen
     var bounds = [
@@ -2680,6 +2774,7 @@
         disableClusteringAtZoom: 10, // zoom level where node clustering is disabled
     });
     var waypointsLayerGroup = new L.LayerGroup();
+    var nodePositionHistoryLayerGroup = new L.LayerGroup();
 
     // create icons
     var iconMqttConnected = L.divIcon({
@@ -2739,6 +2834,7 @@
             "Legend": legendLayerGroup,
             "Neighbours": neighboursLayerGroup,
             "Waypoints": waypointsLayerGroup,
+            "Position History": nodePositionHistoryLayerGroup,
         },
     }, {
         // make the "Nodes" group exclusive (use radio inputs instead of checkbox)
@@ -2759,6 +2855,9 @@
     if(enabledOverlayLayers.includes("Waypoints")){
         waypointsLayerGroup.addTo(map);
     }
+    if(enabledOverlayLayers.includes("Position History")){
+        nodePositionHistoryLayerGroup.addTo(map);
+    }
 
     // update config when map overlay is added
     map.on('overlayadd', function(event) {
@@ -2917,6 +3016,10 @@
         });
     }
 
+    function clearAllPositionHistory() {
+        nodePositionHistoryLayerGroup.clearLayers();
+    }
+
     function clearNodeOutline() {
         if(selectedNodeOutlineCircle){
             selectedNodeOutlineCircle.removeFrom(map);
@@ -3504,6 +3607,86 @@
 
     }
 
+    function onPositionHistoryUpdated(updatedPositionHistories) {
+        let positionHistoryMarkers = [];
+        let positionHistoryLines = [];
+        let positionHistoryLinesCords = [];
+
+        // add nodes
+        for(var positionHistory of updatedPositionHistories) {
+
+            // skip nodes without position
+            if(!positionHistory.latitude || !positionHistory.longitude){
+                continue;
+            }
+
+            // fix lat long
+            positionHistory.latitude = positionHistory.latitude / 10000000;
+            positionHistory.longitude = positionHistory.longitude / 10000000;
+            
+
+            var hasLocation = isValidLatLng(positionHistory.latitude, positionHistory.longitude);
+
+            if(hasLocation){
+
+                // wrap longitude for shortest path, everything to left of australia should be shown on the right
+                var longitude = parseFloat(positionHistory.longitude);
+                if(longitude <= 100){
+                    longitude += 360;
+                }
+
+                positionHistoryLinesCords.push([positionHistory.latitude, longitude])
+
+                // determine emoji to show as marker icon
+                const emoji = 128205;
+                const emojiText = String.fromCodePoint(emoji)
+
+                let tooltip = ""
+
+                tooltip += `Position: ${positionHistory.latitude}, ${positionHistory.longitude}</br>`
+                tooltip += `Heard by: </br>`
+                tooltip += `Timestamp: ${new Date(positionHistory.time).toLocaleString()}</br>`
+
+                // create position history marker
+                const marker = L.marker([positionHistory.latitude, longitude],{
+                    icon: L.divIcon({
+                        className: 'waypoint-label',
+                        iconSize: [26, 26], // increase from 12px to 26px
+                        html: emojiText,
+                    }),
+                }).bindPopup(tooltip).on('click', function(event) {
+                    // close tooltip on click to prevent tooltip and popup showing at same time
+                    event.target.closeTooltip();
+                });
+
+                // add marker to position history layer group
+                marker.addTo(nodePositionHistoryLayerGroup);
+
+                positionHistoryMarkers.push(marker)
+
+            }
+
+        }
+
+        const line = L.polyline(positionHistoryLinesCords).addTo(nodePositionHistoryLayerGroup);
+
+        positionHistoryLines.push(line)
+
+    }
+
+    function cleanUpPositionHistory() {
+
+        // close tooltips and popups
+        closeAllPopups();
+        closeAllTooltips();
+
+        // setup node neighbours layer
+        nodePositionHistoryLayerGroup.clearLayers();
+        nodePositionHistoryLayerGroup.removeFrom(map);
+        nodePositionHistoryLayerGroup.addTo(map);
+
+    }
+    
     function setLoading(loading){
         var reloadButton = document.getElementById("reload-button");
         if(loading){

From f4a232b760b25d8a3cc708f32696dff13fdfc19a Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Tue, 20 Aug 2024 18:47:50 +1200
Subject: [PATCH 4/4] a few changes to position history feature

---
 src/index.js          |  21 ++++---
 src/public/index.html | 138 +++++++++++++++++++++++-------------------
 2 files changed, 88 insertions(+), 71 deletions(-)

diff --git a/src/index.js b/src/index.js
index 6f8245d..42b2790 100644
--- a/src/index.js
+++ b/src/index.js
@@ -431,10 +431,16 @@ app.get('/api/v1/nodes/:nodeId/traceroutes', async (req, res) => {
 app.get('/api/v1/nodes/:nodeId/position-history', async (req, res) => {
     try {
 
-        const nodeId = parseInt(req.params.nodeId);
-        const timeFrom = req.query.time_from ? parseInt(req.query.time_from) : new Date().getTime() - 3600 * 1000;
-        const timeTo = req.query.time_to ? parseInt(req.query.time_to) : new Date().getTime();
+        // defaults
+        const nowInMilliseconds = new Date().getTime();
+        const oneHourAgoInMilliseconds = new Date().getTime() - (3600 * 1000);
 
+        // get request params
+        const nodeId = parseInt(req.params.nodeId);
+        const timeFrom = req.query.time_from ? parseInt(req.query.time_from) : oneHourAgoInMilliseconds;
+        const timeTo = req.query.time_to ? parseInt(req.query.time_to) : nowInMilliseconds;
+
+        // find node
         const node = await prisma.node.findFirst({
             where: {
                 node_id: nodeId,
@@ -477,8 +483,7 @@ app.get('/api/v1/nodes/:nodeId/position-history', async (req, res) => {
                 latitude: position.latitude,
                 longitude: position.longitude,
                 altitude: position.altitude,
-                accuracy: position.accuracy,
-                time: position.created_at,
+                created_at: position.created_at,
             });
         });
 
@@ -488,12 +493,12 @@ app.get('/api/v1/nodes/:nodeId/position-history', async (req, res) => {
                 latitude: mapReport.latitude,
                 longitude: mapReport.longitude,
                 altitude: mapReport.altitude,
-                accuracy: mapReport.accuracy,
-                time: mapReport.created_at,
+                created_at: mapReport.created_at,
             });
         });
 
-        positionHistory.sort((a, b) => a.time - b.time);
+        // sort oldest to newest
+        positionHistory.sort((a, b) => a.created_at - b.created_at);
 
         res.json({
             position_history: positionHistory,
diff --git a/src/public/index.html b/src/public/index.html
index 9b03c6c..f27e51e 100644
--- a/src/public/index.html
+++ b/src/public/index.html
@@ -66,6 +66,12 @@
             border: 1px solid white;
         }
 
+        .icon-position-history {
+            background-color: #a855f7;
+            border-radius: 25px;
+            border: 1px solid white;
+        }
+
         .waypoint-label {
             font-size: 26px;
             background-color: transparent;
@@ -751,8 +757,8 @@
                                 <div @click.stop class="flex bg-gray-200 p-2 font-semibold">
                                     <div class="my-auto">Position</div>
                                     <div class="ml-auto">
-                                        <button @click="handleNodePositionHistory(selectedNode.node_id)" type="button" class="rounded 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">
-                                            History
+                                        <button @click="showNodePositionHistory(selectedNode.node_id)" type="button" class="rounded 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">
+                                            Show History
                                         </button>
                                     </div>
                                 </div>
@@ -1610,26 +1616,13 @@
             <div v-show="selectedNodeToShowPositionHistory != null" class="fixed left-0 right-0 bottom-0">
                 <div v-if="selectedNodeToShowPositionHistory != 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">{{ selectedNodeToShowPositionHistory.short_name }} Position history</h2>
-                                    <div>
-                                        <div class="flex items-center">
-                                            <label for="datetime-from" class="text-sm pr-1">From:</label>
-                                            <input type="datetime-local" name="datetime-from" id="datetime-from" v-model="this.positionHistoryFromTimeDate" 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-1">
-                                        </div>
-                                        <div class="flex items-center">
-                                            <label for="datetime-to" class="text-sm pr-1">To:</label>
-                                            <input type="datetime-local" name="datetime-to" id="datetime-to" v-model="this.positionHistoryToTimeDate" 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-1">
-                                        </div>
-                                    </div>
-                                    <button @click="loadNodePositionHistory(this.selectedNodeToShowPositionHistory.node_id)" class="bg-blue-500 text-white rounded-lg p-2 mt-2">Fetch</button>
-                                </div>
-                                <div class="my-auto ml-3 flex h-7 items-center">
+                        <div>
+                            <div class="flex p-2 border-b">
+                                <div class="my-auto mr-auto font-bold">{{ selectedNodeToShowPositionHistory.short_name }} Position History</div>
+                                <div class="my-auto ml-3">
                                     <a href="javascript:void(0)" class="rounded-full" @click="dismissShowingNodePositionHistory">
-                                        <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">
+                                        <div class="bg-gray-100 hover:bg-gray-200 p-1 rounded-full">
+                                            <svg class="w-5 h-5" 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>
@@ -1638,6 +1631,21 @@
                                     </a>
                                 </div>
                             </div>
+                            <div class="p-2 space-y-1">
+
+                                <!-- from -->
+                                <div class="flex items-center">
+                                    <label class="text-sm pr-1 min-w-12 text-right">From:</label>
+                                    <input v-model="positionHistoryDateTimeFrom" @change="loadNodePositionHistory(selectedNodeToShowPositionHistory.node_id)" type="datetime-local" 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-1">
+                                </div>
+
+                                <!-- to -->
+                                <div class="flex items-center">
+                                    <label class="text-sm pr-1 min-w-12 text-right">To:</label>
+                                    <input v-model="positionHistoryDateTimeTo" @change="loadNodePositionHistory(selectedNodeToShowPositionHistory.node_id)" type="datetime-local" 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-1">
+                                </div>
+
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -1812,8 +1820,9 @@
                 selectedNodeMqttMetrics: [],
                 selectedNodeTraceroutes: [],
 
-                positionHistoryFromTimeDate: new Date(new Date().getTime() - 3600 * 1000).toISOString().slice(0, 16),
-                positionHistoryToTimeDate: new Date().toISOString().slice(0, 16),
+                // YYYY-MM-DDTHH:mm is the format expected by the datetime-local input type
+                positionHistoryDateTimeFrom: moment().subtract(1, "hours").format('YYYY-MM-DDTHH:mm'),
+                positionHistoryDateTimeTo: moment().format('YYYY-MM-DDTHH:mm'),
                 selectedNodePositionHistory: [],
                 selectedNodeToShowPositionHistory: null,
                 selectedNodePositionHistoryMarkers: [],
@@ -1847,7 +1856,7 @@
                 this.loadNodePowerMetrics(node.node_id);
                 this.loadNodeMqttMetrics(node.node_id);
                 this.loadNodeTraceroutes(node.node_id);
-                this.loadNodePositionHistory(node.node_id);
+                //this.loadNodePositionHistory(node.node_id);
             };
 
             // handle node callback from outside of vue
@@ -1944,12 +1953,15 @@
             },
             loadNodePositionHistory: function(nodeId) {
                 this.selectedNodePositionHistory = [];
-                window.axios.get(`/api/v1/nodes/${nodeId}/position-history?time_from=${new Date(this.positionHistoryFromTimeDate).getTime()}&time_to=${new Date(this.positionHistoryToTimeDate).getTime()}`).then((response) => {
+                window.axios.get(`/api/v1/nodes/${nodeId}/position-history`, {
+                    params: {
+                        // parse from datetime-local format, and send as unix timestamp in milliseconds
+                        time_from: moment(this.positionHistoryDateTimeFrom, "YYYY-MM-DDTHH:mm").format("x"),
+                        time_to: moment(this.positionHistoryDateTimeTo, "YYYY-MM-DDTHH:mm").format("x"),
+                    },
+                }).then((response) => {
                     this.selectedNodePositionHistory = response.data.position_history;
-
-                    console.log(this.selectedNodePositionHistory);
-
-                    if (this.selectedNodeToShowPositionHistory != null) {
+                    if(this.selectedNodeToShowPositionHistory != null){
                         clearAllPositionHistory();
                         onPositionHistoryUpdated(response.data.position_history);
                     }
@@ -2570,10 +2582,21 @@
             getRegionFrequencyRange: function(regionName) {
                 return window.getRegionFrequencyRange(regionName);
             },
-            handleNodePositionHistory: function(nodeId) {
-                this.selectedNodeToShowPositionHistory = this.selectedNode
-                this.selectedNode = null
-                onPositionHistoryUpdated(this.selectedNodePositionHistory)
+            showNodePositionHistory: function(nodeId) {
+
+                // find node
+                const node = findNodeById(nodeId);
+                if(!node){
+                    return;
+                }
+
+                // update ui
+                this.selectedNode = null;
+                this.selectedNodeToShowPositionHistory = node;
+
+                // load position history
+                this.loadNodePositionHistory(nodeId);
+
             },
             getShareLinkForNode: function(nodeId) {
                 return window.location.origin + `/?node_id=${nodeId}`;
@@ -2599,11 +2622,11 @@
                 this.selectedNodeToShowNeighbours = null;
             },
             dismissShowingNodePositionHistory: function() {
-                this.selectedNodePositionHistory = [],
-                this.selectedNodeToShowPositionHistory = null
-                this.selectedNodePositionHistoryMarkers = [],
-                this.selectedNodePositionHistoryPolyLines = [],
-                cleanUpPositionHistory()
+                this.selectedNodePositionHistory = [];
+                this.selectedNodeToShowPositionHistory = null;
+                this.selectedNodePositionHistoryMarkers = [];
+                this.selectedNodePositionHistoryPolyLines = [];
+                cleanUpPositionHistory();
             },
             formatUptimeSeconds: function(secondsToFormat) {
                 secondsToFormat = Number(secondsToFormat);
@@ -2792,6 +2815,11 @@
         iconSize: [16, 16], // increase from 12px to 16px to make hover easier
     });
 
+    var iconPositionHistory = L.divIcon({
+        className: 'icon-position-history',
+        iconSize: [16, 16], // increase from 12px to 16px to make hover easier
+    });
+
     // create legend
     var legendLayerGroup = new L.LayerGroup();
     var legend = L.control({position: 'bottomleft'});
@@ -3608,14 +3636,13 @@
     }
 
     function onPositionHistoryUpdated(updatedPositionHistories) {
-        let positionHistoryMarkers = [];
-        let positionHistoryLines = [];
+
         let positionHistoryLinesCords = [];
 
         // add nodes
         for(var positionHistory of updatedPositionHistories) {
 
-            // skip nodes without position
+            // skip position history without position
             if(!positionHistory.latitude || !positionHistory.longitude){
                 continue;
             }
@@ -3623,10 +3650,8 @@
             // fix lat long
             positionHistory.latitude = positionHistory.latitude / 10000000;
             positionHistory.longitude = positionHistory.longitude / 10000000;
-            
 
             var hasLocation = isValidLatLng(positionHistory.latitude, positionHistory.longitude);
-
             if(hasLocation){
 
                 // wrap longitude for shortest path, everything to left of australia should be shown on the right
@@ -3635,25 +3660,15 @@
                     longitude += 360;
                 }
 
-                positionHistoryLinesCords.push([positionHistory.latitude, longitude])
+                positionHistoryLinesCords.push([positionHistory.latitude, longitude]);
 
-                // determine emoji to show as marker icon
-                const emoji = 128205;
-                const emojiText = String.fromCodePoint(emoji)
-
-                let tooltip = ""
-
-                tooltip += `Position: ${positionHistory.latitude}, ${positionHistory.longitude}</br>`
-                tooltip += `Heard by: </br>`
-                tooltip += `Timestamp: ${new Date(positionHistory.time).toLocaleString()}</br>`
+                let tooltip = "";
+                tooltip += `<b>${moment(new Date(positionHistory.created_at)).format("DD/MM/YYYY hh:mm A")}</b></br>`;
+                tooltip += `Position: ${positionHistory.latitude}, ${positionHistory.longitude}</br>`;
 
                 // create position history marker
                 const marker = L.marker([positionHistory.latitude, longitude],{
-                    icon: L.divIcon({
-                        className: 'waypoint-label',
-                        iconSize: [26, 26], // increase from 12px to 26px
-                        html: emojiText,
-                    }),
+                    icon: iconPositionHistory,
                 }).bindPopup(tooltip).on('click', function(event) {
                     // close tooltip on click to prevent tooltip and popup showing at same time
                     event.target.closeTooltip();
@@ -3662,15 +3677,12 @@
                 // add marker to position history layer group
                 marker.addTo(nodePositionHistoryLayerGroup);
 
-                positionHistoryMarkers.push(marker)
-
             }
 
         }
 
-        const line = L.polyline(positionHistoryLinesCords).addTo(nodePositionHistoryLayerGroup);
-
-        positionHistoryLines.push(line)
+        // show lines between position history markers
+        L.polyline(positionHistoryLinesCords).addTo(nodePositionHistoryLayerGroup);
 
     }