@eodash/eodash 5.0.0-alpha.1.8 → 5.0.0-alpha.2

package/core/composables/index.js

@@ -1,23 +1,23 @@
 // functions of this folder can only be consumed inside setup stores,
 // setup functions or vue composition api components
 
-import { reactive } from "vue"
-import { currentUrl } from "@/store/States"
-import eodashConfig from "@/eodashConfig"
-import { useTheme } from "vuetify/lib/framework.mjs"
-
+import { reactive } from "vue";
+import { currentUrl, indicator, mapPosition } from "@/store/States";
+import eodash from "@/eodash";
+import { useTheme } from "vuetify/lib/framework.mjs";
+import { onMounted, watch } from "vue";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
  * @param {string} [rel = '']
- * @param {string} [base = eodashConfig.stacEndpoint] - base URL, default value is the root stac catalog
+ * @param {string} [base = eodash.stacEndpoint] - base URL, default value is the root stac catalog
  * @returns {import('vue').Ref<string>} - returns `currentUrl`
  * @see {@link '@/store/States.js'}
  */
-export const useAbsoluteUrl = (rel = '', base = eodashConfig.stacEndpoint) => {
-  if (!rel || rel.includes('http')) {
-    currentUrl.value = base
-    return currentUrl
+export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
+  if (!rel || rel.includes("http")) {
+    currentUrl.value = base;
+    return currentUrl;
   }
 
   const st = base.split("/");
@@ -25,102 +25,122 @@ export const useAbsoluteUrl = (rel = '', base = eodashConfig.stacEndpoint) => {
   st.pop();
 
   for (let i = 0; i < arr.length; i++) {
-    if (arr[i] == ".")
-      continue;
-    if (arr[i] == "..")
-      st.pop();
-    else
-      st.push(arr[i]);
+    if (arr[i] == ".") continue;
+    if (arr[i] == "..") st.pop();
+    else st.push(arr[i]);
   }
 
   currentUrl.value = st.join("/");
-  return currentUrl
-}
+  return currentUrl;
+};
 
 /**
  * Adds slide in and out functionality to Elements
  * @param {import('vue').Ref<HTMLElement[]|null>} elements - elements to add the functionality to
- * @param {import("@/types").WidgetConfig[]} configs
+ * @param {import("@/types").Widget[]} configs
  */
 export const useSlidePanels = (elements, configs) => {
-
   /**
    * Sliding direction
    */
-  const slideDirs = configs.map(m => m.layout.x == 0 ? 'left' : m.layout.x == 12 - m.layout.w ? 'right' : m.layout.y < 6 ? 'up' : 'down')
+  const slideDirs = configs.map((m) =>
+    m.layout.x == 0
+      ? "left"
+      : m.layout.x == 12 - m.layout.w
+        ? "right"
+        : m.layout.y < 6
+          ? "up"
+          : "down"
+  );
 
   /**
    * Array of sliding button's style and icons
    */
-  const slideBtns = slideDirs.map(d => {
-    const btn = reactive({ style: {}, icon: { in: '', out: '' }, active: false })
-    switch (d) {
-      case 'left':
-        btn.style = { 'top': '50%', 'right': '-11%' }
-        btn.icon.in = 'mdi-chevron-double-right'
-        btn.icon.out = 'mdi-chevron-double-left'
+  const slideBtns = slideDirs.map((dir, idx) => {
+    const btn = reactive({
+      style: {},
+      icon: { in: "", out: "" },
+      active: false,
+      enabled: true,
+    });
+    if (configs[idx].slidable === false) {
+      btn.enabled = false;
+      return btn;
+    }
+
+    switch (dir) {
+      case "left":
+        btn.style = { top: "50%", right: "-11%" };
+        btn.icon.in = "mdi-chevron-double-right";
+        btn.icon.out = "mdi-chevron-double-left";
 
         break;
-      case 'right':
-        btn.style = { 'top': '50%', 'left': '-11%' }
-        btn.icon.in = 'mdi-chevron-double-left'
-        btn.icon.out = 'mdi-chevron-double-right'
+      case "right":
+        btn.style = { top: "50%", left: "-11%" };
+        btn.icon.in = "mdi-chevron-double-left";
+        btn.icon.out = "mdi-chevron-double-right";
 
         break;
-      case 'up':
-        btn.style = { 'right': '50%', 'bottom': '-17%' }
-        btn.icon.in = 'mdi-chevron-double-down'
-        btn.icon.out = 'mdi-chevron-double-up'
+      case "up":
+        btn.style = { right: "50%", bottom: "-17%" };
+        btn.icon.in = "mdi-chevron-double-down";
+        btn.icon.out = "mdi-chevron-double-up";
 
         break;
-      case 'down':
-        btn.style = { 'right': '50%', 'top': '-17%' }
-        btn.icon.in = 'mdi-chevron-double-up'
-        btn.icon.out = 'mdi-chevron-double-down'
+      case "down":
+        btn.style = { right: "50%", top: "-17%" };
+        btn.icon.in = "mdi-chevron-double-up";
+        btn.icon.out = "mdi-chevron-double-down";
         break;
 
       default:
-        console.error('sliding error')
+        console.error("sliding error");
         break;
     }
-    return btn
-  })
+    return btn;
+  });
 
   /**
    * Transforms the element's position based on the direction
    * @param {number} idx - index of the pressed element
    */
   const slideInOut = (idx) => {
-    const parentStyle = /** @type {CSSStyleDeclaration} */ (elements.value?.[idx].style)
+    const parentStyle = /** @type {CSSStyleDeclaration} */ (
+      elements.value?.[idx].style
+    );
     if (parentStyle?.transform.length) {
-      slideBtns[idx].active = false
+      slideBtns[idx].active = false;
       parentStyle.transform = "";
     } else {
-      slideBtns[idx].active = true
-      parentStyle.transition = "transform 0.3s ease-in-out"
+      slideBtns[idx].active = true;
+      parentStyle.transition = "transform 0.3s ease-in-out";
       switch (slideDirs[idx]) {
-        case 'left':
-          parentStyle.transform = "translateX(-100%)"
+        case "left":
+          parentStyle.transform = "translateX(-100%)";
           break;
-        case 'right':
-          parentStyle.transform = "translateX(100%)"
+        case "right":
+          parentStyle.transform = "translateX(100%)";
           break;
-        case 'up':
-          parentStyle.transform = `translateY(-${((configs[idx].layout.y / configs[idx].layout.h) * 100) + 100}%)`
+        case "up":
+          parentStyle.transform = `translateY(-${(configs[idx].layout.y / configs[idx].layout.h) * 100 + 100
+            }%)`;
           break;
-        case 'down':
-          parentStyle.transform = `translateY(${((Math.max(0, 12 - configs[idx].layout.y - configs[idx].layout.h) / configs[idx].layout.h) * 100) + 100}%)`;
+        case "down":
+          parentStyle.transform = `translateY(${(Math.max(0, 12 - configs[idx].layout.y - configs[idx].layout.h) /
+            configs[idx].layout.h) *
+            100 +
+            100
+            }%)`;
           break;
 
         default:
-          console.error('sliding error')
+          console.error("sliding error");
           break;
       }
     }
-  }
-  return { slideBtns, slideInOut }
-}
-
+  };
+  return { slideBtns, slideInOut };
+};
 
 /**
  * Updates an existing Vuetify theme.
@@ -132,16 +152,68 @@ export const useSlidePanels = (elements, configs) => {
 export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   const theme = useTheme();
 
-  /** @type {Array<keyof import('vuetify').ThemeDefinition>} */(Object.keys(themeDefinition)).forEach((key) => {
-    if (key === 'dark') {
-      theme.themes.value[themeName][key] = /** @type {Boolean} */ (themeDefinition[key])
+  /** @type {Array<keyof import('vuetify').ThemeDefinition>} */ (
+    Object.keys(themeDefinition)
+  ).forEach((key) => {
+    if (key === "dark") {
+      theme.themes.value[themeName][key] = /** @type {Boolean} */ (
+        themeDefinition[key]
+      );
     } else {
       //@ts-expect-error
       theme.themes.value[themeName][key] = {
         ...theme.themes.value[themeName][key],
-        ...themeDefinition[key]
+        ...themeDefinition[key],
+      };
+    }
+  });
+  return theme;
+};
+
+/**
+ * Composable that syncs store and  URLSearchParameters
+ */
+
+export const useURLSearchParametersSync = () => {
+  onMounted(() => {
+    // Analyze currently set url params when first loaded and set them in the store
+    if ('URLSearchParams' in window) {
+      const searchParams = new URLSearchParams(window.location.search);
+      let x, y, z;
+      searchParams.forEach((value, key) => {
+        if (key === "indicator") {
+          indicator.value = value;
+        }
+        if (key === "x") {
+          x = value;
+        }
+        if (key === "y") {
+          y = value;
+        }
+        if (key === "z") {
+          z = value;
+        }
+      })
+      if (x !== undefined && y !== undefined && z !== undefined) {
+        mapPosition.value = [x, y, z];
       }
     }
-  })
-  return theme
-}
+    watch(
+      [indicator, mapPosition],
+      ([updatedIndicator, updatedMapPosition]) => {
+        if ('URLSearchParams' in window) {
+          const searchParams = new URLSearchParams(window.location.search);
+          if (updatedIndicator !== "") {
+            searchParams.set("indicator", updatedIndicator);
+          }
+          if (updatedMapPosition && updatedMapPosition.length === 3) {
+            searchParams.set("x", updatedMapPosition[0]?.toFixed(4) ?? '');
+            searchParams.set("y", updatedMapPosition[1]?.toFixed(4) ?? '');
+            searchParams.set("z", updatedMapPosition[2]?.toFixed(4) ?? '');
+          }
+          const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
+          history.pushState(null, '', newRelativePathQuery);
+        }
+      })
+  });
+};

