Release 2.11.0

`addr` is part of the response for reverse geolocation lookups. `address` is already used in `LDeviceLocationPopup` and needs to be passed in from the map.

Closes #31

.eslintrc.js

@@ -21,6 +21,12 @@ module.exports = {
         htmlWhitespaceSensitivity: "ignore",
       },
     ],
+    "vue/multi-word-component-names": [
+      "error",
+      {
+        ignores: ["Map"],
+      },
+    ],
   },
   parserOptions: {
     parser: "babel-eslint",

.github/workflows/build.yml

@@ -7,11 +7,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Install dependencies
-        uses: borales/actions-yarn@v2.0.0
+      - uses: actions/setup-node@v2
         with:
-          cmd: install
-      - name: Run production build
-        uses: borales/actions-yarn@v2.0.0
-        with:
-          cmd: build
+          node-version: '14'
+      - run: yarn install
+      - run: yarn build

.github/workflows/docker.yml

@@ -4,14 +4,14 @@ on:
   schedule:
     - cron: '0 3 * * *' # everyday at 3am
   pull_request:
-    branches: master
+    branches: main
   push:
-    branches: master
+    branches: main
     tags:
       - v*
   release:
     types: [published]
-    branches: master
+    branches: main
     tags:
       - v*
 
@@ -28,7 +28,7 @@ jobs:
         run: |
           DOCKER_IMAGE=owntracks/frontend
           DOCKER_PLATFORMS=linux/amd64,linux/arm/v7,linux/arm64
-          VERSION=master
+          VERSION=main
 
           if [[ $GITHUB_REF == refs/tags/* ]]; then
             VERSION=${GITHUB_REF#refs/tags/v}

.github/workflows/lint.yml

@@ -7,15 +7,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Install dependencies
-        uses: borales/actions-yarn@v2.0.0
+      - uses: actions/setup-node@v2
         with:
-          cmd: install
-      - name: Lint JavaScript/Vue files
-        uses: borales/actions-yarn@v2.0.0
-        with:
-          cmd: lint:js
-      - name: Lint Markdown files
-        uses: borales/actions-yarn@v2.0.0
-        with:
-          cmd: lint:md
+          node-version: '14'
+      - run: yarn install
+      - run: yarn lint:js
+      - run: yarn lint:md
+      - run: yarn lint:scss

.github/workflows/test.yml

@@ -7,11 +7,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Install dependencies
-        uses: borales/actions-yarn@v2.0.0
+      - uses: actions/setup-node@v2
         with:
-          cmd: install
-      - name: Run unit tests
-        uses: borales/actions-yarn@v2.0.0
-        with:
-          cmd: test
+          node-version: '14'
+      - run: yarn install
+      - run: yarn test

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 Dates are in UTC.
 
+## 2.11.0 (2022-03-16)
+
+- Show WiFi SSID and BSSID in location popup, if available
+- Show address in location popup, if available ([#73](https://github.com/owntracks/frontend/pull/73), [@saesh](https://github.com/saesh))
+- Upgrade dependencies
+
+## 2.10.0 (2021-11-28)
+
+- Ensure location history line segments are drawn in chronological order ([#67](https://github.com/owntracks/frontend/issues/67))
+- Add trailing slashes to paths used by Docker nginx config ([#63](https://github.com/owntracks/frontend/pull/63), [@growse](https://github.com/growse))
+- Upgrade dependencies
+
+## 2.9.0 (2021-05-01)
+
+- Add a cancel button to the loading data modal
+- Replace remaining uses of "OwnTracks UI" with "OwnTracks Frontend"
+- Upgrade dependencies
+
 ## 2.8.0 (2021-02-19)
 
 - Add elevation gain / loss to "distance travelled" calculation ([#51](https://github.com/owntracks/frontend/issues/51))

README.md

@@ -1,14 +1,14 @@
-# OwnTracks UI
+# OwnTracks Frontend
 
 ![Version](https://img.shields.io/github/package-json/v/owntracks/frontend)
 [![Docker Pulls](https://img.shields.io/docker/pulls/owntracks/frontend)](https://hub.docker.com/r/owntracks/frontend)
-[![Build](https://github.com/owntracks/frontend/workflows/Build/badge.svg)](https://github.com/owntracks/frontend/actions?query=workflow%3ABuild+branch%3Amaster)
-[![Tests](https://github.com/owntracks/frontend/workflows/Tests/badge.svg)](https://github.com/owntracks/frontend/actions?query=workflow%3ATests+branch%3Amaster)
-[![Lint](https://github.com/owntracks/frontend/workflows/Lint/badge.svg)](https://github.com/owntracks/frontend/actions?query=workflow%3ALint+branch%3Amaster)
+[![Build](https://github.com/owntracks/frontend/workflows/Build/badge.svg)](https://github.com/owntracks/frontend/actions?query=workflow%3ABuild+branch%3Amain)
+[![Tests](https://github.com/owntracks/frontend/workflows/Tests/badge.svg)](https://github.com/owntracks/frontend/actions?query=workflow%3ATests+branch%3Amain)
+[![Lint](https://github.com/owntracks/frontend/workflows/Lint/badge.svg)](https://github.com/owntracks/frontend/actions?query=workflow%3ALint+branch%3Amain)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![License](https://img.shields.io/github/license/owntracks/frontend?color=d63e97)](https://github.com/owntracks/frontend/blob/master/LICENSE)
+[![License](https://img.shields.io/github/license/owntracks/frontend?color=d63e97)](https://github.com/owntracks/frontend/blob/main/LICENSE)
 
-![OwnTracks UI](https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/owntracks-ui.png)
+![Screenshot](https://raw.githubusercontent.com/owntracks/frontend/main/docs/images/screenshot.png)
 
 ## Introduction
 
@@ -16,7 +16,7 @@ This is a web interface for [OwnTracks](https://github.com/owntracks/recorder) b
 a Vue.js single page application. The recorder itself already ships with some basic web
 pages, this is a more advanced interface with more functionality, all in one place.
 
-![Map features](https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/map-features.png)
+![Map features](https://raw.githubusercontent.com/owntracks/frontend/main/docs/images/map-features.png)
 
 ## Features
 
@@ -53,7 +53,7 @@ compose config, and the service is named `otrecorder`):
 version: "3"
 
 services:
-  owntracks-ui:
+  owntracks-frontend:
     image: owntracks/frontend
     ports:
       - 80:80
@@ -101,8 +101,10 @@ See [`docs/config.md`](docs/config.md) for all available options.
 - Run `yarn serve` to compile for development and start the hot-reload server
 - Run `yarn lint:js` to lint JavaScript/Vue files
 - Run `yarn lint:md` to lint Markdown files
+- Run `yarn lint:scss` to lint SCSS files
 - Run `yarn format:js` to format JavaScript/Vue files
 - Run `yarn format:md` to format Markdown files
+- Run `yarn format:scss` to format SCSS files
 - Run `yarn test` to run unit tests
 
 ### CORS-Proxy

docker/Dockerfile

@@ -6,8 +6,8 @@ COPY . ./
 RUN yarn build
 
 FROM nginx:1.18-alpine
-LABEL version="2.8.0"
-LABEL description="OwnTracks UI"
+LABEL version="2.11.0"
+LABEL description="OwnTracks Frontend"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \
   SERVER_HOST=otrecorder \

docker/nginx.tmpl

@@ -10,10 +10,10 @@ http {
         listen ${LISTEN_PORT};
         listen [::]:${LISTEN_PORT};        
         root /usr/share/nginx/html;
-        location /api {
+        location /api/ {
             proxy_pass http://otrecorder/api/;
         }
-        location /ws {
+        location /ws/ {
             proxy_pass http://otrecorder/ws/;
             proxy_http_version 1.1;
             proxy_set_header Upgrade $http_upgrade;

docs/config.md

@@ -403,8 +403,7 @@ and [this Wikipedia article](https://en.wikipedia.org/wiki/Tiled_web_map).
   // Use dark HDPI tiles from Mapbox
   window.owntracks.config = {
     map: {
-      url:
-        "https://api.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}@2x.png?access_token=xxxxxxxxxxxxxxxx",
+      url: "https://api.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}@2x.png?access_token=xxxxxxxxxxxxxxxx",
     },
   };
   ```

jest.config.js

@@ -1,7 +1,8 @@
 module.exports = {
+  testEnvironment: "jsdom",
   moduleFileExtensions: ["js", "jsx", "json", "vue"],
   transform: {
-    "^.+\\.vue$": "vue-jest",
+    "^.+\\.vue$": "@vue/vue2-jest",
     ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
       "jest-transform-stub",
     "^.+\\.jsx?$": "babel-jest",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "owntracks-ui",
-  "version": "2.8.0",
+  "name": "owntracks-frontend",
+  "version": "2.11.0",
   "author": {
     "name": "Linus Groh",
     "email": "mail@linusgroh.de"
@@ -11,51 +11,56 @@
     "cors-proxy": "node scripts/corsProxy.js",
     "format:js": "vue-cli-service lint",
     "format:md": "prettier --write '{*.md,docs/**/*.md,src/**/*.md}'",
+    "format:scss": "prettier --write 'src/**/*.scss'",
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
     "lint:js": "vue-cli-service lint --no-fix",
     "lint:md": "prettier --check '{*.md,docs/**/*.md,src/**/*.md}'",
+    "lint:scss": "prettier --check 'src/**/*.scss'",
     "test": "vue-cli-service test:unit"
   },
   "dependencies": {
     "clipboard-copy": "^4.0.1",
-    "core-js": "^3.8.3",
+    "core-js": "^3.21.1",
     "deepmerge": "^4.2.2",
     "leaflet": "^1.7.1",
     "leaflet.heat": "^0.2.0",
     "moment": "^2.29.1",
-    "vue": "^2.6.12",
+    "vue": "^2.6.14",
     "vue-ctk-date-time-picker": "^2.5.0",
     "vue-feather-icons": "^5.1.0",
-    "vue-i18n": "^8.22.4",
-    "vue-js-modal": "^1.3.33",
+    "vue-i18n": "^8.27.0",
+    "vue-js-modal": "^2.0.1",
     "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
-    "vue-router": "^3.5.1",
-    "vue2-leaflet": "^2.6.0",
+    "vue-router": "^3.5.3",
+    "vue2-leaflet": "^2.7.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.11",
-    "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-plugin-unit-jest": "~4.5.11",
-    "@vue/cli-service": "~4.5.11",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "1.1.3",
+    "@vue/cli-plugin-babel": "~5.0.3",
+    "@vue/cli-plugin-eslint": "~5.0.3",
+    "@vue/cli-plugin-unit-jest": "~5.0.3",
+    "@vue/cli-service": "~5.0.3",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/test-utils": "1.3.0",
+    "@vue/vue2-jest": "^27.0.0-alpha.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "cors-anywhere": "^0.4.3",
-    "eslint": "^7.20.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.5.0",
+    "babel-jest": "^27.5.1",
+    "cors-anywhere": "^0.4.4",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "jest": "^27.1.0",
     "jest-fetch-mock": "^3.0.3",
-    "lint-staged": "^10.5.4",
+    "jsdom": "^19.0.0",
+    "lint-staged": "^12.3.5",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "prettier": "^2.2.1",
-    "sass": "^1.32.7",
+    "prettier": "^2.5.1",
+    "sass": "^1.49.9",
     "sass-loader": "^10.1.1",
-    "vue-cli-plugin-i18n": "~1.0.1",
-    "vue-template-compiler": "^2.6.12"
+    "vue-cli-plugin-i18n": "~2.3.1",
+    "vue-template-compiler": "^2.6.14"
   },
   "license": "MIT",
   "repository": {

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>OwnTracks UI</title>
+    <title>OwnTracks Frontend</title>
   </head>
   <body>
     <noscript>

src/App.vue

@@ -20,9 +20,9 @@ import { mapActions } from "vuex";
 import * as types from "@/store/mutation-types";
 import { log } from "@/logging";
 import AppHeader from "@/components/AppHeader";
-import DownloadModal from "@/components/modals/Download";
-import InformationModal from "@/components/modals/Information";
-import LoadingModal from "@/components/modals/Loading";
+import DownloadModal from "@/components/modals/DownloadModal";
+import InformationModal from "@/components/modals/InformationModal";
+import LoadingModal from "@/components/modals/LoadingModal";
 
 export default {
   components: { AppHeader, DownloadModal, InformationModal, LoadingModal },

src/api.js

@@ -7,23 +7,30 @@ import { getApiUrl, getLocationHistoryCount } from "@/util";
  *
  * @param {String} path API resource path
  * @param {Object} [params] Query parameters
- * @returns {Promise} Promise returned by the fetch function
+ * @param {Object} [fetchOptions]
+ *   fetch() options (merged with config.api.fetchOptions)
+ * @returns {Promise<Response>} Response returned by the fetch call
  */
-const fetchApi = (path, params = {}) => {
+const fetchApi = (path, params = {}, fetchOptions = {}) => {
   const url = getApiUrl(path);
-  Object.keys(params).forEach((key) =>
-    url.searchParams.append(key, params[key])
-  );
+  Object.keys(params).forEach((key) => url.searchParams.set(key, params[key]));
   log("HTTP", `GET ${url.href}`);
-  return fetch(url.href, config.api.fetchOptions).catch((error) =>
-    log("HTTP", error, logLevels.ERROR)
-  );
+  return fetch(url.href, {
+    ...fetchOptions,
+    ...config.api.fetchOptions,
+  }).catch((error) => {
+    if (error.name === "AbortError") {
+      log("HTTP", `GET ${url.href} - Request was aborted`, logLevels.WARNING);
+    } else {
+      log("HTTP", error, logLevels.ERROR);
+    }
+  });
 };
 
 /**
  * Get the recorder's version.
  *
- * @returns {String} Version
+ * @returns {Promise<String>} Version
  */
 export const getVersion = async () => {
   const response = await fetchApi("/api/0/version");
@@ -36,7 +43,7 @@ export const getVersion = async () => {
 /**
  * Get all users.
  *
- * @returns {User[]} Array of usernames
+ * @returns {Promise<User[]>} Array of usernames
  */
 export const getUsers = async () => {
   const response = await fetchApi("/api/0/list");
@@ -50,7 +57,7 @@ export const getUsers = async () => {
  * Get all devices for the provided users.
  *
  * @param {User[]} users Array of usernames
- * @returns {{User: Device[]}}
+ * @returns {Promise<{User: Device[]}>}
  *   Object mapping each username to an array of device names
  */
 export const getDevices = async (users) => {
@@ -80,7 +87,7 @@ export const getDevices = async (users) => {
  *
  * @param {User} [user] Get last locations of all devices from this user
  * @param {Device} [device] Get last location of specific device
- * @returns {OTLocation[]} Array of last location objects
+ * @returns {Promise<OTLocation[]>} Array of last location objects
  */
 export const getLastLocations = async (user, device) => {
   const params = {};
@@ -107,23 +114,33 @@ export const getLastLocations = async (user, device) => {
  * @param {Device} device Device name
  * @param {String} start Start date and time in UTC
  * @param {String} end End date and time in UTC
- * @returns {OTLocation[]} Array of location history objects
+ * @param {Object} [fetchOptions] fetch() options
+ * @returns {Promise<OTLocation[]>} Array of location history objects
  */
 export const getUserDeviceLocationHistory = async (
   user,
   device,
   start,
-  end
+  end,
+  fetchOptions
 ) => {
-  const response = await fetchApi("/api/0/locations", {
-    from: start,
-    to: end,
-    user,
-    device,
-    format: "json",
-  });
+  const response = await fetchApi(
+    "/api/0/locations",
+    {
+      from: start,
+      to: end,
+      user,
+      device,
+      format: "json",
+    },
+    fetchOptions
+  );
   const json = await response.json();
-  const userDeviceLocationHistory = json.data;
+  // We need to manually sort by timestamp, otherwise the line segments may be
+  // drawn in the wrong order. The recorder API simply returns entries in the
+  // same order in which they are in each *.rec file.
+  // See https://github.com/owntracks/frontend/issues/67.
+  const userDeviceLocationHistory = json.data.sort((a, b) => a.tst - b.tst);
   log(
     "API",
     () =>
@@ -141,9 +158,10 @@ export const getUserDeviceLocationHistory = async (
  *   Devices of which the history should be fetched
  * @param {String} start Start date and time in UTC
  * @param {String} end End date and time in UTC
- * @returns {LocationHistory} Location history
+ * @param {Object} [fetchOptions] fetch() options
+ * @returns {Promise<LocationHistory>} Location history
  */
-export const getLocationHistory = async (devices, start, end) => {
+export const getLocationHistory = async (devices, start, end, fetchOptions) => {
   const locationHistory = {};
   await Promise.all(
     Object.keys(devices).map(async (user) => {
@@ -154,7 +172,8 @@ export const getLocationHistory = async (devices, start, end) => {
             user,
             device,
             start,
-            end
+            end,
+            fetchOptions
           );
         })
       );

src/components/AppHeader.vue

@@ -32,7 +32,10 @@
       </div>
       <div class="nav-item">
         <LayersIcon size="1x" aria-hidden="true" role="img" />
-        <Dropdown :label="$t('Layer settings')" :title="$t('Show/hide layers')">
+        <DropdownButton
+          :label="$t('Layer settings')"
+          :title="$t('Show/hide layers')"
+        >
           <label v-for="option in layerSettingsOptions" :key="option.layer">
             <input
               type="checkbox"
@@ -46,7 +49,7 @@
             />
             {{ option.label }}
           </label>
-        </Dropdown>
+        </DropdownButton>
       </div>
       <div class="nav-item">
         <CalendarIcon size="1x" aria-hidden="true" role="img" />
@@ -158,6 +161,18 @@
   </header>
 </template>
 
+<style lang="scss" scoped>
+.distance-travelled {
+  text-align: right;
+  line-height: 1.2;
+
+  .feather {
+    margin-top: 3px;
+    margin-right: 0 !important;
+  }
+}
+</style>
+
 <script>
 import moment from "moment";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
@@ -176,7 +191,7 @@ import {
 import VueCtkDateTimePicker from "vue-ctk-date-time-picker";
 import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";
 
-import Dropdown from "@/components/Dropdown";
+import DropdownButton from "@/components/DropdownButton";
 import { DATE_TIME_FORMAT } from "@/constants";
 import * as types from "@/store/mutation-types";
 import { humanReadableDistance } from "@/util";
@@ -194,7 +209,7 @@ export default {
     SmartphoneIcon,
     UserIcon,
     VueCtkDateTimePicker,
-    Dropdown,
+    DropdownButton,
   },
   data() {
     return {

src/components/LDeviceLocationPopup.vue

@@ -33,6 +33,11 @@
           <ZapIcon size="1x" aria-hidden="true" role="img" />
           {{ speed }} km/h
         </li>
+        <li v-if="wifi.ssid" :title="$t('WiFi')">
+          <WifiIcon size="1x" aria-hidden="true" role="img" />
+          {{ wifi.ssid }}
+          <span v-if="wifi.bssid">({{ wifi.bssid }})</span>
+        </li>
       </ul>
     </div>
     <div v-if="regions.length" class="regions">
@@ -73,6 +78,7 @@ import {
   ClockIcon,
   HomeIcon,
   MapPinIcon,
+  WifiIcon,
   ZapIcon,
 } from "vue-feather-icons";
 import { LPopup } from "vue2-leaflet";
@@ -84,6 +90,7 @@ export default {
     ClockIcon,
     HomeIcon,
     MapPinIcon,
+    WifiIcon,
     ZapIcon,
     LPopup,
   },
@@ -136,6 +143,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    wifi: {
+      type: Object,
+      default: () => {},
+    },
     options: {
       type: Object,
       default: () => {},

src/components/modals/LoadingModal.vue

@@ -1,16 +1,29 @@
 <template>
   <modal name="loading" :click-to-close="false" adaptive>
-    <LoaderIcon class="loader" size="1.5x" />
+    <LoaderIcon class="loader-icon" size="1.5x" />
     {{ $t("Loading data, please wait...") }}
+    <br />
+    <button
+      type="button"
+      class="button button-primary button-cancel"
+      @click="requestAbortController.abort()"
+    >
+      {{ $t("Cancel") }}
+    </button>
   </modal>
 </template>
 
 <style scoped>
-.loader {
+.loader-icon {
   animation: spinning 2s linear infinite;
   margin-right: 5px;
 }
 
+.button-cancel {
+  display: block;
+  margin: 20px auto 0;
+}
+
 @keyframes spinning {
   from {
     transform: rotate(0deg);
@@ -22,11 +35,15 @@
 </style>
 
 <script>
+import { mapState } from "vuex";
 import { LoaderIcon } from "vue-feather-icons";
 
 export default {
   components: {
     LoaderIcon,
   },
+  computed: {
+    ...mapState(["requestAbortController"]),
+  },
 };
 </script>

src/index.d.ts

@@ -136,6 +136,8 @@ interface OTLocation {
      * - `"m"` = mobile data
      */
     conn?: string;
+    /** identifies the time at which the message is constructed (vs. `tst` which is the timestamp of the GPS fix) */
+    created_at?: string;
     /** Device name */
     device?: Device;
     /** Timestamp in a readable format */
@@ -147,8 +149,10 @@ interface OTLocation {
      * https://en.wikipedia.org/wiki/Geohash
      */
     ghash?: string;
-    /** Regions the device is currently in (e.g. `["Home", "Garage"]`). Might be empty. */
+    /** contains a list of regions the device is currently in (e.g. ["Home","Garage"]). Might be empty.  */
     inregions?: string[];
+    /** contains a list of region IDs the device is currently in (e.g. ["6da9cf","3defa7"]). Might be empty. */
+    inrids?: string[];
     /**
      * No idea; some kind of timestamp as well - figure it out yourself. :)
      * https://github.com/owntracks/recorder/blob/df009f791a845012e9cce24923e6203a079ca1ed/storage.c#L659
@@ -190,6 +194,10 @@ interface OTLocation {
     vac?: number;
     /** Velocity in km/h */
     vel?: number;
+    /** SSID, if available, is the unique name of the WLAN. */
+    SSID?: string;
+    /** BSSID, if available, identifies the access point. */
+    BSSID?: string;
 }
 
 /** URL query parameters (prior to any parsing so it's all strings). */

src/locales/de-DE.json

@@ -26,11 +26,13 @@
   "OwnTracks documentation": "OwnTracks Dokumentation",
   "OwnTracks on Twitter": "OwnTracks auf Twitter",
   "Loading data, please wait...": "Daten werden geladen, bitte warten...",
+  "Cancel": "Abbrechen",
   "Image of {deviceName}": "Bild von {deviceName}",
   "Timestamp": "Zeitstempel",
   "Location": "Standort",
   "Address": "Adresse",
   "Battery": "Akku",
   "Speed": "Geschwindigkeit",
-  "Regions:": "Regionen:"
+  "Regions:": "Regionen:",
+  "WiFi": "WLAN"
 }

src/locales/en-GB.json

@@ -26,11 +26,13 @@
   "OwnTracks documentation": "OwnTracks documentation",
   "OwnTracks on Twitter": "OwnTracks on Twitter",
   "Loading data, please wait...": "Loading data, please wait...",
+  "Cancel": "Cancel",
   "Image of {deviceName}": "Image of {deviceName}",
   "Timestamp": "Timestamp",
   "Location": "Location",
   "Address": "Address",
   "Battery": "Battery",
   "Speed": "Speed",
-  "Regions:": "Regions:"
+  "Regions:": "Regions:",
+  "WiFi": "WiFi"
 }

src/locales/en-US.json

@@ -26,11 +26,13 @@
   "OwnTracks documentation": "OwnTracks documentation",
   "OwnTracks on Twitter": "OwnTracks on Twitter",
   "Loading data, please wait...": "Loading data, please wait...",
+  "Cancel": "Cancel",
   "Image of {deviceName}": "Image of {deviceName}",
   "Timestamp": "Timestamp",
   "Location": "Location",
   "Address": "Address",
   "Battery": "Battery",
   "Speed": "Speed",
-  "Regions:": "Regions:"
+  "Regions:": "Regions:",
+  "WiFi": "WiFi"
 }

src/locales/es-ES.json

@@ -26,11 +26,13 @@
   "OwnTracks documentation": "OwnTracks - documentación",
   "OwnTracks on Twitter": "OwnTracks en Twitter",
   "Loading data, please wait...": "Cargando datos, por favor, espera...",
+  "Cancel": "Cancelar",
   "Image of {deviceName}": "Imágen de {deviceName}",
   "Timestamp": "Fecha / Hora",
   "Location": "Ubicación",
   "Address": "Dirección",
   "Battery": "Bateria",
   "Speed": "Velocidad",
-  "Regions:": "Regiones:"
+  "Regions:": "Regiones:",
+  "WiFi": "WiFi"
 }

src/locales/fr-FR.json

@@ -26,11 +26,13 @@
   "OwnTracks documentation": "Documentation d'OwnTracks",
   "OwnTracks on Twitter": "OwnTracks sur Twitter",
   "Loading data, please wait...": "Chargement des données, merci de patienter ...",
+  "Cancel": "Annuler",
   "Image of {deviceName}": "Image de {deviceName}",
   "Timestamp": "Horodatage",
   "Location": "Localisation",
   "Address": "Addresse",
   "Battery": "Batterie",
   "Speed": "Vitesse",
-  "Regions:": "Régions:"
+  "Regions:": "Régions:",
+  "WiFi": "WiFi"
 }

src/store/actions.js

@@ -184,17 +184,25 @@ const getLocationHistory = async ({ commit, state }) => {
   } else {
     devices = state.devices;
   }
-  const locationHistory = await api.getLocationHistory(
-    devices,
-    state.startDateTime,
-    state.endDateTime
-  );
-  commit(types.SET_IS_LOADING, false);
+  commit(types.SET_REQUEST_ABORT_CONTROLLER, new AbortController());
+  let locationHistory;
+  try {
+    locationHistory = await api.getLocationHistory(
+      devices,
+      state.startDateTime,
+      state.endDateTime,
+      { signal: state.requestAbortController.signal }
+    );
+  } catch (error) {
+    return;
+  } finally {
+    commit(types.SET_REQUEST_ABORT_CONTROLLER, null);
+    commit(types.SET_IS_LOADING, false);
+  }
   commit(types.SET_LOCATION_HISTORY, locationHistory);
   if (config.showDistanceTravelled) {
-    const { distanceTravelled, elevationGain, elevationLoss } = _getTravelStats(
-      locationHistory
-    );
+    const { distanceTravelled, elevationGain, elevationLoss } =
+      _getTravelStats(locationHistory);
     commit(types.SET_DISTANCE_TRAVELLED, distanceTravelled);
     commit(types.SET_ELEVATION_GAIN, elevationGain);
     commit(types.SET_ELEVATION_LOSS, elevationLoss);

src/store/index.js

@@ -33,6 +33,7 @@ export default new Vuex.Store({
     distanceTravelled: 0,
     elevationGain: 0,
     elevationLoss: 0,
+    requestAbortController: null,
   },
   getters,
   mutations,

src/store/mutation-types.js

@@ -14,3 +14,4 @@ export const SET_MAP_LAYER_VISIBILITY = "SET_MAP_LAYER_VISIBILITY";
 export const SET_DISTANCE_TRAVELLED = "SET_DISTANCE_TRAVELLED";
 export const SET_ELEVATION_GAIN = "SET_ELEVATION_GAIN";
 export const SET_ELEVATION_LOSS = "SET_ELEVATION_LOSS";
+export const SET_REQUEST_ABORT_CONTROLLER = "SET_REQUEST_ABORT_CONTROLLER";

src/store/mutations.js

@@ -49,4 +49,7 @@ export default {
   [types.SET_ELEVATION_LOSS](state, elevationLoss) {
     state.elevationLoss = elevationLoss;
   },
+  [types.SET_REQUEST_ABORT_CONTROLLER](state, requestAbortController) {
+    state.requestAbortController = requestAbortController;
+  },
 };

src/styles/_base.scss

@@ -15,7 +15,8 @@
   --pin-width: 32px;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -85,7 +86,8 @@ pre {
   display: block;
   font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
     "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
-    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
+    monospace;
   overflow-x: auto;
 
   code {
@@ -151,16 +153,6 @@ pre {
         .button-icon .feather {
           margin: 0;
         }
-
-        &.distance-travelled {
-          text-align: right;
-          line-height: 1.2;
-
-          .feather {
-            margin-top: 3px;
-            margin-right: 0;
-          }
-        }
       }
 
       &.nav-sm {

src/styles/_modal.scss

@@ -1,22 +1,20 @@
-.v--modal-overlay {
-  background: rgba(0, 0, 0, 0.5) !important;
-
-  .v--modal-background-click {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .v--modal-box.v--modal {
-      top: initial !important;
-      left: initial !important;
-      width: auto !important;
-      height: auto !important;
-      max-width: 95vw;
-      max-height: 95vh;
-      overflow: auto;
-      padding: 30px;
-      border-radius: 3px;
-      background: var(--color-background);
-    }
+.vm--container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .vm--overlay {
+    background: rgba(0, 0, 0, 0.5) !important;
+  }
+  .vm--modal {
+    top: initial !important;
+    left: initial !important;
+    width: auto !important;
+    height: auto !important;
+    max-width: 95vw;
+    max-height: 95vh;
+    overflow: auto;
+    padding: 30px;
+    border-radius: 3px;
+    background: var(--color-background);
   }
 }

src/views/Map.vue

@@ -51,7 +51,9 @@
           :battery="l.batt"
           :speed="l.vel"
           :regions="l.inregions"
+          :wifi="{ ssid: l.SSID, bssid: l.BSSID }"
           :options="{ className: 'leaflet-popup--for-pin' }"
+          :address="l.addr"
         />
       </LMarker>
     </template>
@@ -90,6 +92,8 @@
               :battery="l.batt"
               :speed="l.vel"
               :regions="l.inregions"
+              :wifi="{ ssid: l.SSID, bssid: l.BSSID }"
+              :address="l.addr"
             ></LDeviceLocationPopup>
           </LCircleMarker>
         </template>

vue.config.js

@@ -10,9 +10,7 @@ module.exports = {
   configureWebpack: {
     plugins: [
       new webpack.DefinePlugin({
-        "process.env": {
-          PACKAGE_VERSION: `"${version}"`,
-        },
+        "process.env.PACKAGE_VERSION": `"${version}"`,
       }),
       new MomentLocalesPlugin(),
     ],