nuVistA/htdocs/App.vue

<template>
	<Submenu :value="menu" />
	<div class="container-fluid" style="padding-top: 5rem;">
		<Navbar v-model:server="server" :user="user" />
		<Throbber :client="client" />
		<div :class="localstate.fullwidth ? 'container-fluid' : 'container'">
			<Login :secret="secret" v-model:client="client" v-model:server="server" v-model:user="user" />
			<router-view v-if="user" :client="client"></router-view>
		</div>
		<button class="control-fullwidth btn btn-light" @click="localstate.fullwidth = !localstate.fullwidth"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 16 16"><path v-if="localstate.fullwidth" d="M5.5 0a.5.5 0 0 1 .5.5v4A1.5 1.5 0 0 1 4.5 6h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5zm5 0a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 10 4.5v-4a.5.5 0 0 1 .5-.5zM0 10.5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 6 11.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zm10 1a1.5 1.5 0 0 1 1.5-1.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4z" /><path v-else d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z" /></svg></button>
	</div>
</template>

<style>
	.bi {
		display: inline-block;
		vertical-align: -.125em;
		fill: currentcolor;
	}
</style>

<style scoped>
	button.control-fullwidth {
		display: none;
	}
	@media (min-width: 576px) {
		button.control-fullwidth {
			display: inline-block;
			position: fixed;
			bottom: 0.5rem;
			right: 0.5rem;
		}
	}
</style>

<script>
	import { localstate } from './vistax.mjs';

	import Submenu from './Submenu.vue';
	import Navbar from './Navbar.vue';
	import Throbber from './Throbber.vue';
	import Login from './Login.vue';
	import RouteSchedule from './RouteSchedule.vue';
	import RouteLookup from './RouteLookup.vue';
	import RoutePatient from './RoutePatient.vue';
	import RoutePatientDetail from './RoutePatientDetail.vue';
	import RoutePatientVisits from './RoutePatientVisits.vue';
	import RoutePatientOrders from './RoutePatientOrders.vue';
	import RoutePatientReports from './RoutePatientReports.vue';
	import RoutePatientDocuments from './RoutePatientDocuments.vue';
	import RoutePlanner from './RoutePlanner.vue';
	import RouteRecall from './RouteRecall.vue';
	import RouteInbox from './RouteInbox.vue';
	import RouteSettings from './RouteSettings.vue';

	export default {
		components: {
			Submenu, Navbar, Throbber, Login
		},
		props: {
			secret: String
		},
		data() {
			return {
				localstate,
				client: null,
				server: null,
				user: null,
				heartbeat: null,
				banner: '',
				authenticated: false,
				menu: {
					name: 'Main',
					items: [
						{ name: 'Schedule', href: '/' },
						{ name: 'Lookup', href: '/lookup' },
						{ name: 'Planner', href: '/planner' },
						{ name: 'Recall', href: '/recall' },
						{ name: 'Inbox', href: '/inbox' },
						{ name: 'Settings', href: '/settings' },
					]
				}
			};
		},
		watch: {
			async client(value, oldvalue) {
				if(this.heartbeat) window.clearInterval(this.heartbeat);
				else {
					[
						{ path: '/', component: RouteSchedule },
						{ path: '/schedule/:from?/:to?', component: RouteSchedule },
						{ path: '/lookup', component: RouteLookup },
						{ path: '/patient/:id', component: RoutePatient, children: [
							{ path: '', component: RoutePatientDetail },
							{ path: 'visits', component: RoutePatientVisits },
							{ path: 'orders', component: RoutePatientOrders },
							{ path: 'reports', component: RoutePatientReports },
							{ path: 'document', component: RoutePatientDocuments },
							{ path: 'document/:tiu_da', component: RoutePatientDocuments },
						] },
						{ path: '/planner', component: RoutePlanner },
						{ path: '/recall', component: RouteRecall },
						{ path: '/inbox', component: RouteInbox },
						{ path: '/settings', component: RouteSettings },
					].forEach(route => this.$root.$router.addRoute(route));
					await this.$root.$router.replace(this.$route);
				}
				if(value) this.heartbeat = await value.heartbeat();
			}
		}
	};
</script>