package/core/eodash.js

@@ -0,0 +1,100 @@
+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.
+ * @type {import("./types").Eodash}
+ */
+export const eodash = reactive({
+  id: "demo",
+  stacEndpoint: "https://esa-eodash.github.io/RACE-catalog/RACE/catalog.json",
+  brand: {
+    noLayout: true,
+    name: "Demo",
+    font: {
+      family: "Roboto",
+    },
+    theme: {
+      colors: {
+        primary: "#fff",
+        secondary: "#fff",
+        surface: "#fff",
+      },
+    },
+    footerText: "Demo configuration of eodash client",
+  },
+  template: {
+    loading: {
+      id: Symbol(),
+      type: "web-component",
+      widget: {
+        // https://uiball.com/ldrs/
+        link: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/mirage.js",
+        tagName: "l-mirage",
+        properties: {
+          class: "align-self-center justify-self-center",
+          size: "120",
+          speed: "2.5",
+          color: "#004170"
+        }
+      }
+    },
+    background: {
+      id: Symbol(),
+      type: "internal",
+      widget: {
+        name: "EodashMap",
+      },
+    },
+    widgets: [
+      {
+        id: Symbol(),
+        type: "internal",
+        title: "itemfilter",
+        layout: { x: 0, y: 0, w: 3, h: 12 },
+        slidable: false,
+        widget: {
+          name: "EodashItemFilter",
+        },
+      },
+      {
+        id: Symbol(),
+        type: "internal",
+        title: "datepicker",
+        layout: { x: 5, y: 11, w: 2, h: 1 },
+        slidable: false,
+        widget: {
+          name: "EodashDatePicker",
+          properties: {
+            inline: true,
+          },
+        },
+      },
+      {
+        id: Symbol(),
+        title: "Information",
+        layout: { x: 9, y: 0, w: 3, h: 12 },
+        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",
+        },
+        type: "web-component",
+      },
+    ],
+  },
+});
+
+export default eodash;

