From e232376ef03d4ed560a6b63b0aa371bb3627c2ac Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Thu, 21 Mar 2024 23:24:47 +0100
Subject: [PATCH] Add popups

---
 app/controllers/points_controller.rb          |  5 ++-
 app/javascript/controllers/maps_controller.js | 42 ++++++++++++++++---
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/app/controllers/points_controller.rb b/app/controllers/points_controller.rb
index cdb725d3..93c8a63c 100644
--- a/app/controllers/points_controller.rb
+++ b/app/controllers/points_controller.rb
@@ -5,7 +5,10 @@ class PointsController < ApplicationController
     @points = Point.where('timestamp >= ? AND timestamp <= ?', start_at, end_at).order(timestamp: :asc)
 
     @countries_and_cities = CountriesAndCities.new(@points).call
-    @coordinates = @points.pluck(:latitude, :longitude).map { [_1.to_f, _2.to_f] }
+    @coordinates =
+      @points
+        .pluck(:latitude, :longitude, :battery, :altitude, :timestamp, :velocity)
+        .map { [_1.to_f, _2.to_f, _3.to_s, _4.to_s, _5.to_s, _6.to_s] }
     @distance = distance
     @start_at = Time.at(start_at)
     @end_at = Time.at(end_at)
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 7167d220..d58a514f 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import L from "leaflet"
+import L, { circleMarker } from "leaflet"
 
 // Connects to data-controller="maps"
 export default class extends Controller {
@@ -9,9 +9,9 @@ export default class extends Controller {
     console.log("Map controller connected")
     var markers = JSON.parse(this.element.dataset.coordinates)
     var center = markers[0]
-    var lastMarker = markers[markers.length - 1]
+    var lastMarker = markers[markers.length - 1].slice(0, 2)
     var center = (center === undefined) ? [52.516667, 13.383333] : center;
-    var map = L.map(this.containerTarget).setView(center, 14);
+    var map = L.map(this.containerTarget).setView([center[0], center[1]], 14);
 
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 19,
@@ -19,18 +19,48 @@ export default class extends Controller {
     }).addTo(map);
 
     for (var i = 0; i < markers.length; i++) {
-
       var lat = markers[i][0];
       var lon = markers[i][1];
 
-      L.circleMarker([lat, lon], {radius: 3}).addTo(map);
+      var popupContent = this.popupContent(markers[i]);
+      var circleMarker = L.circleMarker([lat, lon], {radius: 4})
+
+      circleMarker.bindPopup(popupContent).openPopup();
+      circleMarker.addTo(map);
     }
 
+    var coordinates = markers.map(element => element.slice(0, 2));
+
     L.marker(lastMarker).addTo(map);
-    L.polyline(markers).addTo(map);
+    L.polyline(coordinates).addTo(map);
   }
 
   disconnect() {
     this.map.remove();
   }
+
+  popupContent(marker) {
+    return `
+      <b>Timestamp:</b> ${this.formatDate(marker[4])}<br>
+      <b>Latitude:</b> ${marker[0]}<br>
+      <b>Longitude:</b> ${marker[1]}<br>
+      <b>Altitude:</b> ${marker[3]}<br>
+      <b>Velocity:</b> ${marker[5]}<br>
+      <b>Battery:</b> ${marker[2]}<br>
+    `;
+  }
+
+  formatDate(timestamp) {
+    let date = new Date(timestamp * 1000); // Multiply by 1000 because JavaScript works with milliseconds
+
+    // Extracting date components
+    let year = date.getFullYear();
+    let month = ('0' + (date.getMonth() + 1)).slice(-2); // Adding 1 because getMonth() returns zero-based month
+    let day = ('0' + date.getDate()).slice(-2);
+    let hours = ('0' + date.getHours()).slice(-2);
+    let minutes = ('0' + date.getMinutes()).slice(-2);
+    let seconds = ('0' + date.getSeconds()).slice(-2);
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  }
 }