Next

.eslintrc.cjs

@@ -7,7 +7,7 @@ module.exports = {
   },
   extends: [
     "eslint:recommended",
-    "plugin:vue/vue3-recommended",
+    "plugin:vue/recommended",
     "plugin:vuetify/recommended",
     "plugin:nuxt/recommended",
   ],

components/FeedBack/Snackers.vue

@@ -51,7 +51,7 @@
           variant="flat"
           size="20"
           :color="feedback.type"
-          @click="feedback_store.delete_feedback(index)"
+          @click="feedback_store.delete_feedback(feedback.id)"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>

components/Launcher.vue

@@ -2,7 +2,7 @@
   <v-container class="justify">
     <v-row align-content="center" align="center">
       <v-col
-        v-if="!is_captcha_validated"
+        v-if="!infra_store.is_captcha_validated"
         class="align"
         cols="12"
         align-self="center"
@@ -11,25 +11,25 @@
         <h4 class="pb-3">Please complete the recaptcha to launch the app</h4>
         <Recaptcha :site_key="site_key" />
       </v-col>
-      <v-col v-else-if="!is_running && is_connexion_launched">
+      <v-col v-else-if="infra_store.status == Status.CREATING">
         <Loading />
       </v-col>
     </v-row>
   </v-container>
 </template>
 
 <script setup>
-  const viewer_store = use_viewer_store()
-  const infra_store = use_infra_store()
-  const { is_captcha_validated, is_connexion_launched, is_running } =
-    storeToRefs(infra_store)
+  import Status from "@/utils/status.js"
 
+  const infra_store = use_infra_store()
   const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
 
-  watch(is_captcha_validated, async (value) => {
-    if (value === true && process.client) {
-      await infra_store.create_connexion()
-      await viewer_store.ws_connect()
-    }
-  })
+  watch(
+    () => infra_store.is_captcha_validated,
+    (value, oldValue) => {
+      if (value && !oldValue && process.client) {
+        infra_store.create_backend()
+      }
+    },
+  )
 </script>

components/Loading.vue

@@ -3,14 +3,14 @@
     <v-col cols="12" class="ma-3">
       <v-card loading>
         <v-card-title class="text-center">
-          Cloud instance is starting...
+          Microservices are starting...
         </v-card-title>
         <v-card-subtitle class="text-center">
           Why do you have to wait?
         </v-card-subtitle>
         <v-card-text class="text-center">
-          We start our server only on demand... and this takes a few minutes
-          before you can use our free app.
+          We start our microservices only on demand... and this takes a few
+          minutes before you can use our free app.
           <br />
           This is aligned with our energy sobriety policy. So be patient
           <v-icon color="primary" size="20">

components/PackagesVersions.vue

@@ -19,22 +19,21 @@
 </template>
 
 <script setup>
-  const infra_store = use_infra_store()
-  const { is_running } = storeToRefs(infra_store)
+  import Status from "@/utils/status.js"
 
   const props = defineProps({
     schema: { type: Object, required: true },
   })
-  const { schema } = props
 