package/core/main.js

@@ -1,4 +1,2 @@
-// Plugins
-import { defineCompiletimeConfig } from '@/composables/DefineConfig';
-
-export { defineCompiletimeConfig as defineConfig }
+export { createEodash } from '@/composables/DefineEodash';
+export { default as store } from "@/store"

package/core/plugins/index.js

@@ -1,15 +1,7 @@
-/**
- * plugins/index.ts
- *
- * Automatically included in `./src/main.ts`
- */
-
-// Plugins
 import vuetify from './vuetify';
-import router from './router';
 import { createPinia } from 'pinia';
-import eodashConfig from '@/eodashConfig';
-import { eodashConfigKey } from '@/store/Keys';
+import eodash from '@/eodash';
+import { eodashKey } from '@/utils/keys';
 import store from '../store';
 
 export const pinia = createPinia();
@@ -21,7 +13,6 @@ export function registerPlugins(app) {
   window.eodashStore = store;
 
   app.use(vuetify)
-    .use(router)
     .use(pinia)
-    .provide(eodashConfigKey, eodashConfig);
+    .provide(eodashKey, eodash);
 }

package/core/plugins/vuetify.js

@@ -10,9 +10,10 @@ import 'vuetify/styles';
 
 
 import { createVuetify } from 'vuetify';
