feat: mongodb readyState

2023-04-25 16:25:42 +03:00
parent 58ca500acc
commit 150954290c
4 changed files with 44 additions and 3 deletions
--- a/client/app.vue
+++ b/client/app.vue
@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import './styles/global.css'
+
+const readyState = computedAsync(async () => await rpc.readyState())
 </script>

 <template>
  <Html>
    <Body h-screen>
-      <NuxtLayout>
+      <NuxtLayout v-if="readyState === 1">
        <NuxtPage />
      </NuxtLayout>
+      <Connection v-else :connection="readyState" />
    </Body>
  </Html>
 </template>
--- a/client/components/Connection.vue
+++ b/client/components/Connection.vue
@ -0,0 +1,34 @@
+<script lang="ts" setup>
+defineProps({
+  connection: {
+    type: Number,
+    default: 0,
+  },
+})
+</script>
+
+<template>
+  <NPanelGrids>
+    <div flex="~ gap-2" animate-pulse items-center text-yellow>
+      <NIcon icon="carbon-flow-connection" />
+      Please check your mongodb connection
+    </div>
+    <div flex="~ gap-2" items-center text-light>
+      Your current connection is: {{ connection }}
+    </div>
+    <div absolute bottom-10 left-10 right-10 flex justify-around>
+      <NCard p2 text-red-5>
+        0: Not connected
+      </NCard>
+      <NCard p2 text-green-5>
+        1: Connected
+      </NCard>
+      <NCard p2 text-yellow-5>
+        2: Connecting
+      </NCard>
+      <NCard p2 text-orange-5>
+        3: Disconnecting
+      </NCard>
+    </div>
+  </NPanelGrids>
+</template>