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

package/core/client/components/MobileLayout.vue

@@ -0,0 +1,109 @@
+<template>
+  <v-main class="overflow-hidden main">
+    <Suspense suspensible>
+      <component
+        id="bg-widget"
+        v-if="bgWidget.component"
+        :is="bgWidget.component"
+        v-bind="bgWidget.props"
+      ></component>
+    </Suspense>
+
+    <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+      <div
+        v-if="importedWidget.value.component"
+        v-show="activeIdx === idx"
+        id="overlay"
+        class="pa-2 panel bg-surface"
+      >
+        <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1"
+          >&#x2715;</v-btn
+        >
+        <Suspense suspensible>
+          <div class="component-container" v-show="activeIdx === idx">
+            <component
+              :key="importedWidget.value.id"
+              :is="importedWidget.value.component"
+              v-bind="importedWidget.value.props"
+            />
+          </div>
+        </Suspense>
+      </div>
+    </template>
+
+    <v-tabs
+      ref="tabs"
+      align-tabs="center"
+      bg-color="surface"
+      class="tabs"
+      show-arrows
+      v-model="activeIdx"
+    >
+      <template v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+        <v-tab v-if="importedWidget.value.component" :value="idx">
+          {{ importedWidget.value.title }}
+        </v-tab>
+      </template>
+    </v-tabs>
+  </v-main>
+</template>
+<script setup>
+import { eodashKey } from "@/utils/keys";
+import { inject, ref, onMounted } from "vue";
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { useLayout } from "vuetify";
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+
+//import widgets
+const widgetsConfig = eodash.template.widgets;
+const importedWidgets = useDefineWidgets(widgetsConfig);
+const [bgWidget] = useDefineWidgets([eodash.template?.background]);
+
+const { mainRect } = useLayout();
+
+const activeIdx = ref(-1);
+
+/** @type {import("vue").Ref<import("vuetify/components").VTabs | null>} */
+const tabs = ref(null);
+const tabsHeightFromBtm = ref("");
+const mainRectTopPx = ref("");
+const mainRectBtmPx = ref("");
+
+onMounted(() => {
+  mainRectTopPx.value = mainRect.value.top + "px";
+  mainRectBtmPx.value = (mainRect.value.bottom || 48) + "px";
+  tabsHeightFromBtm.value =
+    mainRect.value.bottom + (tabs.value?.$el?.clientHeight ?? 0) + "px";
+});
+</script>
+<style scoped>
+.main {
+  height: 91dvh;
+}
+
+.panel {
+  top: v-bind("mainRectTopPx");
+  bottom: v-bind("tabsHeightFromBtm");
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  left: 0;
+  z-index: 1;
+}
+
+.component-container {
+  height: 90%;
+}
+
+.close-btn {
+  height: 5%;
+  position: relative;
+}
+
+.tabs {
+  bottom: v-bind("mainRectBtmPx");
+  position: relative;
+  z-index: 10;
+}
+</style>

package/core/client/composables/DefineEodash.js

@@ -0,0 +1,67 @@
+import store from "@/store";
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
+
+/**
+ * Sets user defined instance on runtime. Consumes `/@fs/config.js` and assign
+ * it to `eodash`
+ *
+ * @async
+ * @param {string | undefined} runtimeConfig
+ * @returns {Promise<import("@/types").Eodash>}
+ * @see {@linkplain '@/eodash.js'}
+ */
+export const useEodashRuntime = async (runtimeConfig) => {
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+  /** @param {import("@/types").Eodash} config */
+  const assignInstance = (config) => {
+    /** @type {(keyof import("@/types").Eodash)[]} */ (
+      Object.keys(eodash)
+    ).forEach((key) => {
+      //@ts-expect-error to do
+      eodash[key] = config[key];
+    });
+  };
+
+  if (runtimeConfig) {
+    assignInstance(
+      (
+        await import(
+          /* @vite-ignore */ new URL(runtimeConfig, import.meta.url).href
+        )
+      ).default,
+    );
+    return eodash;
+  }
+
+  try {
+    const configJs = "/config.js";
+    assignInstance(
+      (await import(/* @vite-ignore */ new URL(configJs, import.meta.url).href))
+        .default,
+    );
+  } catch {
+    try {
+      assignInstance(
+        await import("user:config").then(async (m) => await m["default"]),
+      );
+    } catch {
+      console.error("no dashboard configuration defined");
+    }
+  }
+  return eodash;
+};
+
+/**
+ * @param {((
+ *       store: import("@/types").EodashStore,
+ *     ) => Promise<import("@/types").Eodash>)
+ *   | import("@/types").Eodash} config
+ */
+export const createEodash = async (config) => {
+  if (config instanceof Function) {
+    return await config(store);
+  } else {
+    return config;
+  }
+};

