From acceff795256965aea87caf2eb9094b9ecc987b1 Mon Sep 17 00:00:00 2001
From: Area52_Nader <86432017+NaderArea52@users.noreply.github.com>
Date: Fri, 16 Oct 2026 10:39:26 -0300
Subject: [PATCH] feat: calendar date range as alternative to the time filter
 slider

- New DateRangeFilter component with separate From and To date pickers
  (NcDateTimePicker). Days outside the available data are grayed out,
  From can not be after To. Reset selects the full data range.
- Settings: choose between Slider and Calendar (timeFilterMode option)
- The calendar remembers its selection after a page reload
  (dateFilterStart/dateFilterEnd options). A bound at the edge of the
  data is saved as open so new data stays visible.
- maxDataTimestamp now ignores data types without dates (they defaulted
  to now) and includes the newest device point.

Implements #1222

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Signed-off-by: Area52_Nader <86432017+NaderArea52@users.noreply.github.com>
---
 src/components/Map.vue                 |  12 +-
 src/components/MapsNavigation.vue      |  28 ++++-
 src/components/map/DateRangeFilter.vue | 165 +++++++++++++++++++++++++
 src/views/App.vue                      |  50 ++++++--
 4 files changed, 246 insertions(+), 9 deletions(-)
 create mode 100644 src/components/map/DateRangeFilter.vue

diff --git a/src/components/Map.vue b/src/components/Map.vue
index 8ecc40044..1d457778a 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -143,7 +143,13 @@
 			</MglCustomControl>
 		</MglMap>
 
-		<Slider v-show="sliderEnabled"
+		<Slider v-show="sliderEnabled && timeFilterMode !== 'calendar'"
+			:start="sliderStartTimestamp"
+			:end="sliderEndTimestamp"
+			:range-min="minDataTimestamp"
+			:range-max="maxDataTimestamp"
+			@range-change="emit('slider-range-changed', $event)" />
+		<DateRangeFilter v-if="sliderEnabled && timeFilterMode === 'calendar'"
 			:start="sliderStartTimestamp"
 			:end="sliderEndTimestamp"
 			:range-min="minDataTimestamp"
@@ -186,6 +192,7 @@ import PlaceContactMarker from './map/PlaceContactMarker.vue'
 import type { HistoryAction } from './map/HistoryControl.vue'
 import HistoryControl from './map/HistoryControl.vue'
 import Slider from './map/Slider.vue'
+import DateRangeFilter from './map/DateRangeFilter.vue'
 import ElevationChart from './map/ElevationChart.vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { searchPois as searchPoisNetwork } from '../network.js'
