@geode/opengeodeweb-front 0.0.1 → 0.0.2

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,58 @@
+<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>
+import geode_objects from '@assets/geode_objects';
+
+const props = defineProps({
+  geode_object: { type: String, required: true, validator (value) { return geode_objects.keys().includes(value) } },
+  route_prefix: { type: String, required: true },
+  variable_to_update: { type: String, required: true },
+  variable_to_increment: { type: String, required: true },
+})
+
+const { geode_object, route_prefix, 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) {
+  const stepper_tree = inject('stepper_tree')
+  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,47 @@
+<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 props = defineProps({
+  multiple: { type: Boolean, required: true },
+  label: { type: String, required: true },
+  route_prefix: { type: String, required: true },
+  variable_to_update: { type: String, required: true },
+  variable_to_increment: { type: String, required: true },
+
+})
+const { multiple, label, route_prefix, variable_to_update, variable_to_increment } = props.component_options
+
+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/ObjectSelector.vue

@@ -0,0 +1,67 @@
+<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>
+    <v-card class="card ma-2" 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 props = defineProps({
+  geode_object: { type: String, required: true, validator (value) { return geode_objects.keys().includes(value) } },
+  route_prefix: { type: String, required: true },
+  files: { type: Array, required: true },
+  variable_to_update: { type: String, required: true },
+  variable_to_increment: { type: String, required: true },
+})
+
+const { geode_objects, route_prefix, files } = 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) {
+  const stepper_tree = inject('stepper_tree')
+  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,55 @@
+<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 { tool_route } = props
+
+const { is_cloud_running } = storeToRefs(cloud_store)
+
+
+const packages_versions = ref([])
+
+async function get_packages_versions () {
+  const route = `${tool_route}/versions`
+  await api_fetch(route, { 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/package.json

@@ -17,7 +17,7 @@
     "vue": "latest"
   },
   "description": "OpenSource Vue/Vuetify framework for web applications",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "index.js",
   "dependencies": {
     "@mdi/font": "^7.2.96",

package/plugins/vuetify.js

@@ -0,0 +1,45 @@
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import { VDataTable } from 'vuetify/labs/VDataTable'
+import * as directives from 'vuetify/directives'
+
+import '@mdi/font/css/materialdesignicons.css'
+import colors from 'vuetify/lib/util/colors'
+import 'vuetify/styles'
+
+const light_theme = {
+  dark: false,
+  colors: {
+    background: '#FFFFFF',
+    primary: colors.teal.darken1,
+    secondary: colors.teal.lighten4,
+    accent: colors.amber.accent4,
+    error: colors.red.lighten2,
+    info: colors.yellow.accent4,
+    success: colors.green.accent4,
+    warning: colors.orange.accent4,
+  }
+}
+
+export default defineNuxtPlugin(nuxtApp => {
+  const vuetify = createVuetify({
+    components: {
+      ...components,
+      VDataTable,
+    },
+    directives,
+    theme: {
+      defaultTheme: 'light_theme',
+      themes: {
+        light_theme,
+      }
+    },
+    defaultAssets: false,
+    icons: {
+      defaultSet: 'mdi'
+    },
+    ssr: true
+  })
+
+  nuxtApp.vueApp.use(vuetify)
+})

package/stores/cloud.js

@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia'
+import { use_errors_store } from './errors'
+
+export const use_cloud_store = defineStore('cloud', {
+  state: () => ({
+    ID: '',
+    is_captcha_validated: false,
+    is_cloud_running: false,
+    is_connexion_launched: false,
+    request_counter: 0
+  }),
+  actions: {
+    async create_connexion () {
+      if (this.is_connexion_launched) { return }
+      this.is_connexion_launched = true
+      const ID = localStorage.getItem('ID')
+      if (ID === null || typeof ID === 'undefined') {
+        return this.create_backend()
+      } else {
+        const config = useRuntimeConfig()
+        const { data, error } = await useFetch(`${config.public.API_URL}/${ID}/ping`, { method: 'POST' })
+        console.log("error", error)
+        if (data.value !== null) {
+          this.ID = ID
+          this.is_cloud_running = true
+          return this.ping_task()
+        } else {
+          return this.create_backend()
+        }
+      }
+    },
+    async create_backend () {
+      const errors_store = use_errors_store()
+      const config = useRuntimeConfig()
+      const { data, error } = await useFetch(`${config.public.API_URL}${config.public.SITE_BRANCH}/tools/createbackend`, { method: 'POST' })
+      if (data.value !== null) {
+        this.ID = data.value.ID
+        localStorage.setItem('ID', data.value.ID)
+        this.is_cloud_running = true
+        return this.ping_task()
+      } else {
+        console.log("error : ", error)
+        errors_store.server_error = true
+      }
+    },
+
+    ping_task () {
+      setInterval(() => this.do_ping(), 10 * 1000)
+    },
+    async do_ping () {
+      const errors_store = use_errors_store()
+      const config = useRuntimeConfig()
+      const { data, error } = await useFetch(`${config.public.API_URL}/${this.ID}/ping`, { method: 'POST' })
+      if (data.value !== null) {
+        this.is_cloud_running = true
+      } else {
+        errors_store.server_error = true
+        console.log("error : ", error)
+      }
+    },
+
+    mutations: {
+      start_request (state) {
+        state.request_counter++
+      },
+      stop_request (state) {
+        state.request_counter--
+      }
+    }
+  }
+})

package/stores/errors.js

@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia'
+
+export const use_errors_store = defineStore('errors', {
+  state: () => ({
+    errors: [],
+    server_error: false,
+  }),
+  actions: {
+    add_error (error_object) {
+      this.errors.push(error_object)
+      console.log(this.errors)
+    },
+    delete_error (error_index) {
+      this.errors.splice(error_index, 1)
+    },
+    delete_server_error () {
+      this.server_error = false
+    }
+  }
+})