updated frontend

html/engine.js

@@ -1,24 +1,57 @@
-//engine.js
+// engine.js
 
-let map;
-let point;
-
-const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
 const socket = new WebSocket("wss://trackme.ovh/ws");
+const arrows = ["↑", "↗", "→", "↘", "↓", "↙", "←", "↖"];
+const CACHE_NAME = "trackme-v1";
+const urlsToCache = [
+  "/",
+  "/leaflet/leaflet.js",
+  "/engine.js",
+  "/style.css",
+];
+const blueIconUrl = "marker-icon.png";
+const purpleIconUrl = "marker-icon-alt.png";
+
+let follow = true;
+let userdata;
+
+function userGPSsuccess(position) {
+  const lat = position.coords.latitude;
+  const lon = position.coords.longitude;
+  trackerdata = [lat,lon];
+}
+
+function userGPSerror(err) {
+  trackerdata = [49,0];
+}
+
+function getPosition(pos) {
+  if (navigator.geolocation) {
+    return new Promise((resolve, _reject) => {
+      navigator.geolocation.getCurrentPosition(userGPSsuccess, userGPSerror);
+      resolve("Position fetched");
+    });
+  }
+}
+
+function createLocation(map, point, coords, text, iconUrl) {
+  let icon = new L.Icon.Default;
+  icon.options.iconUrl = iconUrl;
 
-function create_location(coords, text) {
   point = L.marker(coords, {
-    color: 'red',
+    color: "red",
-    fillColor: '#f03',
+    fillColor: "#f03",
     fillOpacity: 0.5,
-    radius: 50
+    radius: 50,
+    icon: icon
   }).addTo(map).bindPopup(text);
-  point.getPopup().autoPan=false;
+
+  point.getPopup().autoPan = false;
   point.openPopup();
 }
 
-function create_map(coords) {
+function createMap(coords) {
-  map = L.map('map', {
+  let map = L.map("map", {
     center: coords,
     zoom: 15
   });
@@ -27,69 +60,63 @@ function create_map(coords) {
     attribution: `&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> / <a href="https://www.paulbsd.com">PaulBSD</a>`
   }).addTo(map);
   map.zoomControl.setPosition('bottomright');
+
+  return map;
 }
 
-function update(data) {
+function middle(trackercoords, usercoords) {
-  const coords = [data.latitude,data.longitude];
+  let mid = [0, 0];
-  const speed = data.speed/10;
+  for (let i in mid) {
-  let section = parseInt(data.direction/45 + 0.5);
+    mid[i] = Math.min(trackercoords[i], usercoords[i]) + Math.abs(trackercoords[i] - usercoords[i]);
-  section = section % 8;
+  }
-  const text = `time: ${data.time}<br/>latitude: ${data.latitude}<br/>longitude: ${data.longitude}<br/>height: ${data.height}<br/>speed: ${speed}<br/>direction: ${arrows[section]} ${data.direction}°<br/>serial: ${data.serial}`;
+  return mid;
+}
+
+function update(map, trackerpoint, trackerdata) {
+  const coords = [trackerdata.latitude, trackerdata.longitude];
+  const speed = trackerdata.speed/10;
+  const section = parseInt(trackerdata.direction/45 + 0.5) % 8;
+  const text = `time: ${trackerdata.time}<br/>latitude: ${trackerdata.latitude}<br/>longitude: ${trackerdata.longitude}<br/>height: ${trackerdata.height}<br/>speed: ${speed}<br/>direction: ${arrows[section]} ${trackerdata.direction}°<br/>serial: ${trackerdata.serial}`;
   if (map) {
-    map.setView(coords);
+    if (follow) {
-    map.flyTo(coords);
+      map.setView(coords);
+      map.flyTo(coords);
+    }
   } else {
-    create_map(coords);
+    map = createMap(coords);
   }
-  if (point) {
+  if (trackerpoint) {
-    point.setLatLng(coords);
+    trackerpoint.setLatLng(coords);
-    point.setPopupContent(text);
+    trackerpoint.setPopupContent(text);
   } else {
-    create_location(coords, text);
+    createLocation(map, trackerpoint, coords, text, blueIconUrl);
   }
 }
 
-function ping() {
+function main() {
-  socket.send("ping");
+  let map;
-}
+  let trackerpoint;
+  let userpoint;
+  let pos;
 
-socket.addEventListener("message", (event) => {
+  let togglefollow = document.querySelector("#togglefollow");
-  const data = JSON.parse(event.data);
+  togglefollow.addEventListener("click", function() {
-  update(data);
+    follow = !follow;
-});
+    if (follow) togglefollow.innerHTML = "Unfollow";
-
+    else togglefollow.innerHTML = "Follow";
-socket.addEventListener("open", (event) => {
-  console.log(event);
-  socket.send("ping");
-});
-
-setInterval(ping, 1000)
-
-// service worker
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/engine.js')
-  .then((reg) => {
-    console.log('Enregistrement réussi');
-  }).catch((error) => {
-    console.log('Erreur : ' + error);
   });
+
+  socket.addEventListener("message", (event) => {
+    const trackerdata = JSON.parse(event.data);
+    update(map, trackerpoint, trackerdata);
+  });
+
+  socket.addEventListener("open", (event) => {
+    socket.send("ping");
+  });
+
+  setInterval(getPosition, 1000, pos);
+  setInterval(function () { socket.send("ping") }, 1000);
 }
 
-const CACHE_NAME = 'my-site-cache-v1';
+main();
-const urlsToCache = [
-  '/',
-  '/leaflet/leaflet.js',
-  '/engine.js',
-  '/style.css',
-];
-
-self.addEventListener('install', function(event) {
-  // Perform install steps
-  event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(function(cache) {
-        console.log('Opened cache');
-        return cache.addAll(urlsToCache);
-      })
-  );
-});

html/index.html

@@ -9,7 +9,10 @@
   <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black"/>
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#0313fc"/>
 <body>
-  <div id="map" style="height: 100%;"></div>
+  <div id="dash">
-  <script src="engine.js"></script>
+    <div id="map"></div>
+    <button id="togglefollow">Unfollow</button>
+  </div>
+  <script defer src="engine.js"></script>
 </body>
 </html>

html/service.js

@@ -0,0 +1,21 @@
+/* service worker */
+{
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/engine.js")
+      .then((_reg) => {
+        console.log("Registration successful");
+      }).catch((error) => {
+        console.log(`Registration error: ${error}`);
+      });
+  }
+
+  self.addEventListener("install", function(event) {
+    event.waitUntil(
+      caches.open(CACHE_NAME)
+      .then(function(cache) {
+        console.log("Opened cache");
+        return cache.addAll(urlsToCache);
+      })
+    );
+  });
+}

html/style.css

@@ -1,3 +1,11 @@
 .leaflet-popup-content {
   /*font-size: 13pt;*/
 }
+
+#map {
+  height: 95%;
+}
+
+#dash {
+  height: 100%;
+}

ws/ws.lua

@@ -24,7 +24,6 @@ function getdata()
       ["serial"] = row.serial,
     }
   end
-  -- db:close()
   return data
 end
 
@@ -43,7 +42,6 @@ function geows()
   while true do
     local data = getdata()
     if data.time ~= last_time then
-    --do
       local locstr = json.encode(data)
       local bytes, err = wb:send_text(locstr)
       if not bytes then

ws/ws2.lua

@@ -0,0 +1,90 @@
+#!/usr/bin/lua
+
+package.path = package.path..";/home/paul/git/micodus_server/html/?.lua"
+
+local const = require("const")
+local json = require("json")
+local server = require("nginx.websocket.server")
+local sqlite = require("lsqlite3")
+
+--ngx.shared.geo:set("last_time","")
+local db = sqlite.open(const.dbfile, sqlite.OPEN_READONLY)
+
+function getdata()
+  local res, vm = db:nrows(const.query)
+  local data = {}
+  for row in res, vm do
+    data = {
+      ["time"] = row.time,
+      ["latitude"] = row.latitude,
+      ["longitude"] = row.longitude,
+      ["height"] = row.height,
+      ["speed"] = row.speed,
+      ["direction"] = row.direction,
+      ["serial"] = row.serial,
+    }
+  end
+  -- db:close()
+  return data
+end
+
+function handle_ping(wb)
+  local data, typ, err = wb:recv_frame()
+  if data then
+    ngx.log(ndx.ERR,data)
+  end
+  coroutine.yield()
+end
+
+function send_data(wb, last_time)
+  while true do
+    ngx.log(ndx.ERR,"test")
+    local data = getdata()
+    ngx.log(ndx.ERR,data)
+    if data.time ~= last_time then
+      local locstr = json.encode(data)
+      local bytes, err = wb:send_text(locstr)
+      ngx.log(ndx.ERR,bytes)
+      if not bytes then
+        ngx.log(ngx.ERR, "failed to send text: ", err)
+        return ngx.exit(444)
+      end
+      last_time = data.time
+    end
+    ngx.sleep(0.5)
+    coroutine.yield()
+  end
+end
+
+function geows()
+  local locstr = nil
+  local wb, err = server:new {
+    timeout = 5000,
+    max_payload_len = 65535
+  }
+  if not wb then
+    ngx.log(ngx.ERR, "failed to new websocket: ", err)
+    return ngx.exit(444)
+  end
+  local last_time = nil
+
+  local h = coroutine.create(handle_ping, wb)
+  local s = coroutine.create(send_data, wb, last_time)
+
+  local i=0
+  while true do
+    ngx.log(ngx.ERR,i)
+    coroutine.resume(h,wb)
+    coroutine.resume(s,wb,last_time)
+    if not wb then
+      ngx.log(ngx.ERR, "failed to new websocket: ", err)
+      return ngx.exit(444)
+    end
+    i=i+1
+    ngx.sleep(0.5)
+  end
+
+  wb:send_close()
+end
+
+geows()