@eodash/eodash 5.0.0-alpha.2.5 → 5.0.0-alpha.2.7

package/core/client/eodash.js

@@ -1,14 +1,14 @@
 import { reactive } from "vue";
 import { currentUrl } from "./store/States";
-
 /**
- * Reactive Edoash Instance Object. provided globally in the app,
- * and used as an intermediate object to make user defined instances config reactive.
+ * Reactive Edoash Instance Object. provided globally in the app, and used as an
+ * intermediate object to make user defined instances config reactive.
+ *
  * @type {import("./types").Eodash}
  */
 export const eodash = reactive({
   id: "demo",
-  stacEndpoint: "https://esa-eodash.github.io/RACE-catalog/RACE/catalog.json",
+  stacEndpoint: "https://gtif-cerulean.github.io/catalog/cerulean/catalog.json",
   brand: {
     noLayout: true,
     name: "Demo",
@@ -33,9 +33,9 @@ export const eodash = reactive({
           class: "align-self-center justify-self-center",
           size: "120",
           speed: "2.5",
-          color: "#004170"
-        }
-      }
+          color: "#004170",
+        },
+      },
     },
     background: {
       id: Symbol(),
@@ -56,43 +56,61 @@ export const eodash = reactive({
       },
       {
         defineWidget: (selectedSTAC) => {
-          return selectedSTAC ? {
-            id: "Information",
-            title: "Information",
-            layout: { x: 9, y: 0, w: 3, h: 12 },
-            type: "web-component",
-            widget: {
-              link: async () => await import("@eox/stacinfo"),
-              properties: {
-                for: currentUrl,
-                allowHtml: "true",
-                styleOverride:
-                  "#properties li > .value {font-weight: normal !important;}",
-                header: "[]",
-
-                subheader: "[]",
-                properties: '["description"]',
-                featured: "[]",
-                footer: "[]",
-              },
-              tagName: "eox-stacinfo",
-            }
-          } : null
-        }
+          return selectedSTAC
+            ? {
+                id: "Information",
+                title: "Information",
+                layout: { x: 9, y: 0, w: 3, h: 12 },
+                type: "web-component",
+                widget: {
+                  link: async () => await import("@eox/stacinfo"),
+                  properties: {
+                    for: currentUrl,
+                    allowHtml: "true",
+                    styleOverride:
+                      "#properties li > .value {font-weight: normal !important;}",
+                    header: "[]",
+                    subheader: "[]",
+                    properties: '["description"]',
+                    featured: "[]",
+                    footer: "[]",
+                  },
+                  tagName: "eox-stacinfo",
+                },
+              }
+            : null;
+        },
       },
       {
         defineWidget: (selectedSTAC) => {
-          return selectedSTAC ? {
-            id: "Datepicker",
-            type: "internal",
-            layout: { x: 5, y: 10, w: 1, h: 1 },
-            title: "Datepicker",
-            widget: {
-              name: "EodashDatePicker",
-            },
-          } : null
-        }
-      }
+          return selectedSTAC
+            ? {
+                id: "Datepicker",
+                type: "internal",
+                layout: { x: 5, y: 10, w: 1, h: 1 },
+                title: "Datepicker",
+                widget: {
+                  name: "EodashDatePicker",
+                },
+              }
+            : null;
+        },
+      },
+      {
+        defineWidget: (selected) => {
+          return selected
+            ? {
+                id: Symbol(),
+                layout: { x: 8, y: 0, w: 1, h: 1 },
+                title: "Buttons",
+                type: "internal",
+                widget: {
+                  name: "EodashMapBtns",
+                },
+              }
+            : null;
+        },
+      },
     ],
   },
 });

package/core/client/main.js

@@ -1,2 +1,2 @@
-export { createEodash } from '@/composables/DefineEodash';
-export { default as store } from "@/store"
+export { createEodash } from "@/composables/DefineEodash";
+export { default as store } from "@/store";

package/core/client/plugins/index.js

@@ -1,19 +1,18 @@
-import vuetify from './vuetify';
-import { createPinia } from 'pinia';
-import eodash from '@/eodash';
-import VCalendar from 'v-calendar';
-import { eodashKey } from '@/utils/keys';
-import store from '../store';
+import vuetify from "./vuetify";
+import { createPinia } from "pinia";
+import eodash from "@/eodash";
+import VCalendar from "v-calendar";
+import { eodashKey } from "@/utils/keys";
+import store from "../store";
 
 export const pinia = createPinia();
 
