Merge pull request #36 from Geode-solutions/next

Next

Author: JulienChampagnol

components/Launcher.vue

@@ -22,11 +22,7 @@ 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)
+const site_key = useRuntimeConfig().public.RECAPTCHA_SITE_KEY
 
 watch(is_captcha_validated, async (value) => {
   if (value === true && process.client) {
@@ -44,7 +40,7 @@ onMounted(() => {
   }
 })
 
-async function submit_recaptcha(token) {
+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 })

components/RemoteRenderingView.client.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="position: relative; ">
+  <div style="position: relative; width: 100%; height: 100%;">
     <view-toolbar />
     <v-col 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)" class="pa-0">

components/ViewToolbar.vue

@@ -1,30 +1,34 @@
 <template>
-    <v-row dense :class="[$style.floatToolbar, 'flex-column']">
-        <v-col>
-            <v-tooltip location="left">
-                Reset camera
-                <template #activator="{ props }">
-                    <v-btn @click.stop=reset_camera icon="mdi-crop-free" density="comfortable" v-bind="props" />
-                </template>
-            </v-tooltip>
-        </v-col>
-    </v-row>
+  <v-row dense :class="[$style.floatToolbar, 'flex-column']">
+    <v-col>
+      <v-tooltip location="left">
+        Reset camera
+        <template #activator="{ props }">
+          <v-btn @click.stop=reset_camera density="comfortable" v-bind="props" icon>
+            <v-icon size="32">
+              mdi-cube-scan
+            </v-icon>
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup>
 const viewer_store = use_viewer_store()
-function reset_camera() {
-    viewer_store.reset_camera()
+function reset_camera () {
+  viewer_store.reset_camera()
 }
 </script>
 
 <style module>
 .floatToolbar {
-    position: absolute;
-    z-index: 2;
-    right: 20px;
-    top: 20px;
-    background-color: rgba(0, 0, 0, 0.4);
-    border-radius: 16px;
+  position: absolute;
+  z-index: 2;
+  right: 20px;
+  top: 20px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 16px;
 }
 </style>

components/Wrapper.vue

@@ -5,7 +5,7 @@
         <Header :tool_name="tool_name" :cards_list="cards_list" />
       </v-col>
       <v-col v-if="!is_cloud_running">
-        <Launcher :site_key="site_key" />
+        <Launcher />
       </v-col>
       <v-col v-if="is_cloud_running">
         <Stepper />
@@ -23,9 +23,8 @@ const { is_cloud_running } = storeToRefs(cloud_store)
 
 const props = defineProps({
   cards_list: { type: Array, required: true },
-  site_key: { type: String, required: true }
 })
-const { cards_list, site_key } = props
+const { cards_list } = props
 
 const stepper_tree = inject('stepper_tree')
 const { tool_name, route_prefix } = stepper_tree

stores/cloud.js

@@ -1,8 +1,9 @@
 import { defineStore } from 'pinia'
+import { useStorage } from '@vueuse/core'
 
 export const use_cloud_store = defineStore('cloud', {
   state: () => ({
-    ID: '',
+    ID: useStorage('ID', ''),
     is_captcha_validated: false,
     is_cloud_running: false,
     is_connexion_launched: false,
@@ -31,14 +32,12 @@ export const use_cloud_store = defineStore('cloud', {
     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') {
+      if (this.ID === '' || this.ID === null || typeof this.ID === 'undefined') {
         return this.create_backend()
       } else {
         const { data, error } = await useFetch(`${this.geode_url}/ping`, { method: 'POST' })
         console.log("error", error)
         if (data.value !== null) {
-          this.ID = ID
           this.is_cloud_running = true
           return this.ping_task()
         } else {

stores/viewer.js

@@ -10,7 +10,7 @@ export const use_viewer_store = defineStore('viewer', {
       this.picking_mode = value
     },
     async set_picked_point (x, y) {
-      const response = await get_point_position({ x, y })
+      const response = await this.get_point_position({ x, y })
       const { x: world_x, y: world_y } = response
       this.picked_point.x = world_x
       this.picked_point.y = world_y