Linkable schedules

htdocs/App.vue

@@ -88,6 +88,7 @@
 				else {
 					[
 						{ path: '/', component: RouteSchedule },
+						{ path: '/schedule/:from?/:to?', component: RouteSchedule },
 						{ path: '/lookup', component: RouteLookup },
 						{ path: '/patient/:id', component: RoutePatient, children: [
 							{ path: '', component: RoutePatientDetail },

htdocs/RouteSchedule.vue

@@ -4,7 +4,7 @@
 		<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 range="1D" direction="+1" v-model:date="date" v-model:date_end="date_end" />
+			<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)" />
@@ -21,6 +21,12 @@
 		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
@@ -31,11 +37,31 @@
 		data() {
 			return {
 				date: dateonly(new Date()),
-				date_end: 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>