Upgrade dependencies

This includes a major version bump of ESLint and Prettier, so also some
reformatting.

src/App.vue

@@ -34,7 +34,7 @@ export default {
     this.populateStateFromQuery(this.$route.query);
     this.loadData();
     // Update URL query params when relevant values changes
-    this.$store.subscribe(mutation => {
+    this.$store.subscribe((mutation) => {
       if (
         [
           types.SET_SELECTED_USER,
@@ -73,7 +73,7 @@ export default {
         selectedDevice: device,
       } = this.$store.state;
       const activeLayers = Object.keys(map.layers).filter(
-        key => map.layers[key] === true
+        (key) => map.layers[key] === true
       );
       const query = {
         lat: map.center.lat,

src/api.js

@@ -11,9 +11,11 @@ import { getApiUrl, getLocationHistoryCount } from "@/util";
  */
 const fetchApi = (path, params = {}) => {
   const url = getApiUrl(path);
-  Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
+  Object.keys(params).forEach((key) =>
+    url.searchParams.append(key, params[key])
+  );
   log("HTTP", `GET ${url.href}`);
-  return fetch(url.href, config.api.fetchOptions).catch(error =>
+  return fetch(url.href, config.api.fetchOptions).catch((error) =>
     log("HTTP", error, logLevels.ERROR)
   );
 };
@@ -51,10 +53,10 @@ export const getUsers = async () => {
  * @returns {{User: Device[]}}
  *   Object mapping each username to an array of device names
  */
-export const getDevices = async users => {
+export const getDevices = async (users) => {
   const devices = {};
   await Promise.all(
-    users.map(async user => {
+    users.map(async (user) => {
       const response = await fetchApi(`/api/0/list`, { user });
       const json = await response.json();
       const userDevices = json.results;
@@ -63,7 +65,7 @@ export const getDevices = async users => {
   );
   log("API", () => {
     const devicesCount = Object.keys(devices)
-      .map(user => devices[user].length)
+      .map((user) => devices[user].length)
       .reduce((a, b) => a + b, 0);
     return (
       `[getDevices] Fetched ${devicesCount} ` +
@@ -144,10 +146,10 @@ export const getUserDeviceLocationHistory = async (
 export const getLocationHistory = async (devices, start, end) => {
   const locationHistory = {};
   await Promise.all(
-    Object.keys(devices).map(async user => {
+    Object.keys(devices).map(async (user) => {
       locationHistory[user] = {};
       await Promise.all(
-        devices[user].map(async device => {
+        devices[user].map(async (device) => {
           locationHistory[user][device] = await getUserDeviceLocationHistory(
             user,
             device,
@@ -174,7 +176,7 @@ export const getLocationHistory = async (devices, start, end) => {
  *
  * @param {WebSocketLocationCallback} [callback] Callback for location messages
  */
-export const connectWebsocket = async callback => {
+export const connectWebsocket = async (callback) => {
   let url = getApiUrl("/ws/last");
   url.protocol = url.protocol.replace("http", "ws");
   url = url.href;
@@ -184,16 +186,17 @@ export const connectWebsocket = async callback => {
     log("WS", "Connected");
     ws.send("LAST");
   };
-  ws.onclose = event => {
+  ws.onclose = (event) => {
     log(
       "WS",
-      `Disconnected unexpectedly (reason: ${event.reason ||
-        "unknown"}). Reconnecting in one second.`,
+      `Disconnected unexpectedly (reason: ${
+        event.reason || "unknown"
+      }). Reconnecting in one second.`,
       logLevels.WARNING
     );
     setTimeout(connectWebsocket, 1000);
   };
-  ws.onmessage = async msg => {
+  ws.onmessage = async (msg) => {
     if (msg.data) {
       try {
         const data = JSON.parse(msg.data);

src/components/AppHeader.vue

@@ -222,9 +222,7 @@ export default {
       },
       set(value) {
         this.setStartDateTime(
-          moment(value, DATE_TIME_FORMAT)
-            .utc()
-            .format(DATE_TIME_FORMAT)
+          moment(value, DATE_TIME_FORMAT).utc().format(DATE_TIME_FORMAT)
         );
       },
     },

src/components/LHeatmap.vue

@@ -94,7 +94,7 @@ export default {
     this.parentContainer.addLayer(this, !this.visible);
     this.$watch(
       "latLng",
-      newVal => {
+      (newVal) => {
         this.mapObject.setLatLngs(newVal);
       },
       { deep: true }

src/i18n.js

@@ -7,7 +7,7 @@ Vue.use(VueI18n);
 
 const locales = require.context("./locales", true, /[A-Za-z0-9-_,\s]+\.json$/i);
 const messages = {};
-locales.keys().forEach(key => {
+locales.keys().forEach((key) => {
   const matched = key.match(/([A-Za-z0-9-_]+)\./i);
   if (matched && matched.length > 1) {
     const locale = matched[1];

src/main.js

@@ -29,5 +29,5 @@ new Vue({
   i18n,
   router,
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount("#app");

src/store/actions.js

@@ -43,7 +43,7 @@ const populateStateFromQuery = ({ state, commit }, query) => {
   }
   if (query.layers) {
     const activeLayers = query.layers.split(",");
-    Object.keys(state.map.layers).forEach(layer => {
+    Object.keys(state.map.layers).forEach((layer) => {
       const visibility = activeLayers.includes(layer);
       if (state.map.layers[layer] !== visibility) {
         commit(types.SET_MAP_LAYER_VISIBILITY, { layer, visibility });
@@ -116,19 +116,19 @@ const getLastLocations = async ({ commit, state }) => {
     // Remove ping/ping from the owntracks/recorder Docker image
     // https://github.com/owntracks/frontend/issues/12
     lastLocations = lastLocations.filter(
-      l => !(l.username === "ping" && l.device === "ping")
+      (l) => !(l.username === "ping" && l.device === "ping")
     );
   }
   commit(types.SET_LAST_LOCATIONS, lastLocations);
 };
 
-const _getDistanceTravelled = locationHistory => {
+const _getDistanceTravelled = (locationHistory) => {
   const start = Date.now();
   let distanceTravelled = 0;
-  Object.keys(locationHistory).forEach(user => {
-    Object.keys(locationHistory[user]).forEach(device => {
+  Object.keys(locationHistory).forEach((user) => {
+    Object.keys(locationHistory[user]).forEach((device) => {
       let lastLatLng = null;
-      locationHistory[user][device].forEach(location => {
+      locationHistory[user][device].forEach((location) => {
         if (
           config.filters.minAccuracy !== null &&
           location.acc > config.filters.minAccuracy

src/store/getters.js

@@ -11,13 +11,13 @@ import { distanceBetweenCoordinates } from "@/util";
  *   Location history of selected users and devices
  * @returns {LocationHistory} Filtered location history
  */
-const filteredLocationHistory = state => {
+const filteredLocationHistory = (state) => {
   const locationHistory = {};
-  Object.keys(state.locationHistory).forEach(user => {
+  Object.keys(state.locationHistory).forEach((user) => {
     locationHistory[user] = {};
-    Object.keys(state.locationHistory[user]).forEach(device => {
+    Object.keys(state.locationHistory[user]).forEach((device) => {
       locationHistory[user][device] = [];
-      state.locationHistory[user][device].forEach(location => {
+      state.locationHistory[user][device].forEach((location) => {
         if (
           config.filters.minAccuracy !== null &&
           location.acc > config.filters.minAccuracy
@@ -37,12 +37,12 @@ const filteredLocationHistory = state => {
  * @param {State} state
  * @returns {L.LatLng[]} All coordinates
  */
-const filteredLocationHistoryLatLngs = state => {
+const filteredLocationHistoryLatLngs = (state) => {
   const latLngs = [];
   const locationHistory = filteredLocationHistory(state);
-  Object.keys(locationHistory).forEach(user => {
-    Object.keys(locationHistory[user]).forEach(device => {
-      locationHistory[user][device].forEach(location => {
+  Object.keys(locationHistory).forEach((user) => {
+    Object.keys(locationHistory[user]).forEach((device) => {
+      locationHistory[user][device].forEach((location) => {
         latLngs.push(L.latLng(location.lat, location.lon));
       });
     });
@@ -58,13 +58,13 @@ const filteredLocationHistoryLatLngs = state => {
  * @param {State} state
  * @returns {L.LatLng[][]} Groups of coherent coordinates
  */
-const filteredLocationHistoryLatLngGroups = state => {
+const filteredLocationHistoryLatLngGroups = (state) => {
   const groups = [];
   const locationHistory = filteredLocationHistory(state);
-  Object.keys(locationHistory).forEach(user => {
-    Object.keys(locationHistory[user]).forEach(device => {
+  Object.keys(locationHistory).forEach((user) => {
+    Object.keys(locationHistory[user]).forEach((device) => {
       let latLngs = [];
-      locationHistory[user][device].forEach(location => {
+      locationHistory[user][device].forEach((location) => {
         const latLng = L.latLng(location.lat, location.lon);
         // Skip if group splitting is disabled or this is the first
         // coordinate in the current group

src/util.js

@@ -10,7 +10,7 @@ import { DATE_TIME_FORMAT, EARTH_RADIUS_IN_KM } from "@/constants";
  * @param {String} path Path to the API resource
  * @returns {URL} Final API URL
  */
-export const getApiUrl = path => {
+export const getApiUrl = (path) => {
   const normalizedBaseUrl = config.api.baseUrl.endsWith("/")
     ? config.api.baseUrl.slice(1)
     : config.api.baseUrl;
@@ -24,7 +24,7 @@ export const getApiUrl = path => {
  * @param {String} s Input value to be tested
  * @returns {Boolean} Whether the input matches the expected format
  */
-export const isIsoDateTime = s => moment(s, DATE_TIME_FORMAT, true).isValid();
+export const isIsoDateTime = (s) => moment(s, DATE_TIME_FORMAT, true).isValid();
 
 /**
  * Convert degrees to radians.
@@ -32,7 +32,7 @@ export const isIsoDateTime = s => moment(s, DATE_TIME_FORMAT, true).isValid();
  * @param {Number} degrees Angle in degrees
  * @returns {Number} Angle in radians
  */
-export const degreesToRadians = degrees => (degrees * Math.PI) / 180;
+export const degreesToRadians = (degrees) => (degrees * Math.PI) / 180;
 
 /**
  * Calculate the distance between two coordinates. Uses the haversine formula,
@@ -91,7 +91,7 @@ export const download = (text, filename, mimeType = "text/plain") => {
  * @param {Number} distance Distance in meters
  * @returns {String} Formatted string including unit
  */
-export const humanReadableDistance = distance => {
+export const humanReadableDistance = (distance) => {
   let unit = "m";
   if (Math.abs(distance) >= 1000) {
     distance = distance / 1000;
@@ -108,11 +108,11 @@ export const humanReadableDistance = distance => {
  * @param {LocationHistory} locationHistory Location history
  * @returns {Number} Total number of locations
  */
-export const getLocationHistoryCount = locationHistory =>
+export const getLocationHistoryCount = (locationHistory) =>
   Object.keys(locationHistory)
-    .map(user =>
+    .map((user) =>
       Object.keys(locationHistory[user])
-        .map(device => locationHistory[user][device].length)
+        .map((device) => locationHistory[user][device].length)
         .reduce((a, b) => a + b, 0)
     )
     .reduce((a, b) => a + b, 0);

src/views/Map.vue

@@ -197,7 +197,7 @@ export default {
           new L.LatLngBounds(this.filteredLocationHistoryLatLngs)
         );
       } else if (this.map.layers.last && this.lastLocations.length > 0) {
-        const locations = this.lastLocations.map(l => L.latLng(l.lat, l.lon));
+        const locations = this.lastLocations.map((l) => L.latLng(l.lat, l.lon));
         this.$refs.map.mapObject.fitBounds(new L.LatLngBounds(locations), {
           maxZoom: this.maxNativeZoom,
         });
@@ -215,12 +215,12 @@ export default {
      */
     deviceLocationsWithNameAndFace(user, device, deviceLocations) {
       const lastLocation = this.lastLocations.find(
-        l => l.username === user && l.device === device
+        (l) => l.username === user && l.device === device
       );
       if (!lastLocation) {
         return deviceLocations;
       }
-      return deviceLocations.map(l => ({
+      return deviceLocations.map((l) => ({
         ...l,
         name: lastLocation.name,
         face: lastLocation.face,