@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/core/client/composables/index.js

@@ -1,11 +1,22 @@
 // functions of this folder can only be consumed inside setup stores,
-// setup functions or vue composition api components
+// setup functions or vue composition api components https://vuejs.org/guide/reusability/composables
 
-import { currentUrl, indicator, mapPosition } from "@/store/States";
+import {
+  activeTemplate,
+  currentCompareUrl,
+  currentUrl,
+  datetime,
+  indicator,
+  mapPosition,
+} from "@/store/states";
 import eodash from "@/eodash";
 import { useTheme } from "vuetify/lib/framework.mjs";
-import { onMounted, watch } from "vue";
+import { inject, onMounted, onUnmounted, watch } from "vue";
 import { useSTAcStore } from "@/store/stac";
+import log from "loglevel";
+import { eodashKey, eoxLayersKey } from "@/utils/keys";
+import { useEventBus } from "@vueuse/core";
+import { posIsSetFromUrl } from "@/utils/states";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -14,11 +25,11 @@ import { useSTAcStore } from "@/store/stac";
  * @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'}
+ * @see {@link '@/store/states.js'}
  */
 export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   if (!rel || rel.includes("http")) {
-    currentUrl.value = base;
+    currentUrl.value = rel;
     return currentUrl;
   }
 
@@ -36,6 +47,35 @@ export const useAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
   return currentUrl;
 };
 
+/**
+ * Use the absolute compare URL from a relative link
+ *
+ * @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 useCompareAbsoluteUrl = (rel = "", base = eodash.stacEndpoint) => {
+  if (!rel || rel.includes("http")) {
+    currentCompareUrl.value = base;
+    return currentCompareUrl;
+  }
+
+  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]);
+  }
+
+  currentCompareUrl.value = st.join("/");
+  return currentCompareUrl;
+};
+
 /**
  * Updates an existing Vuetify theme. updates only the values provided in the
  * `ThemeDefinition`
@@ -67,53 +107,97 @@ export const useUpdateTheme = (themeName, themeDefinition = {}) => {
 };
 
 /** 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) {
+    if (window.location.search) {
       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);
+      for (const [key, value] of searchParams) {
+        switch (key) {
+          case "template": {
+            activeTemplate.value = value;
+            break;
           }
+          case "indicator": {
+            log.debug("Found indicator key in url");
+            const { loadSelectedSTAC, stac } = useSTAcStore();
+            const match = stac?.find((link) => link.id == value);
+            if (match) {
+              log.debug("Found match, loading stac item", match);
+              await loadSelectedSTAC(match.href);
+            }
+            break;
+          }
+
+          case "x":
+            x = Number(value);
+            break;
+
+          case "y":
+            y = Number(value);
+            break;
+
+          case "z":
+            z = Number(value);
+            break;
+
+          case "datetime":
+            try {
+              const datetimeiso = new Date(value).toISOString();
+              log.debug("Valid datetime found", datetimeiso);
+              datetime.value = datetimeiso;
+            } catch {
+              datetime.value = new Date().toISOString();
+            }
+            break;
+
+          default:
+            break;
         }
-        if (key === "x") {
-          x = Number(value);
-        }
-        if (key === "y") {
-          y = Number(value);
-        }
-        if (key === "z") {
-          z = Number(value);
-        }
-      });
+      }
+
       if (x && y && z) {
+        log.debug("Coordinates found, applying map poisition", x, y, z);
         mapPosition.value = [x, y, z];
+        if (!posIsSetFromUrl.value) {
+          posIsSetFromUrl.value = true;
+        }
       }
     }
+
     watch(
-      [indicator, mapPosition],
-      ([updatedIndicator, updatedMapPosition]) => {
+      [indicator, mapPosition, datetime, activeTemplate],
+      ([
+        updatedIndicator,
+        updatedMapPosition,
+        updatedDatetime,
+        updatedTemplate,
+      ]) => {
         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) ?? "");
           }
+
+          if (updatedDatetime) {
+            searchParams.set("datetime", updatedDatetime.split("T")?.[0] ?? "");
+          }
+          if (updatedTemplate) {
+            searchParams.set("template", updatedTemplate);
+          }
           const newRelativePathQuery =
             window.location.pathname + "?" + searchParams.toString();
           history.pushState(null, "", newRelativePathQuery);
@@ -123,14 +207,38 @@ export const useURLSearchParametersSync = () => {
   });
 };
 
-/** @param {import("vue").Ref<HTMLElement|null>} root - components root element ref*/
+/**
+ * Converts eox-layout-item to transparent
+ *
+ *  @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";
     }
   });
 };
+
+export const useGetTemplates = () => {
+  const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey));
+  return "template" in eodash ? [] : Object.keys(eodash.templates);
+};
+
+/**
+ * Listens to the `layers:updated` and `time:updated` events and calls
+ *
+ * @param {import("@vueuse/core").EventBusListener<
+ * "layers:updated"|"time:updated",
+ * {layers:Record<string,any>[]| undefined}
+ * >} listener
+ */
+export const useOnLayersUpdate = (listener) => {
+  const layersEvents = useEventBus(eoxLayersKey);
+
+  const unsubscribe = layersEvents.on(listener);
+
+  onUnmounted(() => {
+    unsubscribe();
+  });
+};