@geode/opengeodeweb-front 2.0.0-rc.15 → 2.0.0-rc.17

package/components/ExtensionSelector.vue

@@ -1,7 +1,16 @@
 <template>
   <v-row class="justify-left">
-    <v-col v-for="file_extension in file_extensions" :key="file_extension" cols="2">
-      <v-card class="card ma-2" hover elevation="5" @click="set_output_extension(file_extension)">
+    <v-col
+      v-for="file_extension in file_extensions"
+      :key="file_extension"
+      cols="2"
+    >
+      <v-card
+        class="card ma-2"
+        hover
+        elevation="5"
+        @click="set_output_extension(file_extension)"
+      >
         <v-card-title align="center">
           {{ file_extension }}
         </v-card-title>
@@ -11,43 +20,43 @@
 </template>
 
 <script setup>
-const stepper_tree = inject('stepper_tree')
-const { geode_object, route_prefix } = stepper_tree
-
-const props = defineProps({
-  variable_to_update: { type: String, required: true },
-  variable_to_increment: { type: String, required: true },
-})
-const { variable_to_update, variable_to_increment } = props
-
-const file_extensions = ref([])
-
-
-async function get_output_file_extensions () {
-  const params = new FormData()
-  params.append('geode_object', geode_object)
-  await api_fetch(`${route_prefix}/output_file_extensions`, { method: 'POST', body: params },
-    {
-      'response_function': (response) => {
-        file_extensions.value = response._data.output_file_extensions
+  const stepper_tree = inject("stepper_tree")
+  const { geode_object, route_prefix } = stepper_tree
+
+  const props = defineProps({
+    variable_to_update: { type: String, required: true },
+    variable_to_increment: { type: String, required: true },
+  })
+  const { variable_to_update, variable_to_increment } = props
+
+  const file_extensions = ref([])
+
+  async function get_output_file_extensions() {
+    const params = new FormData()
+    params.append("geode_object", geode_object)
+    await api_fetch(
+      `${route_prefix}/output_file_extensions`,
+      { method: "POST", body: params },
+      {
+        response_function: (response) => {
+          file_extensions.value = response._data.output_file_extensions
+        },
       },
-    }
-  )
-}
-
-function set_output_extension (extension) {
-  stepper_tree[variable_to_update] = extension
-  stepper_tree[variable_to_increment]++
-}
+    )
+  }
 
-onMounted(() => {
-  get_output_file_extensions()
-})
+  function set_output_extension(extension) {
+    stepper_tree[variable_to_update] = extension
+    stepper_tree[variable_to_increment]++
+  }
 
+  onMounted(() => {
+    get_output_file_extensions()
+  })
 </script>
 
 <style scoped>
-.card {
-  border-radius: 15px;
-}
-</style>
+  .card {
+    border-radius: 15px;
+  }
+</style>

package/components/FileSelector.vue

@@ -1,46 +1,59 @@
 <template>
-  <v-file-input v-model="files" :multiple="multiple" :label="label" :accept="accept"
-    :rules="[(value) => !!value || 'The file is mandatory']" color="primary" chips counter show-size
-    @click:clear="stepper_tree.files = []" />
+  <v-file-input
+    v-model="files"
+    :multiple="multiple"
+    :label="label"
+    :accept="accept"
+    :rules="[(value) => !!value || 'The file is mandatory']"
+    color="primary"
+    chips
+    counter
+    show-size
+    @click:clear="stepper_tree.files = []"
+  />
 </template>
 
 <script setup>
-const stepper_tree = inject('stepper_tree')
-const { route_prefix } = stepper_tree
-
-const props = defineProps({
-  multiple: { type: Boolean, required: true },
-  label: { type: String, required: true },
-  variable_to_update: { type: String, required: true },
-  variable_to_increment: { type: String, required: true },
-})
-const { multiple, label, variable_to_update, variable_to_increment } = props
-
-const accept = ref('')
-const files = ref([])
-
-watch(files, (value) => {
-  stepper_tree[variable_to_update] = value
-  stepper_tree[variable_to_increment]++
-})
-
-function fill_extensions (response) {
-  const extensions = response._data.extensions.map((extension) => '.' + extension).join(',')
-  accept.value = extensions
-}
-
-async function get_allowed_files () {
-  const route = `${route_prefix}/allowed_files`
-  await api_fetch(route, { method: 'GET' },
-    {
-      'response_function': (response) => {
-        fill_extensions(response)
-      }
-    })
-}
-
-onMounted(async () => {
-  await get_allowed_files()
-})
-
-</script>
+  const stepper_tree = inject("stepper_tree")
+  const { route_prefix } = stepper_tree
+
+  const props = defineProps({
+    multiple: { type: Boolean, required: true },
+    label: { type: String, required: true },
+    variable_to_update: { type: String, required: true },
+    variable_to_increment: { type: String, required: true },
+  })
+  const { multiple, label, variable_to_update, variable_to_increment } = props
+
+  const accept = ref("")
+  const files = ref([])
+
+  watch(files, (value) => {
+    stepper_tree[variable_to_update] = value
+    stepper_tree[variable_to_increment]++
+  })
+
+  function fill_extensions(response) {
+    const extensions = response._data.extensions
+      .map((extension) => "." + extension)
+      .join(",")
+    accept.value = extensions
+  }
+
+  async function get_allowed_files() {
+    const route = `${route_prefix}/allowed_files`
+    await api_fetch(
+      route,
+      { method: "GET" },
+      {
+        response_function: (response) => {
+          fill_extensions(response)
+        },
+      },
+    )
+  }
+
+  onMounted(async () => {
+    await get_allowed_files()
+  })
+</script>

package/components/Header.vue

@@ -6,13 +6,29 @@
     <v-col>
       <v-row class="justify-center">
         <v-col v-for="(card, i) in cards_list" :key="i" cols="11" md="5">
-          <v-card class="card" hover elevation="5" :href="card.href" rounded target="_blank">
-            <v-card-title primary-title class="justify-center text-h6" align="center">
+          <v-card
+            class="card"
+            hover
+            elevation="5"
+            :href="card.href"
+            rounded
+            target="_blank"
+          >
+            <v-card-title
+              primary-title
+              class="justify-center text-h6"
+              align="center"
+            >
               {{ card.title }}
             </v-card-title>
             <v-row class="justify-center pa-2">
               <v-col cols="auto">
-                <v-icon :icon="card.icon" color="primary" size="70" class="justify-center" />
+                <v-icon
+                  :icon="card.icon"
+                  color="primary"
+                  size="70"
+                  class="justify-center"
+                />
               </v-col>
             </v-row>
           </v-card>
@@ -23,8 +39,8 @@
 </template>
 
 <script setup>
-const props = defineProps({
-  tool_name: { type: String, required: true },
-  cards_list: { type: Object, required: true }
-})
-</script>
+  const props = defineProps({
+    tool_name: { type: String, required: true },
+    cards_list: { type: Object, required: true },
+  })
+</script>

package/components/Launcher.vue

@@ -1,14 +1,18 @@
 <template>
   <v-container justify="space-around">
     <v-row align-content="center" align="center">
-      <v-col v-if="!is_captcha_validated" cols="12" align-self="center" align="center">
-        <h4 class="pb-3">
-          Please complete the recaptcha to launch the app
-        </h4>
-        <vue-recaptcha ref="recaptcha" :sitekey="site_key" :loadRecaptchaScript="true"
-          @expired="is_captcha_validated = false" @verify="submit_recaptcha" align-self="center" />
+      <v-col
+        v-if="!is_captcha_validated"
+        cols="12"
+        align-self="center"
+        align="center"
+      >
+        <h4 class="pb-3">Please complete the recaptcha to launch the app</h4>
+        <Recaptcha />
       </v-col>
-      <v-col v-else-if="!cloud_store.is_running && cloud_store.is_connexion_launched">
+      <v-col
+        v-else-if="!cloud_store.is_running && cloud_store.is_connexion_launched"
+      >
         <Loading />
       </v-col>
     </v-row>
@@ -16,39 +20,14 @@
 </template>
 
 <script setup>
-import { VueRecaptcha } from "vue-recaptcha"
+  const websocket_store = use_websocket_store()
+  const cloud_store = use_cloud_store()
+  const { is_captcha_validated } = storeToRefs(cloud_store)
 
-const websocket_store = use_websocket_store()
-const cloud_store = use_cloud_store()
-const { is_captcha_validated } = storeToRefs(cloud_store)
-
-const props = defineProps({
-  site_key: { type: String, required: true }
-})
-
-watch(is_captcha_validated, async (value) => {
-  if (value === true && process.client) {
-    await cloud_store.create_connexion()
-    await websocket_store.ws_connect()
-  }
-})
-
-onMounted(() => {
-  if (process.client) {
-    const config = useRuntimeConfig()
-    if (config.public.NODE_ENV !== 'production') {
-      cloud_store.$patch({ is_captcha_validated: true })
+  watch(is_captcha_validated, async (value) => {
+    if (value === true && process.client) {
+      await cloud_store.create_connexion()
+      await websocket_store.ws_connect()
     }
-  }
-})
-
-async function submit_recaptcha (token) {
-  try {
-    const response = await $fetch.raw(`/.netlify/functions/recaptcha?token=${token}`)
-    cloud_store.$patch({ is_captcha_validated: response.status == 200 })
-    recaptcha.reset()
-  } catch (error) {
-    console.error(error)
-  }
-}
+  })
 </script>

package/components/Loading.vue

@@ -9,16 +9,16 @@
           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.
-          <br>
+          We start our server 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">
             mdi-emoticon-excited-outline
           </v-icon>
-          <br>
+          <br />
         </v-card-text>
       </v-card>
     </v-col>
   </v-row>
-</template>
+</template>

package/components/ObjectSelector.vue

@@ -2,7 +2,11 @@
   <v-row v-if="allowed_objects.length" class="justify-left">
     <v-col v-for="object in allowed_objects" :key="object" cols="2" md="2">
       <v-card v-ripple class="card ma-2" hover elevation="5" rounded>
-        <v-img :src="geode_objects[object].image" cover @click="set_geode_object(object)" />
+        <v-img
+          :src="geode_objects[object].image"
+          cover
+          @click="set_geode_object(object)"
+        />
         <v-tooltip activator="parent" location="bottom">
           {{ geode_objects[object].tooltip }}
         </v-tooltip>
@@ -12,55 +16,58 @@
   <v-row v-else class="pa-5">
     <v-card class="card" variant="tonal" elevation="5" rounded>
       <v-card-text>
-        This file format isn't supported! Please check the <a href="https://docs.geode-solutions.com/formats/"
-          target="_blank">
-          supported file formats documentation</a> for more information
+        This file format isn't supported! Please check the
+        <a href="https://docs.geode-solutions.com/formats/" target="_blank">
+          supported file formats documentation</a
+        >
+        for more information
       </v-card-text>
     </v-card>
   </v-row>
 </template>
 
 <script setup>
-import geode_objects from '@/assets/geode_objects'
+  import geode_objects from "@/assets/geode_objects"
 
-const stepper_tree = inject('stepper_tree')
-const { files, route_prefix } = stepper_tree
+  const stepper_tree = inject("stepper_tree")
+  const { files, route_prefix } = stepper_tree
 
-const props = defineProps({
-  variable_to_update: { type: String, required: true },
-  variable_to_increment: { type: String, required: true },
-})
+  const props = defineProps({
+    variable_to_update: { type: String, required: true },
+    variable_to_increment: { type: String, required: true },
+  })
 
-const { variable_to_update, variable_to_increment } = props
+  const { variable_to_update, variable_to_increment } = props
 
-const allowed_objects = ref([])
+  const allowed_objects = ref([])
 
-async function get_allowed_objects () {
+  async function get_allowed_objects() {
+    const params = new FormData()
+    params.append("filename", files[0].name)
 
-  const params = new FormData()
-  params.append('filename', files[0].name)
-
-  await api_fetch(`${route_prefix}/allowed_objects`,
-    { method: 'POST', body: params },
-    {
-      'response_function': (response) => { allowed_objects.value = response._data.allowed_objects }
-    })
-}
-
-function set_geode_object (geode_object) {
-  stepper_tree[variable_to_update] = geode_object
-  stepper_tree[variable_to_increment]++
-}
-
-onMounted(() => {
-  get_allowed_objects()
-})
+    await api_fetch(
+      `${route_prefix}/allowed_objects`,
+      { method: "POST", body: params },
+      {
+        response_function: (response) => {
+          allowed_objects.value = response._data.allowed_objects
+        },
+      },
+    )
+  }
 
+  function set_geode_object(geode_object) {
+    stepper_tree[variable_to_update] = geode_object
+    stepper_tree[variable_to_increment]++
+  }
 
+  onMounted(() => {
+    get_allowed_objects()
+  })
 </script>
 
 <style scoped>
-.card {
-  border-radius: 15px;
-}
-</style>
+  .card {
+    border-radius: 15px;
+  }
+</style>

package/components/PackagesVersions.vue

@@ -2,9 +2,12 @@
   <v-container>
     This tool uses our Open-Source codes
     <v-tooltip location="end">
-      <span v-for="package_version in packages_versions" :key="package_version.package">
+      <span
+        v-for="package_version in packages_versions"
+        :key="package_version.package"
+      >
         {{ package_version.package }} v{{ package_version.version }}
-        <br>
+        <br />
       </span>
       <template #activator="{ props }">
         <v-icon v-bind="props" color="primary" class="justify-right">
@@ -16,38 +19,42 @@
 </template>
 
 <script setup>
-const props = defineProps({
-  route_prefix: { type: String, required: true }
-})
-const { route_prefix } = props
+  const props = defineProps({
+    route_prefix: { type: String, required: true },
+  })
+  const { route_prefix } = props
+
+  const cloud_store = use_cloud_store()
 
-const cloud_store = use_cloud_store()
+  const packages_versions = ref([])
 
-const packages_versions = ref([])
+  async function get_packages_versions() {
+    await api_fetch(
+      `${route_prefix}/versions`,
+      { method: "GET" },
+      {
+        response_function: (response) => {
+          packages_versions.value = response._data.versions
+        },
+      },
+    )
+  }
 
-async function get_packages_versions () {
-  await api_fetch(`${route_prefix}/versions`, { method: 'GET' }, {
-    'response_function': (response) => {
-      packages_versions.value = response._data.versions
+  watch(cloud_store.is_running, (value) => {
+    if (value === true) {
+      get_packages_versions()
     }
   })
-}
 
-watch(cloud_store.is_running, (value) => {
-  if (value === true) {
-    get_packages_versions()
-  }
-})
-
-onMounted(() => {
-  if (cloud_store.is_running === true) {
-    get_packages_versions()
-  }
-})
+  onMounted(() => {
+    if (cloud_store.is_running === true) {
+      get_packages_versions()
+    }
+  })
 
-onActivated(() => {
-  if (cloud_store.is_running === true) {
-    get_packages_versions()
-  }
-})
+  onActivated(() => {
+    if (cloud_store.is_running === true) {
+      get_packages_versions()
+    }
+  })
 </script>

package/components/Recaptcha.vue

@@ -0,0 +1,41 @@
+<template>
+  <vue-recaptcha
+    ref="recaptcha"
+    :sitekey="site_key"
+    :loadRecaptchaScript="true"
+    @expired="is_captcha_validated = false"
+    @verify="submit_recaptcha"
+    align-self="center"
+  />
+</template>
+
+<script setup>
+  import { VueRecaptcha } from "vue-recaptcha"
+
+  const websocket_store = use_websocket_store()
+  const cloud_store = use_cloud_store()
+  const { is_captcha_validated } = storeToRefs(cloud_store)
+
+  const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
+
+  onMounted(() => {
+    if (process.client) {
+      const config = useRuntimeConfig()
+      if (config.public.NODE_ENV !== "production") {
+        cloud_store.$patch({ is_captcha_validated: true })
+      }
+    }
+  })
+
+  async function submit_recaptcha(token) {
+    try {
+      const response = await $fetch.raw(
+        `/.netlify/functions/recaptcha?token=${token}`,
+      )
+      cloud_store.$patch({ is_captcha_validated: response.status == 200 })
+      recaptcha.reset()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+</script>