@geode/opengeodeweb-front 0.0.0

package/assets/img/geode_objects/vertex_set.svg

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18.141853mm"
+   height="18.141851mm"
+   viewBox="0 0 64.282157 64.282151"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="point_set.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="-4.0414477"
+     inkscape:cy="-80.536838"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1853"
+     inkscape:window-height="1025"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-152.78749,-88.72113)">
+    <g
+       id="g4185"
+       transform="translate(4.332859,-0.158041)">
+      <ellipse
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="ellipse4177"
+         cx="175.35263"
+         cy="105.60451"
+         rx="6.0185194"
+         ry="5.8035727" />
+      <ellipse
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="ellipse4179"
+         cx="197.1046"
+         cy="127.25306"
+         rx="6.0185194"
+         ry="5.8035727" />
+      <ellipse
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         id="ellipse4181"
+         cx="167.83682"
+         cy="132.68599"
+         rx="6.0185194"
+         ry="5.8035727" />
+    </g>
+  </g>
+</svg>

package/components/CrsSelector.vue

@@ -0,0 +1,78 @@
+<template>
+  <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details></v-text-field>
+  <v-data-table v-model="selected_crs" :v-model:items-per-page="10" :headers="headers" :items="crs_list" item-value="code"
+    class="elevation-1" density='compact' fixed-header select-strategy='single' show-select :search="search"
+    :loading="data_table_loading" loading-text="Loading... Please wait"></v-data-table>
+</template>
+
+<script setup>
+import { useToggle } from '@vueuse/core'
+
+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 search = ref('')
+const data_table_loading = ref(false)
+const crs_list = ref([])
+const selected_crs = ref([])
+const toggle_loading = useToggle(data_table_loading)
+
+watch(selected_crs, (new_value) => {
+  const crs = get_selected_crs(new_value[0])
+  set_crs(crs)
+})
+
+function set_crs(crs_value) {
+  stepper_tree[variable_to_update] = crs_value
+  stepper_tree[variable_to_increment]++
+}
+
+function get_selected_crs(crs_code) {
+  for (let i = 0; i <= crs_list.value.length; i++) {
+    if (crs_list.value[i]['code'] == crs_code) {
+      return crs_list.value[i]
+    }
+  }
+}
+
+async function get_crs_table() {
+  let params = new FormData()
+  params.append('geode_object', geode_object)
+  toggle_loading()
+  await api_fetch(`${route_prefix}/geographic_coordinate_systems`, { method: 'POST', body: params },
+    {
+      'request_error_function': () => { toggle_loading() },
+      'response_function': (response) => {
+        toggle_loading()
+        crs_list.value = response._data.crs_list
+      },
+      'response_error_function': () => { toggle_loading() }
+    }
+  )
+}
+
+const headers = [
+  {
+    title: 'Authority',
+    align: 'start',
+    sortable: true,
+    key: 'authority',
+
+  },
+  { title: 'Code', align: 'end', key: 'code' },
+  { title: 'Name', align: 'end', key: 'name' }
+]
+
+
+onMounted(() => {
+  get_crs_table()
+})
+
+</script>

package/components/Errors/Banner.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-banner v-if="server_error" elevation="2" style="background-color: grey; z-index:100;" position="fixed">
+    <v-row>
+      <v-col cols="auto" class="white--text text-center">
+        <v-tooltip location="end">
+          <span>
+            We turn off our server automatically after 5 minutes of inactivity
+          </span>
+          <template #activator="{ props }">
+            <v-icon v-bind="props" color="white" class="justify-right">
+              mdi-information-outline
+            </v-icon>
+          </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 here:
+      </v-col>
+      <v-col cols="auto" align-items="center">
+        <v-btn @click="reload()" color="grey" density='compact'>
+          Reload
+        </v-btn>
+      </v-col>
+      <v-spacer />
+      <v-col cols="auto">
+        <v-btn icon flat size="20" @click="errors_store.delete_server_error()" color="grey" class=".align-center">
+          <v-icon icon="mdi-close" size="20" color="white" />
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-banner>
+</template>
+
+<script setup>
+const errors_store = use_errors_store()
+const { server_error } = storeToRefs(errors_store)
+
+function reload () {
+  window.location.reload()
+}
+</script>
+
+<style scoped>
+.v-btn {
+  text-transform: unset !important;
+}
+</style>

