First

htdocs/App.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="container-fluid">
+		<Navbar :user="user" />
+		<div class="container">
+			<router-view v-if="user"></router-view>
+			<Login :secret="secret" v-model:client="client" v-model:user="user" />
+		</div>
+	</div>
+</template>
+
+<script>
+	import Navbar from './Navbar.vue';
+	import Login from './Login.vue';
+	import RouteSchedule from './RouteSchedule.vue';
+	import RoutePatientLookup from './RoutePatientLookup.vue';
+	import RoutePatientDetail from './RoutePatientDetail.vue';
+
+	export default {
+		components: {
+			Navbar, Login
+		},
+		props: {
+			secret: String
+		},
+		data() {
+			return {
+				client: null,
+				user: null,
+				heartbeat: null,
+				banner: '',
+				authenticated: false
+			};
+		},
+		computed: {
+			store: () => store
+		},
+		watch: {
+			async client(value) {
+				if(this.heartbeat) window.clearInterval(this.heartbeat);
+				else {
+					[
+						{ path: '/', component: RouteSchedule, props: { client: this.client } },
+						{ path: '/patient', component: RoutePatientLookup, props: { client: this.client } },
+						{ path: '/patient/:id', component: RoutePatientDetail, props: { client: this.client } },
+					].forEach(route => this.$root.$router.addRoute(route));
+					await this.$root.$router.replace(this.$route);
+				}
+				this.heartbeat = await value.heartbeat();
+			}
+		}
+	};
+</script>