Release 2.0.0-beta.10

.github/FUNDING.yml

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

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 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
@@ -22,19 +32,19 @@ This release doesn't really affect end-users but greatly improves the developmen
 
 ## 2.0.0-beta.6 (2019-12-14)
 
-- Fix heatmap - the upgrade of `vue2-leaflet` from 2.2.1 to 2.3.0 added an `activated` attribute to layers causing the heatmap to not show
+- Fix heatmap - the upgrade of `vue2-leaflet` from 2.2.1 to 2.3.0 added an `activated` attribute to layers causing the heatmap to not show ([#18](https://github.com/owntracks/frontend/issues/18))
 
 ## 2.0.0-beta.5 (2019-12-14)
 
 - Add Leaflet popup close button background color transition
 - Add `$config` Vue instance property
-- Improve accessibility
+- Improve accessibility ([#9](https://github.com/owntracks/frontend/issues/9))
 - Use configured locale for timestamp formatting
 - Upgrade dependencies
 
 ## 2.0.0-beta.4 (2019-12-14)
 
-- Add support for time selection
+- Add support for time selection ([#10](https://github.com/owntracks/frontend/issues/10))
   - New date/time picker component is properly translated/localised and keyboard accessible
   - Config options are now `startDateTime`/`endDateTime` and format of URL parameters changed
 - Changed default start/end date and time to use local timezone
@@ -45,7 +55,7 @@ This release doesn't really affect end-users but greatly improves the developmen
 
 - Add i18 support (currently English and German, `locale` config option)
 - Add custom checkbox focus style
-- Fix layer dropdown issues
+- Fix layer dropdown issues ([#1](https://github.com/owntracks/frontend/issues/1))
 - Fix checkbox style issues
 - Fix hover/focus inconsistencies
 - Fix Docker image labels
@@ -77,21 +87,21 @@ This release doesn't really affect end-users but greatly improves the developmen
   - Custom checkbox styles
   - Switch from Font Awesome 4 to Feather Icons
 - Application now uses Vuex and Vue Router
-- Add URL query parameters to load and preserve application state: `lat`, `lng`, `zoom`, `start`, `end`, `user`, `device` and `layers`.
-- Add a loading indicator.
-- Add 'download data' modal, currently supporting formatted and minified JSON.
-- Add a verbose mode.
-- Add CORS proxy script toeasily use a production instance of the OwnTracks recorder in development.
-- Add unit tests for util and API functions.
+- Add URL query parameters to load and preserve application state: `lat`, `lng`, `zoom`, `start`, `end`, `user`, `device` and `layers`
+- Add a loading indicator
+- Add 'download data' modal, currently supporting formatted and minified JSON
+- Add a verbose mode
+- Add CORS proxy script to easily use a production instance of the OwnTracks recorder in development
+- Add unit tests for util and API functions
 - Add documentation for all public funtions
-- Add documentation for all configuration options.
-- Add more configuration options, including setting the API base URL ([#4](https://github.com/owntracks/frontend/issues/4)) and hiding the `ping/ping` location ([#12](https://github.com/owntracks/frontend/issues/12)).
+- Add documentation for all configuration options
+- Add more configuration options, including setting the API base URL ([#4](https://github.com/owntracks/frontend/issues/4)) and hiding the `ping/ping` location ([#12](https://github.com/owntracks/frontend/issues/12))
 
 ## 1.1.0 (2019-10-26)
 
-- Add support for Docker. [#7](https://github.com/owntracks/frontend/pull/7), [@sharkoz](https://github.com/sharkoz)
-- Move project to the OwnTracks organisation on GitHub. [#8](https://github.com/owntracks/frontend/pull/8), [@jpmens](https://github.com/jpmens)
-- Enable compression in nginx configuration used in Docker image. [#11](https://github.com/owntracks/frontend/pull/11), [@sharkoz](https://github.com/sharkoz)
+- Add support for Docker ([#7](https://github.com/owntracks/frontend/pull/7), [@sharkoz](https://github.com/sharkoz))
+- Move project to the OwnTracks organisation on GitHub ([#8](https://github.com/owntracks/frontend/pull/8), [@jpmens](https://github.com/jpmens))
+- Enable compression in nginx configuration used in Docker image ([#11](https://github.com/owntracks/frontend/pull/11), [@sharkoz](https://github.com/sharkoz))
 
 ## 1.0.0 (2019-06-18)
 

docker/Dockerfile

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

docs/config.md

@@ -65,6 +65,7 @@ window.owntracks.config = {};
 - [`primaryColor`](#primarycolor)
 - [`selectedDevice`](#selecteddevice)
 - [`selectedUser`](#selecteduser)
+- [`showDistanceTravelled`](#showdistancetravelled)
 - [`startDateTime`](#startdatetime)
 - [`verbose`](#verbose)
 
@@ -123,7 +124,9 @@ Remove the `ping/ping` location from the fetched data. This is useful when using
 
 ### `locale`
 
-The language to use for the user interface. Available: `de` (German), `en` (English).
+The locale to use for the user interface, this affects the language and date/time
+formats. Available languages are `de` (German), `en` (English). You can use formats
+like `en-GB`, `en-US`, `de-DE`.
 
 - Type: [`String`]
 - Default: `"en"`
@@ -400,7 +403,7 @@ Primary color for the user interface (navigation bar and various map elements).
 ### `selectedDevice`
 
 Initial selected device. All devices will be shown by default if `null`. Will be ignored
-if [`selectedUser`](#selectedUser) is `null`;
+if [`selectedUser`](#selectedUser) is `null`.
 
 Only data for the selected user/device will be fetched, so you can use this to limit the
 amount of data fetched after page load.
@@ -433,6 +436,16 @@ amount of data fetched after page load.
   };
   ```
 
+### `showDistanceTravelled`
+
+Whether to calculate and show the travelled distance of the last fetched data in the
+header bar. `maxPointDistance` is being takein into account, if a distance between two
+subsequent points is greater than `maxPointDistance`, it will not contibute to the
+calculated travelled distance.
+
+- Type: [`Boolean`]
+- Default: `true`
+
 ### `startDateTime`
 
 Initial start date and time (browser timezone) for fetched data.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntracks-ui",
-  "version": "2.0.0-beta.8",
+  "version": "2.0.0-beta.10",
   "author": {
     "name": "Linus Groh",
     "email": "mail@linusgroh.de"

src/components/AppHeader.vue

@@ -98,6 +98,16 @@
       </div>
     </nav>
     <nav class="nav-shrink">
+      <div
+        class="nav-item"
+        v-if="$config.showDistanceTravelled && distanceTravelled"
+      >
+        {{
+          $t("Distance travelled: {distance}", {
+            distance: humanReadableDistance(distanceTravelled),
+          })
+        }}
+      </div>
       <div class="nav-item">
         <button
           class="button button-flat button-icon"
@@ -141,6 +151,7 @@ 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: {
@@ -165,7 +176,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["users", "devices", "map"]),
+    ...mapState(["users", "devices", "map", "distanceTravelled"]),
     selectedUser: {
       get() {
         return this.$store.state.selectedUser;
@@ -224,6 +235,7 @@ export default {
       "setStartDateTime",
       "setEndDateTime",
     ]),
+    humanReadableDistance,
   },
 };
 </script>

src/config.js

@@ -73,6 +73,7 @@ const DEFAULT_CONFIG = {
   primaryColor: "#3f51b5",
   selectedDevice: null,
   selectedUser: null,
+  showDistanceTravelled: true,
   startDateTime,
   verbose: false,
 };

src/i18n.js

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

src/locales/de.json

@@ -10,6 +10,7 @@
   "Select user": "Benutzer auswählen",
   "Show all": "Alle anzeigen",
   "Select device": "Gerät auswählen",
+  "Distance travelled: {distance}": "Gereiste Entfernung: {distance}",
   "Download raw data": "Rohdaten herunterladen",
   "Information": "Information",
   "Show last known locations": "Zeige letzte bekannte Standorte",

src/locales/en.json

@@ -10,6 +10,7 @@
   "Select user": "Select user",
   "Show all": "Show all",
   "Select device": "Select device",
+  "Distance travelled: {distance}": "Distance travelled: {distance}",
   "Download raw data": "Download raw data",
   "Information": "Information",
   "Show last known locations": "Show last known locations",

src/store/actions.js

@@ -1,7 +1,7 @@
 import * as types from "@/store/mutation-types";
 import * as api from "@/api";
 import config from "@/config";
-import { isIsoDateTime } from "@/util";
+import { distanceBetweenCoordinates, isIsoDateTime } from "@/util";
 
 /** @typedef {import("./types").QueryParams} QueryParams */
 /** @typedef {import("./types").User} User */
@@ -121,6 +121,35 @@ const getLastLocations = async ({ commit, state }) => {
   commit(types.SET_LAST_LOCATIONS, lastLocations);
 };
 
+const _getDistanceTravelled = locationHistory => {
+  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;
+      });
+    });
+  });
+  return distanceTravelled;
+};
+
 /**
  * Load location history of all devices, in the selected date range.
  */
@@ -136,15 +165,19 @@ const getLocationHistory = async ({ commit, state }) => {
   } else {
     devices = state.devices;
   }
-  commit(
-    types.SET_LOCATION_HISTORY,
-    await api.getLocationHistory(
-      devices,
-      state.startDateTime,
-      state.endDateTime
-    )
+  const locationHistory = await api.getLocationHistory(
+    devices,
+    state.startDateTime,
+    state.endDateTime
   );
   commit(types.SET_IS_LOADING, false);
+  commit(types.SET_LOCATION_HISTORY, locationHistory);
+  if (config.showDistanceTravelled) {
+    commit(
+      types.SET_DISTANCE_TRAVELLED,
+      _getDistanceTravelled(locationHistory)
+    );
+  }
 };
 
 /**

src/store/getters.js

@@ -47,7 +47,11 @@ const locationHistoryLatLngGroups = state => {
         const latLng = L.latLng(coordinate.lat, coordinate.lon);
         // Skip if group splitting is disabled or this is the first
         // coordinate in the current group
-        if (config.map.maxPointDistance !== null && latLngs.length > 0) {
+        if (
+          typeof config.map.maxPointDistance === "number" &&
+          config.map.maxPointDistance > 0 &&
+          latLngs.length > 0
+        ) {
           const lastLatLng = latLngs.slice(-1)[0];
           if (
             distanceBetweenCoordinates(lastLatLng, latLng) >

src/store/index.js

@@ -27,6 +27,7 @@ export default new Vuex.Store({
       zoom: config.map.zoom,
       layers: config.map.layers,
     },
+    distanceTravelled: null,
   },
   getters,
   mutations,

src/store/mutation-types.js

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

src/store/mutations.js

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

src/styles/_base.scss

@@ -108,6 +108,7 @@ pre {
     nav {
       display: flex;
       flex: 1;
+      align-items: center;
 
       &:not(:first-child) {
         margin-left: 20px;

src/util.js

@@ -83,3 +83,23 @@ 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
+ * @param {String} [mimeType] 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}`;
+};

tests/util.test.js

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