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/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

@@ -13,3 +13,4 @@ jobs:
       - run: yarn install
       - run: yarn lint:js
       - run: yarn lint:md
+      - run: yarn lint:scss

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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

README.md

@@ -2,13 +2,13 @@
 
 ![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)
 
-![Screenshot](https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/screenshot.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
 
@@ -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,7 +6,7 @@ COPY . ./
 RUN yarn build
 
 FROM nginx:1.18-alpine
-LABEL version="2.9.0"
+LABEL version="2.11.0"
 LABEL description="OwnTracks Frontend"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \

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-frontend",
-  "version": "2.9.0",
+  "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.11.1",
+    "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.24.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.7.0",
+    "vue-router": "^3.5.3",
+    "vue2-leaflet": "^2.7.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.12",
-    "@vue/cli-plugin-eslint": "~4.5.12",
-    "@vue/cli-plugin-unit-jest": "~4.5.12",
-    "@vue/cli-service": "~4.5.12",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "1.2.0",
+    "@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",
+    "babel-jest": "^27.5.1",
     "cors-anywhere": "^0.4.4",
-    "eslint": "^7.25.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.9.0",
+    "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.12",
+    "prettier": "^2.5.1",
+    "sass": "^1.49.9",
     "sass-loader": "^10.1.1",
-    "vue-cli-plugin-i18n": "~2.1.0",
-    "vue-template-compiler": "^2.6.12"
+    "vue-cli-plugin-i18n": "~2.3.1",
+    "vue-template-compiler": "^2.6.14"
   },
   "license": "MIT",
   "repository": {

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

@@ -136,7 +136,11 @@ export const getUserDeviceLocationHistory = async (
     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",
     () =>

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" />
@@ -188,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";
@@ -206,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/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

@@ -33,5 +33,6 @@
   "Address": "Adresse",
   "Battery": "Akku",
   "Speed": "Geschwindigkeit",
-  "Regions:": "Regionen:"
+  "Regions:": "Regionen:",
+  "WiFi": "WLAN"
 }

src/locales/en-GB.json

@@ -33,5 +33,6 @@
   "Address": "Address",
   "Battery": "Battery",
   "Speed": "Speed",
-  "Regions:": "Regions:"
+  "Regions:": "Regions:",
+  "WiFi": "WiFi"
 }

src/locales/en-US.json

@@ -33,5 +33,6 @@
   "Address": "Address",
   "Battery": "Battery",
   "Speed": "Speed",
-  "Regions:": "Regions:"
+  "Regions:": "Regions:",
+  "WiFi": "WiFi"
 }

src/locales/es-ES.json

@@ -33,5 +33,6 @@
   "Address": "Dirección",
   "Battery": "Bateria",
   "Speed": "Velocidad",
-  "Regions:": "Regiones:"
+  "Regions:": "Regiones:",
+  "WiFi": "WiFi"
 }

src/locales/fr-FR.json

@@ -33,5 +33,6 @@
   "Address": "Addresse",
   "Battery": "Batterie",
   "Speed": "Vitesse",
-  "Regions:": "Régions:"
+  "Regions:": "Régions:",
+  "WiFi": "WiFi"
 }

src/store/actions.js

@@ -201,9 +201,8 @@ const getLocationHistory = async ({ commit, state }) => {
   }
   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/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 {

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(),
     ],