Release 2.10.0

Fixes #67.

.github/workflows/docker.yml

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

.github/workflows/lint.yml

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

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 Dates are in UTC.
 
+## 2.10.0 (2021-11-28)
+
+- Ensure location history line segments are drawn in chronological order ([#67](https://github.com/owntracks/frontend/issues/67))
+- Add trailing slashes to paths used by Docker nginx config ([#63](https://github.com/owntracks/frontend/pull/63), [@growse](https://github.com/growse))
+- Upgrade dependencies
+
 ## 2.9.0 (2021-05-01)
 
 - Add a cancel button to the loading data modal

README.md

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

docker/Dockerfile

@@ -6,7 +6,7 @@ COPY . ./
 RUN yarn build
 
 FROM nginx:1.18-alpine
-LABEL version="2.9.0"
+LABEL version="2.10.0"
 LABEL description="OwnTracks Frontend"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \

docker/nginx.tmpl

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

docs/config.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntracks-frontend",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "author": {
     "name": "Linus Groh",
     "email": "mail@linusgroh.de"
@@ -11,51 +11,53 @@
     "cors-proxy": "node scripts/corsProxy.js",
     "format:js": "vue-cli-service lint",
     "format:md": "prettier --write '{*.md,docs/**/*.md,src/**/*.md}'",
+    "format:scss": "prettier --write 'src/**/*.scss'",
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
     "lint:js": "vue-cli-service lint --no-fix",
     "lint:md": "prettier --check '{*.md,docs/**/*.md,src/**/*.md}'",
+    "lint:scss": "prettier --check 'src/**/*.scss'",
     "test": "vue-cli-service test:unit"
   },
   "dependencies": {
     "clipboard-copy": "^4.0.1",
-    "core-js": "^3.11.1",
+    "core-js": "^3.19.1",
     "deepmerge": "^4.2.2",
     "leaflet": "^1.7.1",
     "leaflet.heat": "^0.2.0",
     "moment": "^2.29.1",
-    "vue": "^2.6.12",
+    "vue": "^2.6.14",
     "vue-ctk-date-time-picker": "^2.5.0",
     "vue-feather-icons": "^5.1.0",
-    "vue-i18n": "^8.24.4",
-    "vue-js-modal": "^1.3.33",
+    "vue-i18n": "^8.26.7",
+    "vue-js-modal": "^2.0.1",
     "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
-    "vue-router": "^3.5.1",
-    "vue2-leaflet": "^2.7.0",
+    "vue-router": "^3.5.3",
+    "vue2-leaflet": "^2.7.1",
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.12",
-    "@vue/cli-plugin-eslint": "~4.5.12",
-    "@vue/cli-plugin-unit-jest": "~4.5.12",
-    "@vue/cli-service": "~4.5.12",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-plugin-unit-jest": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "1.2.0",
+    "@vue/test-utils": "1.3.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.3.1",
     "cors-anywhere": "^0.4.4",
-    "eslint": "^7.25.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.9.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-vue": "^7.17.0",
     "jest-fetch-mock": "^3.0.3",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^12.1.2",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "prettier": "^2.2.1",
-    "sass": "^1.32.12",
+    "prettier": "^2.5.0",
+    "sass": "^1.43.5",
     "sass-loader": "^10.1.1",
-    "vue-cli-plugin-i18n": "~2.1.0",
-    "vue-template-compiler": "^2.6.12"
+    "vue-cli-plugin-i18n": "~2.3.1",
+    "vue-template-compiler": "^2.6.14"
   },
   "license": "MIT",
   "repository": {

src/api.js

@@ -136,7 +136,11 @@ export const getUserDeviceLocationHistory = async (
     fetchOptions
   );
   const json = await response.json();
-  const userDeviceLocationHistory = json.data;
+  // We need to manually sort by timestamp, otherwise the line segments may be
+  // drawn in the wrong order. The recorder API simply returns entries in the
+  // same order in which they are in each *.rec file.
+  // See https://github.com/owntracks/frontend/issues/67.
+  const userDeviceLocationHistory = json.data.sort((a, b) => a.tst - b.tst);
   log(
     "API",
     () =>

src/store/actions.js

@@ -201,9 +201,8 @@ const getLocationHistory = async ({ commit, state }) => {
   }
   commit(types.SET_LOCATION_HISTORY, locationHistory);
   if (config.showDistanceTravelled) {
-    const { distanceTravelled, elevationGain, elevationLoss } = _getTravelStats(
-      locationHistory
-    );
+    const { distanceTravelled, elevationGain, elevationLoss } =
+      _getTravelStats(locationHistory);
     commit(types.SET_DISTANCE_TRAVELLED, distanceTravelled);
     commit(types.SET_ELEVATION_GAIN, elevationGain);
     commit(types.SET_ELEVATION_LOSS, elevationLoss);

src/styles/_base.scss

@@ -15,7 +15,8 @@
   --pin-width: 32px;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
@@ -85,7 +86,8 @@ pre {
   display: block;
   font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
     "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
-    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+    "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
+    monospace;
   overflow-x: auto;
 
   code {

src/styles/_modal.scss

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