@geode/opengeodeweb-front 6.3.0-rc.1 → 7.0.0-rc.1

package/components/CrsSelector.vue

@@ -24,7 +24,9 @@
 </template>
 
 <script setup>
-  import schema from "@/assets/schemas/CrsSelector.json"
+  import schemas from "@geode/opengeodeweb-back/schemas.json"
+  const schema = schemas.opengeodeweb_back.geographic_coordinate_systems
+
   const emit = defineEmits([
     "update_values",
     "increment_step",

package/components/Errors/Banner.vue

@@ -6,7 +6,7 @@
     position="fixed"
   >
     <v-row>
-      <v-col cols="auto" class="white--text text-center">
+      <v-col cols="auto" class="text-white text-center">
         <v-tooltip location="end">
           <span>
             We turn off our server automatically after 5 minutes of inactivity
@@ -18,22 +18,22 @@
           </template>
         </v-tooltip>
       </v-col>
-      <v-col cols="auto" class="text-white font-weight-bold"
-        >Server timed out due to inactivity, please reload this page or click
+      <v-col cols="auto" class="text-white font-weight-bold">
+        Server timed out due to inactivity, please reload this page or click
         here:
       </v-col>
-      <v-col cols="auto" align-items="center">
-        <v-btn @click="reload()" color="grey" density="compact"> Reload </v-btn>
+      <v-col class="align-items" cols="auto">
+        <v-btn color="grey" density="compact" @click="reload()"> Reload </v-btn>
       </v-col>
       <v-spacer />
       <v-col cols="auto">
         <v-btn
           icon
-          flat
+          variant="flat"
           size="20"
-          @click="errors_store.delete_server_error()"
           color="grey"
           class=".align-center"
+          @click="errors_store.delete_server_error()"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>

package/components/Errors/Snackers.vue

@@ -1,9 +1,9 @@
 <template>
   <v-snackbar
-    :style="{ 'margin-bottom': calc_margin(index) }"
     v-for="(error, index) in errors"
     :key="index"
     v-model="show"
+    :style="{ 'margin-bottom': calc_margin(index) }"
     color="error"
     location="bottom right"
     transition="slide-x-reverse-transition"
@@ -42,10 +42,10 @@
       <v-col cols="auto">
         <v-btn
           icon
-          flat
+          variant="flat"
           size="20"
-          @click="errors_store.delete_error(index)"
           color="error"
+          @click="errors_store.delete_error(index)"
         >
           <v-icon icon="mdi-close" size="20" color="white" />
         </v-btn>

package/components/ExtensionSelector.vue

@@ -59,8 +59,8 @@
 </template>
 
 <script setup>
-  import schema from "@/assets/schemas/ExtensionSelector.json"
-
+  import schemas from "@geode/opengeodeweb-back/schemas.json"
+  const schema = schemas.opengeodeweb_back.geode_objects_and_output_extensions
   const emit = defineEmits([
     "update_values",
     "increment_step",

package/components/FileSelector.vue

@@ -2,14 +2,15 @@
   <FetchingData v-if="loading" />
   <FileUploader
     v-else
-    v-bind="{ multiple, accept, route }"
+    v-bind="{ multiple, accept }"
     @files_uploaded="files_uploaded_event"
   />
 </template>
 
 <script setup>
-  import schema from "@/assets/schemas/FileSelector.json"
+  import schemas from "@geode/opengeodeweb-back/schemas.json"
 
+  const schema = schemas.opengeodeweb_back.allowed_files
   const emit = defineEmits([
     "update_values",
     "increment_step",
@@ -18,11 +19,10 @@
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
-    key: { type: String, required: false, default: "" },
-    route: { type: String, required: false, default: "" },
+    supported_feature: { type: String, required: false, default: null },
   })
 
-  const { multiple, key, route } = props
+  const { multiple, supported_feature } = props
 
   const accept = ref("")
   const loading = ref(false)
@@ -38,7 +38,7 @@
 
   async function get_allowed_files() {
     toggle_loading()
-    const params = { key }
+    const params = { supported_feature }
     await api_fetch(
       { schema, params },
       {

package/components/FileUploader.vue

@@ -18,26 +18,29 @@
   <v-row>
     <v-col cols="auto">
       <v-btn
-        @click="upload_files"
         color="primary"
         :disabled="!files.length && !files_uploaded"
         :loading="loading"
         class="pa-2"
-        >Upload file(s)</v-btn
+        @click="upload_files"
       >
+        Upload file(s)
+      </v-btn>
     </v-col>
   </v-row>
 </template>
 
 <script setup>
+  import schemas from "@geode/opengeodeweb-back/schemas.json"
+  const schema = schemas.opengeodeweb_back.upload_file
+
   const emit = defineEmits(["files_uploaded", "decrement_step"])
 
   const props = defineProps({
     multiple: { type: Boolean, required: true },
     accept: { type: String, required: true },
-    route: { type: String, required: true },
   })
-  const { multiple, accept, route } = toRefs(props)
+  const { multiple, accept } = toRefs(props)
 
   const label = multiple ? "Please select file(s)" : "Please select a file"
   const files = ref([])
@@ -52,7 +55,7 @@
     for (const file of files.value) {
       const promise = new Promise((resolve, reject) => {
         upload_file(
-          { route, file },
+          { route: schema.$id, file },
           {
             request_error_function: () => {
               reject()

package/components/Launcher.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-container justify="space-around">
+  <v-container class="justify">
     <v-row align-content="center" align="center">
       <v-col
         v-if="!is_captcha_validated"
+        class="align"
         cols="12"
         align-self="center"
-        align="center"
       >
         <h4 class="pb-3">Please complete the recaptcha to launch the app</h4>
         <Recaptcha :site_key="site_key" />
@@ -18,7 +18,7 @@
 </template>
 
 <script setup>
-  const websocket_store = use_websocket_store()
+  const viewer_store = use_viewer_store()
   const cloud_store = use_cloud_store()
   const { is_captcha_validated, is_connexion_launched, is_running } =
     storeToRefs(cloud_store)
@@ -28,7 +28,7 @@
   watch(is_captcha_validated, async (value) => {
     if (value === true && process.client) {
       await cloud_store.create_connexion()
-      await websocket_store.ws_connect()
+      await viewer_store.ws_connect()
     }
   })
 </script>

package/components/MissingFilesSelector.vue

@@ -26,7 +26,7 @@
     <v-row>
       <v-col cols="12">
         <FileUploader
-          v-bind="{ multiple, accept, route }"
+          v-bind="{ multiple, accept }"
           @files_uploaded="files_uploaded_event"
         />
       </v-col>
@@ -43,7 +43,9 @@
 </template>
 
 <script setup>
-  import schema from "@/assets/schemas/MissingFilesSelector.json"
+  import schemas from "@geode/opengeodeweb-back/schemas.json"
+
+  const schema = schemas.opengeodeweb_back.missing_files
 
   const emit = defineEmits([
     "update_values",
@@ -55,10 +57,9 @@
     multiple: { type: Boolean, required: true },
     input_geode_object: { type: String, required: true },
     filenames: { type: Array, required: true },
-    route: { type: String, required: true },
   })
 
-  const { multiple, input_geode_object, filenames, route } = props
+  const { multiple, input_geode_object, filenames } = props
 
   const accept = ref("")
   const loading = ref(false)

package/components/ObjectSelector.vue

@@ -50,15 +50,17 @@
 
 <script setup>
   import geode_objects from "@/assets/geode_objects"
-  import schema from "@/assets/schemas/ObjectSelector.json"
+  import schemas from "@geode/opengeodeweb-back/schemas.json"
+
+  const schema = schemas.opengeodeweb_back.allowed_objects
 
   const emit = defineEmits(["update_values", "increment_step"])
 
   const props = defineProps({
     filenames: { type: Array, required: true },
-    key: { type: String, required: false, default: null },
+    supported_feature: { type: String, required: false, default: null },
   })
-  const { filenames, key } = props
+  const { filenames, supported_feature } = props
 
   const loading = ref(false)
   const allowed_objects = ref({})
@@ -69,7 +71,7 @@
     allowed_objects.value = {}
     var promise_array = []
     for (const filename of filenames) {
-      const params = { filename, key }
+      const params = { filename, supported_feature }
       const promise = new Promise((resolve, reject) => {
         api_fetch(
           { schema, params },

package/components/Recaptcha.vue

@@ -3,10 +3,10 @@
     <vue-recaptcha
       ref="recaptcha"
       sitekey="6Lce72wgAAAAAOXrHyDxRQBhk6NDTD80MrXOlgbC"
-      :loadRecaptchaScript="true"
+      :load-recaptcha-script="true"
+      align-self="center"
       @expired="is_captcha_validated = false"
       @verify="submit_recaptcha"
-      align-self="center"
     />
   </ClientOnly>
 </template>

package/components/RemoteRenderingView.vue

@@ -3,6 +3,7 @@
     <div style="position: relative; width: 100%; height: 100%">
       <view-toolbar />
       <v-col
+        ref="viewer"
         style="
           overflow: hidden;
           position: relative;
@@ -10,12 +11,10 @@
           height: 100%;
           width: 100%;
         "
-        ref="viewer"
+        class="pa-0"
         @click="get_x_y"
         @keydown.esc="app_store.toggle_picking_mode(false)"
-        class="pa-0"
-      >
-      </v-col>
+      />
     </div>
   </ClientOnly>
 </template>
@@ -23,16 +22,19 @@
 <script setup>
   import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView"
   import { useElementSize } from "@vueuse/core"
+  import schemas from "@/utils/schemas.json"
 
   const viewer_store = use_viewer_store()
-  const { picking_mode } = storeToRefs(viewer_store)
-  const websocket_store = use_websocket_store()
-  const { client, is_running } = storeToRefs(websocket_store)
+  const { client, is_running, picking_mode } = storeToRefs(viewer_store)
 
   function get_x_y(event) {
     if (picking_mode.value === true) {
       const { offsetX, offsetY } = event
       viewer_store.set_picked_point(offsetX, offsetY)
+      viewer_call({
+        schema: schemas.opengeodeweb_viewer.set_picked_point,
+        params: { offsetX, offsetY },
+      })
     }
   }
 

package/components/ViewToolbar.vue

@@ -5,10 +5,10 @@
         Reset camera
         <template #activator="{ props }">
           <v-btn
-            @click.stop="reset_camera"
             density="comfortable"
             v-bind="props"
             icon
+            @click.stop="reset_camera"
           >
             <v-icon size="32"> mdi-cube-scan </v-icon>
           </v-btn>
@@ -19,9 +19,12 @@
 </template>
 
 <script setup>
-  const viewer_store = use_viewer_store()
+  import schemas from "@/utils/schemas.json"
+
   function reset_camera() {
-    viewer_store.reset_camera()
+    viewer_call({
+      schema: schemas.opengeodeweb_viewer.reset_camera,
+    })
   }
 </script>
 

package/composables/api_fetch.js

@@ -1,4 +1,3 @@
-import Ajv from "ajv"
 import _ from "lodash"
 
 export function api_fetch(
@@ -10,23 +9,24 @@ export function api_fetch(
 
   const body = params || {}
 
-  const ajv = new Ajv()
+  const { valid, error } = validate_schema(schema, body)
 
-  ajv.addKeyword("method")
-  ajv.addKeyword("max_retry")
-  const valid = ajv.validate(schema, body)
   if (!valid) {
     errors_store.add_error({
       code: 400,
       route: schema.$id,
       name: "Bad request",
-      description: ajv.errorsText(),
+      description: error,
     })
-    throw new Error(schema.$id.concat(": ", ajv.errorsText()))
+    throw new Error(schema.$id.concat(": ", error))
   }
+
   geode_store.start_request()
 
-  const request_options = { method: schema["method"] }
+  const method = schema.methods.filter((m) => m !== "OPTIONS")[0]
+  const request_options = {
+    method: method,
+  }
   if (!_.isEmpty(body)) {
     request_options.body = body
   }

package/composables/viewer_call.js

@@ -0,0 +1,71 @@
+import _ from "lodash"
+
+export function viewer_call(
+  { schema, params = {} },
+  { request_error_function, response_function, response_error_function } = {},
+) {
+  const errors_store = use_errors_store()
+  const viewer_store = use_viewer_store()
+
+  const { valid, error } = validate_schema(schema, params)
+
+  if (!valid) {
+    errors_store.add_error({
+      code: 400,
+      route: schema.route,
+      name: "Bad request",
+      description: error,
+    })
+    throw new Error(schema.route.concat(": ", error))
+  }
+
+  const client = viewer_store.client
+
+  if (!_.isEmpty(schema.properties)) {
+    params = [params]
+  } else {
+    params = []
+  }
+
+  let promise = new Promise((resolve, reject) => {
+    if (client) {
+      viewer_store.start_request()
+      client
+        .getConnection()
+        .getSession()
+        .call(schema.rpc, params)
+        .then(
+          (value) => {
+            if (response_function) {
+              response_function(value)
+            }
+            resolve()
+          },
+          (reason) => {
+            if (request_error_function) {
+              request_error_function(reason)
+            }
+            reject()
+          },
+        )
+        .catch((error) => {
+          errors_store.add_error({
+            code: error.code,
+            route: schema.route,
+            name: error.message,
+            description: error.message,
+          })
+          if (response_error_function) {
+            response_error_function(error)
+          }
+          reject()
+        })
+        .finally(() => {
+          viewer_store.stop_request()
+        })
+    }
+  })
+  return promise
+}
+
+export default viewer_call

package/package.json

@@ -3,55 +3,56 @@
   "scripts": {
     "lint": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
     "test": "vitest",
-    "coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage",
+    "geode_objects": "node scripts/generate_geode_objects.js && prettier ./assets/geode_objects.js --write"
   },
   "devDependencies": {
     "@nuxt/test-utils": "^3.11.0",
-    "@vitejs/plugin-vue": "^5.0.3",
-    "@vitest/coverage-v8": "^1.2.2",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.3.1",
     "@vue/test-utils": "^2.4.4",
-    "eslint": "^8.56.0",
+    "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.21.0",
+    "eslint-plugin-vue": "^9.22.0",
     "eslint-plugin-vuetify": "^2.1.1",
-    "happy-dom": "^13.3.8",
+    "happy-dom": "^13.6.2",
     "jsdom": "^24.0.0",
-    "nuxt": "^3.10.0",
-    "playwright-core": "^1.41.1",
-    "prettier": "3.2.4",
+    "nuxt": "^3.10.3",
+    "playwright-core": "^1.42.0",
+    "prettier": "3.2.5",
     "resize-observer-polyfill": "^1.5.1",
-    "vite": "^5.0.12",
-    "vite-plugin-vuetify": "^2.0.1",
-    "vitest": "^1.2.2",
-    "vitest-environment-nuxt": "^1.0.0"
+    "vite": "^5.1.4",
+    "vite-plugin-vuetify": "^2.0.2",
+    "vitest": "^1.3.1",
+    "vitest-environment-nuxt": "^1.0.0",
+    "wslink": "^1.12.4"
   },
   "overrides": {
     "vue": "latest"
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
   "type": "module",
-  "version": "6.3.0-rc.1",
+  "version": "7.0.0-rc.1",
   "main": "./nuxt.config.js",
   "dependencies": {
-    "@kitware/vtk.js": "^29.4.6",
+    "@geode/opengeodeweb-back": "4.0.0",
+    "@kitware/vtk.js": "^29.7.3",
     "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.5.1",
-    "@types/node": "^20.11.13",
-    "@vueuse/components": "^10.7.2",
-    "@vueuse/core": "^10.7.2",
-    "@vueuse/nuxt": "^10.7.2",
+    "@types/node": "^20.11.22",
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/nuxt": "^10.9.0",
     "ajv": "^8.12.0",
-    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
-    "sass": "^1.70.0",
-    "semver": "^7.5.4",
+    "sass": "^1.71.1",
+    "semver": "^7.6.0",
     "vue-recaptcha": "^2.0.3",
     "vue3-carousel": "^0.3.1",
-    "vuetify": "^3.5.1",
-    "wslink": "^1.12.4"
+    "vuetify": "^3.5.6"
   },
   "repository": {
     "type": "git",

package/scripts/generate_geode_objects.js

@@ -0,0 +1,24 @@
+import * as path from "path"
+import * as fs from "fs"
+import * as process from "process"
+
+const output_file = path.join(process.cwd(), "assets/geode_objects.js")
+
+if (fs.existsSync(output_file)) {
+  fs.unlinkSync(output_file)
+}
+
+var files = fs.readdirSync("assets/img/geode_objects/")
+var imports = ""
+var geode_objects = "const geode_objects = {"
+
+for (const file of files) {
+  const geode_object = file.replace(".svg", "")
+  imports +=
+    `import ${geode_object} from "@/assets/img/geode_objects/${file}"` + "\n"
+  geode_objects += `${geode_object}:{\n tooltip: "${geode_object}",\n image: ${geode_object},\n},\n`
+}
+geode_objects += "}\n\n export default geode_objects"
+fs.writeFileSync(output_file, imports + "\n" + geode_objects)
+
+console.log("Fichier JS créé avec succès :", output_file)

package/stores/cloud.js

@@ -16,10 +16,10 @@ export const use_cloud_store = defineStore("cloud", {
       return api_url
     },
     is_running: () => {
-      return use_geode_store().is_running && use_websocket_store().is_running
+      return use_geode_store().is_running && use_viewer_store().is_running
     },
     is_busy: () => {
-      return use_geode_store().is_busy || use_websocket_store().is_busy
+      return use_geode_store().is_busy || use_viewer_store().is_busy
     },
   },
   actions: {
@@ -60,13 +60,11 @@ export const use_cloud_store = defineStore("cloud", {
         method: "POST",
       })
       if (data.value !== null) {
-        console.log("DATA", data)
         this.ID = data.value.ID
         localStorage.setItem("ID", data.value.ID)
         geode_store.$patch({ is_running: true })
         return geode_store.ping_task()
       } else {
-        console.log("error : ", error)
         errors_store.server_error = true
       }
     },