htdocs/App.vue

@@ -1,7 +1,6 @@
 <template>
-	<div class="container-fluid" style="padding-top: 5rem;">
+	<div class="container-fluid">
 		<Navbar v-model:server="server" :user="user" />
-		<Throbber :client="client" />
 		<div class="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>
@@ -11,7 +10,6 @@
 
 <script>
 	import Navbar from './Navbar.vue';
-	import Throbber from './Throbber.vue';
 	import Login from './Login.vue';
 	import RouteSchedule from './RouteSchedule.vue';
 	import RoutePatientLookup from './RoutePatientLookup.vue';
@@ -23,7 +21,7 @@
 
 	export default {
 		components: {
-			Navbar, Throbber, Login
+			Navbar, Login
 		},
 		props: {
 			secret: String

htdocs/Login.vue

@@ -132,7 +132,7 @@
 					this.$emit('update:server', this.x_server = (await this.x_client.serverinfo()).result);
 					console.log('Backend secret', this.secret);
 					console.log(this.banner);
-					var stop = watchEffect(() => { if(!this.x_client.status.connected) { stop(); this.x_client = this.x_server = this.x_user = null; this.fail = true; } });
+					var stop = watchEffect(() => { if(!this.x_client.connected.value) { stop(); this.x_client = this.x_server = this.x_user = null; this.fail = true; } });
 				} else {
 					this.fail = true;
 					this.host = undefined;

htdocs/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<nav class="navbar navbar-expand-lg fixed-top bg-dark">
+	<nav class="navbar navbar-expand-lg bg-dark">
 		<div class="container-fluid">
 			<router-link class="navbar-brand" to="/"><img src="/icon.svg" style="height: 1.875rem;" /></router-link>
 			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

htdocs/Throbber.vue

@@ -1,57 +0,0 @@
-<template>
-	<div :class="{ connected, idle }" />
-</template>
-
-<style scoped>
-	div {
-		position: fixed;
-		top: 59px;
-		right: 0;
-		left: 0;
-		height: 0.5rem;
-		z-index: 1030;
-		background-color: #dc3545;
-	}
-	div.connected {
-		background-color: #0d6efd;
-		background-image: repeating-linear-gradient(
-			-45deg,
-			rgba(255, 255, 255, 0.1),
-			rgba(255, 255, 255, 0.1) 10px,
-			rgba(0, 0, 0, 0.1) 10px,
-			rgba(0, 0, 0, 0.1) 20px
-		);
-		background-size: 200% 200%;
-		animation:  barberpole 60s linear infinite;
-		animation-direction: reverse;
-	}
-	div.idle {
-		visibility: hidden;
-		opacity: 0;
-		transition: visibility 0s 0.5s, opacity 0.5s linear;
-	}
-	@keyframes barberpole {
-		100% {
-			background-position: 100% 100%;
-		}
-	}
-</style>
-
-<script>
-	export default {
-		props: {
-			client: {
-				type: Object,
-				default: null
-			}
-		},
-		computed: {
-			connected() {
-				return (this.client) && (this.client.status) && (this.client.status.connected);
-			},
-			idle() {
-				return this.connected ? !this.client.status.request : false;
-			}
-		}
-	};
-</script>

htdocs/vistax.mjs

@@ -284,12 +284,12 @@ export function Client(cid, secret) {
 
 	this.secret = secret;
 	this.cid = cid;
-	this.status = reactive({ connected: true, request: null });
+	this.connected = reactive({ value: true });
 
 	this.close = function() {
 		console.log('CLOSE', cid);
 		if(heartbeat) window.clearInterval(heartbeat);
-		this.status.connected = false;
+		this.connected.value = false;
 		return vista.close(cid);
 	};
 	this.call = async function(body, ...params) {
@@ -298,8 +298,7 @@ export function Client(cid, secret) {
 			if(body.params) Array.prototype.push.apply(body.params, params);
 			else body.params = params;
 		}
-		var res = await vista.call(cid, this.status.request = body);
+		var res = await vista.call(cid, body);
-		this.status.request = null;
 		if((res.error) && (res.error.type == 'ConnectionResetError')) this.close();
 		res._request = body;
 		return res;