kevinsivic/dawarich
1
0
Fork 0
mirror of https://github.com/Freika/dawarich.git synced 2026-01-11 17:51:39 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add popups

Browse source
This commit is contained in:
Eugene Burmakin 2024-03-21 23:24:47 +01:00
parent 3f146b34c7
commit e232376ef0
2 changed files with 40 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
app/controllers/points_controller.rb
View file

@ -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)

42
app/javascript/controllers/maps_controller.js
View file

@ -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}`;
}
}