Add note about auth/tls

As this is turning into a bit of a faq, I think we should add this to the README
Merge pull request #134 from gene1wood/patch-1
2026-02-17 21:19:50 +00:00 · 2024-12-27 08:27:57 +01:00 · 2024-11-27 08:20:18 +01:00 · 2024-11-26 20:31:32 -08:00 · 2024-07-28 18:25:39 +01:00 · 2024-07-24 11:08:58 +01:00
25 changed files with 1641 additions and 1488 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,31 @@

 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
--- a/README.md
+++ b/README.md
@@ -33,6 +33,10 @@ pages, this is a more advanced interface with more functionality, all in one pla
 - Calculation of distance travelled
 - Highly customisable

+## Notes
+
+Frontend has no provision for user management, authentication, or for configuring TLS; these are tasks which a HTTP server you use will have to provide, and an explanation on how to do that is beyond our scope; you should be able to find a myriad explanatory documents for the server you wish to use. Also note, that even if you set up authentication, any user successfully being able to access Frontend will be able to see all Recorder data, as the API of the latter doesn't distinguish querying users.
+
 ## Installation

 ### Docker
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -5,8 +5,8 @@ RUN npm install
 COPY . ./
 RUN npm run build

-FROM nginx:1.25-alpine
-LABEL version="2.13.1"
+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 \
--- a/docker/nginx.tmpl
+++ b/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;
    }
 }