@@ -233,6 +240,8 @@ const props = withDefaults(defineProps<{
 	devices?: Device[]
 	devicesEnabled?: boolean
 	sliderEnabled?: boolean
+	/** 'slider' or 'calendar' */
+	timeFilterMode?: string
 	sliderStartTimestamp?: number
 	sliderEndTimestamp?: number
 	minDataTimestamp?: number
@@ -265,6 +274,7 @@ const props = withDefaults(defineProps<{
 	devices: () => [],
 	devicesEnabled: false,
 	sliderEnabled: false,
+	timeFilterMode: 'slider',
 	sliderStartTimestamp: 0,
 	sliderEndTimestamp: 0,
 	minDataTimestamp: 0,
diff --git a/src/components/MapsNavigation.vue b/src/components/MapsNavigation.vue
index c0473c459..7fd1e3895 100644
--- a/src/components/MapsNavigation.vue
+++ b/src/components/MapsNavigation.vue
@@ -51,6 +51,15 @@
 							</template>
 						</NcFormBoxButton>
 					</NcFormBox>
+					<NcRadioGroup v-if="optionValues.displaySlider === 'true'"
+						class="maps-navigation__time-filter-mode"
+						:label="t('maps', 'Time filter')"
+						:description="t('maps', 'Filter with a slider, or pick the start and end dates in a calendar')"
+						:model-value="timeFilterMode"
+						@update:model-value="onTimeFilterModeChange">
+						<NcRadioGroupButton value="slider" :label="t('maps', 'Slider')" />
+						<NcRadioGroupButton value="calendar" :label="t('maps', 'Calendar')" />
+					</NcRadioGroup>
 				</NcAppSettingsSection>
 				<NcAppSettingsSection id="maps-settings-projection" :name="t('maps', 'Map projection')">
 					<NcFormBox>
@@ -77,8 +86,10 @@ import {
 	NcFormBoxButton,
 	NcFormBoxSwitch,
 	NcLoadingIcon,
+	NcRadioGroup,
+	NcRadioGroupButton,
 } from '@nextcloud/vue'
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import IconCog from 'vue-material-design-icons/CogOutline.vue'
 import IconOpenInApp from 'vue-material-design-icons/OpenInApp.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
@@ -97,10 +108,12 @@ const emit = defineEmits<{
 	'toggle-trackme': [enabled: boolean]
 	'register-geo-link': []
 	'toggle-slider': [enabled: boolean]
+	'change-time-filter-mode': [mode: string]
 }>()
 
 const optionValues = reactive(optionsController.optionValues)
 const settingsOpen = ref(false)
+const timeFilterMode = computed(() => optionValues.timeFilterMode === 'calendar' ? 'calendar' : 'slider')
 
 /**
  * @param checked whether the position should be tracked
@@ -119,6 +132,15 @@ function onDisplaySliderChange(checked: boolean): void {
 	optionsController.saveOptionValues({ displaySlider: optionValues.displaySlider })
 	emit('toggle-slider', checked)
 }
+
+/**
+ * @param mode 'slider' or 'calendar'
+ */
+function onTimeFilterModeChange(mode: string): void {
+	optionValues.timeFilterMode = mode
+	optionsController.saveOptionValues({ timeFilterMode: mode })
+	emit('change-time-filter-mode', mode)
+}
 </script>
 
 <style scoped lang="scss">
@@ -128,6 +150,10 @@ function onDisplaySliderChange(checked: boolean): void {
 	padding: calc(2 * var(--default-grid-baseline));
 }
 
+.maps-navigation__time-filter-mode {
+	margin-top: calc(2 * var(--default-grid-baseline));
+}
+
 .maps-navigation__footer {
 	padding: var(--default-grid-baseline);
 	border-top: 1px solid var(--color-border);
diff --git a/src/components/map/DateRangeFilter.vue b/src/components/map/DateRangeFilter.vue
new file mode 100644
index 000000000..b6e35fef8
--- /dev/null
+++ b/src/components/map/DateRangeFilter.vue
@@ -0,0 +1,165 @@
+<template>
+	<div id="dateRangeFilter">
+		<NcDateTimePicker
+			class="date-range-filter-picker"
+			type="date"
+			:model-value="startValue"
+			:min="minDate"
+			:max="startMaxDate"
+			:clearable="false"
+			:append-to-body="true"
+			:placeholder="t('maps', 'From')"
+			:aria-label="t('maps', 'Time filter start date')"
+			@update:model-value="onStartChange" />
+		<span class="date-range-filter-separator">–</span>
+		<NcDateTimePicker
+			class="date-range-filter-picker"
+			type="date"
+			:model-value="endValue"
+			:min="endMinDate"
+			:max="maxDate"
+			:clearable="false"
+			:append-to-body="true"
+			:placeholder="t('maps', 'To')"
+			:aria-label="t('maps', 'Time filter end date')"
+			@update:model-value="onEndChange" />
+		<NcButton
+			:aria-label="t('maps', 'Show all dates')"
+			:title="t('maps', 'Show all dates')"
+			@click="onReset">
+			{{ t('maps', 'Reset') }}
+		</NcButton>
+	</div>
+</template>
+
+<script>
+import { NcButton, NcDateTimePicker } from '@nextcloud/vue'
+import optionsController from '../../optionsController.js'
+
+export default {
+	name: 'DateRangeFilter',
+
+	components: {
+		NcButton,
+		NcDateTimePicker,
+	},
+
+	props: {
+		start: {
+			type: Number,
+			required: true,
+		},
+		end: {
+			type: Number,
+			required: true,
+		},
+		rangeMin: {
+			type: Number,
+			required: true,
+		},
+		rangeMax: {
+			type: Number,
+			required: true,
+		},
+	},
+
+	emits: ['range-change'],
+
+	computed: {
+		// the filter can be wider than the data (e.g. 0 when "everything" is selected), keep display inside the data range
+		displayStart() {
+			return Math.min(Math.max(this.start, this.rangeMin), this.rangeMax)
+		},
+		displayEnd() {
+			return Math.max(Math.min(this.end, this.rangeMax), this.displayStart)
+		},
+		startValue() {
+			return new Date(this.displayStart * 1000)
+		},
+		endValue() {
+			return new Date(this.displayEnd * 1000)
+		},
+		// first selectable day (dates before are grayed out)
+		minDate() {
+			return startOfDay(this.rangeMin)
+		},
+		// last selectable day (dates after are grayed out)
+		maxDate() {
+			return endOfDay(this.rangeMax)
+		},
+		// start can not be after the selected end day
+		startMaxDate() {
+			return endOfDay(this.displayEnd)
+		},
+		// end can not be before the selected start day
+		endMinDate() {
+			return startOfDay(this.displayStart)
+		},
+	},
+
+	methods: {
+		// whole days, in local time: start day 00:00:00, end day 23:59:59
+		onStartChange(date) {
+			if (!date) {
+				return
+			}
+			this.changeRange(Math.floor(startOfDay(date.getTime() / 1000).getTime() / 1000), this.end)
+		},
+		onEndChange(date) {
+			if (!date) {
+				return
+			}
+			this.changeRange(this.start, Math.floor(endOfDay(date.getTime() / 1000).getTime() / 1000))
+		},
+		onReset() {
+			this.changeRange(this.rangeMin, this.rangeMax)
+		},
+		changeRange(start, end) {
+			// remember the selection, a bound at the edge of the data is saved as open ('')
+			// so data added later (e.g. new device points) is still shown after a page reload
+			optionsController.saveOptionValues({
+				dateFilterStart: start <= this.rangeMin ? '' : String(start),
+				dateFilterEnd: end >= this.rangeMax ? '' : String(end),
+			})
+			this.$emit('range-change', { start, end })
+		},
+	},
+}
+
+function startOfDay(timestamp) {
+	const d = new Date(timestamp * 1000)
+	d.setHours(0, 0, 0, 0)
+	return d
+}
+
+function endOfDay(timestamp) {
+	const d = new Date(timestamp * 1000)
+	d.setHours(23, 59, 59, 999)
+	return d
+}
+</script>
+
+<style lang="scss" scoped>
+#dateRangeFilter {
+	position: absolute;
+	left: 50%;
+	bottom: 30px;
+	transform: translateX(-50%);
+	z-index: 10000;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px;
+	border-radius: var(--border-radius-large);
+	background-color: var(--color-main-background);
+	box-shadow: 0 0 10px var(--color-box-shadow);
+}
+
+.date-range-filter-picker {
+	width: 160px;
+}
+
+.date-range-filter-separator {
+	color: var(--color-text-maxcontrast);
+}
+</style>
diff --git a/src/views/App.vue b/src/views/App.vue
index ce0661f02..2a45104d5 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -13,6 +13,7 @@
 			:show-settings="!token"
 			@toggle-trackme="onToggleTrackme"
 			@toggle-slider="onToggleSlider"
+			@change-time-filter-mode="timeFilterMode = $event"
 			@register-geo-link="onRegisterGeoLink">
 			<template v-if="!token" #header>
 				<MapSwitcherHeader :my-maps="myMaps"
@@ -151,6 +152,7 @@
 					:devices="displayedDevices"
 					:devices-enabled="devicesEnabled"
 					:slider-enabled="sliderEnabled"
+					:time-filter-mode="timeFilterMode"
 					:slider-start-timestamp="sliderStart"
 					:slider-end-timestamp="sliderEnd"
 					:min-data-timestamp="minDataTimestamp"
@@ -257,6 +259,16 @@ import { placeFileOrFolder } from '../utils/photoPicker.ts'
 import { openFileInSidebar } from '../utils/filesSidebar.ts'
 import { getClient } from '@nextcloud/files/dav'
 
+// the calendar time filter remembers its last selection (the slider does not)
+function getSavedCalendarTimestamp(key, defaultValue) {
+	const optionValues = optionsController.optionValues
+	if (optionValues.displaySlider !== 'true' || optionValues.timeFilterMode !== 'calendar') {
+		return defaultValue
+	}
+	const timestamp = parseInt(optionValues[key])
+	return isNaN(timestamp) ? defaultValue : timestamp
+}
+
 export default {
 	name: 'App',
 
@@ -292,8 +304,9 @@ export default {
 			activeSidebarTab: '',
 			// slider
 			sliderEnabled: optionsController.optionValues.displaySlider === 'true',
-			sliderStart: 0,
-			sliderEnd: moment().unix(),
+			timeFilterMode: optionsController.optionValues.timeFilterMode === 'calendar' ? 'calendar' : 'slider',
+			sliderStart: getSavedCalendarTimestamp('dateFilterStart', 0),
+			sliderEnd: getSavedCalendarTimestamp('dateFilterEnd', moment().unix()),
 			// action history
 			lastActions: [],
 			lastCanceledActions: [],
@@ -373,11 +386,23 @@ export default {
 			) || 0
 		},
 		maxDataTimestamp() {
-			return Math.max(
-				this.maxPhotoTimestamp,
-				this.maxFavoriteTimestamp,
-				this.maxTrackTimestamp,
-			) || moment().unix()
+			// only use data types that actually have dates, empty ones would default to "now"
+			const maxTimestamps = []
+			if (this.photoDates.length > 0) {
+				maxTimestamps.push(this.maxPhotoTimestamp)
+			}
+			if (this.favoritesDates.length > 0) {
+				maxTimestamps.push(this.maxFavoriteTimestamp)
+			}
+			if (this.trackDates.length > 0) {
+				maxTimestamps.push(this.maxTrackTimestamp)
+			}
+			if (this.maxDevicesTimestamp !== null) {
+				maxTimestamps.push(this.maxDevicesTimestamp)
+			}
+			return maxTimestamps.length > 0
+				? Math.max(...maxTimestamps)
+				: moment().unix()
 		},
 		photoDates() {
 			return this.photos.filter(p => { return p.dateTaken !== null }).map(p => p.dateTaken)
@@ -446,6 +471,17 @@ export default {
 				return min
 			}, moment().unix() + 100)
 		},
+		maxDevicesTimestamp() {
+			return this.devices.reduce((max, device) => {
+				if (device.enabled && device.historyEnabled && device.points?.length > 0) {
+					const lastTimestamp = device.points[device.points.length - 1].timestamp
+					if (lastTimestamp) {
+						max = max === null ? lastTimestamp : Math.max(max, lastTimestamp)
+					}
+				}
+				return max
+			}, null)
+		},
 		// displayed data
 		displayedTracks() {
 			return this.sliderEnabled