@eodash/eodash 5.0.0-alpha.2.1 → 5.0.0-alpha.2.11

package/core/composables/index.js

@@ -1,219 +0,0 @@
-// functions of this folder can only be consumed inside setup stores,
-// setup functions or vue composition api components
-
-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 = 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 = eodash.stacEndpoint) => {
-  if (!rel || rel.includes("http")) {
-    currentUrl.value = base;
-    return currentUrl;
-  }
-
-  const st = base.split("/");
-  const arr = rel.split("/");
-  st.pop();
-
-  for (let i = 0; i < arr.length; i++) {
-    if (arr[i] == ".") continue;
-    if (arr[i] == "..") st.pop();
-    else st.push(arr[i]);
-  }
-
-  currentUrl.value = st.join("/");
-  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").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"
-  );
-
-  /**
-   * Array of sliding button's style and icons
-   */
-  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";
-
-        break;
-      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";
-        break;
-
-      default:
-        console.error("sliding error");
-        break;
-    }
-    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
-    );
-    if (parentStyle?.transform.length) {
-      slideBtns[idx].active = false;
-      parentStyle.transform = "";
-    } else {
-      slideBtns[idx].active = true;
-      parentStyle.transition = "transform 0.3s ease-in-out";
-      switch (slideDirs[idx]) {
-        case "left":
-          parentStyle.transform = "translateX(-100%)";
-          break;
-        case "right":
-          parentStyle.transform = "translateX(100%)";
-          break;
-        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
-            }%)`;
-          break;
-
-        default:
-          console.error("sliding error");
-          break;
-      }
-    }
-  };
-  return { slideBtns, slideInOut };
-};
-
-/**
- * Updates an existing Vuetify theme.
- * updates only the values provided in the `ThemeDefinition`
- * @param {string} themeName - Name of the theme to be updated
- * @param {import('vuetify').ThemeDefinition} [themeDefinition = {}] - New defintion to be updated to
- * @returns {import('vuetify').ThemeInstance}
- */
-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]
-      );
-    } else {
-      //@ts-expect-error
-      theme.themes.value[themeName][key] = {
-        ...theme.themes.value[themeName][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];
-      }
-    }
-    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

@@ -1,100 +0,0 @@
-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,2 +0,0 @@
-export { createEodash } from '@/composables/DefineEodash';
-export { default as store } from "@/store"

package/core/plugins/index.js

@@ -1,18 +0,0 @@
-import vuetify from './vuetify';
-import { createPinia } from 'pinia';
-import eodash from '@/eodash';
-import { eodashKey } from '@/utils/keys';
-import store from '../store';
-
-export const pinia = createPinia();
-
-/**
- * @param {import('vue').App} app
- */
-export function registerPlugins(app) {
-  window.eodashStore = store;
-
-  app.use(vuetify)
-    .use(pinia)
-    .provide(eodashKey, eodash);
-}

package/core/plugins/vuetify.js

@@ -1,30 +0,0 @@
-/**
- * plugins/vuetify.ts
- *
- * Framework documentation: https://vuetifyjs.com`
- */
-
-// Styles
-import '@mdi/font/css/materialdesignicons.css';
-import 'vuetify/styles';
-
-
-import { createVuetify } from 'vuetify';
-// import {} from "vuetify"
-
-// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-const vuetify = createVuetify({
-  theme: {
-    themes: {
-      dashboardTheme: {},
-      light: {
-        colors: {
-          primary: '#1867C0',
-          secondary: '#5CBBF6',
-        },
-      },
-    },
-  },
-})
-
-export default vuetify

package/core/render.js

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

package/core/store/States.js

@@ -1,21 +0,0 @@
-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("")
-
-/**
- * Current map position
- * @type {import("vue").Ref<(number|undefined)[]>}
- */
-export const mapPosition = ref([])

package/core/store/index.js

@@ -1,17 +0,0 @@
-//export all actions, states, and pinia stores
-
-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;
-    }
-  }
-  return stores;
-})());
-
-export default store;

package/core/store/stac.js

@@ -1,63 +0,0 @@
-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', () => {
-  /**
-   * 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>}
-   */
-  const selectedStac = ref(null);
-
-
-  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
-
-  /**
-   * fetches root stac catalog and assign it to `stac`
-   * @async
-   * @param {import("@/types").StacEndpoint} [url = 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
-      })
-      stac.value = links;
-    }).catch(err => console.error(err));
-  }
-
-  /**
-   * fetches selected stac object and assign it to `selectedStac`
-   * @async
-   * @param {string} relativePath - stac link href
-   * @returns {Promise<void>}
-   * @see {@link selectedStac}
-   */
-  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 => console.error(err));
-  }
-
-  return { stac, loadSTAC, loadSelectedSTAC, selectedStac };
-});