From 85cefa1b7bd011fbc239de64c9d5adc0b4832d38 Mon Sep 17 00:00:00 2001
From: inportb <inportb@gmail.com>
Date: Wed, 3 May 2023 01:41:34 -0400
Subject: [PATCH] Planner (refactored from schedule overview)

---
 htdocs/App.vue                   |   4 +-
 htdocs/Navbar.vue                |   2 +-
 htdocs/RoutePlanner.vue          |  46 ++++++++++
 htdocs/RouteScheduleOverview.vue | 146 -------------------------------
 htdocs/ViewPlanner.vue           | 128 +++++++++++++++++++++++++++
 5 files changed, 177 insertions(+), 149 deletions(-)
 create mode 100644 htdocs/RoutePlanner.vue
 delete mode 100644 htdocs/RouteScheduleOverview.vue
 create mode 100644 htdocs/ViewPlanner.vue

diff --git a/htdocs/App.vue b/htdocs/App.vue
index c6e9da6..3b46281 100644
--- a/htdocs/App.vue
+++ b/htdocs/App.vue
@@ -18,7 +18,7 @@
 	import RoutePatientDetail from './RoutePatientDetail.vue';
 	import RoutePatientVisits from './RoutePatientVisits.vue';
 	import RoutePatientOrders from './RoutePatientOrders.vue';
-	import RouteScheduleOverview from './RouteScheduleOverview.vue';
+	import RoutePlanner from './RoutePlanner.vue';
 	import RouteRecall from './RouteRecall.vue';
 
 	export default {
@@ -48,7 +48,7 @@
 						{ path: '/patient/:id', component: RoutePatientDetail },
 						{ path: '/patient/:id/visits', component: RoutePatientVisits },
 						{ path: '/patient/:id/orders', component: RoutePatientOrders },
-						{ path: '/overview', component: RouteScheduleOverview },
+						{ path: '/planner', component: RoutePlanner },
 						{ path: '/recall', component: RouteRecall },
 					].forEach(route => this.$root.$router.addRoute(route));
 					await this.$root.$router.replace(this.$route);
diff --git a/htdocs/Navbar.vue b/htdocs/Navbar.vue
index 7e0c49b..2461bbc 100644
--- a/htdocs/Navbar.vue
+++ b/htdocs/Navbar.vue
@@ -22,7 +22,7 @@
 						</li>
 					</template>
 					<li class="nav-item">
-						<router-link class="nav-link" to="/overview">Overview</router-link>
+						<router-link class="nav-link" to="/planner">Planner</router-link>
 					</li>
 					<li class="nav-item">
 						<router-link class="nav-link" to="/recall">Recall</router-link>