package/core/client/composables/DefineWidgets.js

@@ -0,0 +1,161 @@
+import { defineAsyncComponent, reactive, shallowRef, watch } from "vue";
+import { useSTAcStore } from "@/store/stac";
+import { storeToRefs } from "pinia";
+
+/**
+ * @typedef {{
+ *   component: import("vue").Component | null;
+ *   props: Record<string, unknown>;
+ *   title: string;
+ *   id: string | number | symbol;
+ *   layout: { x: number; y: number; h: number; w: number };
+ * }} DefinedWidget
+ */
+
+/** @typedef {import("vue").ShallowRef<DefinedWidget>} ReactiveDefinedWidget */
+
+const internalWidgets = (() => {
+  /** @type {Record<string, () => Promise<import("vue").Component>>} */
+  const importMap = {
+    ...import.meta.glob("^/**/*.vue"),
+    ...import.meta.glob("user:widgets/**/*.vue"),
+  };
+  for (const key in importMap) {
+    const newKey = /** @type {string} */ (key.split("/").at(-1)).slice(0, -4);
+    Object.defineProperty(
+      importMap,
+      newKey,
+      /** @type {PropertyDescriptor} */ (
+        Object.getOwnPropertyDescriptor(importMap, key)
+      ),
+    );
+    delete importMap[key];
+  }
+  return importMap;
+})();
+
+/**
+ * Composable that converts widgets Configurations to defined imported widgets
+ *
+ * @param {(
+ *       | import("@/types").Widget
+ *       | import("@/types").BackgroundWidget
+ *       | Omit<import("@/types").Widget, "layout">
+ *       | undefined
+ *     )[]
+ *   | undefined} widgetConfigs
+ * @returns {ReactiveDefinedWidget[]}
+ */
+export const useDefineWidgets = (widgetConfigs) => {
+  /** @type {ReactiveDefinedWidget[]} */
+  const definedWidgets = [];
+
+  for (const config of widgetConfigs ?? []) {
+    /** @type {ReactiveDefinedWidget} */
+    const definedWidget = shallowRef({
+      component: null,
+      props: {},
+      title: "",
+      id: Symbol(),
+      layout: { x: 0, y: 0, h: 0, w: 0 },
+    });
+
+    if ("defineWidget" in (config ?? {})) {
+      const { selectedStac } = storeToRefs(useSTAcStore());
+      watch(
+        selectedStac,
+        (updatedStac) => {
+          let definedConfig =
+            /** @type {import("@/types").FunctionalWidget} */ (
+              config
+            )?.defineWidget(updatedStac);
+          if (definedConfig) {
+            definedConfig = reactive(definedConfig);
+          }
+          definedWidget.value =
+            definedWidget.value.id === definedConfig?.id
+              ? definedWidget.value
+              : getWidgetDefinition(definedConfig);
+        },
+        { immediate: true },
+      );
+    } else {
+      definedWidget.value = getWidgetDefinition(
+        /** @type {import("@/types").StaticWidget} */ (config),
+      );
+    }
+    definedWidgets.push(definedWidget);
+  }
+  return definedWidgets;
+};
+
+/**
+ * Converts a static widget configuration to a defined imported widget
+ *
+ * @param {import("@/types").StaticWidget
+ *   | Omit<import("@/types").StaticWidget, "layout">
+ *   | undefined
+ *   | null} [config]
+ * @returns {DefinedWidget}
+ */
+const getWidgetDefinition = (config) => {
+  /** @type {DefinedWidget} */
+  const importedWidget = {
+    component: null,
+    props: {},
+    title: "",
+    id: Symbol(),
+    layout: reactive({ x: 0, y: 0, h: 0, w: 0 }),
+  };
+  switch (config?.type) {
+    case "internal":
+      importedWidget.component = defineAsyncComponent({
+        loader:
+          internalWidgets[
+            /** @type {import("@/types").InternalComponentWidget} * */ (config)
+              ?.widget.name
+          ],
+        suspensible: true,
+      });
+      importedWidget.props = reactive(
+        /** @type {import("@/types").InternalComponentWidget} * */ (config)
+          ?.widget.properties ?? {},
+      );
+
+      break;
+
+    case "web-component":
+      importedWidget.component = defineAsyncComponent({
+        loader: () => import("@/components/DynamicWebComponent.vue"),
+        suspensible: true,
+      });
+      importedWidget.props = reactive(config.widget);
+
+      break;
+    case "iframe":
+      importedWidget.component = defineAsyncComponent({
+        loader: () => import("@/components/IframeWrapper.vue"),
+        suspensible: true,
+      });
+      importedWidget.props = reactive(config.widget);
+      break;
+
+    default:
+      if (!config) {
+        return importedWidget;
+      } else {
+        console.error("Widget type not found");
+      }
+      break;
+  }
+  importedWidget.title = config?.title ?? "";
+  importedWidget.id = config?.id ?? importedWidget.id;
+
+  if ("layout" in config) {
+    importedWidget.layout.x = config.layout.x;
+    importedWidget.layout.y = config.layout.y;
+    importedWidget.layout.h = config.layout.h;
+    importedWidget.layout.w = config.layout.w;
+  }
+  return importedWidget;
+};

