From 720379b0a81bac8f09a00153b6aa199c73aa86af Mon Sep 17 00:00:00 2001 From: Aaron Claydon Date: Thu, 2 May 2024 23:05:42 +0100 Subject: [PATCH] Date picker --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/main.js | 1 + src/views/Stops/View.vue | 25 +++++++++++++++++-------- 4 files changed, 56 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7e6409d..e2d691b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@auth0/auth0-vue": "^2.3.3", + "@vuepic/vue-datepicker": "^8.5.1", "@webzlodimir/vue-bottom-sheet": "^3.0.5", "axios": "^1.6.8", "firebase": "^10.11.1", @@ -3807,6 +3808,20 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz", "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==" }, + "node_modules/@vuepic/vue-datepicker": { + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.5.1.tgz", + "integrity": "sha512-kFfYB14wKShBhEcHwaQgonMo4AhsldiLuoxrWuutYBdHsUnwecY8vw+zoieI/mZsCYep4chH1yDByYf5JGjKOA==", + "dependencies": { + "date-fns": "^3.6.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "vue": ">=3.2.0" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", @@ -4679,6 +4694,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -11979,6 +12003,14 @@ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz", "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==" }, + "@vuepic/vue-datepicker": { + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.5.1.tgz", + "integrity": "sha512-kFfYB14wKShBhEcHwaQgonMo4AhsldiLuoxrWuutYBdHsUnwecY8vw+zoieI/mZsCYep4chH1yDByYf5JGjKOA==", + "requires": { + "date-fns": "^3.6.0" + } + }, "@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", @@ -12644,6 +12676,11 @@ "is-data-view": "^1.0.1" } }, + "date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index d49648a..ca74716 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ }, "dependencies": { "@auth0/auth0-vue": "^2.3.3", + "@vuepic/vue-datepicker": "^8.5.1", "@webzlodimir/vue-bottom-sheet": "^3.0.5", "axios": "^1.6.8", "firebase": "^10.11.1", diff --git a/src/main.js b/src/main.js index 6e84f35..02dfc83 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import { createApp } from 'vue' import './tailwind.css' import './main.css' +import '@vuepic/vue-datepicker/dist/main.css' // import 'leaflet/dist/leaflet.css' import App from './App.vue' import { routes } from './routes.js' diff --git a/src/views/Stops/View.vue b/src/views/Stops/View.vue index 9ee0082..4cb3e3d 100644 --- a/src/views/Stops/View.vue +++ b/src/views/Stops/View.vue @@ -44,7 +44,7 @@ - + @@ -119,6 +119,7 @@ import DeparturesList from '@/components/DeparturesList.vue' import ServiceAlert from '@/components/ServiceAlert.vue' import Alert from '@/components/Alert.vue' import NavTabBar from "@/components/NavTabBar.vue" +import VueDatePicker from '@vuepic/vue-datepicker' import axios from 'axios' import API from '@/API' import Pretty from '@/pretty' @@ -164,7 +165,9 @@ export default { id: "details", name: "Details", } - ] + ], + + datetime: null } }, components: { @@ -174,16 +177,18 @@ export default { ServiceAlert, Alert, DeparturesList, - NavTabBar + NavTabBar, + VueDatePicker }, methods: { openDatetimePicker() { - this.$refs.datetime.showPicker() + this.$refs.datetimepicker.openMenu() }, updateDatetimePicker(event) { + console.log(event) let timestamp = "" - if (event.target.value !== "") { - timestamp = new Date(event.target.value).toISOString() + if (event !== "") { + timestamp = new Date(event).toISOString() } this.$router.push({query: {datetime: timestamp}}) @@ -196,9 +201,9 @@ export default { }, refreshView() { // TODO maybe add some sort of rate limiting here? - if (this.currentTab == "departures" && !this.loadingDepartures) { + if (this.currentTab == "departures") { this.getDepartures() - } else if (this.currentTab == "arrivals" && !this.loadingArrivals) { + } else if (this.currentTab == "arrivals") { this.getArrivals() } }, @@ -219,6 +224,10 @@ export default { .finally(() => this.loadingStop = false) }, getDepartures() { + if (this.loadingDepartures && this.departures !== null) { + return + } + this.loadingDepartures = true axios .get(`${API.URL}/core/stops/${this.$route.params.id}/departures`, {