@geode/opengeodeweb-front 10.2.1-rc.2 → 10.2.1-rc.3

package/app/components/Loading.vue

@@ -1,29 +1,3 @@
-<template>
-  <v-row justify="center">
-    <v-col cols="12" class="ma-3">
-      <v-card loading>
-        <v-card-title class="text-center">
-          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 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">
-            mdi-emoticon-excited-outline
-          </v-icon>
-          <br />
-          <Carousel :items="users_list" />
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
-</template>
-
 <script setup>
   import ying_yang from "@ogw_front/assets/img/energy_sobriety/ying_yang.png"
   import chemin from "@ogw_front/assets/img/energy_sobriety/chemin.png"
@@ -86,3 +60,29 @@
     },
   ]
 </script>
+
+<template>
+  <v-row justify="center">
+    <v-col cols="12" class="ma-3">
+      <v-card loading>
+        <v-card-title class="text-center">
+          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 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">
+            mdi-emoticon-excited-outline
+          </v-icon>
+          <br />
+          <Carousel :items="users_list" />
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>

package/app/components/MissingFilesSelector.vue

@@ -1,47 +1,3 @@
-<template>
-  <FetchingData v-if="loading" />
-  <v-container v-else-if="has_missing_files">
-    <v-row v-if="mandatory_files.length" align="center">
-      <v-col cols="auto" class="pa-0">
-        <v-icon color="warning" icon="mdi-file-document-alert-outline" />
-      </v-col>
-      <p class="pa-1">Mandatory files:</p>
-      <v-col v-for="mandatory_file in mandatory_files" cols="auto" class="pa-0">
-        <v-chip>{{ mandatory_file }}</v-chip>
-      </v-col>
-    </v-row>
-    <v-row v-if="additional_files.length" align="center">
-      <v-col cols="auto" class="pa-0">
-        <v-icon color="accent" icon="mdi-file-document-plus-outline" />
-      </v-col>
-      <p class="pa-1">Additional files:</p>
-      <v-col
-        v-for="additional_file in additional_files"
-        cols="auto"
-        class="pa-0"
-      >
-        <v-chip>{{ additional_file }}</v-chip>
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col cols="12">
-        <FileUploader
-          v-bind="{ multiple, accept }"
-          @files_uploaded="files_uploaded_event"
-        />
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col
-        v-if="!mandatory_files.length && additional_files.length"
-        cols="auto"
-      >
-        <v-btn @click="emit('increment_step')" color="warning">Skip step</v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
@@ -121,3 +77,47 @@
 
   await missing_files()
 </script>
+
+<template>
+  <FetchingData v-if="loading" />
+  <v-container v-else-if="has_missing_files">
+    <v-row v-if="mandatory_files.length" align="center">
+      <v-col cols="auto" class="pa-0">
+        <v-icon color="warning" icon="mdi-file-document-alert-outline" />
+      </v-col>
+      <p class="pa-1">Mandatory files:</p>
+      <v-col v-for="mandatory_file in mandatory_files" cols="auto" class="pa-0">
+        <v-chip>{{ mandatory_file }}</v-chip>
+      </v-col>
+    </v-row>
+    <v-row v-if="additional_files.length" align="center">
+      <v-col cols="auto" class="pa-0">
+        <v-icon color="accent" icon="mdi-file-document-plus-outline" />
+      </v-col>
+      <p class="pa-1">Additional files:</p>
+      <v-col
+        v-for="additional_file in additional_files"
+        cols="auto"
+        class="pa-0"
+      >
+        <v-chip>{{ additional_file }}</v-chip>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12">
+        <FileUploader
+          v-bind="{ multiple, accept }"
+          @files_uploaded="files_uploaded_event"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col
+        v-if="!mandatory_files.length && additional_files.length"
+        cols="auto"
+      >
+        <v-btn @click="emit('increment_step')" color="warning">Skip step</v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

package/app/components/ObjectSelector.vue