+  const geode_store = use_geode_store()
   const packages_versions = ref([])
 
   async function get_packages_versions() {
     const array_promise = []
 
     const promise = new Promise((resolve, reject) => {
       api_fetch(
-        { schema },
+        { schema: props.schema },
         {
           request_error_function: () => {
             reject()
@@ -53,9 +52,12 @@
     await Promise.all(array_promise)
   }
 
-  watch(is_running, () => {
-    get_packages_versions()
-  })
+  watch(
+    () => geode_store.status,
+    (value) => {
+      if (value == Status.CONNECTED) get_packages_versions()
+    },
+  )
 
   await get_packages_versions()
 </script>

components/Recaptcha.vue

@@ -2,10 +2,10 @@
   <ClientOnly>
     <vue-recaptcha
       ref="recaptcha"
-      :sitekey="site_key"
+      :sitekey="props.site_key"
       :load-recaptcha-script="true"
       align-self="center"
-      @expired="is_captcha_validated = false"
+      @expired="infra_store.is_captcha_validated = false"
       @verify="submit_recaptcha"
     />
   </ClientOnly>
@@ -14,12 +14,10 @@
 <script setup>
   import { VueRecaptcha } from "vue-recaptcha"
   const infra_store = use_infra_store()
-  const { is_captcha_validated } = storeToRefs(infra_store)
 
   const props = defineProps({
     site_key: { type: String, required: true },
   })
-  const { site_key } = props
 
   onMounted(() => {
     if (process.client) {

components/RemoteRenderingView.vue

@@ -14,7 +14,7 @@
         "
         class="pa-0"
         @click="get_x_y"
-        @keydown.esc="app_store.toggle_picking_mode(false)"
+        @keydown.esc="viewer_store.toggle_picking_mode(false)"
       />
     </div>
   </ClientOnly>
@@ -24,17 +24,20 @@
   import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView"
   import { useElementSize, useWindowSize } from "@vueuse/core"
   import viewer_schemas from "@geode/opengeodeweb-viewer/schemas.json"
+  import Status from "@/utils/status.js"
 
-  const viewer_store = use_viewer_store()
-  const { client, is_running, picking_mode } = storeToRefs(viewer_store)
+  const props = defineProps({
+    viewId: { type: String, default: "-1" },
+  })
 
-  const viewer = ref(null)
+  const viewer_store = use_viewer_store()
+  const viewer = useTemplateRef("viewer")
   const { width, height } = useElementSize(viewer)
 
   const { width: windowWidth, height: windowHeight } = useWindowSize()
 
   function get_x_y(event) {
-    if (picking_mode.value === true) {
+    if (viewer_store.picking_mode.value === true) {
       const { offsetX, offsetY } = event
       viewer_store.set_picked_point(offsetX, offsetY)
       viewer_call({
@@ -44,13 +47,7 @@
     }
   }
 
-  const props = defineProps({
-    viewId: { type: String, default: "-1" },
-  })
-
-  const { viewId } = toRefs(props)
   const connected = ref(false)
-
   const view = vtkRemoteView.newInstance({
     rpcWheelEvent: "viewport.mouse.zoom.wheel",
   })
@@ -70,33 +67,42 @@
     resize()
   })
 
-  watch(picking_mode, (value) => {
-    const cursor = value ? "crosshair" : "pointer"
-    view.getCanvasView().setCursor(cursor)
-  })
+  watch(
+    () => viewer_store.picking_mode,
+    (value) => {
+      const cursor = value ? "crosshair" : "pointer"
+      view.getCanvasView().setCursor(cursor)
+    },
+  )
 
   watch([width, height], () => {
     resize()
   })
 
-  watch(client, () => {
-    connect()
-  })
-
-  watch(viewId, (id) => {
-    if (connected.value) {
-      view.setViewId(id)
-      view.render()
-    }
-  })
+  watch(
+    () => viewer_store.client,
+    () => {
+      connect()
+    },
+  )
+
+  watch(
+    () => props.viewId,
+    (id) => {
+      if (connected.value) {
+        view.setViewId(id)
+        view.render()
+      }
+    },
+  )
 
   function connect() {
-    if (!is_running.value) {
+    if (viewer_store.status !== Status.CONNECTED) {
       return
     }
-    const session = client.value.getConnection().getSession()
+    const session = viewer_store.client.getConnection().getSession()
     view.setSession(session)
-    view.setViewId(viewId.value)
+    view.setViewId(props.viewId)
     connected.value = true
     view.render()
   }

components/Wrapper.vue

@@ -1,22 +1,23 @@
 <template>
   <v-container>
     <v-row class="flex-column">
-      <v-col v-if="!is_running">
-        <Launcher />
-      </v-col>
-      <v-col v-if="is_running">
-        <Stepper />
-      </v-col>
-      <v-col v-if="is_running">
-        <PackagesVersions :schema="versions_schema" />
-      </v-col>
+      <template v-if="!infra_store.microservices_connected">
+        <v-col>
+          <Launcher />
+        </v-col>
+      </template>
+      <template v-else>
+        <v-col>
+          <Stepper />
+        </v-col>
+        <v-col> <PackagesVersions :schema="versions_schema" /> </v-col>
+      </template>
     </v-row>
   </v-container>
 </template>
 
 <script setup>
   const infra_store = use_infra_store()
-  const { is_running } = storeToRefs(infra_store)
 
   const props = defineProps({
     versions_schema: { type: Object, required: true },

composables/run_function_when_microservices_connected.js

@@ -0,0 +1,15 @@
+export function run_function_when_microservices_connected(function_to_run) {
+  const infra_store = use_infra_store()
+  const { microservices_connected } = storeToRefs(infra_store)
+  if (microservices_connected.value) {
+    function_to_run()
+  } else {
+    watch(microservices_connected, (value) => {
+      if (value) {
+        function_to_run()
+      }
+    })
+  }
+}
+
+export default run_function_when_microservices_connected

nuxt.config.js

@@ -39,6 +39,7 @@ export default defineNuxtConfig({
         "ajv",
         "fast-deep-equal",
         "globalthis",
+        "h3",
         "is-electron",
         "js-file-download",
         "lodash",

package.json

@@ -10,13 +10,14 @@
     "@nuxt/test-utils": "^3.15.1",
     "@pinia/testing": "^0.1.7",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vitest/coverage-v8": "^3.0.8",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint-plugin-vue": "^9.33.0",
     "eslint-plugin-vuetify": "^2.4.0",
     "happy-dom": "^15.11.7",
     "jsdom": "^24.1.3",
@@ -53,6 +54,7 @@
     "pinia": "^2.2.2",
     "sass": "^1.77.8",
     "semver": "^7.6.3",
+    "uuid": "^11.1.0",
     "vue-recaptcha": "^2.0.3",
     "vue3-carousel": "^0.3.3"
   },

stores/feedback.js

@@ -1,26 +1,41 @@
+import { v4 as uuidv4 } from "uuid"
+
 export const use_feedback_store = defineStore("feedback", {
   state: () => ({
     feedbacks: [],
     server_error: false,
+    feedbacks_timeout_miliseconds: 5000,
   }),
   actions: {
     async add_error(code, route, name, description) {
+      const feedbackId = uuidv4()
       await this.feedbacks.push({
+        id: feedbackId,
         type: "error",
         code,
         route,
         name,
         description,
       })
+      setTimeout(() => {
+        this.delete_feedback(feedbackId)
+      }, this.feedbacks_timeout_miliseconds)
     },
     async add_success(description) {
+      const feedbackId = uuidv4()
       await this.feedbacks.push({
+        id: feedbackId,
         type: "success",
         description,
       })
+      setTimeout(() => {
+        this.delete_feedback(feedbackId)
+      }, this.feedbacks_timeout_miliseconds)
     },
-    async delete_feedback(feedback_index) {
-      await this.feedbacks.splice(feedback_index, 1)
+    async delete_feedback(feedbackId) {
+      this.feedbacks = this.feedbacks.filter(
+        (feedback) => feedback.id !== feedbackId,
+      )
     },
     async delete_server_error() {
       this.server_error = false