From a7e7c62ad1aac141bc6785b925da181aa8732d6b Mon Sep 17 00:00:00 2001 From: Matthias Mohr Date: Mon, 19 Sep 2022 16:35:26 +0200 Subject: [PATCH] Allow usage of arrows to select data in WMTS viewer #278 --- src/components/maps/WebServiceMixin.vue | 66 ++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 8 deletions(-) diff --git a/src/components/maps/WebServiceMixin.vue b/src/components/maps/WebServiceMixin.vue index ea1c58e76..cf2ca0ad4 100644 --- a/src/components/maps/WebServiceMixin.vue +++ b/src/components/maps/WebServiceMixin.vue @@ -16,6 +16,7 @@ export default { return { WMTSCapabilities: {}, timeline: null, + times: [] } }, methods: { @@ -93,10 +94,10 @@ export default { defaultDate = new Date(options.dimensions.TIME); } - let times = this.getWMTSTimes(capabilities, layer); - if (times.length) { - let min = new Date(times[0]); - let max = new Date(times[times.length -1]); + this.times = this.getWMTSTimes(capabilities, layer); + if (this.times.length) { + let min = new Date(this.times[0]); + let max = new Date(this.times[this.times.length-1]); if (!minDate || min < minDate) { minDate = min; } @@ -124,7 +125,15 @@ export default { maxDate: maxDate }); let run; + let toDate = (date) => { + return [ + date.getFullYear(), + ("0" + (date.getMonth() + 1)).slice(-2), + ("0" + date.getDate()).slice(-2) + ].join('-'); + }; this.timeline.on('scroll', function(e) { + console.log(e); if (!e.date || e.date > maxDate || e.date < minDate) { return; } @@ -133,13 +142,14 @@ export default { } run = window.setTimeout(() => { try { - let date = e.date.toISOString().substr(0, 10); + console.log(e.date); + let date = toDate(e.date); + console.log(date); source.updateDimensions({ TIME: date }); let btns = document.getElementsByClassName('timeline-date-label'); btns[0].innerText = date; - btns[0].disabled = true; } catch (error) { console.log(error); } @@ -148,12 +158,52 @@ export default { }); this.map.addControl(this.timeline); + this.timeline.addButton({ + className: 'timeline-prev-label', + title: 'Go to previous date', + html: '<', + handleClick: () => { + console.log(this.timeline.getDate()); + console.log(this.times); + } + }); this.timeline.addButton({ className: 'timeline-date-label', title: `The date that is shown on the map for the collection '${title}'`, - html: 'No date' + html: 'No date', + handleClick: () => { + let date = this.timeline.getDate(); + let newDate = toDate(date); + while (typeof newDate === 'string') { + newDate = prompt("Please specify the date (format: YYYY-MM-DD) you want to go to:", newDate); + if (typeof newDate !== 'string') { + return; + } + let match = newDate.match(/^\s*(\d{1,4})-(\d{2})-(\d{2})\s*$/); + if (match) { + let parts = match.slice(1, 4).map(x => parseInt(x, 10)); + date.setFullYear(parts[0]); + date.setMonth(parts[1] - 1); + date.setDate(parts[2]); + console.log(date); + this.timeline.setDate(date); + console.log(this.timeline.getDate()); + return; + } + } + } }); - this.timeline.setDate(defaultDate); + this.timeline.addButton({ + className: 'timeline-next-label', + title: 'Go to next label', + html: '>', + handleClick: () => { + console.log(this.timeline.getDate()); + + } + }); + + this.timeline.setDate(defaultDate, {anim: false}); } let group = new LayerGroup({