-/**
- * @param {import('vue').App} app
- */
+/** @param {import("vue").App} app */
 export function registerPlugins(app) {
   window.eodashStore = store;
 
-  app.use(vuetify)
+  app
+    .use(vuetify)
     .use(pinia)
     // Use plugin with optional defaults
     .use(VCalendar, {})

package/core/client/plugins/vuetify.js

@@ -1,15 +1,14 @@
 /**
- * plugins/vuetify.ts
+ * Plugins/vuetify.ts
  *
  * Framework documentation: https://vuetifyjs.com`
  */
 
 // Styles
-import 'vuetify/styles';
+import "vuetify/styles";
 
-
-import { createVuetify } from 'vuetify';
-import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js"
+import { createVuetify } from "vuetify";
+import { mdiChevronLeft, mdiChevronRight, mdiMenuDown } from "@mdi/js";
 
 const vuetify = createVuetify({
   icons: {
@@ -17,7 +16,7 @@ const vuetify = createVuetify({
       // mapping v-date-picker and v-tabs default icons to `@mdi/js`
       next: [mdiChevronRight],
       prev: [mdiChevronLeft],
-      subgroup: [mdiMenuDown]
+      subgroup: [mdiMenuDown],
     },
   },
   theme: {
@@ -25,12 +24,12 @@ const vuetify = createVuetify({
       dashboardTheme: {},
       light: {
         colors: {
-          primary: '#1867C0',
-          secondary: '#5CBBF6',
+          primary: "#1867C0",
+          secondary: "#5CBBF6",
         },
       },
     },
   },
-})
+});
 
-export default vuetify
+export default vuetify;

package/core/client/render.js

@@ -1,13 +1,12 @@
-import { registerPlugins } from '@/plugins';
+import { registerPlugins } from "@/plugins";
 // Components
-import App from './App.vue';
+import App from "./App.vue";
 
 // Composables
-import { createApp } from 'vue';
-
+import { createApp } from "vue";
 
 const app = createApp(App);
 
 registerPlugins(app);
 
-app.mount('#app');
+app.mount("#app");

package/core/client/store/Actions.js

@@ -0,0 +1,8 @@
+/**
+ * Returns the current layers of the `eox-map`
+ * @param {string} [el="eox-map"] - `eox-map` element selector
+ * @returns {object[]}
+ */
+export const getLayers = (el = "eox-map") =>
+  //@ts-expect-error layers doesn't exist on type element
+  document.querySelector(el)?.layers.toReversed();

package/core/client/store/States.js

@@ -1,21 +1,16 @@
 import { ref } from "vue";
 
-/**
- * currently selected STAC endpoint
- */
-export const currentUrl = ref('');
-/**
- * currently selected datetime
- */
+/** Currently selected STAC endpoint */
+export const currentUrl = ref("");
+/** Currently selected datetime */
 export const datetime = ref(new Date().toISOString());
 
-/**
- * Currently selected indicator
- */
-export const indicator = ref("")
+/** Currently selected indicator */
+export const indicator = ref("");
 
 /**
  * Current map position
- * @type {import("vue").Ref<(number|undefined)[]>}
+ *
+ * @type {import("vue").Ref<(number | undefined)[]>}
  */
-export const mapPosition = ref([])
+export const mapPosition = ref([]);

package/core/client/store/index.js

@@ -1,17 +1,20 @@
 //export all actions, states, and pinia stores
 
-const storesImport = import.meta.glob('../store/**.js', { eager: true })
+const storesImport = import.meta.glob("../store/**.js", { eager: true });
 
-const store = /** @type {import("@/types").EodashStore} */((() => {
-  const stores = {}
-  for (const [filePath, importedstore] of Object.entries(storesImport)) {
-    const storeType = filePath.split('/').at(-1)?.slice(0, -3).toLowerCase() ?? ''
-    if (!['keys'].includes(storeType)) {
-      //@ts-expect-error
-      stores[storeType] = importedstore;
+const store = /** @type {import("@/types").EodashStore} */ (
+  (() => {
+    const stores = {};
+    for (const [filePath, importedstore] of Object.entries(storesImport)) {
+      const storeType =
+        filePath.split("/").at(-1)?.slice(0, -3).toLowerCase() ?? "";
+      if (!["keys"].includes(storeType)) {
+        //@ts-expect-error `importedstore` cant be typed individually
+        stores[storeType] = importedstore;
+      }
     }
-  }
-  return stores;
-})());
+    return stores;
+  })()
+);
 
 export default store;

package/core/client/store/stac.js

@@ -1,66 +1,80 @@
-import { defineStore } from 'pinia';
-import { inject, ref } from 'vue';
-import axios from 'axios';
-import { useAbsoluteUrl } from '@/composables/index';
-import { eodashKey } from '@/utils/keys';
-import { indicator } from '@/store/States';
+import { defineStore } from "pinia";
+import { inject, ref } from "vue";
+import axios from "axios";
+import { useAbsoluteUrl } from "@/composables/index";
+import { eodashKey } from "@/utils/keys";
+import { indicator } from "@/store/States";
 
-export const useSTAcStore = defineStore('stac', () => {
+export const useSTAcStore = defineStore("stac", () => {
   /**
-   * links of the root STAC catalog
-   * @type {import("vue").Ref<import('stac-ts').StacLink[]|null>}
+   * Links of the root STAC catalog
+   *
+   * @type {import("vue").Ref<import("stac-ts").StacLink[] | null>}
    */
   const stac = ref(null);
 
   /**
-   * selected STAC object.
-   * @type {import('vue').Ref<import('stac-ts').StacCatalog |
-   *  import('stac-ts').StacCollection |import('stac-ts').StacItem
-   * | null>}
+   * Selected STAC object.
+   *
+   * @type {import("vue").Ref<
+   *   | import("stac-ts").StacCatalog
+   *   | import("stac-ts").StacCollection
+   *   | import("stac-ts").StacItem
+   *   | null
+   * >}
    */
   const selectedStac = ref(null);
 
-
-  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
 
   /**
-   * fetches root stac catalog and assign it to `stac`
+   * Fetches root stac catalog and assign it to `stac`
+   *
    * @async
-   * @param {import("@/types").StacEndpoint} [url = eodash.stacEndpoint]
+   * @param {import("@/types").StacEndpoint} [url=eodash.stacEndpoint] Default
+   *   is `eodash.stacEndpoint`
    * @returns {Promise<void>}
    * @see {@link stac}
    */
   async function loadSTAC(url = eodash.stacEndpoint) {
-    await axios.get(url).then(resp => {
-      const links = /** @type {import('stac-ts').StacCatalog} */(resp.data).links.map(link => {
-        if (!link.title) {
-          link.title = `${link.rel} ${link.href}`
-        }
-        return link
+    await axios
+      .get(url)
+      .then((resp) => {
+        const links = /** @type {import("stac-ts").StacCatalog} */ (
+          resp.data
+        ).links.map((link) => {
+          if (!link.title) {
+            link.title = `${link.rel} ${link.href}`;
+          }
+          return link;
+        });
+        stac.value = links;
       })
-      stac.value = links;
-    }).catch(err => {
-      throw new Error("error loading assigned STAC endpoint", err)
-    });
+      .catch((err) => {
+        throw new Error("error loading assigned STAC endpoint", err);
+      });
   }
 
   /**
-   * fetches selected stac object and assign it to `selectedStac`
+   * Fetches selected stac object and assign it to `selectedStac`
+   *
    * @async
-   * @param {string} relativePath - stac link href
+   * @param {string} relativePath - Stac link href
    * @returns {Promise<void>}
    * @see {@link selectedStac}
    */
-  async function loadSelectedSTAC(relativePath = '') {
-
+  async function loadSelectedSTAC(relativePath = "") {
     const absoluteUrl = useAbsoluteUrl(relativePath);
 
-    await axios.get(absoluteUrl.value).then(resp => {
-      selectedStac.value = resp.data;
-      indicator.value = selectedStac.value?.id ?? "";
-    }).catch(err => {
-      throw new Error("error loading the selected STAC", err)
-    });
+    await axios
+      .get(absoluteUrl.value)
+      .then((resp) => {
+        selectedStac.value = resp.data;
+        indicator.value = selectedStac.value?.id ?? "";
+      })
+      .catch((err) => {
+        throw new Error("error loading the selected STAC", err);
+      });
   }
 
   return { stac, loadSTAC, loadSelectedSTAC, selectedStac };