Release 2.0.0-beta.6

Fix heatmap
Release 2.0.0-beta.5
2026-02-25 21:53:49 +00:00 · 2019-12-14 19:39:56 +00:00 · 2019-12-14 19:35:24 +00:00 · 2019-12-14 17:13:13 +00:00 · 2019-12-14 17:10:22 +00:00 · 2019-12-14 16:59:12 +00:00
17 changed files with 132 additions and 71 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# 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
+
+# 2.0.0-beta.5 (2019-12-14)
+
+- Add Leaflet popup close button background color transition
+- Add `$config` Vue instance property
+- Improve accessibility
+- Use configured locale for timestamp formatting
+- Upgrade dependencies
+
 # 2.0.0-beta.4 (2019-12-14)

 - Add support for time selection
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -6,7 +6,7 @@ COPY . ./
 RUN yarn build

 FROM nginx:1.17-alpine
-LABEL version="2.0.0-beta.4"
+LABEL version="2.0.0-beta.6"
 LABEL description="OwnTracks UI"
 LABEL maintainer="Linus Groh <mail@linusgroh.de>"
 ENV LISTEN_PORT=80 \
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "owntracks-ui",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
  "author": {
    "name": "Linus Groh",
    "email": "mail@linusgroh.de"
@@ -15,19 +15,19 @@
  },
  "dependencies": {
    "clipboard-copy": "^3.1.0",
-    "core-js": "^3.4.8",
+    "core-js": "^3.5.0",
    "deepmerge": "^4.2.2",
    "leaflet": "^1.6.0",
    "leaflet.heat": "^0.2.0",
    "moment": "^2.24.0",
-    "vue": "^2.6.6",
+    "vue": "^2.6.11",
    "vue-ctk-date-time-picker": "^2.4.0",
    "vue-feather-icons": "^5.0.0",
    "vue-i18n": "^8.0.0",
    "vue-js-modal": "^1.3.31",
    "vue-outside-events": "^1.1.3",
    "vue-router": "^3.1.3",
-    "vue2-leaflet": "^2.2.1",
+    "vue2-leaflet": "^2.3.0",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
@@ -50,7 +50,7 @@
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "vue-cli-plugin-i18n": "^0.6.0",
-    "vue-template-compiler": "^2.5.21"
+    "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();
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -13,7 +13,7 @@
        </button>
      </div>
      <div class="nav-item">
-        <LayersIcon size="1x" />
+        <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
@@ -31,12 +31,12 @@
        </Dropdown>
      </div>
      <div class="nav-item">
-        <CalendarIcon size="1x" />
+        <CalendarIcon size="1x" aria-hidden="true" role="img" />
        <VueCtkDateTimePicker
          v-model="startDateTime"
          :format="DATE_TIME_FORMAT"
-          :color="config.primaryColor"
-          :locale="config.locale"
+          :color="$config.primaryColor"
+          :locale="$config.locale"
          :max-date="endDateTime"
          :button-now-translation="$t('Now')"
        >
@@ -50,8 +50,8 @@
        <VueCtkDateTimePicker
          v-model="endDateTime"
          :format="DATE_TIME_FORMAT"
-          :color="config.primaryColor"
-          :locale="config.locale"
+          :color="$config.primaryColor"
+          :locale="$config.locale"
          :min-date="startDateTime"
          :button-now-translation="$t('Now')"
        >
@@ -63,7 +63,7 @@
        </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"
@@ -78,7 +78,7 @@
        </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"
@@ -104,7 +104,11 @@
          :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">
@@ -113,7 +117,7 @@
          :title="$t('Information')"
          @click="$modal.show('information')"
        >
-          <InfoIcon size="1x" />
+          <InfoIcon size="1x" :aria-label="$t('Information')" role="img" />
        </button>
      </div>
    </nav>
@@ -135,7 +139,6 @@ 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 config from "@/config";
 import { DATE_TIME_FORMAT } from "@/constants";
 import * as types from "@/store/mutation-types";

@@ -153,7 +156,6 @@ export default {
  data() {
    return {
      DATE_TIME_FORMAT,
-      config,
      layerSettingsOptions: [
        { layer: "last", label: this.$t("Show last known locations") },
        { layer: "line", label: this.$t("Show location history (line)") },
--- a/src/components/LDeviceLocationPopup.vue
+++ b/src/components/LDeviceLocationPopup.vue
@@ -3,30 +3,30 @@
    <div v-if="name" class="device">{{ name }}</div>
    <div v-else class="device">{{ user }}/{{ device }}</div>
    <div class="wrapper">
-      <img v-if="face" :src="faceImageDataURI" />
+      <img v-if="face" :src="faceImageDataURI" alt="" />
      <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>
--- 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
@@ -12,10 +12,18 @@
      </label>
    </div>
    <div class="buttons">
-      <button class="button button-outline button-primary" @click="copy">
+      <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">
+      <button
+        class="button button-primary"
+        :title="$t('Download')"
+        @click="download"
+      >
        {{ $t("Download") }}
      </button>
    </div>
--- a/src/components/modals/Information.vue
+++ b/src/components/modals/Information.vue
@@ -2,33 +2,33 @@
  <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">
          {{ $t("OwnTracks website") }}
        </a>
      </li>
      <li>
-        <BookIcon size="1x" />
+        <BookIcon size="1x" aria-hidden="true" role="img" />
        <a href="https://owntracks.org/booklet/">
          {{ $t("OwnTracks documentation") }}
        </a>
      </li>
      <li>
-        <TwitterIcon size="1x" />
+        <TwitterIcon size="1x" aria-hidden="true" role="img" />
        <a href="https://twitter.com/OwnTracks">
          {{ $t("OwnTracks on Twitter") }}
        </a>
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -22,5 +22,10 @@
  "OwnTracks website": "OwnTracks Webseite",
  "OwnTracks documentation": "OwnTracks Dokumentation",
  "OwnTracks on Twitter": "OwnTracks auf Twitter",
-  "Loading data, please wait...": "Daten werden geladen, bitte warten..."
+  "Loading data, please wait...": "Daten werden geladen, bitte warten...",
+  "Timestamp": "Zeitstempel",
+  "Location": "Standort",
+  "Address": "Adresse",
+  "Battery": "Akku",
+  "Speed": "Geschwindigkeit"
 }
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -22,5 +22,10 @@
  "OwnTracks website": "OwnTracks website",
  "OwnTracks documentation": "OwnTracks documentation",
  "OwnTracks on Twitter": "OwnTracks on Twitter",
-  "Loading data, please wait...": "Loading data, please wait..."
+  "Loading data, please wait...": "Loading data, please wait...",
+  "Timestamp": "Timestamp",
+  "Location": "Location",
+  "Address": "Address",
+  "Battery": "Battery",
+  "Speed": "Speed"
 }
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import Vue from "vue";
 import App from "@/App.vue";
+import config from "@/config";
 import i18n from "@/i18n";
 import router from "@/router";
 import store from "@/store";
@@ -11,6 +12,8 @@ Vue.use(VOutsideEvents);

 Vue.config.productionTip = false;

+Vue.prototype.$config = config;
+
 new Vue({
  i18n,
  router,
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -172,14 +172,20 @@ pre {
  padding: 8px 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
+  transition: box-shadow 0.2s;
+
+  &: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 {
@@ -204,7 +210,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);
--- a/src/styles/_datepicker.scss
+++ b/src/styles/_datepicker.scss
@@ -5,5 +5,6 @@
  .datepicker {
    box-shadow: none !important;
    filter: var(--drop-shadow);
+    margin-top: 5px;
  }
 }
--- a/src/styles/_map.scss
+++ b/src/styles/_map.scss
@@ -23,6 +23,7 @@
      margin-top: 15px;
      margin-right: 15px;
      border-radius: 100px;
+      transition: background-color 0.2s;

      &:hover,
      &:focus {
@@ -35,4 +36,12 @@
  .leaflet-popup-tip {
    box-shadow: none;
  }
+
+  .leaflet-control-container .leaflet-control-attribution {
+    background: var(--color-background);
+
+    a {
+      color: var(--color-primary);
+    }
+  }
 }
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -118,7 +118,6 @@ 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 LHeatmap from "@/components/LHeatmap";
 import LDeviceLocationPopup from "@/components/LDeviceLocationPopup";

@@ -145,26 +144,27 @@ 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,
+      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,
      },
    };
  },
--- a/yarn.lock
+++ b/yarn.lock
@@ -3149,11 +3149,16 @@ core-js@^2.4.0:
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.10.tgz#8a5b8391f8cc7013da703411ce5b585706300d7f"
  integrity sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==

-core-js@^3.4.3, core-js@^3.4.8:
+core-js@^3.4.3:
  version "3.4.8"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.4.8.tgz#e0fc0c61f2ef90cbc10c531dbffaa46dfb7152dd"
  integrity sha512-b+BBmCZmVgho8KnBUOXpvlqEMguko+0P+kXCwD4vIprsXC6ht1qgPxtb1OK6XgSlrySF71wkwBQ0Hv695bk9gQ==

+core-js@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.5.0.tgz#66df8e49be4bd775e6f952a9d083b756ad41c1ed"
+  integrity sha512-Ifh3kj78gzQ7NAoJXeTu+XwzDld0QRIwjBLRqAMhuLhP3d2Av5wmgE9ycfnvK6NAEjTkQ1sDPeoEZAWO3Hx1Uw==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -10828,10 +10833,10 @@ vue-style-loader@^4.1.0:
    hash-sum "^1.0.2"
    loader-utils "^1.0.2"

-vue-template-compiler@^2.5.21:
-  version "2.6.10"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
-  integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
+vue-template-compiler@^2.6.11:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
+  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
  dependencies:
    de-indent "^1.0.2"
    he "^1.1.0"
@@ -10841,17 +10846,17 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
  resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
  integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==

-vue2-leaflet@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.2.1.tgz#cd67274951751a33df147481fce2b956ba174c7e"
-  integrity sha512-yBB3Ilv9LTszNn/uxUATq8+Ahw/1FqIasdQehb9m1tJ5T9qeEk8Fr9a6uLzvR+zuz88rnEQVo7/iGUd96E7iLg==
+vue2-leaflet@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.3.0.tgz#829993a76fbce30e5efcc5c0ec01e14470a4080e"
+  integrity sha512-4wCikjAGKIc7QrlIRwdOiA/5FODg6uxr7HcXfxgaGd29q2YEEaA9pn6rr57RwlbUl5/5vP8DL/iv3+TNr35Wuw==

-vue@^2.5.16, vue@^2.6.6:
+vue@^2.5.16:
  version "2.6.10"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
  integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==

-vue@^2.6.9:
+vue@^2.6.11, vue@^2.6.9:
  version "2.6.11"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
Author	SHA1	Message	Date
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