Release 2.3.0

This allows sending custom HTTP headers or including cookies in the
request!

.eslintrc.js

@@ -7,6 +7,12 @@ module.exports = {
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn",
+    "max-len": [
+      "error",
+      {
+        ignoreUrls: true,
+      },
+    ],
     "prettier/prettier": [
       "error",
       {

.github/FUNDING.yml

@@ -0,0 +1 @@
+liberapay: owntracks.org

CHANGELOG.md

@@ -1,5 +1,59 @@
 # Changelog
 
+Dates are in UTC.
+
+## 2.3.0 (2020-05-09)
+
+- Add `api.fetchOptions` config option - this allows sending custom HTTP headers or including
+  cookies in the request
+- Upgrade dependencies
+
+## 2.2.0 (2020-03-18)
+
+- Improve mobile layout further:
+  - Reduce header paddings
+  - Align buttons/dropdowns
+- Upgrade dependencies
+
+## 2.1.0 (2020-03-18)
+
+- Replace default Leaflet marker with a custom one ([#2](https://github.com/owntracks/frontend/issues/2))
+- Improve verbose mode logging
+- Improve mobile usability ([#19](https://github.com/owntracks/frontend/issues/19))
+- Upgrade dependencies
+
+## 2.0.0 (2020-03-01)
+
+Stable release of v2, finally! 🎉
+
+_This is just a version bump, see all the beta releases below, especially the first one, for a list of changes._
+
+## 2.0.0-beta.11 (2020-03-01)
+
+- Add Spanish translations ([#25](https://github.com/owntracks/frontend/pull/25), [@dtorner](https://github.com/dtorner))
+- Change "distance travelled" label to `title`
+- Replace map initial center/zoom config with auto fitting ([#23](https://github.com/owntracks/frontend/issues/23))
+- Enhance code type definitions using TypeScript features ([#20](https://github.com/owntracks/frontend/pull/20))
+- Upgrade dependencies
+
+## 2.0.0-beta.10 (2020-02-07)
+
+- Add "distance travelled" feature
+
+## 2.0.0-beta.9 (2020-02-06)
+
+- Support locale with language and region part (`en-GB`)
+- Update docs (screenshot, changelog improvements, typo fix)
+- Add funding information
+
+## 2.0.0-beta.8 (2020-01-26)
+
+- Add friendly device name and face images to location history popups
+- Add missing `alt`/`title` to device face image
+- Fix all JSDoc `@return` directives to `@returns`
+- Use computed prop for device name in location popup
+- Enable ESLint `max-len` rule
+
 ## 2.0.0-beta.7 (2020-01-24)
 
 This release doesn't really affect end-users but greatly improves the development experience.
@@ -14,19 +68,19 @@ This release doesn't really affect end-users but greatly improves the developmen
 
 ## 2.0.0-beta.6 (2019-12-14)
 
-- Fix heatmap - the upgrade of `vue2-leaflet` from 2.2.1 to 2.3.0 added an `activated` attribute to layers causing the heatmap to not show
+- Fix heatmap - the upgrade of `vue2-leaflet` from 2.2.1 to 2.3.0 added an `activated` attribute to layers causing the heatmap to not show ([#18](https://github.com/owntracks/frontend/issues/18))
 
 ## 2.0.0-beta.5 (2019-12-14)
 
 - Add Leaflet popup close button background color transition
 - Add `$config` Vue instance property
-- Improve accessibility
+- Improve accessibility ([#9](https://github.com/owntracks/frontend/issues/9))
 - Use configured locale for timestamp formatting
 - Upgrade dependencies
 
 ## 2.0.0-beta.4 (2019-12-14)
 
-- Add support for time selection
+- Add support for time selection ([#10](https://github.com/owntracks/frontend/issues/10))
   - New date/time picker component is properly translated/localised and keyboard accessible
   - Config options are now `startDateTime`/`endDateTime` and format of URL parameters changed
 - Changed default start/end date and time to use local timezone
@@ -37,7 +91,7 @@ This release doesn't really affect end-users but greatly improves the developmen
 
 - Add i18 support (currently English and German, `locale` config option)
 - Add custom checkbox focus style
-- Fix layer dropdown issues
+- Fix layer dropdown issues ([#1](https://github.com/owntracks/frontend/issues/1))
 - Fix checkbox style issues
 - Fix hover/focus inconsistencies
 - Fix Docker image labels
@@ -69,21 +123,21 @@ This release doesn't really affect end-users but greatly improves the developmen
   - Custom checkbox styles
   - Switch from Font Awesome 4 to Feather Icons
 - Application now uses Vuex and Vue Router
-- Add URL query parameters to load and preserve application state: `lat`, `lng`, `zoom`, `start`, `end`, `user`, `device` and `layers`.
-- Add a loading indicator.
-- Add 'download data' modal, currently supporting formatted and minified JSON.
-- Add a verbose mode.
-- Add CORS proxy script toeasily use a production instance of the OwnTracks recorder in development.
-- Add unit tests for util and API functions.
+- Add URL query parameters to load and preserve application state: `lat`, `lng`, `zoom`, `start`, `end`, `user`, `device` and `layers`
+- Add a loading indicator
+- Add 'download data' modal, currently supporting formatted and minified JSON
+- Add a verbose mode
+- Add CORS proxy script to easily use a production instance of the OwnTracks recorder in development
+- Add unit tests for util and API functions
 - Add documentation for all public funtions
-- Add documentation for all configuration options.
-- Add more configuration options, including setting the API base URL ([#4](https://github.com/owntracks/frontend/issues/4)) and hiding the `ping/ping` location ([#12](https://github.com/owntracks/frontend/issues/12)).
+- Add documentation for all configuration options
+- Add more configuration options, including setting the API base URL ([#4](https://github.com/owntracks/frontend/issues/4)) and hiding the `ping/ping` location ([#12](https://github.com/owntracks/frontend/issues/12))
 
 ## 1.1.0 (2019-10-26)
 
-- Add support for Docker. [#7](https://github.com/owntracks/frontend/pull/7), [@sharkoz](https://github.com/sharkoz)
-- Move project to the OwnTracks organisation on GitHub. [#8](https://github.com/owntracks/frontend/pull/8), [@jpmens](https://github.com/jpmens)
-- Enable compression in nginx configuration used in Docker image. [#11](https://github.com/owntracks/frontend/pull/11), [@sharkoz](https://github.com/sharkoz)
+- Add support for Docker ([#7](https://github.com/owntracks/frontend/pull/7), [@sharkoz](https://github.com/sharkoz))
+- Move project to the OwnTracks organisation on GitHub ([#8](https://github.com/owntracks/frontend/pull/8), [@jpmens](https://github.com/jpmens))
+- Enable compression in nginx configuration used in Docker image ([#11](https://github.com/owntracks/frontend/pull/11), [@sharkoz](https://github.com/sharkoz))
 
 ## 1.0.0 (2019-06-18)
 

README.md

@@ -77,7 +77,7 @@ directory as `docker-compose.yml`)
 
 ### Manually
 
-- Run `yarn install --production` to install dependencies
+- Run `yarn install` to install dependencies
 - Run `yarn build` to compile and minify for production
 - Copy the content of the `dist/` directory to your webroot
 

docker/Dockerfile

@@ -6,7 +6,7 @@ COPY . ./
 RUN yarn build
 
 FROM nginx:1.17-alpine
-LABEL version="2.0.0-beta.7"
+LABEL version="2.3.0"
 LABEL description="OwnTracks UI"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \

docs/config.md

@@ -24,14 +24,12 @@ window.owntracks.config = {};
 
 - `api`
   - [`baseUrl`](#apibaseurl)
+  - [`fetchOptions`](#apifetchoptions)
 - [`endDateTime`](#enddatetime)
 - [`ignorePingLocation`](#ignorepinglocation)
 - [`locale`](#locale)
 - `map`
   - [`attribution`](#mapattribution)
-  - `center`
-    - [`lat`](#mapcenterlat)
-    - [`lng`](#mapcenterlng)
   - [`circle`](#mapcircle)
   - [`circleMarker`](#mapcirclemarker)
   - `controls`
@@ -59,12 +57,12 @@ window.owntracks.config = {};
   - [`maxZoom`](#mapmaxzoom)
   - [`polyline`](#mappolyline)
   - [`url`](#mapurl)
-  - [`zoom`](#mapzoom)
 - `onLocationChange`
   - [`reloadHistory`](#onlocationchangereloadhistory)
 - [`primaryColor`](#primarycolor)
 - [`selectedDevice`](#selecteddevice)
 - [`selectedUser`](#selecteduser)
+- [`showDistanceTravelled`](#showdistancetravelled)
 - [`startDateTime`](#startdatetime)
 - [`verbose`](#verbose)
 
@@ -92,6 +90,26 @@ Base URL for the recorder's HTTP and WebSocket API. Keep CORS in mind.
   };
   ```
 
+### `api.fetchOptions`
+
+Options for API requests (made with `fetch()`). See [`fetch()` docs on MDN] for details.
+
+You can use this for example to send custom HTTP headers or to include cookies in the request.
+
+- Type: [`Object`]
+- Default: `{}`
+- Example:
+  ```js
+  // Include credentials (e.g. cookies)
+  window.owntracks.config = {
+    api: {
+      fetchOptions: {
+        credentials: "include"
+      }
+    }
+  };
+  ```
+
 ### `endDateTime`
 
 Initial end date and time (browser timezone) for fetched data.
@@ -123,7 +141,16 @@ Remove the `ping/ping` location from the fetched data. This is useful when using
 
 ### `locale`
 
-The language to use for the user interface. Available: `de` (German), `en` (English).
+The locale to use for the user interface, this affects the language and date/time
+formats.
+
+Available languages:
+
+- `de` (German)
+- `en` (English)
+- `es` (Spanish)
+
+You can use formats like `en-GB`, `en-US`, `de-DE`.
 
 - Type: [`String`]
 - Default: `"en"`
@@ -144,20 +171,6 @@ Attribution for map tiles.
   };
   ```
 
-### `map.center.lat`
-
-Initial map center latitude.
-
-- Type: [`Number`]
-- Default: `0`
-
-### `map.center.lng`
-
-Initial map center longitude.
-
-- Type: [`Number`]
-- Default: `0`
-
 ### `map.circle`
 
 Location accuracy indicator configuation. `color` and `fillColor` default to
@@ -368,13 +381,6 @@ and [this Wikipedia article](https://en.wikipedia.org/wiki/Tiled_web_map).
   };
   ```
 
-### `map.zoom`
-
-Initial map zoom level.
-
-- Type: [`Number`]
-- Default: `19`
-
 ### `onLocationChange.reloadHistory`
 
 Whether to reload the location history (of selected date range) or not when a location
@@ -400,7 +406,7 @@ Primary color for the user interface (navigation bar and various map elements).
 ### `selectedDevice`
 
 Initial selected device. All devices will be shown by default if `null`. Will be ignored
-if [`selectedUser`](#selectedUser) is `null`;
+if [`selectedUser`](#selectedUser) is `null`.
 
 Only data for the selected user/device will be fetched, so you can use this to limit the
 amount of data fetched after page load.
@@ -433,6 +439,16 @@ amount of data fetched after page load.
   };
   ```
 
+### `showDistanceTravelled`
+
+Whether to calculate and show the travelled distance of the last fetched data in the
+header bar. `maxPointDistance` is being takein into account, if a distance between two
+subsequent points is greater than `maxPointDistance`, it will not contibute to the
+calculated travelled distance.
+
+- Type: [`Boolean`]
+- Default: `true`
+
 ### `startDateTime`
 
 Initial start date and time (browser timezone) for fetched data.
@@ -463,3 +479,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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntracks-ui",
-  "version": "2.0.0-beta.7",
+  "version": "2.3.0",
   "author": {
     "name": "Linus Groh",
     "email": "mail@linusgroh.de"
@@ -18,41 +18,42 @@
   },
   "dependencies": {
     "clipboard-copy": "^3.1.0",
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "deepmerge": "^4.2.2",
     "leaflet": "^1.6.0",
     "leaflet.heat": "^0.2.0",
-    "moment": "^2.24.0",
+    "moment": "^2.25.3",
     "vue": "^2.6.11",
     "vue-ctk-date-time-picker": "^2.4.0",
     "vue-feather-icons": "^5.0.0",
-    "vue-i18n": "^8.15.3",
-    "vue-js-modal": "^1.3.31",
+    "vue-i18n": "^8.17.4",
+    "vue-js-modal": "^1.3.33",
+    "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
-    "vue-router": "^3.1.5",
-    "vue2-leaflet": "^2.4.2",
-    "vuex": "^3.1.2"
+    "vue-router": "^3.1.6",
+    "vue2-leaflet": "^2.5.2",
+    "vuex": "^3.3.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.2",
-    "@vue/cli-plugin-unit-jest": "^4.1.2",
-    "@vue/cli-service": "^4.1.2",
+    "@vue/cli-plugin-babel": "~4.3.1",
+    "@vue/cli-plugin-eslint": "~4.3.1",
+    "@vue/cli-plugin-unit-jest": "~4.3.1",
+    "@vue/cli-service": "~4.3.1",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "1.0.0-beta.31",
+    "@vue/test-utils": "1.0.2",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "cors-anywhere": "^0.4.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-vue": "^6.1.2",
-    "jest-fetch-mock": "^3.0.1",
-    "lint-staged": "^10.0.2",
-    "moment-locales-webpack-plugin": "^1.1.2",
-    "node-sass": "^4.13.1",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.0.1",
+    "cors-anywhere": "^0.4.3",
+    "eslint": "^7.0.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "jest-fetch-mock": "^3.0.3",
+    "lint-staged": "^10.2.2",
+    "moment-locales-webpack-plugin": "^1.2.0",
+    "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "vue-cli-plugin-i18n": "^0.6.1",
+    "vue-cli-plugin-i18n": "~1.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "license": "MIT",

src/api.js

@@ -1,61 +1,55 @@
+import config from "@/config";
 import { log, logLevels } from "@/logging";
-import { getApiUrl } from "@/util";
-
-/** @typedef {import("./types").QueryParams} QueryParams */
-/** @typedef {import("./types").User} User */
-/** @typedef {import("./types").Device} Device */
-/** @typedef {import("./types").LastLocation} LastLocation */
-/** @typedef {import("./types").LocationHistory} LocationHistory */
-
-/**
- * Callback for new WebSocket location messages.
- *
- * @callback webSocketLocationCallback
- */
+import { getApiUrl, getLocationHistoryCount } from "@/util";
 
 /**
  * Fetch an API resource.
  *
  * @param {String} path API resource path
- * @param {QueryParams} [params] Query parameters
- * @return {Promise} Promise returned by the fetch function
+ * @param {Object} [params] Query parameters
+ * @returns {Promise} Promise returned by the fetch function
  */
 const fetchApi = (path, params = {}) => {
   const url = getApiUrl(path);
   Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
   log("HTTP", `GET ${url.href}`);
-  return fetch(url.href).catch(error => log("HTTP", error, logLevels.ERROR));
+  return fetch(url.href, config.api.fetchOptions).catch(error =>
+    log("HTTP", error, logLevels.ERROR)
+  );
 };
 
 /**
  * Get the recorder's version.
  *
- * @return {String} Version
+ * @returns {String} Version
  */
 export const getVersion = async () => {
   const response = await fetchApi("/api/0/version");
   const json = await response.json();
   const version = json.version;
+  log("API", () => `[getVersion] ${version}`);
   return version;
 };
 
 /**
  * Get all users.
  *
- * @return {Array.<User>} Array of usernames
+ * @returns {User[]} Array of usernames
  */
 export const getUsers = async () => {
   const response = await fetchApi("/api/0/list");
   const json = await response.json();
   const users = json.results;
+  log("API", () => `[getUsers] Fetched ${users.length} users`);
   return users;
 };
 
 /**
  * Get all devices for the provided users.
  *
- * @param {Array.<User>} users Array of usernames
- * @return {Object.<User, Array.<Device>>} Object mapping each username to an array of device names
+ * @param {User[]} users Array of usernames
+ * @returns {{User: Device[]}}
+ *   Object mapping each username to an array of device names
  */
 export const getDevices = async users => {
   const devices = {};
@@ -67,6 +61,15 @@ export const getDevices = async users => {
       devices[user] = userDevices;
     })
   );
+  log("API", () => {
+    const devicesCount = Object.keys(devices)
+      .map(user => devices[user].length)
+      .reduce((a, b) => a + b, 0);
+    return (
+      `[getDevices] Fetched ${devicesCount} ` +
+      `devices for ${users.length} users`
+    );
+  });
   return devices;
 };
 
@@ -75,7 +78,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
- * @return {Array.<LastLocation>} Array of last location objects
+ * @returns {OTLocation[]} Array of last location objects
  */
 export const getLastLocations = async (user, device) => {
   const params = {};
@@ -87,7 +90,12 @@ export const getLastLocations = async (user, device) => {
   }
   const response = await fetchApi("/api/0/last", params);
   const json = await response.json();
-  return json;
+  const lastLocations = json;
+  log(
+    "API",
+    () => `[getLastLocations] Fetched ${lastLocations.length} last locations`
+  );
+  return lastLocations;
 };
 
 /**
@@ -97,7 +105,7 @@ 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
- * @return {LocationHistory} Array of location history objects
+ * @returns {OTLocation[]} Array of location history objects
  */
 export const getUserDeviceLocationHistory = async (
   user,
@@ -113,16 +121,25 @@ export const getUserDeviceLocationHistory = async (
     format: "json",
   });
   const json = await response.json();
-  return json.data;
+  const userDeviceLocationHistory = json.data;
+  log(
+    "API",
+    () =>
+      `[getUserDeviceLocationHistory] Fetched ` +
+      `${userDeviceLocationHistory.length} locations for ` +
+      `${user}/${device} from ${start} - ${end}`
+  );
+  return userDeviceLocationHistory;
 };
 
 /**
  * Get the location history of multiple devices.
  *
- * @param {Object.<User, Array.<Device>>} devices Devices of which the history should be fetched
+ * @param {{User: Device[]}} devices
+ *   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
- * @return {Object.<User, Object.<Device, LocationHistory>>} Array of location history objects
+ * @returns {LocationHistory} Location history
  */
 export const getLocationHistory = async (devices, start, end) => {
   const locationHistory = {};
@@ -141,13 +158,21 @@ export const getLocationHistory = async (devices, start, end) => {
       );
     })
   );
+  log("API", () => {
+    const locationHistoryCount = getLocationHistoryCount(locationHistory);
+    return (
+      "[getLocationHistory] Fetched " +
+      `${locationHistoryCount} locations in total`
+    );
+  });
   return locationHistory;
 };
 
 /**
- * Connect to the WebSocket API, reconnect when necessary and handle received messages.
+ * Connect to the WebSocket API, reconnect when necessary and handle received
+ * messages.
  *
- * @param {webSocketLocationCallback} [callback] Callback for location messages
+ * @param {WebSocketLocationCallback} [callback] Callback for location messages
  */
 export const connectWebsocket = async callback => {
   let url = getApiUrl("/ws/last");

src/components/AppHeader.vue

@@ -1,7 +1,25 @@
 <template>
-  <header>
-    <nav>
+  <header :class="$mq === 'sm' ? 'header-sm' : null">
+    <div v-if="$mq === 'sm'" class="header-item">
+      <button
+        class="button button-flat button-icon"
+        @click="showMobileNav = !showMobileNav"
+      >
+        <MenuIcon size="1x" aria-hidden="true" role="img" />
+      </button>
+    </div>
+    <nav
+      v-if="$mq === 'sm' ? showMobileNav : true"
+      class="header-item header-item-grow"
+      :class="$mq === 'sm' ? 'nav-sm' : null"
+    >
       <div class="nav-item">
+        <CrosshairIcon
+          v-if="$mq === 'sm'"
+          size="1x"
+          aria-hidden="true"
+          role="img"
+        />
         <button
           class="button button-outline"
           :title="
@@ -46,7 +64,7 @@
             :title="$t('Select start date')"
           />
         </VueCtkDateTimePicker>
-        {{ $t("to") }}
+        <span>{{ $t("to") }}</span>
         <VueCtkDateTimePicker
           v-model="endDateTime"
           :format="DATE_TIME_FORMAT"
@@ -97,7 +115,14 @@
         </select>
       </div>
     </nav>
-    <nav class="nav-shrink">
+    <nav class="header-item header-item-right">
+      <div
+        v-if="$config.showDistanceTravelled && distanceTravelled"
+        class="nav-item"
+        :title="$t('Distance travelled')"
+      >
+        {{ humanReadableDistance(distanceTravelled) }}
+      </div>
       <div class="nav-item">
         <button
           class="button button-flat button-icon"
@@ -129,9 +154,11 @@ import moment from "moment";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import {
   CalendarIcon,
+  CrosshairIcon,
   DownloadIcon,
   InfoIcon,
   LayersIcon,
+  MenuIcon,
   SmartphoneIcon,
   UserIcon,
 } from "vue-feather-icons";
@@ -141,13 +168,16 @@ import "vue-ctk-date-time-picker/dist/vue-ctk-date-time-picker.css";
 import Dropdown from "@/components/Dropdown";
 import { DATE_TIME_FORMAT } from "@/constants";
 import * as types from "@/store/mutation-types";
+import { humanReadableDistance } from "@/util";
 
 export default {
   components: {
     CalendarIcon,
+    CrosshairIcon,
     DownloadIcon,
     InfoIcon,
     LayersIcon,
+    MenuIcon,
     SmartphoneIcon,
     UserIcon,
     VueCtkDateTimePicker,
@@ -162,10 +192,11 @@ export default {
         { layer: "points", label: this.$t("Show location history (points)") },
         { layer: "heatmap", label: this.$t("Show location heatmap") },
       ],
+      showMobileNav: false,
     };
   },
   computed: {
-    ...mapState(["users", "devices", "map"]),
+    ...mapState(["users", "devices", "map", "distanceTravelled"]),
     selectedUser: {
       get() {
         return this.$store.state.selectedUser;
@@ -224,6 +255,7 @@ export default {
       "setStartDateTime",
       "setEndDateTime",
     ]),
+    humanReadableDistance,
   },
 };
 </script>

src/components/LCustomMarker.js

@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+const svg = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="691.429"
+  height="1007.429"
+  viewBox="0 0 182.94 266.549"
+>
+  <path
+    d="M182.94 91.47c0 50.518-55.748 139.357-91.47 175.079C55.75 230.827 0 141.988 0 91.47 0 40.953 40.953 0 91.47 0c50.518 0 91.47 40.953 91.47 91.47z"
+  />
+</svg>
+`;
+/* eslint-enable */
+
+export default L.divIcon({
+  className: "",
+  html: `<span class="pin">${svg}</span>`,
+});

src/components/LDeviceLocationPopup.vue

@@ -1,9 +1,13 @@
 <template>
   <LPopup>
-    <div v-if="name" class="device">{{ name }}</div>
-    <div v-else class="device">{{ user }}/{{ device }}</div>
+    <div class="device">{{ deviceName }}</div>
     <div class="wrapper">
-      <img v-if="face" :src="faceImageDataURI" alt="" />
+      <img
+        v-if="face"
+        :src="faceImageDataURI"
+        :alt="$t('Image of {deviceName}', { deviceName })"
+        :title="$t('Image of {deviceName}', { deviceName })"
+      />
       <ul class="info-list">
         <li :title="$t('Timestamp')">
           <ClockIcon size="1x" aria-hidden="true" role="img" />
@@ -122,13 +126,23 @@ export default {
   },
   computed: {
     /**
-     * Return the face image as a data URI string which can be used for an image's src attribute
+     * Return the face image as a data URI string which can be used for an
+     * image's src attribute.
      *
-     * @return {String} base64-encoded face image data URI
+     * @returns {String} base64-encoded face image data URI
      */
     faceImageDataURI() {
       return `data:image/png;base64,${this.face}`;
     },
+    /**
+     * Return the device name for displaying with <user identifier>/<device
+     * identifier> as fallback.
+     *
+     * @returns {String} device name for displaying
+     */
+    deviceName() {
+      return this.name ? this.name : `${this.user}/${this.device}`;
+    },
   },
 };
 </script>

src/config.js

@@ -10,6 +10,7 @@ startDateTime.setHours(0, 0, 0, 0);
 const DEFAULT_CONFIG = {
   api: {
     baseUrl: `${window.location.protocol}//${window.location.host}`,
+    fetchOptions: {},
   },
   endDateTime,
   ignorePingLocation: true,
@@ -17,10 +18,6 @@ const DEFAULT_CONFIG = {
   map: {
     attribution:
       '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
-    center: {
-      lat: 0,
-      lng: 0,
-    },
     circle: {
       color: null,
       fillColor: null,
@@ -65,7 +62,6 @@ const DEFAULT_CONFIG = {
       fillColor: "transparent",
     },
     url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-    zoom: 19,
   },
   onLocationChange: {
     reloadHistory: false,
@@ -73,6 +69,7 @@ const DEFAULT_CONFIG = {
   primaryColor: "#3f51b5",
   selectedDevice: null,
   selectedUser: null,
+  showDistanceTravelled: true,
   startDateTime,
   verbose: false,
 };

src/i18n.js

@@ -16,7 +16,7 @@ locales.keys().forEach(key => {
 });
 
 export default new VueI18n({
-  locale: config.locale,
+  locale: config.locale.split("-")[0],
   fallbackLocale: "en",
   formatFallbackMessages: true,
   messages,

src/index.d.ts

@@ -0,0 +1,223 @@
+/** Configuration object. */
+interface Config {
+    api: {
+        baseUrl: string;
+    };
+    endDateTime: Date;
+    ignorePingLocation: boolean;
+    locale: string;
+    map: {
+        attribution: string;
+        circle: {
+          color: OptionalColor;
+          fillColor: OptionalColor;
+          fillOpacity: number;
+        };
+        circleMarker: {
+          color: OptionalColor;
+          fillColor: OptionalColor;
+          fillOpacity: number;
+          radius: number;
+        };
+        controls: {
+          scale: {
+            display: boolean;
+            imperial: boolean;
+            maxWidth: number;
+            metric: boolean;
+            position: string;
+          };
+          zoom: {
+            display: boolean;
+            position: string;
+          };
+        };
+        heatmap: {
+          blur: number;
+          gradient: { number: Color } | null;
+          max: number;
+          radius: number;
+        };
+        layers: {
+          heatmap: boolean;
+          last: boolean;
+          line: boolean;
+          points: boolean;
+        };
+        maxNativeZoom: number;
+        maxPointDistance: number | null;
+        maxZoom: number;
+        polyline: {
+          color: OptionalColor;
+          fillColor: OptionalColor;
+        };
+        url: string;
+    };
+    onLocationChange: {
+        reloadHistory: boolean;
+    };
+    primaryColor: Color;
+    selectedUser: User| null;
+    selectedDevice: Device| null;
+    startDateTime: Date;
+    verbose: boolean;
+}
+
+/** Vuex state. */
+interface State {
+    isLoading: boolean;
+    frontendVersion: string;
+    recorderVersion: string;
+    users: User[];
+    devices: { User: Device[] };
+    lastLocations: OTLocation[];
+    locationHistory: LocationHistory;
+    selectedUser: User| null;
+    selectedDevice: Device| null;
+    startDateTime: string;
+    endDateTime: string;
+    map: {
+        center: {
+            lat: number;
+            lng: number;
+        };
+        layers: {
+            heatmap: boolean;
+            last: boolean;
+            line: boolean;
+            points: boolean;
+        };
+        zoom: number;
+    };
+}
+
+/**
+ * A location object as returned by the OwnTracks recorder.
+ * https://owntracks.org/booklet/tech/json/#_typelocation
+ */
+interface OTLocation {
+    _http: boolean;
+    /**
+     * In this case always "location"
+     * https://owntracks.org/booklet/tech/json/#types
+     */
+    _type: string;
+    /** Accuracy in meters */
+    acc?: number;
+    /** Altitude above sea level in meters */
+    alt?: number;
+    /** Device battery level in percent */
+    batt?: number;
+    /**
+     * Battery status (iOS only)
+     *
+     * - `0` = unknown
+     * - `1` = unplugged
+     * - `2` = charging
+     * - `3` = full
+     */
+    bs?: number;
+    /** Course over ground in degrees (iOS only) */
+    cog?: number;
+    /**
+     * Internet connectivity status (route to host) when the message is created
+     *
+     * - `"w"` = phone is connected to a WiFi connection
+     * - `"o"` = phone is offline
+     * - `"m"` = mobile data
+     */
+    conn?: string;
+    /** Device name */
+    device?: Device;
+    /** Timestamp in a readable format */
+    disptst: string;
+    /** Base64-encoded face image (device icon) */
+    face?: string;
+    /**
+     * Geohash of the location
+     * https://en.wikipedia.org/wiki/Geohash
+     */
+    ghash?: string;
+    /** Regions the device is currently in (e.g. `["Home", "Garage"]`). Might be empty. */
+    inregions?: string[];
+    /**
+     * No idea; some kind of timestamp as well - figure it out yourself. :)
+     * https://github.com/owntracks/recorder/blob/df009f791a845012e9cce24923e6203a079ca1ed/storage.c#L659
+     * https://github.com/owntracks/recorder/blob/df009f791a845012e9cce24923e6203a079ca1ed/storage.c#L704
+     */
+    isorcv?: string;
+    /** ISO 8601 timestamp */
+    isotst?: string;
+    /** Latitude in degrees */
+    lat: number;
+    /** Longitude in degrees */
+    lon: number;
+    /** Friendly device name */
+    name?: string;
+    /**
+     * Trigger for the location report
+     *
+     * - `"p"` = ping issued randomly by background task
+     * - `"c"` = circular region enter/leave event
+     * - `"b"` = beacon region enter/leave event (iOS only)
+     * - `"r"` = response to a reportLocation cmd message
+     * - `"u"` = manual publish requested by the user
+     * - `"t"` = timer based publish in move move (iOS only)
+     * - `"v"` = updated by Settings/Privacy/Locations Services/System Services/Frequent Locations monitoring (iOS only)
+     */
+    t?: string;
+    /** Tracker ID used to display the initials of a user */
+    tid?: string;
+    /**
+     * Original publish topic
+     * https://owntracks.org/booklet/tech/json/#topics
+     */
+    topic?: string;
+    /** UNIX epoch timestamp of the location fix in seconds */
+    tst: number;
+    /** User */
+    username?: User;
+    /** Vertical accuracy of the alt element in meters */
+    vac?: number;
+    /** Velocity in km/h */
+    vel?: number;
+}
+
+/** URL query parameters (prior to any parsing so it's all strings). */
+interface QueryParams {
+    /** Map center latitude */
+    lat?: string;
+    /** Map center longitude */
+    lng?: string;
+    /** Start date and time of selected time range */
+    start?: string;
+    /** End date and time of selected time range */
+    end?: string;
+    /** Selected user */
+    user?: string;
+    /** Selected device */
+    device?: string;
+    /** Comma-separated list of active layers */
+    layers?: string;
+}
+
+/** Callback for new WebSocket location messages. */
+interface WebSocketLocationCallback { (): void }
+
+/** Function for lazy evaluation of log messages. */
+interface LogMessageFunction { (): string }
+
+/** A CSS color. */
+type Color = string;
+
+/** A CSS color that will use `primaryColor` as fallback. */
+type OptionalColor = Color | null;
+
+/** A user's name. */
+type User = string;
+
+/** A device's name. */
+type Device = string;
+
+/** Multiple location histories mapped to user and devices. */
+type LocationHistory = { User: { Device: OTLocation[] } };

src/locales/de.json

@@ -10,6 +10,7 @@
   "Select user": "Benutzer auswählen",
   "Show all": "Alle anzeigen",
   "Select device": "Gerät auswählen",
+  "Distance travelled": "Gereiste Entfernung",
   "Download raw data": "Rohdaten herunterladen",
   "Information": "Information",
   "Show last known locations": "Zeige letzte bekannte Standorte",
@@ -23,6 +24,7 @@
   "OwnTracks documentation": "OwnTracks Dokumentation",
   "OwnTracks on Twitter": "OwnTracks auf Twitter",
   "Loading data, please wait...": "Daten werden geladen, bitte warten...",
+  "Image of {deviceName}": "Bild von {deviceName}",
   "Timestamp": "Zeitstempel",
   "Location": "Standort",
   "Address": "Adresse",

src/locales/en.json

@@ -10,6 +10,7 @@
   "Select user": "Select user",
   "Show all": "Show all",
   "Select device": "Select device",
+  "Distance travelled": "Distance travelled",
   "Download raw data": "Download raw data",
   "Information": "Information",
   "Show last known locations": "Show last known locations",
@@ -23,6 +24,7 @@
   "OwnTracks documentation": "OwnTracks documentation",
   "OwnTracks on Twitter": "OwnTracks on Twitter",
   "Loading data, please wait...": "Loading data, please wait...",
+  "Image of {deviceName}": "Image of {deviceName}",
   "Timestamp": "Timestamp",
   "Location": "Location",
   "Address": "Address",

src/locales/es.json

@@ -0,0 +1,33 @@
+{
+  "Automatically center the map view and zoom in to relevant data": "Centrar automáticamente el zoom y la vista del mapa a los datos",
+  "Fit view": "Ajustar vista",
+  "Layer settings": "Configuración de capas",
+  "Show/hide layers": "Mostrar/ocultar capas",
+  "Now": "Ahora",
+  "Select start date": "Seleccionar fecha inicio",
+  "to": "hasta",
+  "Select end date": "Seleccionar fecha fin",
+  "Select user": "Seleccionar usuario",
+  "Show all": "Mostrar todos",
+  "Select device": "Seleccionar dispositivo",
+  "Distance travelled": "Distancia recorrida",
+  "Download raw data": "Descargar datos en crudo",
+  "Information": "Información",
+  "Show last known locations": "Mostrar última ubicación conocida",
+  "Show location history (line)": "Mostrar historial (línea)",
+  "Show location history (points)": "Mostrar historial (puntos)",
+  "Show location heatmap": "Mostra mapa de calor",
+  "Minify JSON": "Reducir JSON",
+  "Copy to clipboard": "Copiar al portapapeles",
+  "Download": "Descarga",
+  "OwnTracks website": "OwnTracks - Sitio web",
+  "OwnTracks documentation": "OwnTracks - documentación",
+  "OwnTracks on Twitter": "OwnTracks en Twitter",
+  "Loading data, please wait...": "Cargando datos, por favor, espera...",
+  "Image of {deviceName}": "Imágen de {deviceName}",
+  "Timestamp": "Fecha / Hora",
+  "Location": "Ubicación",
+  "Address": "Dirección",
+  "Battery": "Bateria",
+  "Speed": "Velocidad"
+}

src/logging.js

@@ -20,6 +20,16 @@ const logColors = {
   [logLevels.ERROR]: "#ad1515",
 };
 
+/**
+ * Log a message to the browser's console.
+ *
+ * Convenience wrapper for `console.{info,warn,error}` doing some formatting
+ * and taking the `verbose` config option into account.
+ *
+ * @param {String} label Log message label, useful for filtering
+ * @param {String|LogMessageFunction} message Log message
+ * @param {String} [level] Log level, use `logLevels` constants
+ */
 export const log = (label, message, level = logLevels.INFO) => {
   if (!Object.keys(logLevels).includes(level)) {
     log("WARNING", `invalid log level: ${level}`, logLevels.WARNING);
@@ -35,5 +45,9 @@ export const log = (label, message, level = logLevels.INFO) => {
   padding: 3px;
   `;
   const logFunc = logFunctions[level];
-  logFunc(`%c${label}`, css, message);
+  logFunc(
+    `%c${label}`,
+    css,
+    typeof message === "function" ? message() : message
+  );
 };

src/main.js

@@ -1,17 +1,28 @@
 import Vue from "vue";
+import VueModal from "vue-js-modal";
+import VueOutsideEvents from "vue-outside-events";
+import VueMq from "vue-mq";
+
 import App from "@/App.vue";
 import config from "@/config";
+import { log } from "@/logging";
 import i18n from "@/i18n";
 import router from "@/router";
 import store from "@/store";
-import VModal from "vue-js-modal";
-import VOutsideEvents from "vue-outside-events";
 
-Vue.use(VModal);
-Vue.use(VOutsideEvents);
+Vue.use(VueModal);
+Vue.use(VueOutsideEvents);
+Vue.use(VueMq, {
+  breakpoints: {
+    sm: 1300,
+    lg: Infinity,
+  },
+});
 
 Vue.config.productionTip = false;
 
+log("CONFIG", config);
+
 Vue.prototype.$config = config;
 
 new Vue({

src/store/actions.js

@@ -1,11 +1,12 @@
 import * as types from "@/store/mutation-types";
 import * as api from "@/api";
 import config from "@/config";
-import { isIsoDateTime } from "@/util";
-
-/** @typedef {import("./types").QueryParams} QueryParams */
-/** @typedef {import("./types").User} User */
-/** @typedef {import("./types").Device} Device */
+import { log } from "@/logging";
+import {
+  distanceBetweenCoordinates,
+  isIsoDateTime,
+  getLocationHistoryCount,
+} from "@/util";
 
 /**
  * Populate the state from URL query parameters.
@@ -121,6 +122,45 @@ const getLastLocations = async ({ commit, state }) => {
   commit(types.SET_LAST_LOCATIONS, lastLocations);
 };
 
+const _getDistanceTravelled = locationHistory => {
+  const start = Date.now();
+  let distanceTravelled = 0;
+  Object.keys(locationHistory).forEach(user => {
+    Object.keys(locationHistory[user]).forEach(device => {
+      let lastLatLng = null;
+      locationHistory[user][device].forEach(coordinate => {
+        const latLng = L.latLng(coordinate.lat, coordinate.lon);
+        if (lastLatLng !== null) {
+          const distance = distanceBetweenCoordinates(lastLatLng, latLng);
+          if (
+            typeof config.map.maxPointDistance === "number" &&
+            config.map.maxPointDistance > 0
+          ) {
+            if (distance <= config.map.maxPointDistance) {
+              // Part of the current group, add calculated distance to total
+              distanceTravelled += distance;
+            }
+          } else {
+            // If grouping is disabled always add calculated distance to total
+            distanceTravelled += distance;
+          }
+        }
+        lastLatLng = latLng;
+      });
+    });
+  });
+  const end = Date.now();
+  log("DISTANCE", () => {
+    const locationHistoryCount = getLocationHistoryCount(locationHistory);
+    const duration = (end - start) / 1000;
+    return (
+      `[_getDistanceTravelled] Took ${duration} seconds to ` +
+      `calculate distance of ${locationHistoryCount} locations`
+    );
+  });
+  return distanceTravelled;
+};
+
 /**
  * Load location history of all devices, in the selected date range.
  */
@@ -136,15 +176,19 @@ const getLocationHistory = async ({ commit, state }) => {
   } else {
     devices = state.devices;
   }
-  commit(
-    types.SET_LOCATION_HISTORY,
-    await api.getLocationHistory(
-      devices,
-      state.startDateTime,
-      state.endDateTime
-    )
+  const locationHistory = await api.getLocationHistory(
+    devices,
+    state.startDateTime,
+    state.endDateTime
   );
   commit(types.SET_IS_LOADING, false);
+  commit(types.SET_LOCATION_HISTORY, locationHistory);
+  if (config.showDistanceTravelled) {
+    commit(
+      types.SET_DISTANCE_TRAVELLED,
+      _getDistanceTravelled(locationHistory)
+    );
+  }
 };
 
 /**

src/store/getters.js

@@ -3,17 +3,14 @@ import L from "leaflet";
 import config from "@/config";
 import { distanceBetweenCoordinates } from "@/util";
 
-/** @typedef {import("./types").State} State */
-/** @typedef {import("./types").MultiLocationHistory} MultiLocationHistory */
-/** @typedef {import("./types").DatepickerConfig} DatepickerConfig */
-
 /**
  * From the selected users' and devices' location histories, create an
  * array of all coordinates.
  *
  * @param {State} state
- * @param {MultiLocationHistory} state.locationHistory Location history of selected users and devices
- * @return {Array.<L.LatLng>} All coordinates
+ * @param {LocationHistory} state.locationHistory
+ *   Location history of selected users and devices
+ * @returns {L.LatLng[]} All coordinates
  */
 const locationHistoryLatLngs = state => {
   const latLngs = [];
@@ -33,8 +30,9 @@ const locationHistoryLatLngs = state => {
  * coordinates does not exceed `config.map.maxPointDistance`.
  *
  * @param {State} state
- * @param {MultiLocationHistory} state.locationHistory Location history of selected users and devices
- * @return {Array.<Array.<L.LatLng>>} Groups of coherent coordinates
+ * @param {LocationHistory} state.locationHistory
+ *   Location history of selected users and devices
+ * @returns {L.LatLng[][]} Groups of coherent coordinates
  */
 const locationHistoryLatLngGroups = state => {
   const groups = [];
@@ -45,7 +43,11 @@ const locationHistoryLatLngGroups = state => {
         const latLng = L.latLng(coordinate.lat, coordinate.lon);
         // Skip if group splitting is disabled or this is the first
         // coordinate in the current group
-        if (config.map.maxPointDistance !== null && latLngs.length > 0) {
+        if (
+          typeof config.map.maxPointDistance === "number" &&
+          config.map.maxPointDistance > 0 &&
+          latLngs.length > 0
+        ) {
           const lastLatLng = latLngs.slice(-1)[0];
           if (
             distanceBetweenCoordinates(lastLatLng, latLng) >

src/store/index.js

@@ -23,10 +23,14 @@ export default new Vuex.Store({
     startDateTime: config.startDateTime.toISOString().slice(0, 19),
     endDateTime: config.endDateTime.toISOString().slice(0, 19),
     map: {
-      center: config.map.center,
-      zoom: config.map.zoom,
+      center: {
+        lat: 0,
+        lng: 0,
+      },
+      zoom: 19,
       layers: config.map.layers,
     },
+    distanceTravelled: null,
   },
   getters,
   mutations,

src/store/mutation-types.js

@@ -11,3 +11,4 @@ export const SET_END_DATE_TIME = "SET_END_DATE_TIME";
 export const SET_MAP_CENTER = "SET_MAP_CENTER";
 export const SET_MAP_ZOOM = "SET_MAP_ZOOM";
 export const SET_MAP_LAYER_VISIBILITY = "SET_MAP_LAYER_VISIBILITY";
+export const SET_DISTANCE_TRAVELLED = "SET_DISTANCE_TRAVELLED";

src/store/mutations.js

@@ -40,4 +40,7 @@ export default {
   [types.SET_MAP_LAYER_VISIBILITY](state, { layer, visibility }) {
     state.map.layers[layer] = visibility;
   },
+  [types.SET_DISTANCE_TRAVELLED](state, distanceTravelled) {
+    state.distanceTravelled = distanceTravelled;
+  },
 };

src/styles/_base.scss

@@ -11,6 +11,7 @@
   --color-primary-text: #fff;
   --drop-shadow: drop-shadow(0 10px 10px rgb(0, 0, 0, 0.2));
   --dropdown-arrow: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22%23333%22%20fill-opacity%3D%221%22%20stroke%3D%22none%22%20d%3D%22M0%2C0%20L0%2C0%20L1%2C0%20L1%2C6%20L7%2C6%20L7%2C7%20L0%2C7%20z%22%20transform%3D%22rotate(-45%205%200)%22%20%2F%3E%3C%2Fsvg%3E");
+  --pin-width: 32px;
 }
 
 html, body {
@@ -105,29 +106,106 @@ pre {
     color: var(--color-primary-text);
     background: var(--color-primary);
 
-    nav {
+    &.header-sm {
+      padding: 10px;
+
+      .header-item:not(.nav-sm) .nav-item:not(:first-child) {
+        margin-left: 10px;
+      }
+    }
+
+    .header-item {
       display: flex;
-      flex: 1;
+      align-items: center;
 
       &:not(:first-child) {
         margin-left: 20px;
       }
 
-      &.nav-shrink {
-        flex: 0 1 auto;
+      &-grow {
+        flex: 1;
       }
 
-      .nav-item:not(:first-child) {
-        margin-left: 20px;
+      &-right {
+        margin-left: auto !important;
       }
 
       .feather {
         font-size: 20px;
-        margin-right: 10px;
       }
 
-      .button-icon .feather {
+      .nav-item {
+        &:not(:first-child) {
+          margin-left: 20px;
+        }
+
+        > span {
+          margin: 0 5px;
+        }
+
+        .feather {
+          margin-right: 10px;
+        }
+
+        .button-icon .feather {
+          margin: 0;
+        }
+      }
+
+      &.nav-sm {
+        background: var(--color-primary);
+        border-top: 1px solid rgba(0, 0, 0, 0.2);
+        bottom: 0;
+        display: block;
+        left: 0;
         margin: 0;
+        overflow-x: auto;
+        padding: 20px;
+        position: absolute;
+        right: 0;
+        top: 56px;
+        z-index: 1;
+
+        .nav-item {
+          align-items: center;
+          display: flex;
+          flex-wrap: wrap;
+          margin-left: auto;
+          margin-right: auto;
+          max-width: 400px;
+
+          &:not(:first-child) {
+            margin-top: 20px;
+          }
+
+          > .button,
+          > .dropdown,
+          > .date-time-picker {
+            flex: 1;
+          }
+
+          > .dropdown .dropdown-button,
+          > .date-time-picker .dropdown-button {
+            width: 100%;
+          }
+
+          > .date-time-picker {
+            margin-left: 0;
+            margin-right: 0;
+          }
+
+          > span {
+            flex-basis: 100%;
+            margin: 0;
+          }
+
+          // THIS IS TERRIBLE (but it works for now)
+          > :not(:nth-child(1)):not(:nth-child(2)) {
+            display: block;
+            margin-left: 30px;
+            margin-top: 5px;
+          }
+        }
       }
     }
   }
@@ -171,8 +249,8 @@ pre {
   overflow: hidden;
   padding: 8px 16px;
   text-overflow: ellipsis;
-  white-space: nowrap;
   transition: box-shadow 0.2s;
+  white-space: nowrap;
 
   &:focus {
     outline: none;

src/styles/_datepicker.scss

@@ -6,5 +6,14 @@
     box-shadow: none !important;
     filter: var(--drop-shadow);
     margin-top: 5px;
+
+    @media screen and (max-width: 415px) {
+      // Fix buttons being off screen
+      .datepicker-buttons-container {
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+      }
+    }
   }
 }

src/styles/_map.scss

@@ -4,7 +4,7 @@
 
   .leaflet-popup {
     filter: var(--drop-shadow);
-    margin-bottom: 25px;
+    margin-bottom: calc(var(--pin-width) * 1.5 + 20px);
 
     .leaflet-popup-content-wrapper {
       border-radius: 3px;
@@ -44,4 +44,38 @@
       color: var(--color-primary);
     }
   }
+
+  .leaflet-marker-icon {
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+
+    .pin {
+      display: block;
+      margin-left: calc(-1 * var(--pin-width) / 2);
+      margin-top: calc(-1 * var(--pin-width) * 1.5);
+      position: relative;
+      width: var(--pin-width);
+
+      &::before {
+        background: var(--color-background);
+        border-radius: 100%;
+        content: "";
+        position: absolute;
+        width: calc(var(--pin-width) / 2);
+        height: calc(var(--pin-width) / 2);
+        top: calc(var(--pin-width) / 4);
+        left: calc(var(--pin-width) / 4);
+      }
+
+      svg {
+        height: auto;
+        width: 100%;
+
+        path {
+          fill: var(--color-primary);
+        }
+      }
+    }
+  }
 }

src/types.js

@@ -1,55 +0,0 @@
-/**
- * A coordinate with latitude and longitude.
- *
- * @typedef Coordinate
- * @type {(Object|L.LatLng)}
- * @property {Number} lat Latitude
- * @property {Number} lng Longitude
- */
-
-/**
- * Vuex state.
- *
- * @typedef {Object.<String, *>} State
- */
-
-/**
- * URL query parameter object.
- *
- * @typedef {Object.<String, *>} QueryParams
- */
-
-/**
- * @typedef {Object} DatepickerConfig
- * @property {Function} DatepickerConfig.customPredictor Custom predictor function
- */
-
-/**
- * A user's name.
- *
- * @typedef {String} User
- */
-
-/**
- * A device's name.
- *
- * @typedef {String} Device
- */
-
-/**
- * A last location object.
- *
- * @typedef {Object.<String, *>} LastLocation
- */
-
-/**
- * An array of location history objects
- *
- * @typedef {Array.<Object.<String, *>>} LocationHistory
- */
-
-/**
- * Multiple arrays of location history objects mapped to user and devices.
- *
- * @typedef {Object.<User, Object.<Device, LocationHistory>>} MultiLocationHistory
- */

src/util.js

@@ -3,14 +3,12 @@ import moment from "moment";
 import config from "@/config";
 import { DATE_TIME_FORMAT, EARTH_RADIUS_IN_KM } from "@/constants";
 
-/** @typedef {import("./types").Coordinate} Coordinate */
-
 /**
  * Get a complete URL for any API resource, taking the
  * base URL configuration into account.
  *
  * @param {String} path Path to the API resource
- * @return {URL} Final API URL
+ * @returns {URL} Final API URL
  */
 export const getApiUrl = path => {
   const normalizedBaseUrl = config.api.baseUrl.endsWith("/")
@@ -24,7 +22,7 @@ export const getApiUrl = path => {
  * Check if the given string is an ISO 8601 YYYY-MM-DDTHH:MM:SS datetime.
  *
  * @param {String} s Input value to be tested
- * @return {Boolean} Whether the input matches the expected format
+ * @returns {Boolean} Whether the input matches the expected format
  */
 export const isIsoDateTime = s => moment(s, DATE_TIME_FORMAT, true).isValid();
 
@@ -32,7 +30,7 @@ export const isIsoDateTime = s => moment(s, DATE_TIME_FORMAT, true).isValid();
  * Convert degrees to radians.
  *
  * @param {Number} degrees Angle in degrees
- * @return {Number} Angle in radians
+ * @returns {Number} Angle in radians
  */
 export const degreesToRadians = degrees => (degrees * Math.PI) / 180;
 
@@ -44,7 +42,7 @@ export const degreesToRadians = degrees => (degrees * Math.PI) / 180;
  *
  * @param {Coordinate} c1 First coordinate
  * @param {Coordinate} c2 Second coordinate
- * @return {Number} Distance in meters
+ * @returns {Number} Distance in meters
  */
 export const distanceBetweenCoordinates = (c1, c2) => {
   const r = EARTH_RADIUS_IN_KM * 1000;
@@ -83,3 +81,38 @@ export const download = (text, filename, mimeType = "text/plain") => {
   element.click();
   document.body.removeChild(element);
 };
+
+/**
+ * Format a distance in meters into a human-readable string with unit.
+ *
+ * This only supports m / km for now, but could read a config option and return
+ * ft / mi.
+ *
+ * @param {Number} distance Distance in meters
+ * @returns {String} Formatted string including unit
+ */
+export const humanReadableDistance = distance => {
+  let unit = "m";
+  if (Math.abs(distance) >= 1000) {
+    distance = distance / 1000;
+    unit = "km";
+  }
+  return `${distance.toLocaleString(config.locale, {
+    maximumFractionDigits: 1,
+  })} ${unit}`;
+};
+
+/**
+ * Get the total number of locations from a nested location history.
+ *
+ * @param {LocationHistory} locationHistory Location history
+ * @returns {Number} Total number of locations
+ */
+export const getLocationHistoryCount = locationHistory =>
+  Object.keys(locationHistory)
+    .map(user =>
+      Object.keys(locationHistory[user])
+        .map(device => locationHistory[user][device].length)
+        .reduce((a, b) => a + b, 0)
+    )
+    .reduce((a, b) => a + b, 0);

src/views/Map.vue

@@ -37,6 +37,7 @@
         v-for="l in lastLocations"
         :key="`${l.topic}-marker`"
         :lat-lng="[l.lat, l.lon]"
+        :icon="markerIcon"
       >
         <LDeviceLocationPopup
           :user="l.username"
@@ -66,7 +67,11 @@
       <template v-for="(userDevices, user) in locationHistory">
         <template v-for="(deviceLocations, device) in userDevices">
           <LCircleMarker
-            v-for="(l, n) in deviceLocations"
+            v-for="(l, n) in deviceLocationsWithNameAndFace(
+              user,
+              device,
+              deviceLocations
+            )"
             :key="`${user}-${device}-${n}`"
             :lat-lng="[l.lat, l.lon]"
             v-bind="circleMarker"
@@ -74,6 +79,8 @@
             <LDeviceLocationPopup
               :user="user"
               :device="device"
+              :name="l.name"
+              :face="l.face"
               :timestamp="l.tst"
               :lat="l.lat"
               :lon="l.lon"
@@ -113,22 +120,11 @@ import {
   LPolyline,
 } from "vue2-leaflet";
 import "leaflet/dist/leaflet.css";
-import markerIcon from "leaflet/dist/images/marker-icon.png";
-import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
-import markerShadow from "leaflet/dist/images/marker-shadow.png";
-
 import * as types from "@/store/mutation-types";
+import LCustomMarker from "@/components/LCustomMarker";
 import LHeatmap from "@/components/LHeatmap";
 import LDeviceLocationPopup from "@/components/LDeviceLocationPopup";
 
-// See https://github.com/KoRiGaN/Vue2Leaflet/issues/28#issuecomment-299038157
-delete L.Icon.Default.prototype._getIconUrl;
-L.Icon.Default.mergeOptions({
-  iconUrl: markerIcon,
-  iconRetinaUrl: markerIcon2x,
-  shadowUrl: markerShadow,
-});
-
 export default {
   components: {
     LMap,
@@ -148,6 +144,7 @@ export default {
       center: this.$store.state.map.center,
       controls: this.$config.map.controls,
       heatmap: this.$config.map.heatmap,
+      markerIcon: LCustomMarker,
       maxZoom: this.$config.map.maxZoom,
       maxNativeZoom: this.$config.map.maxNativeZoom,
       url: this.$config.map.url,
@@ -202,6 +199,37 @@ export default {
         });
       }
     },
+    /**
+     * Find a the last location object for a user/device combination from the
+     * local cache and backfill name and face attributes to each item from the
+     * passed array of location objects.
+     *
+     * @param {User} user Username
+     * @param {Device} device Device name
+     * @param {OTLocation[]} deviceLocations Device name
+     * @returns {OTLocation[]} Updated locations
+     */
+    deviceLocationsWithNameAndFace(user, device, deviceLocations) {
+      const lastLocation = this.lastLocations.find(
+        l => l.username === user && l.device === device
+      );
+      if (!lastLocation) {
+        return deviceLocations;
+      }
+      return deviceLocations.map(l => ({
+        ...l,
+        name: lastLocation.name,
+        face: lastLocation.face,
+      }));
+    },
+  },
+  watch: {
+    lastLocations() {
+      this.fitView();
+    },
+    locationHistory() {
+      this.fitView();
+    },
   },
 };
 </script>

tests/util.test.js

@@ -4,6 +4,7 @@ import {
   isIsoDateTime,
   degreesToRadians,
   distanceBetweenCoordinates,
+  humanReadableDistance,
 } from "@/util";
 
 describe("getApiUrl", () => {
@@ -102,3 +103,22 @@ describe("distanceBetweenCoordinates", () => {
     ).toBe(9105627.810109457);
   });
 });
+
+describe("humanReadableDistance", () => {
+  test("expected results", () => {
+    expect(humanReadableDistance(0)).toBe("0 m");
+    expect(humanReadableDistance(1)).toBe("1 m");
+    expect(humanReadableDistance(123)).toBe("123 m");
+    expect(humanReadableDistance(123.4567)).toBe("123.5 m");
+    expect(humanReadableDistance(999)).toBe("999 m");
+    expect(humanReadableDistance(1000)).toBe("1 km");
+    expect(humanReadableDistance(9000)).toBe("9 km");
+    expect(humanReadableDistance(9900)).toBe("9.9 km");
+    expect(humanReadableDistance(9990)).toBe("10 km");
+    expect(humanReadableDistance(9999)).toBe("10 km");
+    expect(humanReadableDistance(9999.0)).toBe("10 km");
+    expect(humanReadableDistance(9999.9999)).toBe("10 km");
+    expect(humanReadableDistance(100000)).toBe("100 km");
+    expect(humanReadableDistance(-42)).toBe("-42 m");
+  });
+});