@@ -1,53 +1,3 @@
-<template>
-  <FetchingData v-if="loading" />
-  <v-row v-else-if="Object.keys(allowed_objects).length" class="justify-left">
-    <v-col v-for="(value, key) in allowed_objects" :key="key" cols="3" md="4">
-      <v-tooltip
-        :text="
-          value['is_loadable']
-            ? geode_objects[key].tooltip
-            : `Data not loadable with this class (${key})`
-        "
-        location="bottom"
-      >
-        <template v-slot:activator="{ props }">
-          <span v-bind="props">
-            <v-card
-              v-ripple
-              class="card ma-2"
-              hover
-              rounded
-              @click="set_geode_object(key)"
-              :disabled="!value['is_loadable']"
-              :elevation="value['is_loadable'] ? 5 : 3"
-            >
-              <v-img
-                :src="geode_objects[key].image"
-                cover
-                :class="!value['is_loadable'] ? 'disabled' : undefined"
-              />
-            </v-card>
-          </span>
-        </template>
-      </v-tooltip>
-    </v-col>
-  </v-row>
-  <v-row v-else class="pa-5">
-    <v-card class="card" variant="tonal" rounded>
-      <v-card-text>
-        This file format isn't supported! Please check the
-        <a
-          href="https://docs.geode-solutions.com/guides/formats/"
-          target="_blank"
-        >
-          supported file formats documentation</a
-        >
-        for more information
-      </v-card-text>
-    </v-card>
-  </v-row>
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
 
@@ -151,6 +101,56 @@
   await get_allowed_objects()
 </script>
 
+<template>
+  <FetchingData v-if="loading" />
+  <v-row v-else-if="Object.keys(allowed_objects).length" class="justify-left">
+    <v-col v-for="(value, key) in allowed_objects" :key="key" cols="3" md="4">
+      <v-tooltip
+        :text="
+          value['is_loadable']
+            ? geode_objects[key].tooltip
+            : `Data not loadable with this class (${key})`
+        "
+        location="bottom"
+      >
+        <template v-slot:activator="{ props }">
+          <span v-bind="props">
+            <v-card
+              v-ripple
+              class="card ma-2"
+              hover
+              rounded
+              @click="set_geode_object(key)"
+              :disabled="!value['is_loadable']"
+              :elevation="value['is_loadable'] ? 5 : 3"
+            >
+              <v-img
+                :src="geode_objects[key].image"
+                cover
+                :class="!value['is_loadable'] ? 'disabled' : undefined"
+              />
+            </v-card>
+          </span>
+        </template>
+      </v-tooltip>
+    </v-col>
+  </v-row>
+  <v-row v-else class="pa-5">
+    <v-card class="card" variant="tonal" rounded>
+      <v-card-text>
+        This file format isn't supported! Please check the
+        <a
+          href="https://docs.geode-solutions.com/guides/formats/"
+          target="_blank"
+        >
+          supported file formats documentation</a
+        >
+        for more information
+      </v-card-text>
+    </v-card>
+  </v-row>
+</template>
+
 <style scoped>
   .disabled {
     filter: opacity(0.7);

package/app/components/PackagesVersions.vue

@@ -1,23 +1,3 @@
-<template>
-  <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"
-      >
-        {{ package_version.package }} v{{ package_version.version }}
-        <br />
-      </span>
-      <template #activator="{ props }">
-        <v-icon v-bind="props" color="primary" class="justify-right">
-          mdi-information-outline
-        </v-icon>
-      </template>
-    </v-tooltip>
-  </v-container>
-</template>
-
 <script setup>
   import Status from "@ogw_front/utils/status"
   import { useGeodeStore } from "@ogw_front/stores/geode"
@@ -50,3 +30,23 @@
 
   await get_packages_versions()
 </script>
+
+<template>
+  <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"
+      >
+        {{ package_version.package }} v{{ package_version.version }}
+        <br />
+      </span>
+      <template #activator="{ props }">
+        <v-icon v-bind="props" color="primary" class="justify-right">
+          mdi-information-outline
+        </v-icon>
+      </template>
+    </v-tooltip>
+  </v-container>
+</template>

package/app/components/Recaptcha.vue

@@ -1,43 +1,3 @@
-<template>
-  <VRow align="center" justify="center" style="display: none">
-    <VCol cols="4">
-      <VForm v-model="valid">
-        <VContainer>
-          <VRow>
-            <VCol>
-              <VTextField v-model="name" label="Name" required />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol>
-              <VTextField
-                v-model="email"
-                :rules="emailRules"
-                label="E-mail"
-                required
-              />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol>
-              <VCheckbox label="Launch the app" v-model="launch" />
-            </VCol>
-          </VRow>
-        </VContainer>
-      </VForm>
-    </VCol>
-  </VRow>
-  <VRow align="center" justify="center">
-    <VCol cols="4" class="d-flex justify-center align-center">
-      <VBtn
-        :text="props.button_label"
-        :color="props.color || props.button_color"
-        @click="submit_recaptcha"
-      />
-    </VCol>
-  </VRow>
-</template>
-
 <script setup>
   import { appMode } from "@ogw_front/utils/app_mode"
   import { useInfraStore } from "@ogw_front/stores/infra"
@@ -102,3 +62,43 @@
     })
   }
 </script>
