Release 2.2.0

Upgrade dependencies
Improve mobile layout further
2026-02-15 21:09:50 +00:00 · 2020-03-18 17:56:11 +00:00 · 2020-03-18 17:55:43 +00:00 · 2020-03-18 17:50:49 +00:00 · 2020-03-18 00:35:24 +00:00 · 2020-03-18 00:28:11 +00:00
55 changed files with 3499 additions and 1685 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,8 +5,14 @@ module.exports = {
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
-    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "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",
      {
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+liberapay: owntracks.org
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,4 +3,6 @@ node_js:
  - 10
 cache: yarn
 script:
+  - yarn lint:js
+  - yarn lint:md
  - yarn test
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,98 @@
-# 2.0.0-beta.1 (2019-11-02)
+# Changelog
+
+Dates are in UTC.
+
+## 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.
+
+- Add `jsconfig.json`
+- Set `no-console`/`no-debugger` to `"warn"` in dev mode
+- Linting and formatting:
+  - Separate npm scripts for linting and formatting
+  - Lint/format Markdown files
+  - Run lint on Travis CI
+- Upgrade dependencies
+
+## 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 ([#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 ([#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 ([#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
+- Fix missing translation of "[date] to [date]"
+- Update i18n development notes in `README.md`
+
+## 2.0.0-beta.3 (2019-12-13)
+
+- Add i18 support (currently English and German, `locale` config option)
+- Add custom checkbox focus style
+- Fix layer dropdown issues ([#1](https://github.com/owntracks/frontend/issues/1))
+- Fix checkbox style issues
+- Fix hover/focus inconsistencies
+- Fix Docker image labels
+- `README.md` enhancements
+- Upgrade dependencies
+
+## 2.0.0-beta.2 (2019-11-02)

 - Add `onLocationChange.reloadHistory` config option
 - Add Travis CI config
@@ -7,7 +101,7 @@
 - Fix table of content links in config documentation
 - Upgrade dependencies

-# 2.0.0-beta.1 (2019-10-26)
+## 2.0.0-beta.1 (2019-10-26)

 - Convert codebase to Node.js based development workflow, including:
  - Package management using yarn
@@ -23,22 +117,22 @@
  - 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)
+## 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)
+## 1.0.0 (2019-06-18)

 - Initial release
--- a/2
+++ b/2
@@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2019 Linus Groh
+Copyright (c) 2019-2020 Linus Groh

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@@ -1,14 +1,11 @@
 # OwnTracks UI

-> Web interface for OwnTracks
-
 ![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 Status](https://travis-ci.org/owntracks/frontend.svg?branch=master)](https://travis-ci.org/owntracks/frontend)
 [![License](https://img.shields.io/github/license/owntracks/frontend?color=d63e97)](https://github.com/owntracks/frontend/blob/master/LICENSE)

-<p style="text-align: center;">
-  <img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/owntracks-ui.png" alt="OwnTracks UI">
-</p>
+![OwnTracks UI](https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/owntracks-ui.png)

 ## Introduction

@@ -16,29 +13,40 @@ 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)
+
+## Features
+
+- Last known (i.e. live) locations:
+  - Accuracy visualization (circle)
+  - Device friendly name and icon
+  - Detailed information (if available): time, latitude, longitude, height, battery and
+    speed
+- Location history (data points, line or both)
+- Location heatmap
+- Quickly fit all shown objects on the map into view
+- Display data in a specific date range
+- Filter by user and device
+- Download selected location data as JSON
+- Highly customisable
+
 ## Installation

-### Manually
-
- Run `yarn install --production` to install dependencies
- Run `yarn build` to compile and minify for production
- Copy the content of the `dist/` directory to your webroot
-
-The API is expected to be reachable under the same domain as the web interface.
-
 ### Docker

-You can launch directly via Docker run like this:
+A pre-built Docker image is available on Docker Hub as [`owntracks/frontend`](https://hub.docker.com/r/owntracks/frontend).
+
+You can start a container directly via `docker run`:

 ```console
-$ docker run -d -p 80:80 -e SERVER_HOST=otrecorder-host -e SERVER_PORT=otrecorder-port owntracks/frontend
+$ docker run -d -p 80:80 -e SERVER_HOST=otrecorder-host -e SERVER_PORT=8083 owntracks/frontend
 ```

 Or you can use `docker-compose` (if you also run the OwnTracks Recorder with the default
 compose config, and the service is named `otrecorder`):

 ```yaml
-version: '3'
+version: "3"

 services:
  owntracks-ui:
@@ -53,6 +61,26 @@ services:
    restart: unless-stopped
 ```

+To change the port on which the nginx server will listen on, set the
+`LISTEN_PORT` enviroment variable - default is 80.
+
+To build the image from source replace `image:` with:
+
+```yaml
+build:
+  context: ./owntracks-frontend
+  dockerfile: docker/Dockerfile
+```
+
+(assuming you have this repository cloned to `owntracks-frontend` in the same
+directory as `docker-compose.yml`)
+
+### Manually
+
+- 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
+
 ## Configuration

 It's possible to get started without any configuration change whatsoever, assuming your
@@ -67,15 +95,21 @@ See [`docs/config.md`](docs/config.md) for all available options.

 - Run `yarn install` to install dependencies
 - Run `yarn serve` to compile for development and start the hot-reload server
- Run `yarn lint` to lint and fix files
+- Run `yarn lint:js` to lint JavaScript/Vue files
+- Run `yarn lint:md` to lint Markdown files
+- Run `yarn format:js` to format JavaScript/Vue files
+- Run `yarn format:md` to format Markdown files
 - Run `yarn test` to run unit tests

+### CORS-Proxy
+
 You can use the [`corsProxy.js`](scripts/corsProxy.js) script to use your production
 instance of OwnTracks for development without making changes to its CORS-Headers:

 ```console
 $ yarn cors-proxy
 ```
+
 If you have [basic authentication](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#Basic_authentication_scheme)
 enabled, create a `.env` file with your credentials:

@@ -95,29 +129,32 @@ and `OT_PROXY_PORT` environment variables.

 Finally update `api.baseUrl` in your config to `"http://0.0.0.0:8888/https://owntracks.example.com"`.

-## Features
+### I18n

- Last known (i.e. live) locations:
-  - Accuracy visualization (circle)
-  - Device friendly name and icon
-  - Detailed information (if available): time, latitude, longitude, height, battery and
-    speed
- Location history (data points, line or both)
- Location heatmap
- Quickly fit all shown objects on the map into view
- Display data in a specific date range
- Filter by user and device
- Highly customisable
+This project uses [Vue I18n](https://kazupon.github.io/vue-i18n/). To see missing and
+unused i18n entries, run:
+
+```console
+$ yarn i18n:report
+```
+
+To add a new locale, copy `en.json` to `<locale>.json` in [`src/locales`](src/locales)
+and start translating the individual strings. Make sure to [mention the new locale to the docs](docs/config.md#locale)!
+
+For a specific example see commit [`b2edda4`](https://github.com/owntracks/frontend/commit/b2edda410f16633aa6fd9cd4e5250f2031536c7d)
+where German translations were added.

 ## Screenshots

-_Click to enlarge._
-
-<a href="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/live.png" target="_blank"><img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/live.png" alt="Live" height="200"></a>
-<a href="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/multiple.png" target="_blank"><img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/multiple.png" alt="Multiple" height="200"></a>
-<a href="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/date-selection.png" target="_blank"><img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/date-selection.png" alt="Date selection" height="200"></a>
-<a href="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/heatmap.png" target="_blank"><img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/heatmap.png" alt="Heatmap" height="200"></a>
-<a href="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/customized.png" target="_blank"><img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/customized.png" alt="Customized" height="200"></a>
+<p align="center">
+  <img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/loading.gif" alt="Loading...">
+  <br>
+  <br>
+  <img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/downloader.png" alt="Download location data">
+  <br>
+  <br>
+  <img src="https://raw.githubusercontent.com/owntracks/frontend/master/docs/images/info.png" alt="Info">
+</p>

 ## Contributing

--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,7 +1,4 @@
 FROM node:10 as build
-LABEL version="2.0.0-beta.2"
-LABEL description="OwnTracks UI"
-LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 WORKDIR /usr/src/app
 COPY package.json yarn.lock ./
 RUN yarn install
@@ -9,6 +6,9 @@ COPY . ./
 RUN yarn build

 FROM nginx:1.17-alpine
+LABEL version="2.2.0"
+LABEL description="OwnTracks UI"
+LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \
  SERVER_HOST=otrecorder \
  SERVER_PORT=80
--- a/docs/config.md
+++ b/docs/config.md
@@ -24,13 +24,11 @@ window.owntracks.config = {};

 - `api`
  - [`baseUrl`](#apibaseurl)
- [`endDate`](#enddate)
+- [`endDateTime`](#enddatetime)
 - [`ignorePingLocation`](#ignorepinglocation)
+- [`locale`](#locale)
 - `map`
  - [`attribution`](#mapattribution)
-  - `center`
-    - [`lat`](#mapcenterlat)
-    - [`lng`](#mapcenterlng)
  - [`circle`](#mapcircle)
  - [`circleMarker`](#mapcirclemarker)
  - `controls`
@@ -58,13 +56,13 @@ window.owntracks.config = {};
  - [`maxZoom`](#mapmaxzoom)
  - [`polyline`](#mappolyline)
  - [`url`](#mapurl)
-  - [`zoom`](#mapzoom)
 - `onLocationChange`
  - [`reloadHistory`](#onlocationchangereloadhistory)
 - [`primaryColor`](#primarycolor)
 - [`selectedDevice`](#selecteddevice)
 - [`selectedUser`](#selecteduser)
- [`startDate`](#startdate)
+- [`showDistanceTravelled`](#showdistancetravelled)
+- [`startDateTime`](#startdatetime)
 - [`verbose`](#verbose)

 ### `api.baseUrl`
@@ -91,17 +89,17 @@ Base URL for the recorder's HTTP and WebSocket API. Keep CORS in mind.
  };
  ```

-### `endDate`
+### `endDateTime`

-Initial end date for fetched data.
+Initial end date and time (browser timezone) for fetched data.

 - Type: [`Date`]
- Default: today
+- Default: today, 23:59:59
 - Example:
  ```js
  // Data will be fetched up to 1970-01-01
  window.owntracks.config = {
-    endDate: new Date(1970, 1, 1)
+    endDateTime: new Date(1970, 1, 1)
  };
  ```

@@ -120,6 +118,22 @@ Remove the `ping/ping` location from the fetched data. This is useful when using
  };
  ```

+### `locale`
+
+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"`
+
 ### `map.attribution`

 Attribution for map tiles.
@@ -136,20 +150,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
@@ -354,18 +354,12 @@ 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"
    }
  };
  ```

-### `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
@@ -391,7 +385,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.
@@ -424,20 +418,30 @@ amount of data fetched after page load.
  };
  ```

-### `startDate`
+### `showDistanceTravelled`

-Initial start date for fetched data.
+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.

 - Type: [`Date`]
- Default: one month ago
+- Default: one month ago, 00:00:00
 - Example:
  ```js
  // Data will be fetched from the first day of the current month
-  const startDate = new Date();
-  startDate.setUTCHours(0, 0, 0, 0);
-  startDate.setUTCDate(1);
+  const startDateTime = new Date();
+  startDateTime.setHours(0, 0, 0, 0);
+  startDateTime.setDate(1);
  window.owntracks.config = {
-    startDate
+    startDateTime
  };
  ```

@@ -448,9 +452,9 @@ Whether to enable verbose mode or not.
 - Type: [`Boolean`]
 - Default: `false`

-[`Boolean`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-[`Date`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
-[`Number`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
-[`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
+[`boolean`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[`date`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+[`number`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
+[`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
--- a/docs/images/customized.png
+++ b/docs/images/customized.png
--- a/docs/images/date-selection.png
+++ b/docs/images/date-selection.png
--- a/docs/images/downloader.png
+++ b/docs/images/downloader.png
--- a/docs/images/heatmap.png
+++ b/docs/images/heatmap.png
--- a/docs/images/info.png
+++ b/docs/images/info.png
--- a/docs/images/live.png
+++ b/docs/images/live.png
--- a/docs/images/loading.gif
+++ b/docs/images/loading.gif
--- a/docs/images/map-features.png
+++ b/docs/images/map-features.png
--- a/docs/images/multiple.png
+++ b/docs/images/multiple.png
--- a/docs/images/owntracks-ui.png
+++ b/docs/images/owntracks-ui.png
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules"]
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "owntracks-ui",
-  "version": "2.0.0-beta.2",
+  "version": "2.2.0",
  "author": {
    "name": "Linus Groh",
    "email": "mail@linusgroh.de"
@@ -8,43 +8,53 @@
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
    "cors-proxy": "node scripts/corsProxy.js",
+    "format:js": "vue-cli-service lint",
+    "format:md": "prettier --write '{*.md,docs/**/*.md,src/**/*.md}'",
+    "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}'",
    "test": "vue-cli-service test:unit"
  },
  "dependencies": {
    "clipboard-copy": "^3.1.0",
-    "core-js": "^3.3.6",
+    "core-js": "^3.6.4",
    "deepmerge": "^4.2.2",
-    "leaflet": "^1.5.1",
+    "leaflet": "^1.6.0",
    "leaflet.heat": "^0.2.0",
-    "vue": "^2.6.6",
+    "moment": "^2.24.0",
+    "vue": "^2.6.11",
+    "vue-ctk-date-time-picker": "^2.4.0",
    "vue-feather-icons": "^5.0.0",
-    "vue-js-modal": "^1.3.31",
-    "vue-router": "^3.1.3",
-    "vue2-leaflet": "^2.2.1",
-    "vuejs-datepicker": "^1.6.2",
-    "vuex": "^3.1.1"
+    "vue-i18n": "^8.15.5",
+    "vue-js-modal": "^1.3.33",
+    "vue-mq": "^1.0.1",
+    "vue-outside-events": "^1.1.3",
+    "vue-router": "^3.1.6",
+    "vue2-leaflet": "^2.5.2",
+    "vuex": "^3.1.3"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0.5",
-    "@vue/cli-plugin-eslint": "^4.0.5",
-    "@vue/cli-plugin-unit-jest": "^4.0.5",
-    "@vue/cli-service": "^4.0.5",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-eslint": "^4.2.3",
+    "@vue/cli-plugin-unit-jest": "^4.2.3",
+    "@vue/cli-service": "^4.2.3",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/test-utils": "1.0.0-beta.32",
    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.1.0",
    "cors-anywhere": "^0.4.1",
-    "eslint": "^6.6.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.2.3",
-    "jest-fetch-mock": "^2.1.2",
-    "lint-staged": "^9.4.2",
-    "node-sass": "^4.13.0",
-    "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.5.21"
+    "eslint": "^6.8.0",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "jest-fetch-mock": "^3.0.3",
+    "lint-staged": "^10.0.8",
+    "moment-locales-webpack-plugin": "^1.2.0",
+    "node-sass": "^4.13.1",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-i18n": "^0.6.1",
+    "vue-template-compiler": "^2.6.11"
  },
  "license": "MIT",
  "repository": {
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,6 @@
 <script>
 import { mapActions } from "vuex";

-import config from "@/config";
 import * as types from "@/store/mutation-types";
 import { log } from "@/logging";
 import AppHeader from "@/components/AppHeader";
@@ -30,7 +29,7 @@ export default {
  created() {
    document.documentElement.style.setProperty(
      "--color-primary",
-      config.primaryColor
+      this.$config.primaryColor
    );
    this.populateStateFromQuery(this.$route.query);
    this.loadData();
@@ -40,8 +39,8 @@ export default {
        [
          types.SET_SELECTED_USER,
          types.SET_SELECTED_DEVICE,
-          types.SET_START_DATE,
-          types.SET_END_DATE,
+          types.SET_START_DATE_TIME,
+          types.SET_END_DATE_TIME,
          types.SET_MAP_CENTER,
          types.SET_MAP_ZOOM,
          types.SET_MAP_LAYER_VISIBILITY,
@@ -68,8 +67,8 @@ export default {
    updateUrlQuery() {
      const {
        map,
-        startDate: start,
-        endDate: end,
+        startDateTime: start,
+        endDateTime: end,
        selectedUser: user,
        selectedDevice: device,
      } = this.$store.state;
@@ -80,8 +79,8 @@ export default {
        lat: map.center.lat,
        lng: map.center.lng,
        zoom: map.zoom,
-        start: start.toISOString().split("T")[0],
-        end: end.toISOString().split("T")[0],
+        start,
+        end,
        ...(user !== null && { user }),
        ...(user !== null && device !== null && { device }),
        ...(activeLayers.length > 0 && { layers: activeLayers.join(",") }),
--- a/src/api.js
+++ b/src/api.js
@@ -1,61 +1,52 @@
 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).catch(error => log("HTTP", error, logLevels.ERROR));
+  return fetch(url.href).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 +58,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 +75,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 +87,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;
 };

 /**
@@ -95,9 +100,9 @@ export const getLastLocations = async (user, device) => {
 *
 * @param {User} user Username
 * @param {Device} device Device name
- * @param {Date} start Start date
- * @param {Date} end End date
- * @return {LocationHistory} Array of location history objects
+ * @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
 */
 export const getUserDeviceLocationHistory = async (
  user,
@@ -105,26 +110,33 @@ export const getUserDeviceLocationHistory = async (
  start,
  end
 ) => {
-  const startDate = start.toISOString().split("T")[0];
-  const endDate = end.toISOString().split("T")[0];
  const response = await fetchApi("/api/0/locations", {
-    from: `${startDate}T00:00:00`,
-    to: `${endDate}T23:59:59`,
+    from: start,
+    to: end,
    user,
    device,
    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 {Date} start Start date
- * @param {Date} end End date
- * @return {Object.<User, Object.<Device, LocationHistory>>} Array of location history objects
+ * @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
+ * @returns {LocationHistory} Location history
 */
 export const getLocationHistory = async (devices, start, end) => {
  const locationHistory = {};
@@ -143,13 +155,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");
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -1,102 +1,94 @@
 <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="Automatically center the map view and zoom in to relevant data"
+          :title="
+            $t('Automatically center the map view and zoom in to relevant data')
+          "
          @click="$root.$emit('fitView')"
        >
-          Fit View
+          {{ $t("Fit view") }}
        </button>
      </div>
      <div class="nav-item">
-        <LayersIcon size="1x" />
-        <div class="dropdown">
-          <button class="dropdown-button button" title="Show/hide layers">
-            Layer Settings
-          </button>
-          <div class="dropdown-body">
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.last"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'last',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show last known locations
-            </label>
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.line"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'line',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show location history (line)
-            </label>
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.points"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'points',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show location history (points)
-            </label>
-            <label tabindex="0">
-              <input
-                type="checkbox"
-                :checked="map.layers.heatmap"
-                @change="
-                  setMapLayerVisibility({
-                    layer: 'heatmap',
-                    visibility: $event.target.checked,
-                  })
-                "
-              />
-              Show location heatmap
-            </label>
-          </div>
-        </div>
+        <LayersIcon size="1x" aria-hidden="true" role="img" />
+        <Dropdown :label="$t('Layer settings')" :title="$t('Show/hide layers')">
+          <label v-for="option in layerSettingsOptions" :key="option.layer">
+            <input
+              type="checkbox"
+              :checked="map.layers[option.layer]"
+              @change="
+                setMapLayerVisibility({
+                  layer: option.layer,
+                  visibility: $event.target.checked,
+                })
+              "
+            />
+            {{ option.label }}
+          </label>
+        </Dropdown>
      </div>
      <div class="nav-item">
-        <CalendarIcon size="1x" />
-        <Datepicker
-          v-model="startDate"
-          :use-utc="true"
-          :disabled-dates="startDateDisabledDates"
-          title="Select start date"
-        />
-        to
-        <Datepicker
-          v-model="endDate"
-          :use-utc="true"
-          :disabled-dates="endDateDisabledDates"
-          title="Select end date"
-        />
+        <CalendarIcon size="1x" aria-hidden="true" role="img" />
+        <VueCtkDateTimePicker
+          v-model="startDateTime"
+          :format="DATE_TIME_FORMAT"
+          :color="$config.primaryColor"
+          :locale="$config.locale"
+          :max-date="endDateTime"
+          :button-now-translation="$t('Now')"
+        >
+          <button
+            type="button"
+            class="dropdown-button button"
+            :title="$t('Select start date')"
+          />
+        </VueCtkDateTimePicker>
+        <span>{{ $t("to") }}</span>
+        <VueCtkDateTimePicker
+          v-model="endDateTime"
+          :format="DATE_TIME_FORMAT"
+          :color="$config.primaryColor"
+          :locale="$config.locale"
+          :min-date="startDateTime"
+          :button-now-translation="$t('Now')"
+        >
+          <button
+            type="button"
+            class="dropdown-button button"
+            :title="$t('Select end date')"
+          />
+        </VueCtkDateTimePicker>
      </div>
      <div class="nav-item">
-        <UserIcon size="1x" />
+        <UserIcon size="1x" aria-hidden="true" role="img" />
        <select
          v-model="selectedUser"
          class="dropdown-button button"
-          title="Select user"
+          :title="$t('Select user')"
        >
          <option :value="null">
-            Show All
+            {{ $t("Show all") }}
          </option>
          <option v-for="user in users" :value="user" :key="user">
            {{ user }}
@@ -104,14 +96,14 @@
        </select>
      </div>
      <div v-if="selectedUser" class="nav-item">
-        <SmartphoneIcon size="1x" />
+        <SmartphoneIcon size="1x" aria-hidden="true" role="img" />
        <select
          v-model="selectedDevice"
          class="dropdown-button button"
-          title="Select device"
+          :title="$t('Select device')"
        >
          <option :value="null">
-            Show All
+            {{ $t("Show all") }}
          </option>
          <option
            v-for="device in devices[selectedUser]"
@@ -123,23 +115,34 @@
        </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"
-          title="Download raw data"
+          :title="$t('Download raw data')"
          @click="$modal.show('download')"
        >
-          <DownloadIcon size="1x" />
+          <DownloadIcon
+            size="1x"
+            :aria-label="$t('Download raw data')"
+            role="img"
+          />
        </button>
      </div>
      <div class="nav-item">
        <button
          class="button button-flat button-icon"
-          title="Information"
+          :title="$t('Information')"
          @click="$modal.show('information')"
        >
-          <InfoIcon size="1x" />
+          <InfoIcon size="1x" :aria-label="$t('Information')" role="img" />
        </button>
      </div>
    </nav>
@@ -147,32 +150,53 @@
 </template>

 <script>
+import moment from "moment";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import {
  CalendarIcon,
+  CrosshairIcon,
  DownloadIcon,
  InfoIcon,
  LayersIcon,
+  MenuIcon,
  SmartphoneIcon,
  UserIcon,
 } from "vue-feather-icons";
-import Datepicker from "vuejs-datepicker";
+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 { 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,
-    Datepicker,
+    VueCtkDateTimePicker,
+    Dropdown,
+  },
+  data() {
+    return {
+      DATE_TIME_FORMAT,
+      layerSettingsOptions: [
+        { layer: "last", label: this.$t("Show last known locations") },
+        { layer: "line", label: this.$t("Show location history (line)") },
+        { layer: "points", label: this.$t("Show location history (points)") },
+        { layer: "heatmap", label: this.$t("Show location heatmap") },
+      ],
+      showMobileNav: false,
+    };
  },
  computed: {
-    ...mapState(["users", "devices", "map"]),
-    ...mapGetters(["startDateDisabledDates", "endDateDisabledDates"]),
+    ...mapState(["users", "devices", "map", "distanceTravelled"]),
    selectedUser: {
      get() {
        return this.$store.state.selectedUser;
@@ -189,20 +213,35 @@ export default {
        this.setSelectedDevice(value);
      },
    },
-    startDate: {
+    startDateTime: {
      get() {
-        return this.$store.state.startDate;
+        return moment
+          .utc(this.$store.state.startDateTime, DATE_TIME_FORMAT)
+          .local()
+          .format(DATE_TIME_FORMAT);
      },
      set(value) {
-        this.setStartDate(value);
+        this.setStartDateTime(
+          moment(value, DATE_TIME_FORMAT)
+            .utc()
+            .format(DATE_TIME_FORMAT)
+        );
      },
    },
-    endDate: {
+    endDateTime: {
      get() {
-        return this.$store.state.endDate;
+        return moment
+          .utc(this.$store.state.endDateTime, DATE_TIME_FORMAT)
+          .local()
+          .format(DATE_TIME_FORMAT);
      },
      set(value) {
-        this.setEndDate(value);
+        this.setEndDateTime(
+          moment(value, DATE_TIME_FORMAT)
+            .set("seconds", 59)
+            .utc()
+            .format(DATE_TIME_FORMAT)
+        );
      },
    },
  },
@@ -213,9 +252,10 @@ export default {
    ...mapActions([
      "setSelectedUser",
      "setSelectedDevice",
-      "setStartDate",
-      "setEndDate",
+      "setStartDateTime",
+      "setEndDateTime",
    ]),
+    humanReadableDistance,
  },
 };
 </script>
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="dropdown" v-focus-outside="hide" v-click-outside="hide">
+    <button class="dropdown-button button" :title="title" @click="toggle">
+      {{ label }}
+    </button>
+    <div v-if="active" class="dropdown-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      active: false,
+    };
+  },
+  methods: {
+    toggle() {
+      this.active = !this.active;
+    },
+    hide() {
+      this.active = false;
+    },
+  },
+};
+</script>
--- a/src/components/LCustomMarker.js
+++ b/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>`,
+});
--- a/src/components/LDeviceLocationPopup.vue
+++ b/src/components/LDeviceLocationPopup.vue
@@ -1,32 +1,36 @@
 <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" />
+      <img
+        v-if="face"
+        :src="faceImageDataURI"
+        :alt="$t('Image of {deviceName}', { deviceName })"
+        :title="$t('Image of {deviceName}', { deviceName })"
+      />
      <ul class="info-list">
-        <li>
-          <ClockIcon size="1x" />
-          {{ new Date(timestamp * 1000).toLocaleString() }}
+        <li :title="$t('Timestamp')">
+          <ClockIcon size="1x" aria-hidden="true" role="img" />
+          {{ new Date(timestamp * 1000).toLocaleString($config.locale) }}
        </li>
-        <li>
-          <MapPinIcon size="1x" />
+        <li :title="$t('Location')">
+          <MapPinIcon size="1x" aria-hidden="true" role="img" />
          {{ lat }}
          <br />
          {{ lon }}
          <br />
          {{ alt }}m
        </li>
-        <li v-if="address">
-          <HomeIcon size="1x" />
+        <li v-if="address" :title="$t('Address')">
+          <HomeIcon size="1x" aria-hidden="true" role="img" />
          {{ address }}
        </li>
-        <li v-if="typeof battery === 'number'">
-          <BatteryIcon size="1x" />
+        <li v-if="typeof battery === 'number'" :title="$t('Battery')">
+          <BatteryIcon size="1x" aria-hidden="true" role="img" />
          {{ battery }} %
        </li>
-        <li v-if="typeof speed === 'number'">
-          <ZapIcon size="1x" />
+        <li v-if="typeof speed === 'number'" :title="$t('Speed')">
+          <ZapIcon size="1x" aria-hidden="true" role="img" />
          {{ speed }} km/h
        </li>
      </ul>
@@ -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>
--- a/src/components/LHeatmap.vue
+++ b/src/components/LHeatmap.vue
@@ -58,6 +58,11 @@ const props = {
    custom: true,
    default: true,
  },
+  activated: {
+    type: Boolean,
+    custom: true,
+    default: true,
+  },
 };

 export default {
--- a/src/components/modals/Download.vue
+++ b/src/components/modals/Download.vue
@@ -8,15 +8,23 @@
        id="option-minify-json"
      />
      <label for="option-minify-json">
-        Minify JSON
+        {{ $t("Minify JSON") }}
      </label>
    </div>
    <div class="buttons">
-      <button class="button button-outline button-primary" @click="copy">
-        Copy to Clipboard
+      <button
+        class="button button-outline button-primary"
+        :title="$t('Copy to clipboard')"
+        @click="copy"
+      >
+        {{ $t("Copy to clipboard") }}
      </button>
-      <button class="button button-primary" @click="download">
-        Download
+      <button
+        class="button button-primary"
+        :title="$t('Download')"
+        @click="download"
+      >
+        {{ $t("Download") }}
      </button>
    </div>
  </modal>
@@ -65,8 +73,8 @@ export default {
  },
  computed: {
    ...mapState([
-      "startDate",
-      "endDate",
+      "startDateTime",
+      "endDateTime",
      "selectedUser",
      "selectedDevice",
      "locationHistory",
@@ -90,8 +98,8 @@ export default {
        null,
        this.options.minifyJson ? 0 : 2
      );
-      const start = this.startDate.toISOString().split("T")[0];
-      const end = this.endDate.toISOString().split("T")[0];
+      const start = this.startDateTime;
+      const end = this.endDateTime;
      const user = this.selectedUser ? `_${this.selectedUser}` : "";
      const device = this.selectedDevice ? `_${this.selectedDevice}` : "";
      const filename = `data_${start}_${end}${user}${device}.json`;
--- a/src/components/modals/Information.vue
+++ b/src/components/modals/Information.vue
@@ -2,35 +2,35 @@
  <modal name="information" adaptive>
    <ul class="info-list">
      <li>
-        <GithubIcon size="1x" />
+        <GithubIcon size="1x" aria-hidden="true" role="img" />
        <a href="https://github.com/owntracks/frontend">
          owntracks/frontend
        </a>
        ({{ frontendVersion }})
      </li>
      <li>
-        <GithubIcon size="1x" />
+        <GithubIcon size="1x" aria-hidden="true" role="img" />
        <a href="https://github.com/owntracks/recorder">
          owntracks/recorder
        </a>
        ({{ recorderVersion || "Loading version..." }})
      </li>
      <li>
-        <GlobeIcon size="1x" />
+        <GlobeIcon size="1x" aria-hidden="true" role="img" />
        <a href="https://owntracks.org">
-          OwnTracks Website
+          {{ $t("OwnTracks website") }}
        </a>
      </li>
      <li>
-        <BookIcon size="1x" />
+        <BookIcon size="1x" aria-hidden="true" role="img" />
        <a href="https://owntracks.org/booklet/">
-          OwnTracks Documentation
+          {{ $t("OwnTracks documentation") }}
        </a>
      </li>
      <li>
-        <TwitterIcon size="1x" />
+        <TwitterIcon size="1x" aria-hidden="true" role="img" />
        <a href="https://twitter.com/OwnTracks">
-          OwnTracks on Twitter
+          {{ $t("OwnTracks on Twitter") }}
        </a>
      </li>
    </ul>
--- a/src/components/modals/Loading.vue
+++ b/src/components/modals/Loading.vue
@@ -1,7 +1,7 @@
 <template>
  <modal name="loading" :click-to-close="false" adaptive>
    <LoaderIcon class="loader" size="1.5x" />
-    Loading data, please wait...
+    {{ $t("Loading data, please wait...") }}
  </modal>
 </template>

--- a/src/config.js
+++ b/src/config.js
@@ -1,24 +1,22 @@
 import deepmerge from "deepmerge";

-const endDate = new Date();
-endDate.setUTCHours(0, 0, 0, 0);
+const endDateTime = new Date();
+endDateTime.setHours(23, 59, 59, 0);

-const startDate = new Date(endDate);
-startDate.setUTCMonth(startDate.getMonth() - 1);
+const startDateTime = new Date(endDateTime);
+startDateTime.setMonth(startDateTime.getMonth() - 1);
+startDateTime.setHours(0, 0, 0, 0);

 const DEFAULT_CONFIG = {
  api: {
    baseUrl: `${window.location.protocol}//${window.location.host}`,
  },
-  endDate,
+  endDateTime,
  ignorePingLocation: true,
+  locale: "en",
  map: {
    attribution:
      '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
-    center: {
-      lat: 0,
-      lng: 0,
-    },
    circle: {
      color: null,
      fillColor: null,
@@ -63,7 +61,6 @@ const DEFAULT_CONFIG = {
      fillColor: "transparent",
    },
    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-    zoom: 19,
  },
  onLocationChange: {
    reloadHistory: false,
@@ -71,7 +68,8 @@ const DEFAULT_CONFIG = {
  primaryColor: "#3f51b5",
  selectedDevice: null,
  selectedUser: null,
-  startDate,
+  showDistanceTravelled: true,
+  startDateTime,
  verbose: false,
 };

--- a/src/constants.js
+++ b/src/constants.js
@@ -1,8 +1,7 @@
-// Regular expression for an ISO 8601 YYYY-MM-DD date.
-// Used to validate dates from URL query parameters.
-export const ISO_DATE_REGEXP = new RegExp(
-  /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/
-);
+// date and time format as expected by the OwnTracks recorder,
+// using moment.js formatting tokens.
+// https://momentjs.com/docs/#/displaying/format/
+export const DATE_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss";

 // https://en.wikipedia.org/wiki/Earth_radius
 // Used to calculate the distance between two coordinates.
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -0,0 +1,23 @@
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+import config from "@/config";
+
+Vue.use(VueI18n);
+
+const locales = require.context("./locales", true, /[A-Za-z0-9-_,\s]+\.json$/i);
+const messages = {};
+locales.keys().forEach(key => {
+  const matched = key.match(/([A-Za-z0-9-_]+)\./i);
+  if (matched && matched.length > 1) {
+    const locale = matched[1];
+    messages[locale] = locales(key);
+  }
+});
+
+export default new VueI18n({
+  locale: config.locale.split("-")[0],
+  fallbackLocale: "en",
+  formatFallbackMessages: true,
+  messages,
+});
--- a/src/index.d.ts
+++ b/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[] } };
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -0,0 +1,33 @@
+{
+  "Automatically center the map view and zoom in to relevant data": "Kartenansicht automatisch zentrieren und zu relevanten Daten hereinzoomen",
+  "Fit view": "Ansicht anpassen",
+  "Layer settings": "Ebeneneinstellungen",
+  "Show/hide layers": "Ebenen ein-/ausblenden",
+  "Now": "Jetzt",
+  "Select start date": "Startdatum auswählen",
+  "to": "bis",
+  "Select end date": "Enddatum auswählen",
+  "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",
+  "Show location history (line)": "Zeige Standortverlauf (Linie)",
+  "Show location history (points)": "Zeige Standortverlauf (Punkte)",
+  "Show location heatmap": "Zeige Standort-Heatmap",
+  "Minify JSON": "JSON minimieren",
+  "Copy to clipboard": "In die Zwischenablage kopieren",
+  "Download": "Herunterladen",
+  "OwnTracks website": "OwnTracks Webseite",
+  "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",
+  "Battery": "Akku",
+  "Speed": "Geschwindigkeit"
+}
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -0,0 +1,33 @@
+{
+  "Automatically center the map view and zoom in to relevant data": "Automatically center the map view and zoom in to relevant data",
+  "Fit view": "Fit view",
+  "Layer settings": "Layer settings",
+  "Show/hide layers": "Show/hide layers",
+  "Now": "Now",
+  "Select start date": "Select start date",
+  "to": "to",
+  "Select end date": "Select end date",
+  "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",
+  "Show location history (line)": "Show location history (line)",
+  "Show location history (points)": "Show location history (points)",
+  "Show location heatmap": "Show location heatmap",
+  "Minify JSON": "Minify JSON",
+  "Copy to clipboard": "Copy to clipboard",
+  "Download": "Download",
+  "OwnTracks website": "OwnTracks website",
+  "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",
+  "Battery": "Battery",
+  "Speed": "Speed"
+}
--- a/src/locales/es.json
+++ b/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"
+}
--- a/src/logging.js
+++ b/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
+  );
 };
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,32 @@
 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";

-Vue.use(VModal);
+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({
+  i18n,
  router,
  store,
  render: h => h(App),
--- a/src/store/actions.js
+++ b/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 { isIsoDate } 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.
@@ -28,11 +29,11 @@ const populateStateFromQuery = ({ state, commit }, query) => {
  if (query.zoom && !isNaN(parseInt(query.zoom))) {
    commit(types.SET_MAP_ZOOM, parseInt(query.zoom));
  }
-  if (query.start && isIsoDate(query.start)) {
-    commit(types.SET_START_DATE, new Date(query.start));
+  if (query.start && isIsoDateTime(query.start)) {
+    commit(types.SET_START_DATE_TIME, query.start);
  }
-  if (query.end && isIsoDate(query.end)) {
-    commit(types.SET_END_DATE, new Date(query.end));
+  if (query.end && isIsoDateTime(query.end)) {
+    commit(types.SET_END_DATE_TIME, query.end);
  }
  if (query.user) {
    commit(types.SET_SELECTED_USER, query.user);
@@ -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,11 +176,19 @@ const getLocationHistory = async ({ commit, state }) => {
  } else {
    devices = state.devices;
  }
-  commit(
-    types.SET_LOCATION_HISTORY,
-    await api.getLocationHistory(devices, state.startDate, state.endDate)
+  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)
+    );
+  }
 };

 /**
@@ -172,22 +220,22 @@ const setSelectedDevice = async ({ commit, dispatch }, device) => {
 };

 /**
- * Set the start date for loading data and reload the location history.
+ * Set the start date and time for loading data and reload the location history.
 *
- * @param {Date} startDate Start date for loading data
+ * @param {String} startDateTime Start date and time in UTC for loading data
 */
-const setStartDate = async ({ commit, dispatch }, startDate) => {
-  commit(types.SET_START_DATE, startDate);
+const setStartDateTime = async ({ commit, dispatch }, startDateTime) => {
+  commit(types.SET_START_DATE_TIME, startDateTime);
  await dispatch("reloadData");
 };

 /**
- * Set the end date for loading data and reload the location history.
+ * Set the end date and time for loading data and reload the location history.
 *
- * @param {Date} endDate End date for loading data
+ * @param {String} endDateTime End date and time in UTC for loading data
 */
-const setEndDate = async ({ commit, dispatch }, endDate) => {
-  commit(types.SET_END_DATE, endDate);
+const setEndDateTime = async ({ commit, dispatch }, endDateTime) => {
+  commit(types.SET_END_DATE_TIME, endDateTime);
  await dispatch("reloadData");
 };

@@ -203,6 +251,6 @@ export default {
  getRecorderVersion,
  setSelectedUser,
  setSelectedDevice,
-  setStartDate,
-  setEndDate,
+  setStartDateTime,
+  setEndDateTime,
 };
--- a/src/store/getters.js
+++ b/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) >
@@ -65,37 +67,7 @@ const locationHistoryLatLngGroups = state => {
  return groups;
 };

-/**
- * For the start date selector, disable all dates above the end date
- * or current date.
- *
- * @param {State} state
- * @param {Date} state.endDate End date
- * @return {DatepickerConfig} Configuration for the `disabled-dates` prop of the `vuejs-datepicker` component
- */
-const startDateDisabledDates = state => {
-  return {
-    customPredictor: date => date > state.endDate || date > new Date(),
-  };
-};
-
-/**
- * For the end date selector, disable all dates below the start date
- * or above the current date.
- *
- * @param {State} state
- * @param {Date} state.startDate Start date
- * @return {DatepickerConfig} Configuration for the `disabled-dates` prop of the `vuejs-datepicker` component
- */
-const endDateDisabledDates = state => {
-  return {
-    customPredictor: date => date < state.startDate || date > new Date(),
-  };
-};
-
 export default {
  locationHistoryLatLngs,
  locationHistoryLatLngGroups,
-  startDateDisabledDates,
-  endDateDisabledDates,
 };
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -19,13 +19,18 @@ export default new Vuex.Store({
    locationHistory: {},
    selectedUser: config.selectedUser,
    selectedDevice: config.selectedUser !== null ? config.selectedDevice : null,
-    startDate: config.startDate,
-    endDate: config.endDate,
+    // Convert to UTC and get rid of milliseconds
+    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,
--- a/src/store/mutation-types.js
+++ b/src/store/mutation-types.js
@@ -6,8 +6,9 @@ export const SET_LAST_LOCATIONS = "SET_LAST_LOCATIONS";
 export const SET_LOCATION_HISTORY = "SET_LOCATION_HISTORY";
 export const SET_SELECTED_USER = "SET_SELECTED_USER";
 export const SET_SELECTED_DEVICE = "SET_SELECTED_DEVICE";
-export const SET_START_DATE = "SET_START_DATE";
-export const SET_END_DATE = "SET_END_DATE";
+export const SET_START_DATE_TIME = "SET_START_DATE_TIME";
+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";
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -25,11 +25,11 @@ export default {
  [types.SET_SELECTED_DEVICE](state, selectedDevice) {
    state.selectedDevice = selectedDevice;
  },
-  [types.SET_START_DATE](state, startDate) {
-    state.startDate = startDate;
+  [types.SET_START_DATE_TIME](state, startDateTime) {
+    state.startDateTime = startDateTime;
  },
-  [types.SET_END_DATE](state, endDate) {
-    state.endDate = endDate;
+  [types.SET_END_DATE_TIME](state, endDateTime) {
+    state.endDateTime = endDateTime;
  },
  [types.SET_MAP_CENTER](state, center) {
    state.map.center = center;
@@ -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;
+  },
 };
--- a/src/styles/_base.scss
+++ b/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 {
@@ -33,9 +34,17 @@ ul {

 input[type="checkbox"] {
  appearance: none;
+  border: 0; // Remove the unchecked checkbox outline in Safari on iOS
+  border-radius: 4px; // Round the focus box-shadow
  cursor: pointer;
+  margin-right: 3px;
  position: relative;
-  vertical-align: bottom;
+  vertical-align: top;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
+  }

  &::before {
    border: 2px solid var(--color-primary);
@@ -94,33 +103,109 @@ pre {
    display: flex;
    padding: 20px;
    white-space: nowrap;
-    overflow-x: auto;
    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;
+          }
+        }
      }
    }
  }
@@ -155,16 +240,6 @@ pre {
  }
 }

-.vdp-datepicker input {
-  cursor: pointer;
-  color: var(--color-text);
-  background: var(--color-background);
-  border: 0;
-  border-radius: 18px;
-  padding: 8px 16px;
-  min-width: 130px;
-}
-
 .button {
  cursor: pointer;
  color: var(--color-text);
@@ -174,15 +249,21 @@ pre {
  overflow: hidden;
  padding: 8px 16px;
  text-overflow: ellipsis;
+  transition: box-shadow 0.2s;
  white-space: nowrap;

+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2);
+  }
+
+  &:focus::-moz-focus-inner {
+    border-color: transparent;
+  }
+
  &.button-primary {
    color: var(--color-primary-text);
    background: var(--color-primary);
-
-    &:focus::-moz-focus-inner {
-      border-color: var(--color-primary-text)e;
-    }
  }

  &.button-outline {
@@ -207,7 +288,8 @@ pre {

  &.button-outline,
  &.button-flat {
-    transition: background 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
+
    &:hover,
    &:focus {
      background: rgba(0, 0, 0, 0.2);
@@ -221,12 +303,11 @@ pre {

 .dropdown {
  display: inline-block;
+  position: relative;
 }

-.dropdown-button,
-.vdp-datepicker input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+// Not nested so it works as the button alone
+.dropdown-button {
  appearance: none;
  background-image: var(--dropdown-arrow);
  background-repeat: no-repeat;
@@ -236,7 +317,6 @@ pre {
 }

 .dropdown-body {
-  display: none;
  position: absolute;
  margin-top: 12px;
  padding: 8px 0;
@@ -246,33 +326,28 @@ pre {
  filter: var(--drop-shadow);
  z-index: 1;

+  &::before {
+    content: "";
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid var(--color-background);
+    position: absolute;
+    top: -20px;
+    left: 20px;
+  }
+
  label {
    cursor: pointer;
    display: block;
    padding: 8px 15px;

    &:hover {
-      background: rgba(0, 0, 0, 0.1);
+      background: rgba(0, 0, 0, 0.2);
    }
  }
 }

-.dropdown-body::before,
-.vdp-datepicker .vdp-datepicker__calendar::before {
-  content: "";
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  border-top: 10px solid transparent;
-  border-bottom: 10px solid var(--color-background);
-  position: absolute;
-  top: -20px;
-  left: 20px;
-}
-
-.dropdown:focus-within .dropdown-body {
-  display: block;
-}
-
 .feather {
  vertical-align: middle;
 }
--- a/src/styles/_datepicker.scss
+++ b/src/styles/_datepicker.scss
@@ -1,31 +1,18 @@
-.vdp-datepicker {
-  position: static !important;
+.date-time-picker {
  display: inline-block;
-  white-space: initial;
-  overflow: initial;
+  width: auto;

-  input {
-    width: 120px;
-  }
-
-  .vdp-datepicker__calendar {
-    color: var(--color-text);
-    border: 0;
-    border-radius: 3px;
-    margin-top: 12px;
+  .datepicker {
+    box-shadow: none !important;
    filter: var(--drop-shadow);
+    margin-top: 5px;

-    .cell {
-      &:not(.blank):not(.disabled).day:hover,
-      &:not(.blank):not(.disabled).month:hover,
-      &:not(.blank):not(.disabled).year:hover {
-        border-color: var(--color-primary);
-      }
-
-      &.selected,
-      &.selected:hover {
-        background: var(--color-primary);
-        color: var(--color-primary-text);
+    @media screen and (max-width: 415px) {
+      // Fix buttons being off screen
+      .datepicker-buttons-container {
+        bottom: 0;
+        position: absolute;
+        width: 100%;
      }
    }
  }
--- a/src/styles/_map.scss
+++ b/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;
@@ -23,10 +23,11 @@
      margin-top: 15px;
      margin-right: 15px;
      border-radius: 100px;
+      transition: background-color 0.2s;

      &:hover,
      &:focus {
-        background: rgba(0, 0, 0, 0.1);
+        background: rgba(0, 0, 0, 0.2);
        color: inherit;
      }
    }
@@ -35,4 +36,46 @@
  .leaflet-popup-tip {
    box-shadow: none;
  }
+
+  .leaflet-control-container .leaflet-control-attribution {
+    background: var(--color-background);
+
+    a {
+      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);
+        }
+      }
+    }
+  }
 }
--- a/src/types.js
+++ b/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
- */
--- a/src/util.js
+++ b/src/util.js
@@ -1,14 +1,14 @@
-import config from "@/config";
-import { ISO_DATE_REGEXP, EARTH_RADIUS_IN_KM } from "@/constants";
+import moment from "moment";

-/** @typedef {import("./types").Coordinate} Coordinate */
+import config from "@/config";
+import { DATE_TIME_FORMAT, EARTH_RADIUS_IN_KM } from "@/constants";

 /**
 * 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("/")
@@ -19,18 +19,18 @@ export const getApiUrl = path => {
 };

 /**
- * Check if the given string is an ISO 8601 YYYY-MM-DD date.
+ * 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 is an ISO 8601 date
+ * @returns {Boolean} Whether the input matches the expected format
 */
-export const isIsoDate = s => ISO_DATE_REGEXP.test(s);
+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;

@@ -42,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;
@@ -81,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);
--- a/src/views/Map.vue
+++ b/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,23 +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 config from "@/config";
+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,
@@ -145,26 +140,28 @@ export default {
  },
  data() {
    return {
-      attribution: config.map.attribution,
+      attribution: this.$config.map.attribution,
      center: this.$store.state.map.center,
-      controls: config.map.controls,
-      heatmap: config.map.heatmap,
-      maxZoom: config.map.maxZoom,
-      maxNativeZoom: config.map.maxNativeZoom,
-      url: config.map.url,
+      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,
      zoom: this.$store.state.map.zoom,
      circle: {
-        ...config.map.circle,
-        color: config.map.circle.color || config.primaryColor,
-        fillColor: config.map.circle.fillColor || config.primaryColor,
+        ...this.$config.map.circle,
+        color: this.$config.map.circle.color || this.$config.primaryColor,
+        fillColor:
+          this.$config.map.circle.fillColor || this.$config.primaryColor,
      },
      circleMarker: {
-        ...config.map.circleMarker,
-        color: config.map.circleMarker.color || config.primaryColor,
+        ...this.$config.map.circleMarker,
+        color: this.$config.map.circleMarker.color || this.$config.primaryColor,
      },
      polyline: {
-        ...config.map.polyline,
-        color: config.map.polyline.color || config.primaryColor,
+        ...this.$config.map.polyline,
+        color: this.$config.map.polyline.color || this.$config.primaryColor,
      },
    };
  },
@@ -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>
--- a/tests/api.test.js
+++ b/tests/api.test.js
@@ -12,9 +12,7 @@ describe("API", () => {
    expect(version).toBe("1.2.3");

    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0].href).toEqual(
-      "http://localhost/api/0/version"
-    );
+    expect(fetch.mock.calls[0][0]).toEqual("http://localhost/api/0/version");
  });

  test("getUsers", async () => {
@@ -24,7 +22,7 @@ describe("API", () => {
    expect(users).toEqual(["foo", "bar"]);

    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0].href).toEqual("http://localhost/api/0/list");
+    expect(fetch.mock.calls[0][0]).toEqual("http://localhost/api/0/list");
  });

  test("getDevices", async () => {
@@ -37,10 +35,10 @@ describe("API", () => {
    expect(devices).toEqual({ foo: ["phone", "tablet"], bar: ["laptop"] });

    expect(fetch.mock.calls.length).toEqual(2);
-    expect(fetch.mock.calls[0][0].href).toEqual(
+    expect(fetch.mock.calls[0][0]).toEqual(
      "http://localhost/api/0/list?user=foo"
    );
-    expect(fetch.mock.calls[1][0].href).toEqual(
+    expect(fetch.mock.calls[1][0]).toEqual(
      "http://localhost/api/0/list?user=bar"
    );
  });
@@ -68,7 +66,7 @@ describe("API", () => {
    expect(lastLocation).toEqual(response);

    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0].href).toEqual("http://localhost/api/0/last");
+    expect(fetch.mock.calls[0][0]).toEqual("http://localhost/api/0/last");
  });

  test("getLastLocations with user", async () => {
@@ -89,7 +87,7 @@ describe("API", () => {
    expect(lastLocation).toEqual(response);

    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0].href).toEqual(
+    expect(fetch.mock.calls[0][0]).toEqual(
      "http://localhost/api/0/last?user=foo"
    );
  });
@@ -108,7 +106,7 @@ describe("API", () => {
    expect(lastLocation).toEqual(response);

    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0].href).toEqual(
+    expect(fetch.mock.calls[0][0]).toEqual(
      "http://localhost/api/0/last?user=foo&device=phone"
    );
  });
@@ -144,13 +142,13 @@ describe("API", () => {
    const locationHistory = await api.getUserDeviceLocationHistory(
      "foo",
      "phone",
-      new Date(Date.UTC(1970, 0, 1)),
-      new Date(Date.UTC(1970, 11, 31))
+      "1970-01-01T00:00:00",
+      "1970-12-31T23:59:59"
    );
    expect(locationHistory).toEqual(response.data);

    expect(fetch.mock.calls.length).toEqual(1);
-    expect(fetch.mock.calls[0][0].href).toEqual(
+    expect(fetch.mock.calls[0][0]).toEqual(
      "http://localhost/api/0/locations?from=1970-01-01T00%3A00%3A00&to=1970-12-31T23%3A59%3A59&user=foo&device=phone&format=json"
    );
  });
@@ -194,8 +192,8 @@ describe("API", () => {

    const locationHistory = await api.getLocationHistory(
      { foo: ["phone", "tablet"], bar: ["laptop"] },
-      new Date(Date.UTC(1970, 0, 1)),
-      new Date(Date.UTC(1970, 11, 31))
+      "1970-01-01T00:00:00",
+      "1970-12-31T23:59:59"
    );
    expect(locationHistory).toEqual({
      foo: {
@@ -206,13 +204,13 @@ describe("API", () => {
    });

    expect(fetch.mock.calls.length).toEqual(3);
-    expect(fetch.mock.calls[0][0].href).toEqual(
+    expect(fetch.mock.calls[0][0]).toEqual(
      "http://localhost/api/0/locations?from=1970-01-01T00%3A00%3A00&to=1970-12-31T23%3A59%3A59&user=foo&device=phone&format=json"
    );
-    expect(fetch.mock.calls[1][0].href).toEqual(
+    expect(fetch.mock.calls[1][0]).toEqual(
      "http://localhost/api/0/locations?from=1970-01-01T00%3A00%3A00&to=1970-12-31T23%3A59%3A59&user=foo&device=tablet&format=json"
    );
-    expect(fetch.mock.calls[2][0].href).toEqual(
+    expect(fetch.mock.calls[2][0]).toEqual(
      "http://localhost/api/0/locations?from=1970-01-01T00%3A00%3A00&to=1970-12-31T23%3A59%3A59&user=bar&device=laptop&format=json"
    );
  });
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -1 +1 @@
-global.fetch = require("jest-fetch-mock");
+require("jest-fetch-mock").enableMocks();
--- a/tests/util.test.js
+++ b/tests/util.test.js
@@ -1,9 +1,10 @@
 import config from "@/config";
 import {
  getApiUrl,
-  isIsoDate,
+  isIsoDateTime,
  degreesToRadians,
  distanceBetweenCoordinates,
+  humanReadableDistance,
 } from "@/util";

 describe("getApiUrl", () => {
@@ -24,26 +25,36 @@ describe("getApiUrl", () => {
  });
 });

-describe("isIsoDate", () => {
+describe("isIsoDateTime", () => {
  test("no match", () => {
-    expect(isIsoDate("foo")).toBe(false);
-    expect(isIsoDate("2019")).toBe(false);
-    expect(isIsoDate("2019-09")).toBe(false);
-    expect(isIsoDate("2019.09.27")).toBe(false);
-    expect(isIsoDate("2019_09_27")).toBe(false);
-    expect(isIsoDate("2019/09/27")).toBe(false);
-    expect(isIsoDate("27-09-2019")).toBe(false);
-    expect(isIsoDate("27.09.2019")).toBe(false);
-    expect(isIsoDate("27_09_2019")).toBe(false);
-    expect(isIsoDate("27/09/2019")).toBe(false);
-    expect(isIsoDate("0000-00-00")).toBe(false);
-    expect(isIsoDate("1234-56-78")).toBe(false);
+    expect(isIsoDateTime("foo")).toBe(false);
+    expect(isIsoDateTime("2019")).toBe(false);
+    expect(isIsoDateTime("2019-09")).toBe(false);
+    expect(isIsoDateTime("2019.09.27")).toBe(false);
+    expect(isIsoDateTime("2019_09_27")).toBe(false);
+    expect(isIsoDateTime("2019/09/27")).toBe(false);
+    expect(isIsoDateTime("27-09-2019")).toBe(false);
+    expect(isIsoDateTime("27.09.2019")).toBe(false);
+    expect(isIsoDateTime("27_09_2019")).toBe(false);
+    expect(isIsoDateTime("27/09/2019")).toBe(false);
+    expect(isIsoDateTime("0000-00-00")).toBe(false);
+    expect(isIsoDateTime("1234-56-78")).toBe(false);
+    expect(isIsoDateTime("0000-00-00T00:00:00")).toBe(false);
+    expect(isIsoDateTime("0000-01-01T25:60:60")).toBe(false);
+    expect(isIsoDateTime("2019-12-14T99:00:00")).toBe(false);
+    expect(isIsoDateTime("2019-12-14 25:60:60")).toBe(false);
  });

  test("match", () => {
-    expect(isIsoDate("0000-01-01")).toBe(true);
-    expect(isIsoDate("2019-09-27")).toBe(true);
-    expect(isIsoDate("9999-12-31")).toBe(true);
+    expect(isIsoDateTime("0000-01-01T00:00:00")).toBe(true);
+    expect(isIsoDateTime("0000-01-01T12:34:56")).toBe(true);
+    expect(isIsoDateTime("0000-01-01T23:59:59")).toBe(true);
+    expect(isIsoDateTime("2019-09-27T00:00:00")).toBe(true);
+    expect(isIsoDateTime("2019-09-27T12:34:56")).toBe(true);
+    expect(isIsoDateTime("2019-09-27T23:59:59")).toBe(true);
+    expect(isIsoDateTime("9999-12-31T00:00:00")).toBe(true);
+    expect(isIsoDateTime("9999-12-31T12:34:56")).toBe(true);
+    expect(isIsoDateTime("9999-12-31T23:59:59")).toBe(true);
  });
 });

@@ -92,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");
+  });
+});
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,6 @@
 const fs = require("fs");
 const webpack = require("webpack");
+const MomentLocalesPlugin = require("moment-locales-webpack-plugin");

 const packageJson = fs.readFileSync("./package.json");
 const version = JSON.parse(packageJson).version;
@@ -12,6 +13,15 @@ module.exports = {
          PACKAGE_VERSION: `"${version}"`,
        },
      }),
+      new MomentLocalesPlugin(),
    ],
  },
+
+  pluginOptions: {
+    i18n: {
+      locale: "en",
+      fallbackLocale: "en",
+      localeDir: "locales",
+    },
+  },
 };
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Linus Groh	57caacb548	Release 2.2.0	2020-03-18 17:56:11 +00:00
Linus Groh	9783b6f27d	Upgrade dependencies	2020-03-18 17:55:43 +00:00
Linus Groh	b262ff602c	Improve mobile layout further - Reduce header paddings - Align buttons/dropdowns	2020-03-18 17:50:49 +00:00
Linus Groh	458658865e	Release 2.1.0	2020-03-18 00:35:24 +00:00
Linus Groh	e744e2c001	Make it usable on mobile Closes #19	2020-03-18 00:28:11 +00:00
Linus Groh	feff6d5272	Upgrade dependencies	2020-03-14 16:17:31 +00:00
Linus Groh	7b88102c2b	Merge pull request #28 from owntracks/dependabot/npm_and_yarn/acorn-5.7.4 Bump acorn from 5.7.3 to 5.7.4	2020-03-14 16:14:03 +00:00
dependabot[bot]	a2c7974f38	Bump acorn from 5.7.3 to 5.7.4 Bumps [acorn](https://github.com/acornjs/acorn) from 5.7.3 to 5.7.4. - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](https://github.com/acornjs/acorn/compare/5.7.3...5.7.4) Signed-off-by: dependabot[bot] <support@github.com>	2020-03-14 09:44:52 +00:00
Linus Groh	b3fdf1eabe	Improve verbose mode logging - Support passing a log message function to `logging.log` for lazy evaluation - Log results (or at least lengths) of all API functions - Log merged config during initialisation - Log distance calculation duration	2020-03-07 00:22:56 +00:00
Linus Groh	1482833e05	Fix a few parameter type definitions	2020-03-07 00:14:59 +00:00
Linus Groh	04fa3392f0	Fix typo in CHANGELOG.md	2020-03-03 14:05:08 +00:00
Linus Groh	a4334e5273	Fix manual installation instructions in README.md `yarn install --production` does not actually install all dependencies required for building - maybe we have to move some `devDependencies` to `dependencies`, but for now this should do the trick.	2020-03-03 13:40:15 +00:00
Linus Groh	806526380d	Replace default Leaflet marker with a custom one Closes #2	2020-03-03 08:11:45 +00:00
Linus Groh	2e63f01438	Release 2.0.0 🎉	2020-03-01 21:16:59 +00:00
Linus Groh	fb97cd080f	Release 2.0.0-beta.11	2020-03-01 21:11:33 +00:00
Linus Groh	f2d461d019	Merge pull request #20 from owntracks/clean-up-the-typing-mess Clean up the typing mess	2020-03-01 20:59:36 +00:00
Linus Groh	798a0af97d	Update function documentations	2020-03-01 20:56:28 +00:00
Linus Groh	3c92a77847	Fix typo in OTLocation.inregions comment	2020-03-01 20:55:52 +00:00
Linus Groh	b252a6580a	Use TypeScript interface for websocket calllback	2020-03-01 20:53:38 +00:00
Linus Groh	9ce9933d11	Remove unused properties from Config interface	2020-03-01 20:34:21 +00:00
Linus Groh	f22db6301b	Merge branch 'master' into clean-up-the-typing-mess	2020-03-01 20:33:00 +00:00
Linus Groh	3b18ab58ed	Replace map initial center/zoom config with auto fitting Closes #23	2020-03-01 20:28:15 +00:00
Linus Groh	bb81daaea4	Upgrade dependencies	2020-03-01 19:56:57 +00:00
Linus Groh	f491d63eb9	Mention Spanish translations in config docs	2020-02-09 11:07:35 +00:00
Linus Groh	e923fdc6c7	Merge pull request #25 from dtorner/patch-2 Create es.json	2020-02-09 11:00:30 +00:00
dtorner	b1ce1297ed	Create es.json	2020-02-09 09:47:11 +01:00
Linus Groh	f4262efaa4	Change distance travelled label to `title` See https://github.com/owntracks/frontend/issues/22#issuecomment-583698919	2020-02-08 11:50:48 +00:00
Linus Groh	a2109a5802	Fix humanReadableDistance JSDoc That's what you get from copy & paste...	2020-02-07 21:51:39 +00:00
Linus Groh	00fbb7cd7c	Release 2.0.0-beta.10	2020-02-07 21:42:03 +00:00
Linus Groh	4078597f7a	Add "distance travelled" feature	2020-02-07 21:20:38 +00:00
Linus Groh	8dc9611a77	Release 2.0.0-beta.9	2020-02-06 21:30:41 +00:00
Linus Groh	c1f58c992e	Support locale with language and region part	2020-02-06 21:26:21 +00:00
Linus Groh	6631929d6f	Update screenshot	2020-02-06 21:13:11 +00:00
Linus Groh	36281db2e3	Add .github/FUNDING.yml	2020-02-06 20:35:08 +00:00
Linus Groh	5a8d261943	Fix typo in docs/config.md	2020-02-06 20:23:08 +00:00
Linus Groh	7b83349dc8	Improve CHANGELOG.md	2020-02-06 20:22:48 +00:00
Linus Groh	bc3670df99	Release 2.0.0-beta.8	2020-01-26 00:57:08 +00:00
Linus Groh	95613753a9	Enable ESLint max-len rule	2020-01-26 00:49:15 +00:00
Linus Groh	cfa3052a0a	Show name and face on location history popups	2020-01-26 00:40:30 +00:00
Linus Groh	0bd84f4de5	s/@return/@returns	2020-01-26 00:38:36 +00:00
Linus Groh	85e51643bf	Add missing alt/title to device face image	2020-01-25 23:37:41 +00:00
Linus Groh	6cbdf30580	Use computed prop for device name in location popup	2020-01-25 23:33:10 +00:00
Linus Groh	988b10de40	Release 2.0.0-beta.7	2020-01-24 21:20:22 +00:00
Linus Groh	a20fbf7e10	Remove all @typedef definitions	2020-01-24 21:02:24 +00:00
Linus Groh	d2eafd5a4a	Merge branch 'master' into clean-up-the-typing-mess	2020-01-24 20:43:57 +00:00
Linus Groh	639e96cae8	Upgrade dependencies	2020-01-24 20:43:21 +00:00
Linus Groh	df3dcb60d8	Update year in LICENSE	2020-01-05 11:52:40 +00:00
Linus Groh	09ce3b7861	Lint code on Travis CI	2019-12-16 21:20:31 +00:00
Linus Groh	04f0b65480	Separate linting and formatting	2019-12-16 21:16:33 +00:00
Linus Groh	d3e3b82a13	Lint/format markdown files	2019-12-16 21:06:01 +00:00
Linus Groh	769185ee5a	Set no-console/no-debugger to "warn" in dev mode	2019-12-16 20:24:15 +00:00
Linus Groh	7b6641e70d	Add jsconfig.json	2019-12-16 19:35:17 +00:00
Linus Groh	871f9f0cb2	Add index.d.ts	2019-12-15 20:59:57 +00:00
Linus Groh	2827d85865	Release 2.0.0-beta.6	2019-12-14 19:39:56 +00:00
Linus Groh	693947c064	Fix heatmap	2019-12-14 19:35:24 +00:00
Linus Groh	a31c048060	Release 2.0.0-beta.5	2019-12-14 17:13:13 +00:00
Linus Groh	1f2be0aeb9	Upgrade dependencies	2019-12-14 17:10:22 +00:00
Linus Groh	92401eb6b1	Add $config Vue instance property	2019-12-14 16:59:12 +00:00
Linus Groh	8d2f22d3de	Use configured locale for timestamp formatting	2019-12-14 16:48:18 +00:00
Linus Groh	1d106e45da	Add Leaflet popup close button bg color transition	2019-12-14 16:33:17 +00:00
Linus Groh	1f07ae9266	Improve accessibility * More title attributes * Usage of aria-hidden and role attributes * Focus style improvements * Text contrast improvements	2019-12-14 16:32:10 +00:00
Linus Groh	8399476195	Release 2.0.0-beta.4	2019-12-14 09:43:07 -05:00
Linus Groh	7767a06875	Add support for time selection	2019-12-14 09:35:46 -05:00
Linus Groh	5bcb7a63bc	Add missing translation of "to"	2019-12-14 13:37:56 +00:00
Linus Groh	f0b3ed2632	Add example commit for new locale	2019-12-13 20:33:54 +00:00
Linus Groh	185d6fd842	Clarify i18n development notes	2019-12-13 20:29:10 +00:00
Linus Groh	fac0479b25	Release 2.0.0-beta.3	2019-12-13 19:53:31 +00:00
Linus Groh	b2edda410f	Add German translations	2019-12-13 19:45:53 +00:00
Linus Groh	73465268e2	Add i18 support	2019-12-13 19:45:21 +00:00
Linus Groh	4e449235b2	Add custom checkbox focus style	2019-12-13 18:41:27 +00:00
Linus Groh	1a7f969b59	Fix checkbox style issues	2019-12-13 18:41:02 +00:00
Linus Groh	e7e6ea7dda	Fix hover/focus inconsistencies	2019-12-13 18:40:14 +00:00
Linus Groh	9f522dd727	Reimplement layer settings dropdown	2019-12-13 18:39:33 +00:00
Linus Groh	76e8a56cc7	Mention LISTEN_PORT environment variable in docs	2019-12-13 18:37:33 +00:00
Linus Groh	012eb74837	Update README.md	2019-12-11 22:25:59 +00:00
Linus Groh	207a63c0d8	Upgrade dependencies	2019-12-11 22:12:45 +00:00
Linus Groh	bbc381e70c	Update README.md	2019-11-07 19:23:53 +00:00
Linus Groh	de45906860	Add drop shadow to window screenshot	2019-11-06 22:36:59 +00:00
Linus Groh	1734ef7c74	Update screenshots	2019-11-06 22:21:32 +00:00
Linus Groh	c4d368eee9	Fix Docker image labels The LABEL instructions in docker/Dockerfile were not applied to the final image, it only had the ones inherited from the nginx image.	2019-11-02 19:18:56 +00:00
Linus Groh	f0ff18c792	Add Travis CI build status badge	2019-11-02 18:23:49 +00:00