Planner (refactored from schedule overview)

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>