nuVistA/htdocs/RouteSchedule.vue

<template>
	<Subtitle value="Schedule" />
	<div class="card mb-3 shadow">
		<div class="card-header d-flex justify-content-between align-items-center">
			<span>Schedule</span>
			<router-link to="/settings">Select clinics<template v-if="selection.length > 0"> ({{selection.length}})</template></router-link>
			<DateRangePicker direction="+1" v-model:date="date" v-model:date_end="date_end" v-model:range="range" />
		</div>
		<div class="card-body">
			<ViewSchedule :client="client" :selection="selection" :date_begin="date" :date_end="new Date(date_end.getTime() - 1)" />
		</div>
	</div>
</template>

<script>
	import Subtitle from './Subtitle.vue';
	import DateRangePicker from './DateRangePicker.vue';
	import ViewSchedule from './ViewSchedule.vue';

	function dateonly(date) {
		return new Date(date.getFullYear(), date.getMonth(), date.getDate());
	}

	function localtime(s) {
		var date = new Date(s);
		date.setTime(date.getTime() + 60000*date.getTimezoneOffset());
		return date;
	}

	export default {
		components: {
			Subtitle, DateRangePicker, ViewSchedule
		},
		props: {
			client: Object
		},
		data() {
			return {
				date: dateonly(new Date()),
				date_end: dateonly(new Date()),
				range: '1D'
			};
		},
		computed: {
			selection() { return (this.client) && (this.client.remotestate.resources) ? (this.client.remotestate.resources.split(',').filter(x => x) || []) : [] }
		},
		watch: {
			'$route.params.from': {
				handler(value) {
					this.date = dateonly(value ? localtime(value) : new Date());
				}, immediate: true
			},
			'$route.params.to': {
				handler(value) {
					if(value) {
						var date = localtime(value);
						if(isNaN(date)) this.range = value;
						else {
							this.range = 'Range';
							this.date_end = dateonly(date);
						}
					} else this.range = '1D';
				}, immediate: true
			}
		}
	};
</script>