diff --git a/htdocs/RoutePlanner.vue b/htdocs/RoutePlanner.vue
new file mode 100644
index 0000000..dd17773
--- /dev/null
+++ b/htdocs/RoutePlanner.vue
@@ -0,0 +1,46 @@
+<template>
+	<div class="card mb-3 shadow">
+		<div class="card-header d-flex justify-content-between align-items-center">
+			<span>Planner</span>
+			<select v-if="(resourcelist_selected) && (resourcelist_selected.length > 0)" class="form-select form-select-sm" style="width: auto;" v-model="resource"><option v-for="row in resourcelist_selected" :value="row.RESOURCEID">{{row.RESOURCE_NAME}} #{{row.RESOURCEID}}</option></select>
+			<DateRangePicker range="1M" direction="1" v-model:date="date_begin" v-model:date_end="date_end" />
+		</div>
+		<div class="card-body"><ViewPlanner :client="client" :resource="resource" :date_begin="date_begin" :date_end="date_end" /></div>
+	</div>
+</template>
+
+<script>
+	import DateRangePicker from './DateRangePicker.vue';
+	import ViewPlanner from './ViewPlanner.vue';
+
+	export default {
+		components: {
+			DateRangePicker, ViewPlanner
+		},
+		props: {
+			client: Object
+		},
+		data() {
+			var now = new Date();
+			return {
+				resource: null,
+				date_begin: now,
+				date_end: now,
+				resourcelist_all: []
+			};
+		},
+		computed: {
+			resourcelist_selected() {
+				if((this.client) && (this.client.remotestate.resources) && (this.resourcelist_all)) {
+					var resourcemap = this.client.remotestate.resources.split(',').filter(x => x).reduce((acc, val) => (acc[val] = true, acc), {});
+					var res = this.resourcelist_all.filter(x => resourcemap.hasOwnProperty(x.RESOURCEID));
+					if((res.length > 0) && (!this.resource)) this.resource = res[0].RESOURCEID;
+					return res;
+				} else return [];
+			}
+		},
+		async mounted() {
+			this.resourcelist_all = await this.client.SDEC_RESOURCE();
+		}
+	};
+</script>
diff --git a/htdocs/RouteScheduleOverview.vue b/htdocs/RouteScheduleOverview.vue
deleted file mode 100644
index 65a9a9b..0000000
--- a/htdocs/RouteScheduleOverview.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-<template>
-	<div>
-		<div class="card mb-3 shadow">
-			<div class="card-header">Overview</div>
-			<div class="card-body">
-				<ViewResourceLookup :client="client" v-model:selection="selection" />
-			</div>
-		</div>
-		<div class="card mb-3 shadow" v-for="clinic in resultset">
-			<div class="card-header d-flex justify-content-between align-items-center">
-				<span>{{clinic.key}}</span>
-			</div>
-			<div class="card-body">
-				<table class="table">
-					<thead>
-						<tr><th v-for="x in dow">{{x}}</th></tr>
-					</thead>
-					<tbody>
-						<tr v-for="week in clinic.values">
-							<td v-for="day in [0, 1, 2, 3, 4, 5, 6]" class="datebox">
-								<template v-if="week.values[day]">
-									<div class="datebox" :style="{ backgroundColor: clinic.max > 0 ? 'rgba(220, 53, 69, ' + week.values[day].length/clinic.max + ')' : null }"><span class="occupancy hidden">#{{week.values[day].length}}</span> {{day > 0 ? week.values[day][0]._START_OBJ.getDate() : week.key.toLocaleDateString('sv-SE')}} <span class="occupancy">#{{week.values[day].length}}</span></div>
-									<template v-for="appointment in week.values[day]">
-										<div v-if="appointment._BREAK" class="vacancy" :title="appointment._START_OBJ.toLocaleTimeString('en-GB').substring(0, 5) + '–' + appointment._END_OBJ.toLocaleTimeString('en-GB').substring(0, 5)" />
-										<div v-else :title="appointment._START_OBJ.toLocaleTimeString('en-GB').substring(0, 5) + '–' + appointment._END_OBJ.toLocaleTimeString('en-GB').substring(0, 5) + '\n' + appointment.PATIENTNAME + ' ' + appointment.HRN.slice(-4) + '\n' + appointment.NOTE"><span v-if="appointment._CONCURRENCY > 0" class="concurrency hidden">*<template v-if="appointment._CONCURRENCY > 1">{{appointment._CONCURRENCY}}</template></span>{{appointment._START_OBJ.toLocaleTimeString('en-GB').substring(0, 5)}} {{appointment.PATIENTNAME.substring(0, 1)}}{{appointment.HRN.slice(-4)}}<span v-if="appointment._CONCURRENCY > 0" class="concurrency">*<template v-if="appointment._CONCURRENCY > 1">{{appointment._CONCURRENCY}}</template></span></div>
-									</template>
-								</template>
-								<div v-else class="datebox">{{day > 0 ? (new Date(week.key.getTime() + 1000*60*60*24*day)).getDate() : week.key.toLocaleDateString('sv-SE')}}</div>
-							</td>
-						</tr>
-					</tbody>
-				</table>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style scoped>
-	table {
-		font-family: monospace;
-		text-align: center;
-	}
-	tbody, td {
-		border: 1px solid #dee2e6;
-	}
-	div.datebox {
-		font-weight: bold;
-	}
-	div.vacancy {
-		width: 2em;
-		margin: auto;
-		border-bottom: 0.25em dotted #bbb;
-	}
-	span.occupancy {
-		font-weight: normal;
-	}
-	span.concurrency {
-		font-weight: bold;
-	}
-	span.hidden {
-		visibility: hidden;
-	}
-</style>
-
-<script>
-	import { groupBy, groupByArray, strfdate_vista, debounce } from './util.mjs';
-
-	import ViewResourceLookup from './ViewResourceLookup.vue';
-
-	const C_DAY = 1000*60*60*24;
-	const C_WEEK = C_DAY*7;
-
-	function infill_weeks(res, date_begin, date_end) {
-		for(var i = res.length - 1; i > 0; --i) {
-			var cur = res[i], prev = res[i - 1];
-			while(cur.key - prev.key > C_WEEK) res.splice(i, 0, cur = { key: new Date(cur.key.getTime() - C_WEEK), values: [] });
-		}
-		var item;
-		if(res.length < 1) res.push({ key: date_begin, values: [] });
-		else {
-			item = res[0];
-			while(item.key - date_begin >= C_WEEK) res.splice(0, 0, item = { key: new Date(item.key.getTime() - C_WEEK), values: [] });
-		}
-		item = res[res.length - 1];
-		while(date_end - item.key >= C_WEEK) res.push(item = { key: new Date(item.key.getTime() + C_WEEK), values: [] });
-		return res;
-	}
-
-	function analyze_week(res) {
-		for(var k in res) if(res.hasOwnProperty(k)) analyze_day(res[k]);
-		return res;
-	}
-
-	function analyze_day(res) {
-		for(var i = res.length - 1; i > 0; --i) {
-			var item = res[i];
-			item._CONCURRENCY = 0;
-			for(var j = i - 1; j >= 0; --j) if(item._START_OBJ < res[j]._END_OBJ) item._CONCURRENCY++;
-			if((item._CONCURRENCY < 1) && (item._START_OBJ > res[i - 1]._END_OBJ)) res.splice(i, 0, { _BREAK: true, _START_OBJ: res[i - 1]._END_OBJ, _END_OBJ: item._START_OBJ });
-		}
-		return res;
-	}
-
-	export default {
-		components: {
-			ViewResourceLookup
-		},
-		props: {
-			client: Object
-		},
-		data() {
-			var now = new Date();
-			return {
-				resultset: [],
-				date_begin: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
-				date_end: new Date(now.getFullYear(), now.getMonth() + 1, now.getDate()),
-				dow: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-			};
-		},
-		computed: {
-			selection: {
-				get() { return this.client.remotestate.resources ? (this.client.remotestate.resources.split(',').filter(x => x) || []) : [] },
-				set(value) { this.client.remotestate.resources = value.join(','); }
-			}
-		},
-		created() {
-			this.$watch(
-				() => (this.client, this.selection, {}),
-				debounce(async () => {
-					var date_begin = new Date(this.date_begin.getTime() - C_DAY*this.date_begin.getDay()), weekref = date_begin;
-					var date_end = new Date(this.date_end.getTime() + C_DAY*(6 - this.date_end.getDay()));
-					var resultset = this.selection.length < 1 ? [] : (await this.client.SDEC_CRSCHED(this.selection.join('|') + '|', strfdate_vista(date_begin), strfdate_vista(date_end) + '@2359')).filter(x => (x.CANCELLED == '0') && (x.NOSHOW == '0')).map(x => {
-						var _START_OBJ = x._START_OBJ = new Date(x.START_TIME);
-						x._START_DATE = _START_OBJ.toLocaleDateString('sv-SE');
-						x._END_OBJ = new Date(x.END_TIME);
-						x._WEEK_DAY = _START_OBJ.getDay();
-						x._WEEK_NUM = Math.floor((x._START_OBJ - weekref)/(C_WEEK));
-						return x;
-					}).sort((a, b) => a._START_OBJ - b._START_OBJ);
-					this.resultset = groupByArray(resultset, 'RESOURCENAME').sort((a, b) => a.key < b.key ? -1 : a.key > b.key ? 1 : 0).map(clinic => ({ key: clinic.key, max: Math.max.apply(null, groupByArray(clinic.values, '_START_DATE').map(x => x.values.length)), values: infill_weeks(groupByArray(clinic.values, '_WEEK_NUM').map(week => ({ key: new Date(weekref.getTime() + C_WEEK*week.key), values: analyze_week(groupBy(week.values, '_WEEK_DAY')) })), date_begin, date_end) }));
-				}, 500),
-				{ immediate: true }
-			);
-		}
-	};
-</script>
diff --git a/htdocs/ViewPlanner.vue b/htdocs/ViewPlanner.vue
new file mode 100644
index 0000000..f77249a
--- /dev/null
+++ b/htdocs/ViewPlanner.vue
@@ -0,0 +1,128 @@
+<template>
+	<table v-if="(resultset) && (resultset.length > 0)" class="table">
+		<thead>
+			<tr><th v-for="x in dow">{{x}}</th></tr>
+		</thead>
+		<tbody>
+			<tr v-for="week in resultset">
+				<td v-for="day in [0, 1, 2, 3, 4, 5, 6]" class="datebox">
+					<template v-if="week.values[day]">
+						<div class="datebox" :style="{ backgroundColor: resultset.max > 0 ? 'rgba(220, 53, 69, ' + week.values[day].length/resultset.max + ')' : null }"><span class="occupancy hidden">#{{week.values[day].length}}</span> {{day > 0 ? week.values[day][0]._START_OBJ.getDate() : week.key.toLocaleDateString('sv-SE')}} <span class="occupancy">#{{week.values[day].length}}</span></div>
+						<template v-for="appointment in week.values[day]">
+							<div v-if="appointment._BREAK" class="vacancy" :title="appointment._START_OBJ.toLocaleTimeString('en-GB').substring(0, 5) + '–' + appointment._END_OBJ.toLocaleTimeString('en-GB').substring(0, 5)" />
+							<div v-else :title="appointment._START_OBJ.toLocaleTimeString('en-GB').substring(0, 5) + '–' + appointment._END_OBJ.toLocaleTimeString('en-GB').substring(0, 5) + '\n' + appointment.PATIENTNAME + ' ' + appointment.HRN.slice(-4) + '\n' + appointment.NOTE"><span v-if="appointment._CONCURRENCY > 0" class="concurrency hidden">*<template v-if="appointment._CONCURRENCY > 1">{{appointment._CONCURRENCY}}</template></span>{{appointment._START_OBJ.toLocaleTimeString('en-GB').substring(0, 5)}} {{appointment.PATIENTNAME.substring(0, 1)}}{{appointment.HRN.slice(-4)}}<span v-if="appointment._CONCURRENCY > 0" class="concurrency">*<template v-if="appointment._CONCURRENCY > 1">{{appointment._CONCURRENCY}}</template></span></div>
+						</template>
+					</template>
+					<div v-else class="datebox">{{day > 0 ? (new Date(week.key.getTime() + 1000*60*60*24*day)).getDate() : week.key.toLocaleDateString('sv-SE')}}</div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<style scoped>
+	table {
+		font-family: monospace;
+		text-align: center;
+	}
+	tbody, td {
+		border: 1px solid #dee2e6;
+	}
+	div.datebox {
+		font-weight: bold;
+	}
+	div.vacancy {
+		width: 2em;
+		margin: auto;
+		border-bottom: 0.25em dotted #bbb;
+	}
+	span.occupancy {
+		font-weight: normal;
+	}
+	span.concurrency {
+		font-weight: bold;
+	}
+	span.hidden {
+		visibility: hidden;
+	}
+</style>
+
+<script>
+	import { groupBy, groupByArray, strfdate_vista, debounce } from './util.mjs';
+
+	const C_DAY = 1000*60*60*24;
+	const C_WEEK = C_DAY*7;
+
+	function dateonly(date) {
+		return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+	}
+
+	function infill_weeks(res, date_begin, date_end) {
+		for(var i = res.length - 1; i > 0; --i) {
+			var cur = res[i], prev = res[i - 1];
+			while(cur.key - prev.key > C_WEEK) res.splice(i, 0, cur = { key: new Date(cur.key.getTime() - C_WEEK), values: [] });
+		}
+		var item;
+		if(res.length < 1) res.push({ key: date_begin, values: [] });
+		else {
+			item = res[0];
+			while(item.key - date_begin >= C_WEEK) res.splice(0, 0, item = { key: new Date(item.key.getTime() - C_WEEK), values: [] });
+		}
+		item = res[res.length - 1];
+		while(date_end - item.key >= C_WEEK) res.push(item = { key: new Date(item.key.getTime() + C_WEEK), values: [] });
+		return res;
+	}
+
+	function analyze_week(res) {
+		for(var k in res) if(res.hasOwnProperty(k)) analyze_day(res[k]);
+		return res;
+	}
+
+	function analyze_day(res) {
+		for(var i = res.length - 1; i > 0; --i) {
+			var item = res[i];
+			item._CONCURRENCY = 0;
+			for(var j = i - 1; j >= 0; --j) if(item._START_OBJ < res[j]._END_OBJ) item._CONCURRENCY++;
+			if((item._CONCURRENCY < 1) && (item._START_OBJ > res[i - 1]._END_OBJ)) res.splice(i, 0, { _BREAK: true, _START_OBJ: res[i - 1]._END_OBJ, _END_OBJ: item._START_OBJ });
+		}
+		return res;
+	}
+
+	export default {
+		props: {
+			client: Object,
+			resource: String,
+			date_begin: Date,
+			date_end: Date
+		},
+		data() {
+			var now = new Date();
+			return {
+				resultset: [],
+				dow: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+			};
+		},
+		created() {
+			this.$watch(
+				() => (this.client, this.resource, this.date_begin, this.date_end, {}),
+				debounce(async () => {
+					if((this.client) && (this.resource) && (this.date_begin) && (this.date_end)) {
+						var date_begin = new Date(this.date_begin.getTime() - C_DAY*this.date_begin.getDay()), weekref = date_begin;
+						var date_end = new Date(this.date_end.getTime() + C_DAY*(6 - this.date_end.getDay()));
+						var resultset = (await this.client.SDEC_CRSCHED(this.resource, strfdate_vista(date_begin), strfdate_vista(date_end) + '@2359')).filter(x => (x.CANCELLED == '0') && (x.NOSHOW == '0')).map(x => {
+							var _START_OBJ = x._START_OBJ = new Date(x.START_TIME);
+							x._START_DATE = _START_OBJ.toLocaleDateString('sv-SE');
+							x._END_OBJ = new Date(x.END_TIME);
+							x._WEEK_DAY = _START_OBJ.getDay();
+							x._WEEK_NUM = Math.floor((x._START_OBJ - weekref)/(C_WEEK));
+							return x;
+						}).sort((a, b) => a._START_OBJ - b._START_OBJ);
+						this.resultset = infill_weeks(groupByArray(resultset, '_WEEK_NUM').map(week => ({ key: new Date(weekref.getTime() + C_WEEK*week.key), values: analyze_week(groupBy(week.values, '_WEEK_DAY')) })), date_begin, date_end);
+						this.resultset.max = Math.max.apply(null, groupByArray(resultset, '_START_DATE').map(x => x.values.length));
+					} else this.resultset = [];
+				}, 500),
+				{ immediate: true }
+			);
+		}
+	};
+</script>