From 7d4e6b3ff4990d2d1c7c46b879b61db04aeaedce Mon Sep 17 00:00:00 2001
From: jcardus <asklocation.net@gmail.com>
Date: Thu, 11 Jan 2024 20:14:43 -0300
Subject: [PATCH] add geofences

---
 package-lock.json | 208 ++++++++++++----------------------------------
 package.json      |   3 +-
 pages/index.vue   |  47 ++++++++++-
 3 files changed, 101 insertions(+), 157 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cef57c1..6e3bc15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "traccar-route-replay",
-  "version": "1.1.6",
+  "version": "1.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "traccar-route-replay",
-      "version": "1.1.6",
+      "version": "1.1.9",
       "dependencies": {
         "@deck.gl/core": "^8.9.31",
         "@deck.gl/mapbox": "^8.9.31",
@@ -17,6 +17,7 @@
         "@turf/bearing": "^6.5.0",
         "@turf/circle": "^6.5.0",
         "@turf/distance": "^6.5.0",
+        "@turf/flip": "^6.5.0",
         "@turf/helpers": "^6.5.0",
         "@turf/midpoint": "^6.5.0",
         "@turf/nearest-point": "^6.5.0",
@@ -5371,17 +5372,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/bbox/node_modules/@turf/meta": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/bearing": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/bearing/-/bearing-6.5.0.tgz",
@@ -5409,17 +5399,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/boolean-disjoint/node_modules/@turf/meta": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/boolean-intersects": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/boolean-intersects/-/boolean-intersects-6.5.0.tgz",
@@ -5433,17 +5412,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/boolean-intersects/node_modules/@turf/meta": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/boolean-point-in-polygon": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz",
@@ -5468,6 +5436,17 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/clone": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz",
+      "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@turf/destination": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/destination/-/destination-6.5.0.tgz",
@@ -5492,6 +5471,19 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/flip": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/flip/-/flip-6.5.0.tgz",
+      "integrity": "sha512-oyikJFNjt2LmIXQqgOGLvt70RgE2lyzPMloYWM7OR5oIFGRiBvqVD2hA6MNw6JewIm30fWZ8DQJw1NHXJTJPbg==",
+      "dependencies": {
+        "@turf/clone": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@turf/helpers": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
@@ -5526,17 +5518,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/line-intersect/node_modules/@turf/meta": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/line-segment": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/line-segment/-/line-segment-6.5.0.tgz",
@@ -5550,7 +5531,7 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/line-segment/node_modules/@turf/meta": {
+    "node_modules/@turf/meta": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
       "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
@@ -5589,28 +5570,6 @@
         "url": "https://opencollective.com/turf"
       }
     },
-    "node_modules/@turf/nearest-point/node_modules/@turf/clone": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz",
-      "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
-    "node_modules/@turf/nearest-point/node_modules/@turf/meta": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/@turf/polygon-to-line": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/polygon-to-line/-/polygon-to-line-6.5.0.tgz",
@@ -11691,17 +11650,6 @@
         "rbush": "^3.0.1"
       }
     },
-    "node_modules/geojson-rbush/node_modules/@turf/meta": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-      "dependencies": {
-        "@turf/helpers": "^6.5.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/turf"
-      }
-    },
     "node_modules/geojson-rbush/node_modules/@types/geojson": {
       "version": "7946.0.8",
       "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
@@ -27475,14 +27423,6 @@
           "version": "6.5.0",
           "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
           "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw=="
-        },
-        "@turf/meta": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-          "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
         }
       }
     },
@@ -27505,16 +27445,6 @@
         "@turf/line-intersect": "^6.5.0",
         "@turf/meta": "^6.5.0",
         "@turf/polygon-to-line": "^6.5.0"
-      },
-      "dependencies": {
-        "@turf/meta": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-          "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
-        }
       }
     },
     "@turf/boolean-intersects": {
@@ -27525,16 +27455,6 @@
         "@turf/boolean-disjoint": "^6.5.0",
         "@turf/helpers": "^6.5.0",
         "@turf/meta": "^6.5.0"
-      },
-      "dependencies": {
-        "@turf/meta": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-          "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
-        }
       }
     },
     "@turf/boolean-point-in-polygon": {
@@ -27555,6 +27475,14 @@
         "@turf/helpers": "^6.5.0"
       }
     },
+    "@turf/clone": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz",
+      "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
+      "requires": {
+        "@turf/helpers": "^6.5.0"
+      }
+    },
     "@turf/destination": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/destination/-/destination-6.5.0.tgz",
@@ -27573,6 +27501,16 @@
         "@turf/invariant": "^6.5.0"
       }
     },
+    "@turf/flip": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/flip/-/flip-6.5.0.tgz",
+      "integrity": "sha512-oyikJFNjt2LmIXQqgOGLvt70RgE2lyzPMloYWM7OR5oIFGRiBvqVD2hA6MNw6JewIm30fWZ8DQJw1NHXJTJPbg==",
+      "requires": {
+        "@turf/clone": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      }
+    },
     "@turf/helpers": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
