Release 2.3.0

This allows sending custom HTTP headers or including cookies in the
request!

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 Dates are in UTC.
 
+## 2.3.0 (2020-05-09)
+
+- Add `api.fetchOptions` config option - this allows sending custom HTTP headers or including
+  cookies in the request
+- Upgrade dependencies
+
+## 2.2.0 (2020-03-18)
+
+- Improve mobile layout further:
+  - Reduce header paddings
+  - Align buttons/dropdowns
+- Upgrade dependencies
+
 ## 2.1.0 (2020-03-18)
 
 - Replace default Leaflet marker with a custom one ([#2](https://github.com/owntracks/frontend/issues/2))

docker/Dockerfile

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

docs/config.md

@@ -24,6 +24,7 @@ window.owntracks.config = {};
 
 - `api`
   - [`baseUrl`](#apibaseurl)
+  - [`fetchOptions`](#apifetchoptions)
 - [`endDateTime`](#enddatetime)
 - [`ignorePingLocation`](#ignorepinglocation)
 - [`locale`](#locale)
@@ -89,6 +90,26 @@ Base URL for the recorder's HTTP and WebSocket API. Keep CORS in mind.
   };
   ```
 
+### `api.fetchOptions`
+
+Options for API requests (made with `fetch()`). See [`fetch()` docs on MDN] for details.
+
+You can use this for example to send custom HTTP headers or to include cookies in the request.
+
+- Type: [`Object`]
+- Default: `{}`
+- Example:
+  ```js
+  // Include credentials (e.g. cookies)
+  window.owntracks.config = {
+    api: {
+      fetchOptions: {
+        credentials: "include"
+      }
+    }
+  };
+  ```
+
 ### `endDateTime`
 
 Initial end date and time (browser timezone) for fetched data.
@@ -458,3 +479,4 @@ Whether to enable verbose mode or not.
 [`object`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
 [`string`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
 [css `<color>`]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+[`fetch()` docs on MDN]: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owntracks-ui",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "author": {
     "name": "Linus Groh",
     "email": "mail@linusgroh.de"
@@ -18,42 +18,42 @@
   },
   "dependencies": {
     "clipboard-copy": "^3.1.0",
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "deepmerge": "^4.2.2",
     "leaflet": "^1.6.0",
     "leaflet.heat": "^0.2.0",
-    "moment": "^2.24.0",
+    "moment": "^2.25.3",
     "vue": "^2.6.11",
     "vue-ctk-date-time-picker": "^2.4.0",
     "vue-feather-icons": "^5.0.0",
-    "vue-i18n": "^8.15.5",
+    "vue-i18n": "^8.17.4",
     "vue-js-modal": "^1.3.33",
     "vue-mq": "^1.0.1",
     "vue-outside-events": "^1.1.3",
     "vue-router": "^3.1.6",
     "vue2-leaflet": "^2.5.2",
-    "vuex": "^3.1.3"
+    "vuex": "^3.3.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.2.3",
-    "@vue/cli-plugin-eslint": "^4.2.3",
-    "@vue/cli-plugin-unit-jest": "^4.2.3",
-    "@vue/cli-service": "^4.2.3",
+    "@vue/cli-plugin-babel": "~4.3.1",
+    "@vue/cli-plugin-eslint": "~4.3.1",
+    "@vue/cli-plugin-unit-jest": "~4.3.1",
+    "@vue/cli-service": "~4.3.1",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "1.0.0-beta.32",
+    "@vue/test-utils": "1.0.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^25.1.0",
-    "cors-anywhere": "^0.4.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "babel-jest": "^26.0.1",
+    "cors-anywhere": "^0.4.3",
+    "eslint": "^7.0.0",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",
     "jest-fetch-mock": "^3.0.3",
-    "lint-staged": "^10.0.8",
-    "moment-locales-webpack-plugin": "^1.1.2",
-    "node-sass": "^4.13.1",
+    "lint-staged": "^10.2.2",
+    "moment-locales-webpack-plugin": "^1.2.0",
+    "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
-    "vue-cli-plugin-i18n": "^0.6.1",
+    "vue-cli-plugin-i18n": "~1.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "license": "MIT",

src/api.js

@@ -1,3 +1,4 @@
+import config from "@/config";
 import { log, logLevels } from "@/logging";
 import { getApiUrl, getLocationHistoryCount } from "@/util";
 
@@ -12,7 +13,9 @@ const fetchApi = (path, params = {}) => {
   const url = getApiUrl(path);
   Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
   log("HTTP", `GET ${url.href}`);
-  return fetch(url.href).catch(error => log("HTTP", error, logLevels.ERROR));
+  return fetch(url.href, config.api.fetchOptions).catch(error =>
+    log("HTTP", error, logLevels.ERROR)
+  );
 };
 
 /**

src/components/AppHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header>
+  <header :class="$mq === 'sm' ? 'header-sm' : null">
     <div v-if="$mq === 'sm'" class="header-item">
       <button
         class="button button-flat button-icon"

src/config.js

@@ -10,6 +10,7 @@ startDateTime.setHours(0, 0, 0, 0);
 const DEFAULT_CONFIG = {
   api: {
     baseUrl: `${window.location.protocol}//${window.location.host}`,
+    fetchOptions: {},
   },
   endDateTime,
   ignorePingLocation: true,

src/styles/_base.scss

@@ -106,6 +106,14 @@ pre {
     color: var(--color-primary-text);
     background: var(--color-primary);
 
+    &.header-sm {
+      padding: 10px;
+
+      .header-item:not(.nav-sm) .nav-item:not(:first-child) {
+        margin-left: 10px;
+      }
+    }
+
     .header-item {
       display: flex;
       align-items: center;
@@ -152,19 +160,42 @@ pre {
         left: 0;
         margin: 0;
         overflow-x: auto;
-        padding: 30px;
+        padding: 20px;
         position: absolute;
         right: 0;
-        top: 76px;
+        top: 56px;
         z-index: 1;
 
         .nav-item {
+          align-items: center;
+          display: flex;
+          flex-wrap: wrap;
+          margin-left: auto;
+          margin-right: auto;
+          max-width: 400px;
+
           &:not(:first-child) {
-            margin-left: 0;
             margin-top: 20px;
           }
 
+          > .button,
+          > .dropdown,
+          > .date-time-picker {
+            flex: 1;
+          }
+
+          > .dropdown .dropdown-button,
+          > .date-time-picker .dropdown-button {
+            width: 100%;
+          }
+
+          > .date-time-picker {
+            margin-left: 0;
+            margin-right: 0;
+          }
+
           > span {
+            flex-basis: 100%;
             margin: 0;
           }