+// import {} from "vuetify"
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
+const vuetify = createVuetify({
   theme: {
     themes: {
       dashboardTheme: {},
@@ -24,4 +25,6 @@ export default createVuetify({
       },
     },
   },
-});
+})
+
+export default vuetify

package/core/store/Actions.js

@@ -1,28 +0,0 @@
-/**
- * loads font in the app using `webfontloader`
- * @param {string} [family="Roboto"]
- * @param {string} [link]
- * @returns {Promise<string>} - font family name
- * @see {@link "https://github.com/typekit/webfontloader "}
- */
-export const loadFont = async (family = "Roboto", link) => {
-  const WebFontLoader = (await import('webfontloader')).default;
-  if (link) {
-    WebFontLoader.load({
-      custom: {
-        // Use FVD notation to include families https://github.com/typekit/fvd
-        families: [family],
-        // Path to stylesheet that defines font-face
-        urls: [link],
-      },
-    });
-  }
-  else {
-    WebFontLoader.load({
-      google: {
-        families: [family]
-      }
-    });
-  }
-  return family;
-};

package/core/store/States.js

@@ -4,9 +4,18 @@ import { ref } from "vue";
  * 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("")
 
 /**
- * ol map object. Updated by the config file.
- * @type {import("vue").Ref<import('openlayers').Map | null>}
+ * Current map position
+ * @type {import("vue").Ref<(number|undefined)[]>}
  */
-export const mapInstance = ref(null);
+export const mapPosition = ref([])

package/core/store/stac.js

@@ -2,7 +2,8 @@ import { defineStore } from 'pinia';
 import { inject, ref } from 'vue';
 import axios from 'axios';
 import { useAbsoluteUrl } from '@/composables/index';
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/utils/keys';
+import { indicator } from '@/store/States';
 
 export const useSTAcStore = defineStore('stac', () => {
   /**
@@ -14,22 +15,22 @@ export const useSTAcStore = defineStore('stac', () => {
   /**
    * selected STAC object.
    * @type {import('vue').Ref<import('stac-ts').StacCatalog |
-   * import('stac-ts').StacCollection |import('stac-ts').StacItem
+   *  import('stac-ts').StacCollection |import('stac-ts').StacItem
    * | null>}
    */
   const selectedStac = ref(null);
 
 
-  const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey));
+  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
 
   /**
    * fetches root stac catalog and assign it to `stac`
    * @async
-   * @param {import("@/types").StacEndpoint} [url = eodashConfig.stacEndpoint]
+   * @param {import("@/types").StacEndpoint} [url = eodash.stacEndpoint]
    * @returns {Promise<void>}
    * @see {@link stac}
    */
-  async function loadSTAC(url = eodashConfig.stacEndpoint) {
+  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) {
@@ -54,6 +55,7 @@ export const useSTAcStore = defineStore('stac', () => {
 
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
+      indicator.value = selectedStac.value?.id ?? "";
     }).catch(err => console.error(err));
   }