--- a/docs/config.md
+++ b/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`
@@ -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,9 +389,25 @@ to disable.
 - Type: [`Number`]
 - Default: `21`

+### `map.poiMarker`
+
+POI marker configuration. See [Vue2Leaflet `l-circle-marker` documentation](https://korigan.github.io/Vue2Leaflet/#/components/l-circle-marker/)
+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
+Location point marker configuration. `color` defaults to `primaryColor` if `null`. See
 [Vue2Leaflet `l-polyline` documentation](https://korigan.github.io/Vue2Leaflet/#/components/l-polyline/)
 for all possible values.

--- a/index.html
+++ b/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>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "owntracks-frontend",
-  "version": "2.13.1",
+  "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",
--- a/public/config/config.example.js
+++ b/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 = {};
--- a/src/components/AppHeader.vue
+++ b/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>
--- a/src/config.js
+++ b/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",
--- a/src/index.d.ts
+++ b/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
     *
--- a/src/locales/cs-CZ.json
+++ b/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"
 }
--- a/src/locales/da-DK.json
+++ b/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"
 }
--- a/src/locales/de-DE.json
+++ b/src/locales/de-DE.json
@@ -32,5 +32,14 @@
  "Battery": "Akku",
  "Speed": "Geschwindigkeit",
  "Regions:": "Regionen:",
-  "WiFi": "WLAN"
+  "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"
 }
--- a/src/locales/en-GB.json
+++ b/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"
 }
--- a/src/locales/en-US.json
+++ b/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"
 }
--- a/src/locales/es-ES.json
+++ b/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"
 }
--- a/src/locales/fr-FR.json
+++ b/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"
 }
--- a/src/locales/sk-SK.json
+++ b/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"
 }
--- a/src/locales/tr-TR.json
+++ b/src/locales/tr-TR.json
@@ -32,5 +32,14 @@
  "Battery": "Batarya",
  "Speed": "Hız",
  "Regions:": "Bölgeler:",
-  "WiFi": "WiFi"
+  "WiFi": "WiFi",
+  "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"
 }
--- a/src/styles/_base.scss
+++ b/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 {
--- a/src/styles/_datepicker.scss
+++ b/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;
+}
--- a/src/views/Map.vue
+++ b/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
      ) {
--- a/vite.config.js
+++ b/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: {
Author	SHA1	Message	Date
Jan-Piet Mens	f780bbede3	Add note about auth/tls As this is turning into a bit of a faq, I think we should add this to the README	2024-12-27 08:27:57 +01:00
Jan-Piet Mens	7877aaa9f8	Merge pull request #134 from gene1wood/patch-1 Fix typo in config.example.js comment	2024-11-27 08:20:18 +01:00
Gene Wood	341ce4c353	Fix typo in config.example.js comment	2024-11-26 20:31:32 -08:00
Maxim Baz	5ecad2bf40	nginx: increase read timeout	2024-07-28 18:25:39 +01:00
Jan Jaden Schmidt	3365959ed3	Add more options to the timespan selector (#123 ) * Add more options to the timespan selector Add more options to the timespan selector. * Add 'Yesterday', '3 days', '15 days', '3 months', '6 months', and '1 year' options to the `shortcuts` array in `src/components/AppHeader.vue`. * Ensure the new options are added in the same format as the existing options. * Verify that the new options are correctly displayed in the timespan selector. * Add translations for timespan selector Add translations for timespan selector in multiple locales * cs-CZ.json: Add translations for 'Today', 'Yesterday', '3 days', '7 days', '15 days', '30 days', '3 months', '6 months', and '1 year'. * da-DK.json: Add translations for 'Today', 'Yesterday', '3 days', '7 days', '15 days', '30 days', '3 months', '6 months', and '1 year'. * de-DE.json: Add translations for 'Today', 'Yesterday', '3 days', '7 days', '15 days', '30 days', '3 months', '6 months', and '1 year'. * en-GB.json: Add translations for 'Yesterday', '3 days', '15 days', '3 months', '6 months', and '1 year'. * en-US.json: Add translations for 'Yesterday', '3 days', '15 days', '3 months', '6 months', and '1 year'. * es-ES.json: Add translations for 'Today', 'Yesterday', '3 days', '7 days', '15 days', '30 days', '3 months', '6 months', and '1 year'. * fr-FR.json: Add translations for 'Today', 'Yesterday', '3 days', '7 days', '15 days', '30 days', '3 months', '6 months', and '1 year'. * sk-SK.json: Add translations for 'Today', 'Yesterday', '3 days', '7 days', '15 days', '30 days', '3 months', '6 months', and '1 year'. * tr-TR.json: Add translations for 'Today', 'Yesterday', '3 days', '7 days', '15 days', '30 days', '3 months', '6 months', and '1 year'.	2024-07-24 11:08:58 +01:00
Linus Groh	15a40f9c6c	Upgrade dependencies	2024-07-06 10:06:16 +01:00
Linus Groh	9839b5acdd	Release 2.15.3	2024-06-15 16:25:06 +02:00
Linus Groh	0300e2fb4f	Force relative path for config/config.js Closes #118, again.	2024-06-15 16:23:31 +02:00
Linus Groh	4c680590a4	Add eslint-config-prettier as a dev dependency	2024-06-14 17:56:53 +02:00
Linus Groh	551b226fd0	Release 2.15.2	2024-06-14 17:54:46 +02:00
Linus Groh	132f15c52b	Recreate npm lockfile Error: Cannot find module @rollup/rollup-linux-arm-gnueabihf. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.	2024-06-14 17:53:57 +02:00
Linus Groh	c60bfb5368	Release 2.15.1	2024-06-14 17:47:24 +02:00
Linus Groh	31bf39795c	Bump nginx to version 1.27	2024-06-14 17:43:44 +02:00
Linus Groh	d5c87a8727	Upgrade dependencies	2024-06-14 17:40:56 +02:00
Linus Groh	0492b355bf	Clean up index.html a bit	2024-06-14 17:39:28 +02:00
Linus Groh	998a97131b	Update vite config to emit relative paths Closes #118.	2024-06-14 17:37:26 +02:00
Linus Groh	a44965226c	Release 2.15.0	2024-06-10 19:58:13 +01:00
Linus Groh	554ce3f585	Implement POI map layer Closes #107.	2024-06-10 19:53:49 +01:00
Linus Groh	05ae629217	Release 2.14.0	2024-06-09 23:07:26 +01:00
jduar	b141444b56	Implement new date/time range picker Co-authored-by: Christophe Chapuis <chris.chapuis@gmail.com>	2024-06-09 23:04:48 +01:00