@geode/opengeodeweb-front 10.8.0-rc.2 → 10.8.0

package/app/components/Launcher.vue

@@ -4,6 +4,13 @@ import Recaptcha from "@ogw_front/components/Recaptcha";
 import { Status } from "@ogw_front/utils/status";
 import { useInfraStore } from "@ogw_front/stores/infra";
 
+const { logo } = defineProps({
+  logo: {
+    type: String,
+    required: true,
+  },
+});
+
 const infraStore = useInfraStore();
 
 watch(
@@ -29,7 +36,7 @@ watch(
         <Recaptcha :button_color="'secondary'" />
       </v-col>
       <v-col v-else-if="infraStore.status == Status.CREATING">
-        <Loading />
+        <Loading :logo="logo" />
       </v-col>
     </v-row>
   </v-container>

package/app/components/Loading/EcoMessages.vue

@@ -0,0 +1,77 @@
+<script setup>
+const ecoMessages = [
+  {
+    icon: "mdi-leaf",
+    title: "Why the wait?",
+    message: "Your workspace starts on demand, no idle servers running 24/7.",
+  },
+  {
+    icon: "mdi-lightning-bolt-outline",
+    title: "Lower carbon footprint",
+    message: "On-demand computing uses up to 70% less energy than always-on servers.",
+  },
+  {
+    icon: "mdi-earth",
+    title: "Your choice matters",
+    message: "By using Vease, you're part of a more sustainable way to work with data.",
+  },
+];
+
+const MESSAGE_INTERVAL_MS = 3000;
+const currentMessage = ref(0);
+let interval = undefined;
+
+onMounted(() => {
+  interval = setInterval(() => {
+    currentMessage.value = (currentMessage.value + 1) % ecoMessages.length;
+  }, MESSAGE_INTERVAL_MS);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+
+<template>
+  <v-sheet color="transparent" height="160" class="position-relative overflow-visible mb-4">
+    <v-scroll-y-reverse-transition mode="out-in">
+      <v-card
+        :key="currentMessage"
+        rounded="lg"
+        class="pa-6 border mx-auto"
+        color="rgba(255, 255, 255, 0.05)"
+        elevation="0"
+        style="border-color: rgba(255, 255, 255, 0.1) !important"
+      >
+        <v-card-title
+          class="d-flex align-center ga-3 pa-0 mb-3 text-subtitle-1 font-weight-bold text-white text-wrap"
+        >
+          <v-icon
+            :icon="ecoMessages[currentMessage].icon"
+            color="white"
+            size="22"
+            style="filter: drop-shadow(0 0 6px rgba(var(--v-theme-primary), 0.6))"
+          />
+          {{ ecoMessages[currentMessage].title }}
+        </v-card-title>
+        <v-card-text
+          class="pa-0 text-body-2 text-white text-left"
+          style="opacity: 0.85; line-height: 1.7"
+        >
+          {{ ecoMessages[currentMessage].message }}
+        </v-card-text>
+      </v-card>
+    </v-scroll-y-reverse-transition>
+
+    <v-row justify="center" class="ga-3 mt-6">
+      <v-icon
+        v-for="(_, index) in ecoMessages"
+        :key="index"
+        size="10"
+        :color="index <= currentMessage ? 'white' : 'white'"
+        :icon="index === currentMessage ? 'mdi-circle' : 'mdi-circle-outline'"
+        :style="{ opacity: index <= currentMessage ? 1 : 0.25 }"
+      />
+    </v-row>
+  </v-sheet>
+</template>

package/app/components/Loading/Footer.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-card
+    color="transparent"
+    elevation="0"
+    class="mt-8 d-flex align-center justify-center ga-2 text-white"
+    style="opacity: 0.6; letter-spacing: 0.08em"
+  >
+    <v-icon icon="mdi-leaf" size="14" />
+    <v-card-text class="pa-0 text-caption font-weight-medium" style="flex: none">
+      On-demand infrastructure greener by design
+    </v-card-text>
+  </v-card>
+</template>

package/app/components/Loading/Header.vue

@@ -0,0 +1,41 @@
+<script setup>
+const { logo } = defineProps({
+  logo: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <v-row justify="center" class="mb-8">
+    <v-img
+      :src="logo"
+      height="180"
+      width="180"
+      style="filter: drop-shadow(0 0 20px rgba(var(--v-theme-primary), 0.4))"
+    />
+  </v-row>
+
+  <v-card color="transparent" elevation="0" class="mb-8 overflow-visible">
+    <v-card-title
+      class="text-h2 font-weight-black text-white text-wrap pa-0 d-block"
+      style="text-shadow: 0 0 20px rgba(255, 255, 255, 0.3)"
+    >
+      STARTING UP
+    </v-card-title>
+    <v-divider thickness="3" class="border-opacity-100 mx-auto my-4" color="primary" width="60" />
+    <v-card-subtitle
+      class="text-subtitle-2 font-weight-bold text-white ls-widest pa-0 text-wrap"
+      style="opacity: 0.9"
+    >
+      YOUR WORKSPACE IS WAKING UP...
+    </v-card-subtitle>
+  </v-card>
+</template>
+
+<style scoped>
+.ls-widest {
+  letter-spacing: 0.6em !important;
+}
+</style>

package/app/components/Loading/Progress.vue

@@ -0,0 +1,26 @@
+<script setup>
+const { progress } = defineProps({
+  progress: {
+    type: Number,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <v-progress-linear
+    color="white"
+    height="10"
+    indeterminate
+    rounded
+    bg-color="white"
+    bg-opacity="0.15"
+    class="custom-progress-glow mt-8"
+  />
+</template>
+
+<style scoped>
+.custom-progress-glow :deep(.v-progress-linear__indeterminate) {
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+}
+</style>

package/app/components/Loading.vue

@@ -1,82 +1,78 @@
 <script setup>
-import chemin from "@ogw_front/assets/img/energy_sobriety/chemin.png";
-import collegue from "@ogw_front/assets/img/energy_sobriety/collegue.png";
-import derniere from "@ogw_front/assets/img/energy_sobriety/derniere.png";
-import etincelle from "@ogw_front/assets/img/energy_sobriety/etincelle.png";
-import geste from "@ogw_front/assets/img/energy_sobriety/geste.png";
-import lampadaire from "@ogw_front/assets/img/energy_sobriety/lampadaire.png";
-import salon from "@ogw_front/assets/img/energy_sobriety/salon.png";
-import sobene from "@ogw_front/assets/img/energy_sobriety/sobene.png";
-import socle from "@ogw_front/assets/img/energy_sobriety/socle.png";
-import vert from "@ogw_front/assets/img/energy_sobriety/vert.png";
-import ying_yang from "@ogw_front/assets/img/energy_sobriety/ying_yang.png";
+const { logo } = defineProps({
+  logo: {
+    type: String,
+    default: "",
+  },
+});
 
-import Carousel from "@ogw_front/components/Carousel";
+const show = ref(false);
+const progress = ref(0);
 
-const users_list = [
-  {
-    name: "YING YANG",
-    logo: ying_yang,
-  },
-  {
-    name: "CHEMIN",
-    logo: chemin,
-  },
-  {
-    name: "SOBRIETE ENERGETIQUE",
-    logo: sobene,
-  },
-  {
-    name: "VERT",
-    logo: vert,
-  },
-  {
-    name: "LAMPADAIRE",
-    logo: lampadaire,
-  },
-  {
-    name: "COLLEGUE",
-    logo: collegue,
-  },
-  {
-    name: "ETINCELLE",
-    logo: etincelle,
-  },
-  {
-    name: "GESTE",
-    logo: geste,
-  },
-  {
-    name: "SOCLE",
-    logo: socle,
-  },
-  {
-    name: "DERNIERE",
-    logo: derniere,
-  },
-  {
-    name: "SALON",
-    logo: salon,
-  },
-];
+let progressInterval = undefined;
+
+const PROGRESS_THRESHOLD = 90;
+const MAX_PROGRESS = 99;
+const PROGRESS_INCREMENT_SCALE = 5;
+const UPDATE_INTERVAL_MS = 500;
+const SLOW_INCREMENT = 0.5;
+
+onMounted(() => {
+  show.value = true;
+  progressInterval = setInterval(() => {
+    if (progress.value < PROGRESS_THRESHOLD) {
+      progress.value += Math.random() * PROGRESS_INCREMENT_SCALE;
+    } else if (progress.value < MAX_PROGRESS) {
+      progress.value += SLOW_INCREMENT;
+    }
+  }, UPDATE_INTERVAL_MS);
+});
+
+onUnmounted(() => {
+  if (progressInterval) {
+    clearInterval(progressInterval);
+  }
+});
 </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>
+  <div v-bind="$attrs">
+    <Teleport to="body">
+      <div
+        v-if="show"
+        class="d-flex align-center justify-center transition-swing"
+        style="
+          position: fixed;
+          inset: 0;
+          width: 100vw;
+          height: 100vh;
+          background: rgba(0, 0, 0, 0.45);
+          backdrop-filter: blur(10px);
+          z-index: 2400;
+          pointer-events: auto;
+        "
+      >
+        <div
+          style="
+            position: absolute;
+            inset: 0;
+            background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 0);
+            background-size: 40px 40px;
+            background-position: center;
+            pointer-events: none;
+          "
+        />
+
+        <div
+          class="d-flex flex-column align-center text-center"
+          style="max-width: 650px; width: 100%; padding: 0 24px; gap: 1.5rem"
+        >
+          <LoadingHeader :logo="logo" />
+          <LoadingEcoMessages />
+          <LoadingProgress :progress="progress" />
+          <LoadingFooter />
+        </div>
+      </div>
+    </Teleport>
+  </div>
 </template>

package/app/components/Viewer/Ui.vue

@@ -0,0 +1,47 @@
+<script setup>
+import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
+import ViewerTreeObjectTree from "@ogw_front/components/Viewer/Tree/ObjectTree";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const { id, displayMenu, menuStore, containerWidth, containerHeight, dataStyleStore, viewerStore } =
+  defineProps({
+    id: { type: String, required: true },
+    displayMenu: { type: Boolean, required: true },
+    menuStore: { type: Object, required: true },
+    containerWidth: { type: Number, required: true },
+    containerHeight: { type: Number, required: true },
+    dataStyleStore: { type: Object, required: true },
+    viewerStore: { type: Object, required: true },
+  });
+
+const emit = defineEmits(["show-menu", "set-id"]);
+
+async function get_viewer_id(x, y) {
+  const ids = Object.keys(dataStyleStore.styles);
+  await viewerStore.request(
+    viewer_schemas.opengeodeweb_viewer.viewer.picked_ids,
+    { x, y, ids },
+    {
+      response_function: (response) => {
+        const { array_ids } = response;
+        const [first_id] = array_ids;
+        emit("set-id", first_id);
+      },
+    },
+  );
+}
+
+defineExpose({ get_viewer_id });
+</script>
+
+<template>
+  <ViewerTreeObjectTree @show-menu="(args) => emit('show-menu', args)" />
+  <ViewerContextMenu
+    v-if="displayMenu"
+    :id="menuStore.current_id || id"
+    :x="menuStore.menuX"
+    :y="menuStore.menuY"
+    :container-width="containerWidth"
+    :container-height="containerHeight"
+  />
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.8.0-rc.2",
+  "version": "10.8.0",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "next",
-    "@geode/opengeodeweb-viewer": "next",
+    "@geode/opengeodeweb-back": "latest",
+    "@geode/opengeodeweb-viewer": "latest",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",
     "@pinia/nuxt": "0.11.3",
@@ -60,7 +60,6 @@
     "sass": "1.87.0",
     "semver": "7.7.1",
     "uuid": "11.1.0",
-    "vue3-carousel": "0.3.4",
     "vuetify": "3.10.11",
     "vuetify-nuxt-module": "0.18.7",
     "ws": "8.18.3",

package/app/components/Carousel.vue

@@ -1,89 +0,0 @@
-<script setup>
-// oxlint-disable-next-line import/no-unassigned-import
-import "vue3-carousel/dist/carousel.css";
-import { Carousel, Navigation, Pagination, Slide } from "vue3-carousel";
-import { useDisplay } from "vuetify";
-
-const NB_ITEMS_TO_DISPLAY = 3;
-
-const { items } = defineProps({
-  items: { type: Array, required: true },
-});
-
-const { name } = useDisplay();
-const nb_items_to_display = ref(NB_ITEMS_TO_DISPLAY);
-watch(
-  name,
-  (value) => {
-    switch (value) {
-      case "xs": {
-        nb_items_to_display.value = 1;
-        break;
-      }
-      case "sm": {
-        nb_items_to_display.value = 2;
-        break;
-      }
-      default: {
-        nb_items_to_display.value = 3;
-        break;
-      }
-    }
-  },
-  {
-    immediate: true,
-  },
-);
-
-const carrousel_settings = reactive({
-  autoplay: 2000,
-  itemsToShow: nb_items_to_display.value,
-  itemsToScroll: 1,
-  pauseAutoplayOnHover: true,
-  transition: 1000,
-  wrapAround: true,
-});
-</script>
-
-<template>
-  <ClientOnly>
-    <Carousel :settings="carrousel_settings">
-      <Slide v-for="(item, index) in items" :key="index" class="carousel__slide">
-        <a :href="item.url" target="_blank">
-          <img :src="item.logo" class="carousel__item" />
-        </a>
-      </Slide>
-      <template #addons>
-        <Navigation />
-        <Pagination />
-      </template>
-    </Carousel>
-  </ClientOnly>
-</template>
-
-<style scoped>
-.carousel__item {
-  min-height: 200px;
-  width: 100%;
-  background-color: var(--vc-clr-white);
-  color: var(--vc-clr-white);
-  font-size: 20px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.carousel__slide {
-  display: flex;
-  padding: 15px;
-  align-items: center;
-  justify-content: center;
-}
-
-.carousel__prev,
-.carousel__next {
-  box-sizing: content-box;
-  border: 5px solid red;
-}
-</style>