package/components/Errors/Snackers.vue

@@ -0,0 +1,49 @@
+<template>
+  <v-snackbar :style="{ 'margin-bottom': calc_margin(index) }" v-for="(error, index) in errors" :key="index"
+    v-model="show" color="error" location="bottom right" transition="slide-x-reverse-transition" max-width="30%"
+    height="20px">
+    <v-row dense class="flex-nowrap">
+      <v-col cols="auto">
+        <v-tooltip location="left">
+          <span>
+            {{ error.code }}<br />
+            {{ error.route }}<br />
+            {{ error.description }}
+            <br>
+          </span>
+          <template #activator="{ props }">
+            <v-icon v-bind="props" color="white" class="justify-right">
+              mdi-information-outline
+            </v-icon>
+          </template>
+        </v-tooltip>
+      </v-col>
+      <v-col cols="9" class="text-no-wrap overflow-hidden">
+        {{ error.name }}
+      </v-col>
+      <v-spacer />
+      <v-col cols="auto">
+        <v-btn icon flat size="20" @click="errors_store.delete_error(index)" color="error">
+          <v-icon icon="mdi-close" size="20" color="white" />
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-snackbar>
+</template>
+
+<script setup>
+const errors_store = use_errors_store()
+const { errors } = storeToRefs(errors_store)
+
+const show = true
+
+function calc_margin (index) {
+  return (index * 60) + 8 + 'px'
+}
+</script>
+
+<style scoped>
+.v-snackbar :deep(.v-snackbar__content) {
+  width: 100%;
+}
+</style>

package/components/ExtensionSelector.vue

@@ -0,0 +1,53 @@
+<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-card-title align="center">
+          {{ file_extension }}
+        </v-card-title>
+      </v-card>
+    </v-col>
+  </v-row>
+</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
+      },
+    }
+  )
+}
+
+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>

package/components/FileSelector.vue

@@ -0,0 +1,46 @@
+<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 = []" />
+</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>

package/components/Header.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-container>
+    <h1 class="text-h2 py-2" align="center">
+      {{ tool_name }}
+    </h1>
+    <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">
+              {{ 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-col>
+            </v-row>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-col>
+  </v-container>
+</template>
+
+<script setup>
+const props = defineProps({
+  tool_name: { type: String, required: true },
+  cards_list: { type: Object, required: true }
+})
+</script>

package/components/Launcher.vue

@@ -0,0 +1,55 @@
+<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-col v-if="!is_cloud_running && is_connexion_launched">
+        <Loading />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { VueRecaptcha } from "vue-recaptcha"
+
+const websocket_store = use_websocket_store()
+const cloud_store = use_cloud_store()
+const { is_cloud_running, is_captcha_validated, is_connexion_launched } = storeToRefs(cloud_store)
+
+const props = defineProps({
+  site_key: { type: String, required: true }
+})
+
+const { site_key } = toRefs(props)
+
+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 })
+    }
+  }
+})
+
+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) {
+  }
+}
+</script>

package/components/Loading.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-row justify="center">
+    <v-col cols="12" class="ma-3">
+      <v-card class="card" loading elevation="5">
+        <v-card-title class="text-center">
+          Cloud instance is 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.
+          <br>
+          This is aligned with an energy sobriety strategy. So be patient
+          <v-icon color="primary" size="20">
+            mdi-emoticon-excited-outline
+          </v-icon>
+          <br>
+        </v-card-text>
+      </v-card>
+    </v-col>
+  </v-row>
+</template>

package/components/ObjectSelector.vue

