From 7767a068751743a14a9770e00dff0fdc33ab531a Mon Sep 17 00:00:00 2001 From: Linus Groh Date: Sat, 14 Dec 2019 09:35:46 -0500 Subject: [PATCH] Add support for time selection --- docs/config.md | 26 ++++---- package.json | 4 +- src/App.vue | 12 ++-- src/api.js | 14 ++-- src/components/AppHeader.vue | 82 ++++++++++++++++------- src/components/modals/Download.vue | 8 +-- src/config.js | 13 ++-- src/constants.js | 9 ++- src/locales/de.json | 1 + src/locales/en.json | 1 + src/store/actions.js | 36 +++++----- src/store/getters.js | 30 --------- src/store/index.js | 5 +- src/store/mutation-types.js | 4 +- src/store/mutations.js | 8 +-- src/styles/_base.scss | 41 ++++-------- src/styles/_datepicker.scss | 31 ++------- src/util.js | 10 +-- tests/api.test.js | 8 +-- tests/util.test.js | 44 +++++++----- vue.config.js | 2 + yarn.lock | 103 +++++++++++++++++++++++++++-- 22 files changed, 289 insertions(+), 203 deletions(-) diff --git a/docs/config.md b/docs/config.md index 53b323f..fbf5769 100644 --- a/docs/config.md +++ b/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 }; ``` diff --git a/package.json b/package.json index bc23bd4..01bdaff 100644 --- a/package.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index 73db8e7..d77e4b6 100644 --- a/src/App.vue +++ b/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(",") }), diff --git a/src/api.js b/src/api.js index 2ed879c..b14dc87 100644 --- a/src/api.js +++ b/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.>} 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.>} Array of location history objects */ export const getLocationHistory = async (devices, start, end) => { diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue index ce230d6..c2219c9 100644 --- a/src/components/AppHeader.vue +++ b/src/components/AppHeader.vue @@ -32,19 +32,35 @@
- + +
@@ -105,6 +121,7 @@