package/core/client/composables/index.js

@@ -0,0 +1,136 @@
+// functions of this folder can only be consumed inside setup stores,
+// setup functions or vue composition api components
+
+import { currentUrl, indicator, mapPosition } from "@/store/States";
+import eodash from "@/eodash";
+import { useTheme } from "vuetify/lib/framework.mjs";
+import { onMounted, watch } from "vue";
+import { useSTAcStore } from "@/store/stac";
+
+/**
+ * Creates an absolute URL from a relative link and assignes it to `currentUrl`
+ *
+ * @param {string} [rel=''] Default is `''`
+ * @param {string} [base=eodash.stacEndpoint] - Base URL, default value is the
+ *   root stac catalog. Default is `eodash.stacEndpoint`
+ * @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;
+};
+
+/**
+ * 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. Default is `{}`
+ * @returns {import("vuetify").ThemeInstance}
+ */
+export const useUpdateTheme = (themeName, themeDefinition = {}) => {
+  const theme = useTheme();
+
+  /** @type {(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 to do
+      theme.themes.value[themeName][key] = {
+        ...theme.themes.value[themeName][key],
+        ...themeDefinition[key],
+      };
+    }
+  });
+  return theme;
+};
+
+/** Composable that syncs store and URLSearchParameters */
+
+export const useURLSearchParametersSync = () => {
+  onMounted(async () => {
+    // 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);
+      /** @type {number | undefined} */
+      let x,
+        /** @type {number | undefined} */
+        y,
+        /** @type {number | undefined} */
+        z;
+      searchParams.forEach(async (value, key) => {
+        if (key === "indicator") {
+          const { loadSelectedSTAC, stac } = useSTAcStore();
+          const match = stac?.find((link) => link.id == value);
+          if (match) {
+            await loadSelectedSTAC(match.href);
+          }
+        }
+        if (key === "x") {
+          x = Number(value);
+        }
+        if (key === "y") {
+          y = Number(value);
+        }
+        if (key === "z") {
+          z = Number(value);
+        }
+      });
+      if (x && y && z) {
+        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);
+        }
+      },
+    );
+  });
+};
+
+/** @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
+export const makePanelTransparent = (root) => {
+  onMounted(() => {
+    const eoxItem = root.value?.parentElement;
+    if (eoxItem?.tagName === "EOX-LAYOUT-ITEM") {
+      eoxItem.classList.remove("bg-surface");
+      eoxItem.style.background = "transparent";
+      eoxItem.style.border = "transparent";
+    }
+  });
+};

package/core/client/eodash.js

@@ -0,0 +1,136 @@
+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://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
+  brand: {
+    noLayout: true,
+    name: "Demo",
+    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: "Indicators",
+        layout: { x: 0, y: 0, w: 3, h: 8 },
+        widget: {
+          name: "EodashItemFilter",
+        },
+      },
+      {
+        id: Symbol(),
+        type: "web-component",
+        title: "Layer Control",
+        layout: { x: 0, y: 8, w: 3, h: 4 },
+        widget: {
+          link: async () => {
+            await import("@eox/layercontrol");
+            await import("@eox/jsonform");
+          },
+          tagName: "eox-layercontrol",
+          properties: {
+            for: "eox-map",
+            class: "pa-4",
+          },
+        },
+      },
+      {
+        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;
+        },
+      },
+      {
+        defineWidget: (selectedSTAC) => {
+          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: "Buttons",
+                layout: { x: 8, y: 0, w: 1, h: 1 },
+                title: "Buttons",
+                type: "internal",
+                widget: {
+                  name: "EodashMapBtns",
+                },
+              }
+            : null;
+        },
+      },
+    ],
+  },
+});
+
+export default eodash;

package/core/client/main.js

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

package/core/client/plugins/index.js

@@ -0,0 +1,20 @@
+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 */
+export function registerPlugins(app) {
+  window.eodashStore = store;
+
+  app
+    .use(vuetify)
+    .use(pinia)
+    // Use plugin with optional defaults
+    .use(VCalendar, {})
+    .provide(eodashKey, eodash);
+}

package/core/client/plugins/vuetify.js

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

package/core/client/render.js

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