+
+<template>
+  <VRow align="center" justify="center" style="display: none">
+    <VCol cols="4">
+      <VForm v-model="valid">
+        <VContainer>
+          <VRow>
+            <VCol>
+              <VTextField v-model="name" label="Name" required />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol>
+              <VTextField
+                v-model="email"
+                :rules="emailRules"
+                label="E-mail"
+                required
+              />
+            </VCol>
+          </VRow>
+          <VRow>
+            <VCol>
+              <VCheckbox label="Launch the app" v-model="launch" />
+            </VCol>
+          </VRow>
+        </VContainer>
+      </VForm>
+    </VCol>
+  </VRow>
+  <VRow align="center" justify="center">
+    <VCol cols="4" class="d-flex justify-center align-center">
+      <VBtn
+        :text="props.button_label"
+        :color="props.color || props.button_color"
+        @click="submit_recaptcha"
+      />
+    </VCol>
+  </VRow>
+</template>

package/app/components/RemoteRenderingView.vue

@@ -1,25 +1,3 @@
-<template>
-  <ClientOnly>
-    <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
-      <ViewToolbar />
-      <slot name="ui"></slot>
-      <v-col
-        ref="viewer"
-        style="
-          overflow: hidden;
-          position: relative;
-          z-index: 0;
-          height: 100%;
-          width: 100%;
-        "
-        class="pa-0"
-        @click="get_x_y"
-        @keydown.esc="viewerStore.toggle_picking_mode(false)"
-      />
-    </div>
-  </ClientOnly>
-</template>
-
 <script setup>
   import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView"
   import { useElementSize, useWindowSize } from "@vueuse/core"
@@ -120,6 +98,28 @@
   })
 </script>
 
