Add support for time selection

docs/config.md

@@ -24,7 +24,7 @@ window.owntracks.config = {};
 
 - `api`
   - [`baseUrl`](#apibaseurl)
-- [`endDate`](#enddate)
+- [`endDateTime`](#enddatetime)
 - [`ignorePingLocation`](#ignorepinglocation)
 - [`locale`](#locale)
 - `map`
@@ -65,7 +65,7 @@ window.owntracks.config = {};
 - [`primaryColor`](#primarycolor)
 - [`selectedDevice`](#selecteddevice)
 - [`selectedUser`](#selecteduser)
-- [`startDate`](#startdate)
+- [`startDateTime`](#startdatetime)
 - [`verbose`](#verbose)
 
 ### `api.baseUrl`
@@ -92,17 +92,17 @@ Base URL for the recorder's HTTP and WebSocket API. Keep CORS in mind.
   };
   ```
 
-### `endDate`
+### `endDateTime`
 
-Initial end date for fetched data.
+Initial end date and time (browser timezone) for fetched data.
 
 - Type: [`Date`]
-- Default: today
+- Default: today, 23:59:59
 - Example:
   ```js
   // Data will be fetched up to 1970-01-01
   window.owntracks.config = {
-    endDate: new Date(1970, 1, 1)
+    endDateTime: new Date(1970, 1, 1)
   };
   ```
 
@@ -432,20 +432,20 @@ amount of data fetched after page load.
   };
   ```
 
-### `startDate`
+### `startDateTime`
 
-Initial start date for fetched data.
+Initial start date and time (browser timezone) for fetched data.
 
 - Type: [`Date`]
-- Default: one month ago
+- Default: one month ago, 00:00:00
 - Example:
   ```js
   // Data will be fetched from the first day of the current month
-  const startDate = new Date();
-  startDate.setUTCHours(0, 0, 0, 0);
-  startDate.setUTCDate(1);
+  const startDateTime = new Date();
+  startDateTime.setHours(0, 0, 0, 0);
+  startDateTime.setDate(1);
   window.owntracks.config = {
-    startDate
+    startDateTime
   };
   ```
 

package.json

@@ -19,14 +19,15 @@
     "deepmerge": "^4.2.2",
     "leaflet": "^1.6.0",
     "leaflet.heat": "^0.2.0",
+    "moment": "^2.24.0",
     "vue": "^2.6.6",
+    "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",
-    "vuejs-datepicker": "^1.6.2",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
@@ -45,6 +46,7 @@
     "eslint-plugin-vue": "^6.0.1",
     "jest-fetch-mock": "^2.1.2",
     "lint-staged": "^9.5.0",
+    "moment-locales-webpack-plugin": "^1.1.2",
     "node-sass": "^4.13.0",
     "sass-loader": "^8.0.0",
     "vue-cli-plugin-i18n": "^0.6.0",

src/App.vue

@@ -40,8 +40,8 @@ export default {
         [
           types.SET_SELECTED_USER,
           types.SET_SELECTED_DEVICE,
-          types.SET_START_DATE,
-          types.SET_END_DATE,
+          types.SET_START_DATE_TIME,
+          types.SET_END_DATE_TIME,
           types.SET_MAP_CENTER,
           types.SET_MAP_ZOOM,
           types.SET_MAP_LAYER_VISIBILITY,
@@ -68,8 +68,8 @@ export default {
     updateUrlQuery() {
       const {
         map,
-        startDate: start,
-        endDate: end,
+        startDateTime: start,
+        endDateTime: end,
         selectedUser: user,
         selectedDevice: device,
       } = this.$store.state;
@@ -80,8 +80,8 @@ export default {
         lat: map.center.lat,
         lng: map.center.lng,
         zoom: map.zoom,
-        start: start.toISOString().split("T")[0],
-        end: end.toISOString().split("T")[0],
+        start,
+        end,
         ...(user !== null && { user }),
         ...(user !== null && device !== null && { device }),
         ...(activeLayers.length > 0 && { layers: activeLayers.join(",") }),

src/api.js

@@ -95,8 +95,8 @@ export const getLastLocations = async (user, device) => {
  *
  * @param {User} user Username
  * @param {Device} device Device name
- * @param {Date} start Start date
- * @param {Date} end End date
+ * @param {String} start Start date and time in UTC
+ * @param {String} end End date and time in UTC
  * @return {LocationHistory} Array of location history objects
  */
 export const getUserDeviceLocationHistory = async (
@@ -105,11 +105,9 @@ export const getUserDeviceLocationHistory = async (
   start,
   end
 ) => {
-  const startDate = start.toISOString().split("T")[0];
-  const endDate = end.toISOString().split("T")[0];
   const response = await fetchApi("/api/0/locations", {
-    from: `${startDate}T00:00:00`,
-    to: `${endDate}T23:59:59`,
+    from: start,
+    to: end,
     user,
     device,
     format: "json",
@@ -122,8 +120,8 @@ export const getUserDeviceLocationHistory = async (
  * Get the location history of multiple devices.
  *
  * @param {Object.<User, Array.<Device>>} devices Devices of which the history should be fetched
- * @param {Date} start Start date
- * @param {Date} end End date
+ * @param {String} start Start date and time in UTC
+ * @param {String} end End date and time in UTC
  * @return {Object.<User, Object.<Device, LocationHistory>>} Array of location history objects
  */
 export const getLocationHistory = async (devices, start, end) => {

src/components/AppHeader.vue

@@ -32,19 +32,35 @@
       </div>
       <div class="nav-item">
         <CalendarIcon size="1x" />
-        <Datepicker
-          v-model="startDate"
-          :use-utc="true"
-          :disabled-dates="startDateDisabledDates"
-          :title="$t('Select start date')"
-        />
+        <VueCtkDateTimePicker
+          v-model="startDateTime"
+          :format="DATE_TIME_FORMAT"
+          :color="config.primaryColor"
+          :locale="config.locale"
+          :max-date="endDateTime"
+          :button-now-translation="$t('Now')"
+        >
+          <button
+            type="button"
+            class="dropdown-button button"
+            :title="$t('Select start date')"
+          />
+        </VueCtkDateTimePicker>
         {{ $t("to") }}
-        <Datepicker
-          v-model="endDate"
-          :use-utc="true"
-          :disabled-dates="endDateDisabledDates"
-          :title="$t('Select end date')"
-        />
+        <VueCtkDateTimePicker
+          v-model="endDateTime"
+          :format="DATE_TIME_FORMAT"
+          :color="config.primaryColor"
+          :locale="config.locale"
+          :min-date="startDateTime"
+          :button-now-translation="$t('Now')"
+        >
+          <button
+            type="button"
+            class="dropdown-button button"
+            :title="$t('Select end date')"
+          />
+        </VueCtkDateTimePicker>
       </div>
       <div class="nav-item">
         <UserIcon size="1x" />
@@ -105,6 +121,7 @@
 </template>
 
 <script>
+import moment from "moment";
 import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
 import {
   CalendarIcon,
@@ -114,9 +131,12 @@ import {
   SmartphoneIcon,
   UserIcon,
 } from "vue-feather-icons";
-import Datepicker from "vuejs-datepicker";
+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";
 
 export default {
@@ -127,11 +147,13 @@ export default {
     LayersIcon,
     SmartphoneIcon,
     UserIcon,
-    Datepicker,
+    VueCtkDateTimePicker,
     Dropdown,
   },
   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)") },
@@ -142,7 +164,6 @@ export default {
   },
   computed: {
     ...mapState(["users", "devices", "map"]),
-    ...mapGetters(["startDateDisabledDates", "endDateDisabledDates"]),
     selectedUser: {
       get() {
         return this.$store.state.selectedUser;
@@ -159,20 +180,35 @@ export default {
         this.setSelectedDevice(value);
       },
     },
-    startDate: {
+    startDateTime: {
       get() {
-        return this.$store.state.startDate;
+        return moment
+          .utc(this.$store.state.startDateTime, DATE_TIME_FORMAT)
+          .local()
+          .format(DATE_TIME_FORMAT);
       },
       set(value) {
-        this.setStartDate(value);
+        this.setStartDateTime(
+          moment(value, DATE_TIME_FORMAT)
+            .utc()
+            .format(DATE_TIME_FORMAT)
+        );
       },
     },
-    endDate: {
+    endDateTime: {
       get() {
-        return this.$store.state.endDate;
+        return moment
+          .utc(this.$store.state.endDateTime, DATE_TIME_FORMAT)
+          .local()
+          .format(DATE_TIME_FORMAT);
       },
       set(value) {
-        this.setEndDate(value);
+        this.setEndDateTime(
+          moment(value, DATE_TIME_FORMAT)
+            .set("seconds", 59)
+            .utc()
+            .format(DATE_TIME_FORMAT)
+        );
       },
     },
   },
@@ -183,8 +219,8 @@ export default {
     ...mapActions([
       "setSelectedUser",
       "setSelectedDevice",
-      "setStartDate",
-      "setEndDate",
+      "setStartDateTime",
+      "setEndDateTime",
     ]),
   },
 };

src/components/modals/Download.vue

@@ -65,8 +65,8 @@ export default {
   },
   computed: {
     ...mapState([
-      "startDate",
-      "endDate",
+      "startDateTime",
+      "endDateTime",
       "selectedUser",
       "selectedDevice",
       "locationHistory",
@@ -90,8 +90,8 @@ export default {
         null,
         this.options.minifyJson ? 0 : 2
       );
-      const start = this.startDate.toISOString().split("T")[0];
-      const end = this.endDate.toISOString().split("T")[0];
+      const start = this.startDateTime;
+      const end = this.endDateTime;
       const user = this.selectedUser ? `_${this.selectedUser}` : "";
       const device = this.selectedDevice ? `_${this.selectedDevice}` : "";
       const filename = `data_${start}_${end}${user}${device}.json`;

src/config.js

@@ -1,16 +1,17 @@
 import deepmerge from "deepmerge";
 
-const endDate = new Date();
-endDate.setUTCHours(0, 0, 0, 0);
+const endDateTime = new Date();
+endDateTime.setHours(23, 59, 59, 0);
 
-const startDate = new Date(endDate);
-startDate.setUTCMonth(startDate.getMonth() - 1);
+const startDateTime = new Date(endDateTime);
+startDateTime.setMonth(startDateTime.getMonth() - 1);
+startDateTime.setHours(0, 0, 0, 0);
 
 const DEFAULT_CONFIG = {
   api: {
     baseUrl: `${window.location.protocol}//${window.location.host}`,
   },
-  endDate,
+  endDateTime,
   ignorePingLocation: true,
   locale: "en",
   map: {
@@ -72,7 +73,7 @@ const DEFAULT_CONFIG = {
   primaryColor: "#3f51b5",
   selectedDevice: null,
   selectedUser: null,
-  startDate,
+  startDateTime,
   verbose: false,
 };
 

src/constants.js

@@ -1,8 +1,7 @@
-// Regular expression for an ISO 8601 YYYY-MM-DD date.
-// Used to validate dates from URL query parameters.
-export const ISO_DATE_REGEXP = new RegExp(
-  /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/
-);
+// date and time format as expected by the OwnTracks recorder,
+// using moment.js formatting tokens.
+// https://momentjs.com/docs/#/displaying/format/
+export const DATE_TIME_FORMAT = "YYYY-MM-DDTHH:mm:ss";
 
 // https://en.wikipedia.org/wiki/Earth_radius
 // Used to calculate the distance between two coordinates.

src/locales/de.json

@@ -3,6 +3,7 @@
   "Fit view": "Ansicht anpassen",
   "Layer settings": "Ebeneneinstellungen",
   "Show/hide layers": "Ebenen ein-/ausblenden",
+  "Now": "Jetzt",
   "Select start date": "Startdatum auswählen",
   "to": "bis",
   "Select end date": "Enddatum auswählen",

src/locales/en.json

@@ -3,6 +3,7 @@
   "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",