Release 2.7.0

Hopefully DeepL got the translations for French and Spanish right...

.github/workflows/docker.yml

@@ -49,8 +49,12 @@ jobs:
             --build-arg BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ') \
             --build-arg VCS_REF=${GITHUB_SHA::8} \
             ${TAGS} --file ./docker/Dockerfile .
+      # https://github.com/docker/setup-qemu-action
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      # https://github.com/docker/setup-buildx-action
       - name: Set up Docker Buildx
-        uses: crazy-max/ghaction-docker-buildx@v3
+        uses: docker/setup-buildx-action@v1
       - name: Docker Buildx (build)
         run: |
           docker buildx build --output "type=image,push=false" ${{ steps.prepare.outputs.buildx_args }}

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 Dates are in UTC.
 
+## 2.7.0 (2021-02-14)
+
+- Rename translation files from `xx` to `xx-XX` format to allow different language variants
+- Separate `en` translations into British English (`en-GB`) and American English (`en-US`, default)
+- Add French translations ([#49](https://github.com/owntracks/frontend/pull/49), [@Elu43](https://github.com/Elu43))
+- Update Docker image to use Node 14 and nginx 1.18
+- Upgrade dependencies
+
+## 2.6.0 (2020-12-29)
+
+- Add `router.basePath` config option for non-webroot deployments
+- Configure Vue to not assume it's on the web root ([#47](https://github.com/owntracks/frontend/pull/47), [@growse](https://github.com/growse))
+- Update Docker NGINX config to listen on IPv6 as well ([#46](https://github.com/owntracks/frontend/pull/46), [@growse](https://github.com/growse))
+- Upgrade dependencies
+
+## 2.5.1 (2020-10-27)
+
+- Fix incorrect handling of `api.baseUrl` with trailing slash ([#44](https://github.com/owntracks/frontend/pull/44), [@karmanyaahm](https://github.com/karmanyaahm))
+- Upgrade dependencies
+
 ## 2.5.0 (2020-09-07)
 
 - Add `filters.fitView` config option - this will prevent the map from re-fitting automatically by default when a live location changes ([#41](https://github.com/owntracks/frontend/issues/41))

README.md

@@ -142,7 +142,7 @@ unused i18n entries, run:
 $ yarn i18n:report
 ```
 
-To add a new locale, copy `en.json` to `<locale>.json` in [`src/locales`](src/locales)
+To add a new locale, copy `en-US.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)

docker/Dockerfile

@@ -1,12 +1,12 @@
-FROM node:10 as build
+FROM node:14 as build
 WORKDIR /usr/src/app
 COPY package.json yarn.lock ./
 RUN yarn install
 COPY . ./
 RUN yarn build
 
-FROM nginx:1.17-alpine
-LABEL version="2.5.0"
+FROM nginx:1.18-alpine
+LABEL version="2.7.0"
 LABEL description="OwnTracks UI"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \

docker/nginx.tmpl

@@ -8,6 +8,7 @@ http {
     }
     server {
         listen ${LISTEN_PORT};
+        listen [::]:${LISTEN_PORT};        
         root /usr/share/nginx/html;
         location /api {
             proxy_pass http://otrecorder/api/;

docs/config.md

@@ -63,6 +63,8 @@ window.owntracks.config = {};
   - [`fitView`](#onlocationchangefitview)
   - [`reloadHistory`](#onlocationchangereloadhistory)
 - [`primaryColor`](#primarycolor)
+- `router`
+  - [`basePath`](#routerbasepath)
 - [`selectedDevice`](#selecteddevice)
 - [`selectedUser`](#selecteduser)
 - [`showDistanceTravelled`](#showdistancetravelled)
@@ -169,14 +171,17 @@ formats.
 
 Available languages:
 
-- `de` (German)
-- `en` (English)
-- `es` (Spanish)
+- `de-DE` (Standard German)
+- `en-GB` (British English)
+- `en-US` (American English)
+- `es-ES` (Castilian Spanish)
+- `fr-FR` (Standard French)
 
-You can use formats like `en-GB`, `en-US`, `de-DE`.
+Using a locale with non-existent translations is possible and will affect date/time formats, but
+use `en-US` for translations.
 
 - Type: [`String`]
-- Default: `"en"`
+- Default: `"en-US"`
 
 ### `map.attribution`
 
@@ -435,6 +440,22 @@ Primary color for the user interface (navigation bar and various map elements).
   };
   ```
 
+### `router.basePath`
+
+Base path of the application deployment.
+
+- Type: [`String`]
+- Default: `"/"`
+- Example:
+  ```js
+  // Frontend will be reachable at https://example.com/owntracks
+  window.owntracks.config = {
+    router: {
+      basePath: "/owntracks",
+    },
+  };
+  ```
+
 ### `selectedDevice`
 
 Initial selected device. All devices will be shown by default if `null`. Will be ignored

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntracks-ui",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "author": {
     "name": "Linus Groh",
     "email": "mail@linusgroh.de"
@@ -17,43 +17,43 @@
     "test": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "clipboard-copy": "^3.1.0",
-    "core-js": "^3.6.5",
+    "clipboard-copy": "^4.0.1",
+    "core-js": "^3.8.3",
     "deepmerge": "^4.2.2",
     "leaflet": "^1.7.1",
     "leaflet.heat": "^0.2.0",
-    "moment": "^2.27.0",
+    "moment": "^2.29.1",
     "vue": "^2.6.12",
     "vue-ctk-date-time-picker": "^2.5.0",
     "vue-feather-icons": "^5.1.0",
-    "vue-i18n": "^8.21.0",
+    "vue-i18n": "^8.22.4",
     "vue-js-modal": "^1.3.33",
     "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
-    "vue-router": "^3.4.3",
-    "vue2-leaflet": "^2.5.2",
-    "vuex": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vue2-leaflet": "^2.6.0",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.4",
-    "@vue/cli-plugin-eslint": "~4.5.4",
-    "@vue/cli-plugin-unit-jest": "~4.5.4",
-    "@vue/cli-service": "~4.5.4",
+    "@vue/cli-plugin-babel": "~4.5.11",
+    "@vue/cli-plugin-eslint": "~4.5.11",
+    "@vue/cli-plugin-unit-jest": "~4.5.11",
+    "@vue/cli-service": "~4.5.11",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "1.0.5",
+    "@vue/test-utils": "1.1.3",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.3.0",
+    "babel-jest": "^26.6.3",
     "cors-anywhere": "^0.4.3",
-    "eslint": "^7.8.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint": "^7.20.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.5.0",
     "jest-fetch-mock": "^3.0.3",
-    "lint-staged": "^10.3.0",
+    "lint-staged": "^10.5.4",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "prettier": "^2.1.1",
-    "sass": "^1.26.10",
-    "sass-loader": "^10.0.2",
+    "prettier": "^2.2.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^10.1.1",
     "vue-cli-plugin-i18n": "~1.0.1",
     "vue-template-compiler": "^2.6.12"
   },

src/components/modals/Information.vue

@@ -9,7 +9,7 @@
       <li>
         <GithubIcon size="1x" aria-hidden="true" role="img" />
         <a href="https://github.com/owntracks/recorder">owntracks/recorder</a>
-        ({{ recorderVersion || "Loading version..." }})
+        ({{ recorderVersion || $t("Loading version...") }})
       </li>
       <li>
         <GlobeIcon size="1x" aria-hidden="true" role="img" />

src/config.js

@@ -17,7 +17,7 @@ const DEFAULT_CONFIG = {
     minAccuracy: null,
   },
   ignorePingLocation: true,
-  locale: "en",
+  locale: "en-US",
   map: {
     attribution:
       '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
@@ -71,6 +71,9 @@ const DEFAULT_CONFIG = {
     reloadHistory: false,
   },
   primaryColor: "#3f51b5",
+  router: {
+    basePath: "/",
+  },
   selectedDevice: null,
   selectedUser: null,
   showDistanceTravelled: true,

src/i18n.js

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

src/index.d.ts

@@ -2,8 +2,12 @@
 interface Config {
     api: {
         baseUrl: string;
+        fetchOptions: object;
     };
     endDateTime: Date;
+    filters: {
+      minAccuracy: number | null,
+    };
     ignorePingLocation: boolean;
     locale: string;
     map: {
@@ -54,11 +58,16 @@ interface Config {
         url: string;
     };
     onLocationChange: {
+        fitView: boolean;
         reloadHistory: boolean;
     };
     primaryColor: Color;
-    selectedUser: User| null;
-    selectedDevice: Device| null;
+    router: {
+      basePath: string;
+    };
+    selectedUser: User | null;
+    selectedDevice: Device | null;
+    showDistanceTravelled: boolean;
     startDateTime: Date;
     verbose: boolean;
 }
@@ -72,8 +81,8 @@ interface State {
     devices: { User: Device[] };
     lastLocations: OTLocation[];
     locationHistory: LocationHistory;
-    selectedUser: User| null;
-    selectedDevice: Device| null;
+    selectedUser: User | null;
+    selectedDevice: Device | null;
     startDateTime: string;
     endDateTime: string;
     map: {

src/locales/de-DE.json

@@ -20,6 +20,7 @@
   "Minify JSON": "JSON minimieren",
   "Copy to clipboard": "In die Zwischenablage kopieren",
   "Download": "Herunterladen",
+  "Loading version...": "Version wird abgerufen...",
   "OwnTracks website": "OwnTracks Webseite",
   "OwnTracks documentation": "OwnTracks Dokumentation",
   "OwnTracks on Twitter": "OwnTracks auf Twitter",

src/locales/en-GB.json

@@ -0,0 +1,35 @@
+{
+  "Automatically center the map view and zoom in to relevant data": "Automatically centre 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",
+  "Loading version...": "Loading version...",
+  "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",
+  "Regions:": "Regions:"
+}

src/locales/en-US.json

@@ -10,7 +10,7 @@
   "Select user": "Select user",
   "Show all": "Show all",
   "Select device": "Select device",
-  "Distance travelled": "Distance travelled",
+  "Distance travelled": "Distance traveled",
   "Download raw data": "Download raw data",
   "Information": "Information",
   "Show last known locations": "Show last known locations",
@@ -20,6 +20,7 @@
   "Minify JSON": "Minify JSON",
   "Copy to clipboard": "Copy to clipboard",
   "Download": "Download",
+  "Loading version...": "Loading version...",
   "OwnTracks website": "OwnTracks website",
   "OwnTracks documentation": "OwnTracks documentation",
   "OwnTracks on Twitter": "OwnTracks on Twitter",

src/locales/es-ES.json

@@ -20,6 +20,7 @@
   "Minify JSON": "Reducir JSON",
   "Copy to clipboard": "Copiar al portapapeles",
   "Download": "Descarga",
+  "Loading version...": "Cargando versión...",
   "OwnTracks website": "OwnTracks - Sitio web",
   "OwnTracks documentation": "OwnTracks - documentación",
   "OwnTracks on Twitter": "OwnTracks en Twitter",

src/locales/fr-FR.json

@@ -0,0 +1,35 @@
+{
+  "Automatically center the map view and zoom in to relevant data": "Centrer automatiquement la vue de la carte et zoomer sur les données pertinentes",
+  "Fit view": "Vue d'ensemble",
+  "Layer settings": "Paramètres des couches",
+  "Show/hide layers": "Montrer/cacher certaines couches",
+  "Now": "Maintenant",
+  "Select start date": "Sélectionner une date de début",
+  "to": "à",
+  "Select end date": "Sélectionner une date de fin",
+  "Select user": "Sélectionner un utilisateur",
+  "Show all": "Tout afficher",
+  "Select device": "Sélectionner un appareil",
+  "Distance travelled": "Distance parcourue",
+  "Download raw data": "Télécharger les données brutes",
+  "Information": "Informations",
+  "Show last known locations": "Afficher les dernières localisations connues",
+  "Show location history (line)": "Afficher l'historique de localisation (lignes)",
+  "Show location history (points)": "Afficher l'historique de localisation (points)",
+  "Show location heatmap": "Afficher la carte de fréquentation",
+  "Minify JSON": "Minifier JSON",
+  "Copy to clipboard": "Copier dans le presse-papier",
+  "Download": "Télécharger",
+  "Loading version...": "Chargement de la version...",
+  "OwnTracks website": "Site d'OwnTracks",
+  "OwnTracks documentation": "Documentation d'OwnTracks",
+  "OwnTracks on Twitter": "OwnTracks sur Twitter",
+  "Loading data, please wait...": "Chargement des données, merci de patienter ...",
+  "Image of {deviceName}": "Image de {deviceName}",
+  "Timestamp": "Horodatage",
+  "Location": "Localisation",
+  "Address": "Addresse",
+  "Battery": "Batterie",
+  "Speed": "Vitesse",
+  "Regions:": "Régions:"
+}

src/router.js

@@ -1,12 +1,13 @@
 import Vue from "vue";
 import Router from "vue-router";
-import Map from "./views/Map.vue";
+import config from "@/config";
+import Map from "@/views/Map.vue";
 
 Vue.use(Router);
 
 export default new Router({
   mode: "history",
-  base: process.env.BASE_URL,
+  base: config.router.basePath,
   routes: [
     {
       path: "/",

src/util.js

@@ -12,7 +12,7 @@ import { DATE_TIME_FORMAT, EARTH_RADIUS_IN_KM } from "@/constants";
  */
 export const getApiUrl = (path) => {
   const normalizedBaseUrl = config.api.baseUrl.endsWith("/")
-    ? config.api.baseUrl.slice(1)
+    ? config.api.baseUrl.slice(0, -1)
     : config.api.baseUrl;
   const normalizedPath = path.startsWith("/") ? path : `/${path}`;
   return new URL(`${normalizedBaseUrl}${normalizedPath}`);

tests/util.test.js

@@ -22,6 +22,13 @@ describe("getApiUrl", () => {
     expect(getApiUrl("/foo/bar").href).toBe(
       "http://example.com/owntracks/foo/bar"
     );
+
+    config.api.baseUrl = "http://example.com/owntracks/";
+    expect(getApiUrl("foo").href).toBe("http://example.com/owntracks/foo");
+    expect(getApiUrl("/foo").href).toBe("http://example.com/owntracks/foo");
+    expect(getApiUrl("/foo/bar").href).toBe(
+      "http://example.com/owntracks/foo/bar"
+    );
   });
 });
 

vue.config.js

@@ -6,6 +6,7 @@ const packageJson = fs.readFileSync("./package.json");
 const version = JSON.parse(packageJson).version;
 
 module.exports = {
+  publicPath: "",
   configureWebpack: {
     plugins: [
       new webpack.DefinePlugin({