Update documentation links in config.md

Fix typo in config.example.js comment

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 Dates are in UTC.
 
+## 2.15.3 (2024-06-15)
+
+- Force relative path for `config/config.js` even if it doesn't exist at build time
+
+## 2.15.2 (2024-06-14)
+
+- Fix npm lockfile
+
+## 2.15.1 (2024-06-14)
+
+- Update `index.html` to emit relative paths again, allowing deployment under a subpath
+- Update Docker image to use nginx 1.27
+- Upgrade dependencies
+
+## 2.15.0 (2024-06-10)
+
+- Implement POI map layer (see [Booklet](https://owntracks.org/booklet/features/poi/))
+
+  - Use the `map.poiMarker` config option to tweak the appearance, defaults to a red circle slightly larger than the default location points
+  - Use `map.layers.poi` to change the layer visibility, defaults to `true`
+
+## 2.14.0 (2024-06-09)
+
+- Implement new date/time range picker ([#116](https://github.com/owntracks/frontend/pull/116), [@jduar](https://github.com/jduar) / [@Tofee](https://github.com/Tofee))
+
+## 2.13.1 (2024-06-09)
+
+- Bump versions, just to make sure the frontend shows the right one
+
 ## 2.13.0 (2024-06-09)
 
 - Enable use of the frontend as a progressive web app (PWA) ([#98](https://github.com/owntracks/frontend/pull/98), [@RobinMeis](https://github.com/RobinMeis))

docker/Dockerfile

@@ -5,8 +5,8 @@ RUN npm install
 COPY . ./
 RUN npm run build
 
-FROM nginx:1.25-alpine
-LABEL version="2.12.0"
+FROM nginx:1.27-alpine
+LABEL version="2.15.3"
 LABEL description="OwnTracks Frontend"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \

docker/nginx.tmpl

@@ -31,6 +31,7 @@ http {
         gzip_buffers 16 8k;
         gzip_http_version 1.1;
         gzip_types text/plain text/css application/json application/javascript text/javascript;
+        proxy_read_timeout 600;
     }
 }
 

docs/config.md

@@ -53,10 +53,12 @@ window.owntracks.config = {};
     - [`heatmap`](#maplayersheatmap)
     - [`last`](#maplayerslast)
     - [`line`](#maplayersline)
+    - [`poi`](#maplayerspoi)
     - [`points`](#maplayerspoints)
   - [`maxNativeZoom`](#mapmaxnativezoom)
   - [`maxPointDistance`](#mapmaxpointdistance)
   - [`maxZoom`](#mapmaxzoom)
+  - [`poiMarker`](#mappoimarker)
   - [`polyline`](#mappolyline)
   - [`url`](#mapurl)
 - `onLocationChange`
@@ -206,7 +208,7 @@ Attribution for map tiles.
 ### `map.circle`
 
 Location accuracy indicator configuation. `color` and `fillColor` default to
-`primaryColor` if `null`. See [Vue2Leaflet `l-circle` documentation](https://korigan.github.io/Vue2Leaflet/#/components/l-circle/)
+`primaryColor` if `null`. See [Vue2Leaflet `l-circle` documentation](https://vue2-leaflet.netlify.app/components/LCircle.html)
 for all possible values.
 
 - Type: [`Object`]
@@ -222,7 +224,7 @@ for all possible values.
 ### `map.circleMarker`
 
 Location point marker configuation. `color` defaults to `primaryColor` if `null`. See
-[Vue2Leaflet `l-circle-marker` documentation](https://korigan.github.io/Vue2Leaflet/#/components/l-circle-marker/)
+[Vue2Leaflet `l-circle-marker` documentation](https://vue2-leaflet.netlify.app/components/LCircleMarker.html)
 for all possible values.
 
 - Type: [`Object`]
@@ -266,7 +268,7 @@ Whether to show an metric scale (m) or not.
 
 ### `map.controls.scale.position`
 
-Scale control position on the map. See [Leaflet control position documentation](https://leafletjs.com/reference-1.5.0.html#control-position)
+Scale control position on the map. See [Leaflet control position documentation](https://leafletjs.com/reference.html#control)
 for all possible values.
 
 - Type: [`String`]
@@ -281,7 +283,7 @@ Whether to show zoom control or not.
 
 ### `map.controls.zoom.position`
 
-Zoom control position on the map. See [Leaflet control position documentation](https://leafletjs.com/reference-1.5.0.html#control-position)
+Zoom control position on the map. See [Leaflet control position documentation](https://leafletjs.com/reference.html#control)
 for all possible values.
 
 - Type: [`String`]
@@ -337,9 +339,16 @@ Initial visibility of the line layer.
 - Type: [`Boolean`]
 - Default: `true`
 
+### `map.layers.poi`
+
+Initial visibility of the POI layer.
+
+- Type: [`Boolean`]
+- Default: `true`
+
 ### `map.layers.points`
 
-Initial visibility of the points layer.
+Initial visibility of the location points layer.
 
 - Type: [`Boolean`]
 - Default: `false`
@@ -380,10 +389,26 @@ to disable.
 - Type: [`Number`]
 - Default: `21`
 
+### `map.poiMarker`
+
+POI marker configuration. See [Vue2Leaflet `l-circle-marker` documentation](https://vue2-leaflet.netlify.app/components/LCircleMarker.html)
+for all possible values.
+
+- Type: [`Object`]
+- Default:
+  ```js
+  {
+    color: "red",
+    fillColor: "red",
+    fillOpacity: 0.2,
+    radius: 12
+  }
+  ```
+
 ### `map.polyline`
 
-Location point marker configuation. `color` defaults to `primaryColor` if `null`. See
-[Vue2Leaflet `l-polyline` documentation](https://korigan.github.io/Vue2Leaflet/#/components/l-polyline/)
+Location point marker configuration. `color` defaults to `primaryColor` if `null`. See
+[Vue2Leaflet `l-polyline` documentation](https://vue2-leaflet.netlify.app/components/LPolyline.html)
 for all possible values.
 
 - Type: [`Object`]
@@ -405,7 +430,7 @@ Size of the tiles in pixels returned by the tile server. Can be used together wi
 
 ### `map.url`
 
-Tile server URL. For more information see [Leaflet tile layer documentation](https://leafletjs.com/reference-1.5.0.html#tilelayer-url-template)
+Tile server URL. For more information see [Leaflet tile layer documentation](https://leafletjs.com/reference.html#tilelayer)
 and [this Wikipedia article](https://en.wikipedia.org/wiki/Tiled_web_map).
 
 - Type: [`String`]
@@ -553,4 +578,4 @@ Whether to enable verbose mode or not.
 [`object`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
 [`string`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
 [css `<color>`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
-[`fetch()` docs on mdn]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters
+[`fetch()` docs on mdn]: https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch#parameters

index.html

@@ -1,8 +1,7 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="/favicon.ico">
     <link rel="manifest" crossorigin="use-credentials" href="/manifest.json">
@@ -13,7 +12,7 @@
       <strong>We're sorry but OwnTracks doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script src="/config/config.js"></script>
+    <script src="./config/config.js"></script>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntracks-frontend",
-  "version": "2.12.0",
+  "version": "2.15.3",
   "license": "MIT",
   "author": {
     "name": "Linus Groh",
@@ -26,17 +26,18 @@
   },
   "dependencies": {
     "deepmerge": "^4.3.1",
+    "eslint-config-prettier": "^9.1.0",
     "leaflet": "^1.9.4",
     "leaflet.heat": "^0.2.0",
     "moment": "^2.30.1",
     "vue": "^2.7.16",
-    "vue-ctk-date-time-picker": "^2.5.0",
     "vue-feather-icons": "^5.1.0",
     "vue-i18n": "^8.28.2",
     "vue-js-modal": "^2.0.1",
     "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
     "vue-router": "^3.6.5",
+    "vue2-datepicker": "^3.11.1",
     "vue2-leaflet": "^2.7.1",
     "vuex": "^3.6.2"
   },
@@ -44,15 +45,15 @@
     "@eslint/eslintrc": "^3.1.0",
     "@vitejs/plugin-vue2": "^2.3.1",
     "cors-anywhere": "^0.4.4",
-    "eslint": "^9.4.0",
+    "eslint": "^9.6.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-vue": "^9.27.0",
     "jsdom": "^24.1.0",
-    "lint-staged": "^15.2.5",
+    "lint-staged": "^15.2.7",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "prettier": "^3.3.1",
-    "sass": "^1.77.4",
-    "vite": "^5.2.13",
+    "prettier": "^3.3.2",
+    "sass": "^1.77.6",
+    "vite": "^5.3.3",
     "vite-plugin-package-version": "^1.1.0",
     "vitest": "^1.6.0",
     "vitest-fetch-mock": "^0.2.2",

public/config/config.example.js

@@ -1,3 +1,3 @@
-// Here you can overwite the default configuration values
+// Here you can overwrite the default configuration values
 window.owntracks = window.owntracks || {};
 window.owntracks.config = {};

src/components/AppHeader.vue

@@ -53,35 +53,31 @@
       </div>
       <div class="nav-item">
         <CalendarIcon size="1x" aria-hidden="true" role="img" />
-        <VueCtkDateTimePicker
-          v-model="startDateTime"
-          :format="DATE_TIME_FORMAT"
-          :color="$config.primaryColor"
-          :locale="$config.locale"
-          :max-date="endDateTime"
-          :button-now-translation="$t('Now')"
+        <date-picker
+          v-model="dateTimeRange"
+          type="datetime"
+          format="YYYY-MM-DD HH:mm"
+          :editable="false"
+          :clearable="false"
+          :confirm="true"
+          :show-second="false"
+          :range="true"
+          range-separator=" – "
+          :shortcuts="shortcuts"
+          :show-time-panel="showTimeRangePanel"
+          :disabled-date="(date, _) => date > new Date()"
+          @change="handleDateTimeRangeChange"
         >
-          <button
-            type="button"
-            class="dropdown-button button"
-            :title="$t('Select start date')"
-          />
-        </VueCtkDateTimePicker>
-        <span>{{ $t("to") }}</span>
-        <VueCtkDateTimePicker
-          v-model="endDateTime"
-          :format="DATE_TIME_FORMAT"
-          :color="$config.primaryColor"
-          :locale="$config.locale"
-          :min-date="startDateTime"
-          :button-now-translation="$t('Now')"
-        >
-          <button
-            type="button"
-            class="dropdown-button button"
-            :title="$t('Select end date')"
-          />
-        </VueCtkDateTimePicker>
+          <template v-slot:footer>
+            <button
+              class="mx-btn toggle-date-btn"
+              type="button"
+              @click="toggleTimeRangePanel"
+            >
+              {{ showTimeRangePanel ? $t("Select date") : $t("Select time") }}
+            </button>
+          </template>
+        </date-picker>
       </div>
       <div class="nav-item">
         <UserIcon size="1x" aria-hidden="true" role="img" />
@@ -162,8 +158,9 @@ import {
   SmartphoneIcon,
   UserIcon,
 } from "vue-feather-icons";
-import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
-import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";
+
+import DatePicker from "vue2-datepicker";
+import "vue2-datepicker/index.css";
 
 import DropdownButton from "@/components/DropdownButton.vue";
 import { DATE_TIME_FORMAT } from "@/constants";
@@ -176,12 +173,12 @@ export default {
     ArrowUpIcon,
     CalendarIcon,
     CrosshairIcon,
+    DatePicker,
     InfoIcon,
     LayersIcon,
     MenuIcon,
     SmartphoneIcon,
     UserIcon,
-    VueCtkDateTimePicker,
     DropdownButton,
   },
   data() {
@@ -192,8 +189,110 @@ export default {
         { layer: "line", label: this.$t("Show location history (line)") },
         { layer: "points", label: this.$t("Show location history (points)") },
         { layer: "heatmap", label: this.$t("Show location heatmap") },
+        { layer: "poi", label: this.$t("Show points of interest") },
       ],
       showMobileNav: false,
+      shortcuts: [
+        {
+          text: this.$t("Today"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("Yesterday"),
+          onClick() {
+            const end = new Date();
+            end.setDate(end.getDate() - 1);
+            end.setHours(23, 59, 59, 0);
+            const start = new Date(end);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("3 days"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setDate(end.getDate() - 3);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("7 days"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setDate(end.getDate() - 7);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("15 days"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setDate(end.getDate() - 15);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("30 days"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setDate(end.getDate() - 30);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("3 months"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setMonth(end.getMonth() - 3);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("6 months"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setMonth(end.getMonth() - 6);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+        {
+          text: this.$t("1 year"),
+          onClick() {
+            const end = new Date();
+            end.setHours(23, 59, 59, 0);
+            const start = new Date();
+            start.setFullYear(end.getFullYear() - 1);
+            start.setHours(0, 0, 0, 0);
+            return [start, end];
+          },
+        },
+      ],
+      showTimeRangePanel: false,
     };
   },
   computed: {
@@ -221,32 +320,25 @@ export default {
         this.setSelectedDevice(value);
       },
     },
-    startDateTime: {
+    dateTimeRange: {
       get() {
-        return moment
+        const startDateTime = moment
           .utc(this.$store.state.startDateTime, DATE_TIME_FORMAT)
           .local()
-          .format(DATE_TIME_FORMAT);
-      },
-      set(value) {
-        this.setStartDateTime(
-          moment(value, DATE_TIME_FORMAT).utc().format(DATE_TIME_FORMAT)
-        );
-      },
-    },
-    endDateTime: {
-      get() {
-        return moment
+          .toDate();
+        const endDateTime = moment
           .utc(this.$store.state.endDateTime, DATE_TIME_FORMAT)
           .local()
-          .format(DATE_TIME_FORMAT);
+          .toDate();
+        return [startDateTime, endDateTime];
       },
-      set(value) {
+      set([startDateTime, endDateTime]) {
+        this.setStartDateTime(
+          moment(startDateTime).utc().format(DATE_TIME_FORMAT)
+        );
+
         this.setEndDateTime(
-          moment(value, DATE_TIME_FORMAT)
-            .set("seconds", 59)
-            .utc()
-            .format(DATE_TIME_FORMAT)
+          moment(endDateTime).set("seconds", 59).utc().format(DATE_TIME_FORMAT)
         );
       },
     },
@@ -262,6 +354,13 @@ export default {
       "setEndDateTime",
     ]),
     humanReadableDistance,
+    toggleTimeRangePanel() {
+      this.showTimeRangePanel = !this.showTimeRangePanel;
+    },
+    // Resetting to date choice after value change
+    handleDateTimeRangeChange(value, type) {
+      this.showTimeRangePanel = false;
+    },
   },
 };
 </script>

src/config.js

@@ -55,11 +55,18 @@ const DEFAULT_CONFIG = {
       heatmap: false,
       last: true,
       line: true,
+      poi: true,
       points: false,
     },
     maxNativeZoom: 19,
     maxPointDistance: null,
     maxZoom: 21,
+    poiMarker: {
+      color: "red",
+      fillColor: "red",
+      fillOpacity: 0.2,
+      radius: 12,
+    },
     polyline: {
       color: null,
       fillColor: "transparent",

src/index.d.ts

@@ -46,11 +46,18 @@ interface Config {
           heatmap: boolean;
           last: boolean;
           line: boolean;
+          poi: boolean;
           points: boolean;
         };
         maxNativeZoom: number;
         maxPointDistance: number | null;
         maxZoom: number;
+        poiMarker: {
+          color: OptionalColor;
+          fillColor: OptionalColor;
+          fillOpacity: number;
+          radius: number;
+        };
         polyline: {
           color: OptionalColor;
           fillColor: OptionalColor;
@@ -96,6 +103,7 @@ interface State {
             heatmap: boolean;
             last: boolean;
             line: boolean;
+            poi: boolean;
             points: boolean;
         };
         zoom: number;
@@ -173,6 +181,8 @@ interface OTLocation {
     lon: number;
     /** Friendly device name */
     name?: string;
+    /** Point of interest name */
+    poi?: string;
     /**
      * Trigger for the location report
      *

src/locales/cs-CZ.json

@@ -32,5 +32,14 @@
   "Battery": "Baterie",
   "Speed": "Rychlost",
   "Regions:": "Oblasti:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Today": "Dnes",
+  "Yesterday": "Včera",
+  "3 days": "3 dny",
+  "7 days": "7 dní",
+  "15 days": "15 dní",
+  "30 days": "30 dní",
+  "3 months": "3 měsíce",
+  "6 months": "6 měsíců",
+  "1 year": "1 rok"
 }

src/locales/da-DK.json

@@ -32,5 +32,14 @@
   "Battery": "Batteri",
   "Speed": "Hastighed",
   "Regions:": "Regioner:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Today": "I dag",
+  "Yesterday": "I går",
+  "3 days": "3 dage",
+  "7 days": "7 dage",
+  "15 days": "15 dage",
+  "30 days": "30 dage",
+  "3 months": "3 måneder",
+  "6 months": "6 måneder",
+  "1 year": "1 år"
 }

src/locales/de-DE.json

@@ -17,6 +17,7 @@
   "Show location history (line)": "Zeige Standortverlauf (Linie)",
   "Show location history (points)": "Zeige Standortverlauf (Punkte)",
   "Show location heatmap": "Zeige Standort-Heatmap",
+  "Show points of interest": "Zeige Sehenswürdigkeiten",
   "Minify JSON": "JSON minimieren",
   "Copy to clipboard": "In die Zwischenablage kopieren",
   "Loading version...": "Version wird abgerufen...",
@@ -32,5 +33,16 @@
   "Battery": "Akku",
   "Speed": "Geschwindigkeit",
   "Regions:": "Regionen:",
-  "WiFi": "WLAN"
+  "Select date": "Datum auswählen",
+  "Select time": "Uhrzeit auswählen",
+  "WiFi": "WLAN",
+  "Today": "Heute",
+  "Yesterday": "Gestern",
+  "3 days": "3 Tage",
+  "7 days": "7 Tage",
+  "15 days": "15 Tage",
+  "30 days": "30 Tage",
+  "3 months": "3 Monate",
+  "6 months": "6 Monate",
+  "1 year": "1 Jahr"
 }

src/locales/en-GB.json

@@ -17,6 +17,7 @@
   "Show location history (line)": "Show location history (line)",
   "Show location history (points)": "Show location history (points)",
   "Show location heatmap": "Show location heatmap",
+  "Show points of interest": "Show points of interest",
   "Minify JSON": "Minify JSON",
   "Copy to clipboard": "Copy to clipboard",
   "Loading version...": "Loading version...",
@@ -32,5 +33,16 @@
   "Battery": "Battery",
   "Speed": "Speed",
   "Regions:": "Regions:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Select date": "Select date",
+  "Select time": "Select time",
+  "Today": "Today",
+  "Yesterday": "Yesterday",
+  "3 days": "3 days",
+  "7 days": "7 days",
+  "15 days": "15 days",
+  "30 days": "30 days",
+  "3 months": "3 months",
+  "6 months": "6 months",
+  "1 year": "1 year"
 }

src/locales/en-US.json

@@ -17,6 +17,7 @@
   "Show location history (line)": "Show location history (line)",
   "Show location history (points)": "Show location history (points)",
   "Show location heatmap": "Show location heatmap",
+  "Show points of interest": "Show points of interest",
   "Minify JSON": "Minify JSON",
   "Copy to clipboard": "Copy to clipboard",
   "Loading version...": "Loading version...",
@@ -32,5 +33,16 @@
   "Battery": "Battery",
   "Speed": "Speed",
   "Regions:": "Regions:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Select date": "Select date",
+  "Select time": "Select time",
+  "Today": "Today",
+  "Yesterday": "Yesterday",
+  "3 days": "3 days",
+  "7 days": "7 days",
+  "15 days": "15 days",
+  "30 days": "30 days",
+  "3 months": "3 months",
+  "6 months": "6 months",
+  "1 year": "1 year"
 }

src/locales/es-ES.json

@@ -32,5 +32,14 @@
   "Battery": "Bateria",
   "Speed": "Velocidad",
   "Regions:": "Regiones:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Today": "Hoy",
+  "Yesterday": "Ayer",
+  "3 days": "3 días",
+  "7 days": "7 días",
+  "15 days": "15 días",
+  "30 days": "30 días",
+  "3 months": "3 meses",
+  "6 months": "6 meses",
+  "1 year": "1 año"
 }

src/locales/fr-FR.json

@@ -32,5 +32,14 @@
   "Battery": "Batterie",
   "Speed": "Vitesse",
   "Regions:": "Régions:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Today": "Aujourd'hui",
+  "Yesterday": "Hier",
+  "3 days": "3 jours",
+  "7 days": "7 jours",
+  "15 days": "15 jours",
+  "30 days": "30 jours",
+  "3 months": "3 mois",
+  "6 months": "6 mois",
+  "1 year": "1 an"
 }

src/locales/sk-SK.json

@@ -32,5 +32,14 @@
   "Battery": "Batéria",
   "Speed": "Rýchlosť",
   "Regions:": "Oblasti:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Today": "Dnes",
+  "Yesterday": "Včera",
+  "3 days": "3 dni",
+  "7 days": "7 dní",
+  "15 days": "15 dní",
+  "30 days": "30 dní",
+  "3 months": "3 mesiace",
+  "6 months": "6 mesiacov",
+  "1 year": "1 rok"
 }

src/locales/tr-TR.json

@@ -17,6 +17,7 @@
   "Show location history (line)": "Konum geçmişini göster (çizgi)",
   "Show location history (points)": "Konum geçmişini göster (nokta)",
   "Show location heatmap": "Konum ısı haritasını göster",
+  "Show points of interest": "İlgi çekici noktaları göster",
   "Minify JSON": "JSON'u Küçült",
   "Copy to clipboard": "Panoya kopyala",
   "Loading version...": "Versiyon yükleniyor...",
@@ -32,5 +33,16 @@
   "Battery": "Batarya",
   "Speed": "Hız",
   "Regions:": "Bölgeler:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "Select date": "Tarih seç",
+  "Select time": "Saat seç",
+  "Today": "Bugün",
+  "Yesterday": "Dün",
+  "3 days": "3 gün",
+  "7 days": "7 gün",
+  "15 days": "15 gün",
+  "30 days": "30 gün",
+  "3 months": "3 ay",
+  "6 months": "6 ay",
+  "1 year": "1 yıl"
 }

src/styles/_base.scss

@@ -101,8 +101,7 @@ pre {
   min-height: 100%;
   flex-direction: column;
 
-  // Only select immediate child as the datepicker contains a <header> as well
-  > header {
+  header {
     display: flex;
     padding: 20px;
     white-space: nowrap;
@@ -182,19 +181,33 @@ pre {
           }
 
           > .button,
-          > .dropdown,
-          > .date-time-picker {
+          > .mx-datepicker,
+          > .mx-input,
+          > .dropdown {
             flex: 1;
           }
 
-          > .dropdown .dropdown-button,
-          > .date-time-picker .dropdown-button {
+          > .dropdown .dropdown-button {
             width: 100%;
           }
 
-          > .date-time-picker {
-            margin-left: 0;
-            margin-right: 0;
+          .mx-datepicker {
+            display: flex;
+            width: auto;
+
+            .mx-datepicker-range {
+              width: auto;
+            }
+
+            .mx-input-wrapper {
+              display: flex;
+              width: 100%;
+
+              .mx-input {
+                font-size: 13px;
+                letter-spacing: -0.6px;
+              }
+            }
           }
 
           > span {

src/styles/_datepicker.scss

@@ -1,10 +1,45 @@
-.date-time-picker {
-  display: inline-block;
-  width: auto;
+.mx-datepicker {
+  width: 280px;
 
-  .datepicker {
-    box-shadow: none !important;
-    filter: var(--drop-shadow);
-    margin-top: 5px;
+  .mx-input {
+    border: 0;
+    border-radius: 18px;
+    text-align: center;
+    height: 33px;
+    padding-right: 0px;
+    padding-left: 0px;
   }
 }
+
+@media screen and (max-width: 400px) {
+  .mx-datepicker-main {
+    display: flex;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100%;
+    height: 100%;
+
+    .mx-datepicker-sidebar {
+      flex: 0.7;
+    }
+
+    .mx-datepicker-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      margin-left: 0px;
+    }
+  }
+}
+
+.mx-time {
+  width: 100%;
+}
+
+.toggle-date-btn {
+  margin-right: 10px;
+}
+
+.mx-icon-calendar {
+  display: none;
+}

src/views/Map.vue

@@ -25,6 +25,62 @@
       :options="{ maxNativeZoom, maxZoom, zoomOffset }"
     />
 
+    <template v-if="map.layers.line">
+      <LPolyline
+        v-for="(group, i) in filteredLocationHistoryLatLngGroups"
+        :key="i"
+        :lat-lngs="group"
+        v-bind="polyline"
+      />
+    </template>
+
+    <template v-for="(userDevices, user) in filteredLocationHistory">
+      <template v-for="(deviceLocations, device) in userDevices">
+        <template
+          v-for="(l, n) in deviceLocationsWithNameAndFace(
+            user,
+            device,
+            deviceLocations
+          )"
+        >
+          <LCircleMarker
+            v-if="map.layers.poi && l.poi"
+            :key="`${l.topic}-poi-${n}`"
+            :lat-lng="[l.lat, l.lon]"
+            v-bind="poiMarker"
+          >
+            <LTooltip :options="{ permanent: true }">
+              {{ l.poi }}
+            </LTooltip>
+          </LCircleMarker>
+          <LCircleMarker
+            v-if="map.layers.points"
+            :key="`${l.topic}-location-${n}`"
+            :lat-lng="[l.lat, l.lon]"
+            v-bind="circleMarker"
+          >
+            <LDeviceLocationPopup
+              :user="user"
+              :device="device"
+              :name="l.name"
+              :face="l.face"
+              :timestamp="l.tst"
+              :iso-local="l.isolocal"
+              :time-zone="l.tzname"
+              :lat="l.lat"
+              :lon="l.lon"
+              :alt="l.alt"
+              :battery="l.batt"
+              :speed="l.vel"
+              :regions="l.inregions"
+              :wifi="{ ssid: l.SSID, bssid: l.BSSID }"
+              :address="l.addr"
+            ></LDeviceLocationPopup>
+          </LCircleMarker>
+        </template>
+      </template>
+    </template>
+
     <template v-if="map.layers.last">
       <LCircle
         v-for="l in lastLocations"
@@ -61,50 +117,6 @@
       </LMarker>
     </template>
 
-    <template v-if="map.layers.line">
-      <LPolyline
-        v-for="(group, i) in filteredLocationHistoryLatLngGroups"
-        :key="i"
-        :lat-lngs="group"
-        v-bind="polyline"
-      />
-    </template>
-
-    <template v-if="map.layers.points">
-      <template v-for="(userDevices, user) in filteredLocationHistory">
-        <template v-for="(deviceLocations, device) in userDevices">
-          <LCircleMarker
-            v-for="(l, n) in deviceLocationsWithNameAndFace(
-              user,
-              device,
-              deviceLocations
-            )"
-            :key="`${user}-${device}-${n}`"
-            :lat-lng="[l.lat, l.lon]"
-            v-bind="circleMarker"
-          >
-            <LDeviceLocationPopup
-              :user="user"
-              :device="device"
-              :name="l.name"
-              :face="l.face"
-              :timestamp="l.tst"
-              :iso-local="l.isolocal"
-              :time-zone="l.tzname"
-              :lat="l.lat"
-              :lon="l.lon"
-              :alt="l.alt"
-              :battery="l.batt"
-              :speed="l.vel"
-              :regions="l.inregions"
-              :wifi="{ ssid: l.SSID, bssid: l.BSSID }"
-              :address="l.addr"
-            ></LDeviceLocationPopup>
-          </LCircleMarker>
-        </template>
-      </template>
-    </template>
-
     <template v-if="map.layers.heatmap">
       <LHeatmap
         v-if="filteredLocationHistoryLatLngs.length"
@@ -130,6 +142,7 @@ import {
   LCircleMarker,
   LCircle,
   LPolyline,
+  LTooltip,
 } from "vue2-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as types from "@/store/mutation-types";
@@ -149,6 +162,7 @@ export default {
     LPolyline,
     LDeviceLocationPopup,
     LHeatmap,
+    LTooltip,
   },
   data() {
     return {
@@ -173,6 +187,7 @@ export default {
         ...this.$config.map.circleMarker,
         color: this.$config.map.circleMarker.color || this.$config.primaryColor,
       },
+      poiMarker: this.$config.map.poiMarker,
       polyline: {
         ...this.$config.map.polyline,
         color: this.$config.map.polyline.color || this.$config.primaryColor,
@@ -214,6 +229,7 @@ export default {
       if (
         (this.map.layers.line ||
           this.map.layers.points ||
+          this.map.layers.poi ||
           this.map.layers.heatmap) &&
         this.filteredLocationHistoryLatLngs.length > 0
       ) {

vite.config.js

@@ -6,6 +6,7 @@ import version from "vite-plugin-package-version";
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: "",
   plugins: [vue(), version()],
   resolve: {
     alias: {