@@ -0,0 +1,66 @@
+<template>
+  <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-tooltip activator="parent" location="bottom">
+          {{ geode_objects[object].tooltip }}
+        </v-tooltip>
+      </v-card>
+    </v-col>
+  </v-row>
+  <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
+      </v-card-text>
+    </v-card>
+  </v-row>
+</template>
+
+<script setup>
+import geode_objects from '@/assets/geode_objects'
+
+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 { variable_to_update, variable_to_increment } = props
+
+const allowed_objects = ref([])
+
+async function get_allowed_objects () {
+
+  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()
+})
+
+
+</script>
+
+<style scoped>
+.card {
+  border-radius: 15px;
+}
+</style>

package/components/PackagesVersions.vue

@@ -0,0 +1,54 @@
+<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>
+const props = defineProps({
+  route_prefix: { type: String, required: true }
+})
+const { route_prefix } = props
+
+const cloud_store = use_cloud_store()
+const { is_cloud_running } = storeToRefs(cloud_store)
+
+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
+    }
+  })
+}
+
+watch(is_cloud_running, (value) => {
+  if (value === true) {
+    get_packages_versions()
+  }
+})
+
+onMounted(() => {
+  if (is_cloud_running.value === true) {
+    get_packages_versions()
+  }
+})
+
+onActivated(() => {
+  if (is_cloud_running.value === true) {
+    get_packages_versions()
+  }
+})
+</script>

package/components/RemoteRenderingView.client.vue

@@ -0,0 +1,88 @@
+<template>
+  <div style="position: relative;">
+    <view-toolbar />
+    <v-col v-element-size="resize" style="overflow: hidden; position: relative; z-index: 0; height: 100%; width: 100%"
+      ref="viewer" @click="get_x_y" @keydown.esc="app_store.toggle_picking_mode(false)">
+    </v-col>
+  </div>
+</template>
+
+<script setup>
+import vtkRemoteView from '@kitware/vtk.js/Rendering/Misc/RemoteView';
+import { useElementSize } from '@vueuse/core'
+
+const viewer_store = use_viewer_store()
+const { picking_mode } = storeToRefs(viewer_store)
+const websocket_store = use_websocket_store()
+const { client, is_client_created } = storeToRefs(websocket_store)
+
+function get_x_y(event) {
+  if (picking_mode.value === true) {
+    const { offsetX, offsetY } = event
+    viewer_store.set_picked_point(offsetX, offsetY)
+  }
+}
+
+const props = defineProps({
+  viewId: { type: String, default: '-1' }
+})
+
+const viewer = ref(null)
+const { width, height } = useElementSize(viewer)
+
+function resize() {
+  view.getCanvasView().setSize(1, 1)
+  view.resize();
+}
+
+watch(picking_mode, value => {
+  const cursor = value == true ? 'crosshair' : 'pointer'
+  view.getCanvasView().setCursor(cursor)
+})
+watch(width, value => {
+  resize()
+})
+watch(height, value => {
+  resize()
+})
+const { viewId } = toRefs(props)
+const connected = ref(false)
+
+const view = vtkRemoteView.newInstance({ rpcWheelEvent: 'viewport.mouse.zoom.wheel' })
+// default of 0.5 causes 2x size labels on high-DPI screens. 1 good for demo, not for production.
+if (location.hostname.split('.')[0] === 'localhost') {
+  view.setInteractiveRatio(1)
+}
+
+
+watch(client, (new_client) => {
+  connect()
+})
+
+watch(viewId, (id) => {
+  if (connected.value) {
+    view.setViewId(id)
+    view.render()
+  }
+})
+
+onMounted(async () => {
+  if (process.client) {
+    window.addEventListener('resize', resize)
+    await nextTick()
+    view.setContainer(viewer.value.$el)
+    connect()
+    resize()
+  }
+})
+
+function connect() {
+  if (!is_client_created.value) { return }
+  console.log('connecting', client.value)
+  const session = client.value.getConnection().getSession()
+  view.setSession(session)
+  view.setViewId(viewId.value)
+  connected.value = true
+  view.render()
+}
+</script>