+<template>
+  <ClientOnly>
+    <div style="position: relative; width: 100%; height: calc(100vh - 80px)">
+      <ViewToolbar />
+      <slot name="ui"></slot>
+      <v-col
+        ref="viewer"
+        style="
+          overflow: hidden;
+          position: relative;
+          z-index: 0;
+          height: 100%;
+          width: 100%;
+        "
+        class="pa-0"
+        @click="get_x_y"
+        @keydown.esc="viewerStore.toggle_picking_mode(false)"
+      />
+    </div>
+  </ClientOnly>
+</template>
+
 <style scoped>
   .list {
     position: absolute;

package/app/components/Step.vue

@@ -1,3 +1,49 @@
+<script setup>
+  function truncate(text, maxLength) {
+    if (text.length > maxLength) {
+      return text.slice(0, maxLength) + "..."
+    }
+    return text
+  }
+
+  const props = defineProps({
+    step_index: { type: Number, required: true },
+  })
+
+  const stepper_tree = inject("stepper_tree")
+  const { current_step_index, steps } = toRefs(stepper_tree)
+
+  watch(current_step_index, (newVal, oldVal) => {
+    if (newVal < oldVal) {
+      stepper_tree.navigating_back = true
+    }
+  })
+
+  function update_values_event(keys_values_object) {
+    for (const [key, value] of Object.entries(keys_values_object)) {
+      stepper_tree[key] = value
+    }
+  }
+
+  function increment_step() {
+    stepper_tree.current_step_index++
+  }
+
+  function decrement_step() {
+    stepper_tree.current_step_index--
+  }
+
+  const sortedChips = computed(() => {
+    const chips = steps.value[props.step_index]?.chips || []
+    return [...chips].sort((a, b) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+    )
+  })
+</script>
+
 <template>
   <v-stepper-vertical-item
     :value="step_index + 1"
@@ -57,49 +103,3 @@
     </v-card-text>
   </v-stepper-vertical-item>
 </template>
-
-<script setup>
-  function truncate(text, maxLength) {
-    if (text.length > maxLength) {
-      return text.slice(0, maxLength) + "..."
-    }
-    return text
-  }
-
-  const props = defineProps({
-    step_index: { type: Number, required: true },
-  })
-
-  const stepper_tree = inject("stepper_tree")
-  const { current_step_index, steps } = toRefs(stepper_tree)
-
-  watch(current_step_index, (newVal, oldVal) => {
-    if (newVal < oldVal) {
-      stepper_tree.navigating_back = true
-    }
-  })
-
-  function update_values_event(keys_values_object) {
-    for (const [key, value] of Object.entries(keys_values_object)) {
-      stepper_tree[key] = value
-    }
-  }
-
-  function increment_step() {
-    stepper_tree.current_step_index++
-  }
-
-  function decrement_step() {
-    stepper_tree.current_step_index--
-  }
-
-  const sortedChips = computed(() => {
-    const chips = steps.value[props.step_index]?.chips || []
-    return [...chips].sort((a, b) =>
-      a.localeCompare(b, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-    )
-  })
-</script>

package/app/components/Stepper.vue

@@ -1,3 +1,11 @@
+<script setup>
+  import Step from "@ogw_front/components/Step"
+
+  const emit = defineEmits(["reset_values"])
+  const stepper_tree = inject("stepper_tree")
+  const { steps, current_step_index } = toRefs(stepper_tree)
+</script>
+
 <template>
   <v-card-item class="flex-shrink-0 pa-0">
     <v-card-title
@@ -27,11 +35,3 @@
     />
   </v-stepper-vertical>
 </template>
-
-<script setup>
-  import Step from "@ogw_front/components/Step"
-
-  const emit = defineEmits(["reset_values"])
-  const stepper_tree = inject("stepper_tree")
-  const { steps, current_step_index } = toRefs(stepper_tree)
-</script>

package/app/components/VeaseViewToolbar.vue

@@ -1,31 +1,3 @@
-<template>
-  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row
-      v-for="camera_option in camera_options"
-      :key="camera_option.icon"
-      dense
-    >
-      <v-col>
-        <v-btn
-          density="comfortable"
-          icon
-          @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
-  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
-  <ZScaling
-    v-if="showZScaling"
-    v-model="zScale"
-    :width="400"
-    @close="handleZScalingClose"
-  />
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
@@ -100,6 +72,34 @@
   ]
 </script>
 
+<template>
+  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
+    <v-row
+      v-for="camera_option in camera_options"
+      :key="camera_option.icon"
+      dense
+    >
+      <v-col>
+        <v-btn
+          density="comfortable"
+          icon
+          @click.stop="camera_option.action"
+          v-tooltip:left="camera_option.tooltip"
+        >
+          <v-icon :icon="camera_option.icon" size="32" />
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
+  <ZScaling
+    v-if="showZScaling"
+    v-model="zScale"
+    :width="400"
+    @close="handleZScalingClose"
+  />
+</template>
+
 <style module>
   .floatToolbar {
     position: absolute;

package/app/components/ViewToolbar.vue

@@ -1,25 +1,3 @@
-<template>
-  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row
-      v-for="camera_option in camera_options"
-      :key="camera_option.icon"
-      dense
-    >
-      <v-col>
-        <v-btn
-          density="comfortable"
-          icon
-          @click.stop="camera_option.action"
-          v-tooltip:left="camera_option.tooltip"
-        >
-          <v-icon :icon="camera_option.icon" size="32" />
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-container>
-  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
-</template>
-
 <script setup>
   import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
 
@@ -64,6 +42,28 @@
   ]
 </script>
 
+<template>
+  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
+    <v-row
+      v-for="camera_option in camera_options"
+      :key="camera_option.icon"
+      dense
+    >
+      <v-col>
+        <v-btn
+          density="comfortable"
+          icon
+          @click.stop="camera_option.action"
+          v-tooltip:left="camera_option.tooltip"
+        >
+          <v-icon :icon="camera_option.icon" size="32" />
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
+</template>
+
 <style module>
   .floatToolbar {
     position: absolute;