@@ -27596,16 +27534,6 @@
         "@turf/line-segment": "^6.5.0",
         "@turf/meta": "^6.5.0",
         "geojson-rbush": "3.x"
-      },
-      "dependencies": {
-        "@turf/meta": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-          "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
-        }
       }
     },
     "@turf/line-segment": {
@@ -27616,16 +27544,14 @@
         "@turf/helpers": "^6.5.0",
         "@turf/invariant": "^6.5.0",
         "@turf/meta": "^6.5.0"
-      },
-      "dependencies": {
-        "@turf/meta": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-          "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
-        }
+      }
+    },
+    "@turf/meta": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
+      "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
+      "requires": {
+        "@turf/helpers": "^6.5.0"
       }
     },
     "@turf/midpoint": {
@@ -27648,24 +27574,6 @@
         "@turf/distance": "^6.5.0",
         "@turf/helpers": "^6.5.0",
         "@turf/meta": "^6.5.0"
-      },
-      "dependencies": {
-        "@turf/clone": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-6.5.0.tgz",
-          "integrity": "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
-        },
-        "@turf/meta": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-          "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
-        }
       }
     },
     "@turf/polygon-to-line": {
@@ -32326,14 +32234,6 @@
         "rbush": "^3.0.1"
       },
       "dependencies": {
-        "@turf/meta": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-6.5.0.tgz",
-          "integrity": "sha512-RrArvtsV0vdsCBegoBtOalgdSOfkBrTJ07VkpiCnq/491W67hnMWmDu7e6Ztw0C3WldRYTXkg3SumfdzZxLBHA==",
-          "requires": {
-            "@turf/helpers": "^6.5.0"
-          }
-        },
         "@types/geojson": {
           "version": "7946.0.8",
           "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz",
diff --git a/package.json b/package.json
index 47db897..fe8cd31 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "traccar-route-replay",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "dev": "nuxt",
@@ -22,6 +22,7 @@
     "@turf/bearing": "^6.5.0",
     "@turf/circle": "^6.5.0",
     "@turf/distance": "^6.5.0",
+    "@turf/flip": "^6.5.0",
     "@turf/helpers": "^6.5.0",
     "@turf/midpoint": "^6.5.0",
     "@turf/nearest-point": "^6.5.0",
diff --git a/pages/index.vue b/pages/index.vue
index b03f908..ba7bc93 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -74,12 +74,14 @@
 <script>
 import { mapGetters } from 'vuex'
 import bbox from '@turf/bbox'
-import { lineString, points } from '@turf/helpers'
+import { feature, featureCollection, lineString, points } from '@turf/helpers'
 import { MapboxOverlay } from '@deck.gl/mapbox'
 import Loading from 'vue-loading-overlay'
 import { ScenegraphLayer } from '@deck.gl/mesh-layers'
 import mapboxgl from 'mapbox-gl'
 import { Viewer } from 'mapillary-js'
+import { parse } from 'wellknown'
+import flip from '@turf/flip'
 import { closest, green } from '@/utils'
 import StyleSwitcher from '@/components/style-switcher.vue'
 import { getImage, init } from '@/utils/mapillary'
@@ -129,7 +131,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['devices', 'path', 'timestamps', 'route', 'showTerrain', 'showSigns', 'showBuildings']),
+    ...mapGetters(['devices', 'path', 'timestamps', 'route', 'showTerrain', 'showSigns', 'showBuildings', 'geofences']),
     cameraAltitude () {
       return maxAltitude / this.playSpeed
     },
@@ -156,6 +158,13 @@ export default {
     }
   },
   watch: {
+    geofences () {
+      const features = featureCollection(this.geofences.map((g) => {
+        const wkt = parse(g.area)
+        return feature(flip(wkt), { name: g.name })
+      }))
+      map.getSource('geofences').setData(features)
+    },
     async from () {
       this.loading = true
       await this.$store.dispatch('getPath')
@@ -472,6 +481,40 @@ export default {
           'line-cap': 'round'
         }
       })
+      map.addSource('geofences', {
+        type: 'geojson',
+        data: {
+          type: 'Feature',
+          geometry: {
+            type: 'LineString',
+            coordinates: []
+          }
+        }
+      })
+      map.addLayer({
+        id: 'geofences',
+        type: 'fill',
+        source: 'geofences',
+        paint: {
+          'fill-color': 'Tomato',
+          'fill-opacity': 0.8
+        }
+      })
+      map.addLayer({
+        id: 'geofences-text',
+        type: 'symbol',
+        source: 'geofences',
+        layout: {
+          'text-size': 16,
+          'text-field': ['get', 'name'],
+          'text-allow-overlap': true
+        },
+        paint: {
+          'text-color': 'black',
+          'text-halo-color': 'white',
+          'text-halo-width': 1
+        }
+      })
     },
     play () {
       if (this.i + 1 < this.path.length && this.playing) {