@eodash/eodash 5.0.0-alpha.1.14 → 5.0.0-alpha.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eodash/eodash",
-  "version": "5.0.0-alpha.1.14",
+  "version": "5.0.0-alpha.1.15",
   "type": "module",
   "types": "./core/types.d.ts",
   "files": [
@@ -24,11 +24,12 @@
     "preview": "vite preview",
     "lint": "eslint . --fix",
     "docs:generate": "typedoc --options typedoc.config.json",
-    "docs:dev": "vitepress dev docs",
+    "docs:dev": "vitepress dev docs --port 3333",
     "docs:build": "npm run docs:generate && vitepress build docs",
     "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
+    "@eox/itemfilter": "^0.14.0",
     "@eox/layout": "^0.1.0",
     "@eox/map": "^1.4.0",
     "@eox/stacinfo": "^0.3.0",
@@ -72,4 +73,4 @@
   "bin": {
     "eodash": "./bin/app.js"
   }
-}
+}

package/widgets/EodashDatePicker.vue

@@ -1,22 +1,21 @@
 <template>
   <span class="fill-height fill-width align-center justify-center">
     <div v-if="inline" class="fill-height fill-width">
-      <!-- <p class="text-subtitle-1 ma-1 pa-2">currently selected date is {{ currentDate }}</p> -->
-      <v-text-field base-color="primary" density="comfortable" type="date" bg-color="surface" color="primary"
-        validate-on="input" min="1980-01-01" :max="new Date().toISOString().split(`T`)[0]" label="Select Date"
-        :value="currentDate" v-model="currentDate" />
-    </div>
 
-    <v-date-picker v-else v-model="currentDate" color="primary" elevation="0" bg-color="surface" location="center"
-      class="overflow-auto fill-height fill-width" :max="new Date()" position="relative"
-      show-adjacent-months></v-date-picker>
+      <v-text-field base-color="primary" class="fill-height fill-width pa-2 align-center" type="date" bg-color="surface"
+        color="primary" density="comfortable" label="Select Date" v-model="currentDate" variant="plain" hide-details />
+    </div>
+    <v-date-picker v-else ref="datePicker" :width="width" :height="height" hide-header v-model="currentDate"
+      color="primary" bg-color="surface" location="center" class="overflow-auto fill-height fill-width"
+      position="relative" show-adjacent-months></v-date-picker>
   </span>
 </template>
 <script setup>
-import { computed } from "vue";
+import { computed, ref, onMounted } from "vue";
 import { datetime } from "@/store/States"
 
 const props = defineProps(["inline"])
+
 const currentDate = computed({
   get() {
     return props.inline ? datetime.value.split("T")[0] : new Date(datetime.value) ?? new Date()
@@ -24,9 +23,29 @@ const currentDate = computed({
   /** @param {Date | string} updatedDate */
   set(updatedDate) {
     if (props.inline) {
-      updatedDate = new Date(updatedDate) ?? new Date()
+      updatedDate = new Date(updatedDate);
+    }
+    //@ts-expect-error
+    if (updatedDate instanceof Date && !isNaN(updatedDate)) {
+      datetime.value = updatedDate.toISOString()
+    } else {
+      datetime.value = new Date().toISOString()
     }
-    datetime.value = /** @type {Date} */ (updatedDate).toISOString()
   }
+});
+
+/**
+ * @type {import("vue").Ref<import("vuetify/components").VDatePicker | null>}
+ **/
+const datePicker = ref(null)
+/** @type {import("vue").Ref<string|undefined>} */
+const width = ref()
+/** @type {import("vue").Ref<string|undefined>} */
+const height = ref()
+onMounted(() => {
+  /** @type {HTMLElement} */
+  const parentEl = datePicker.value?.$el.parentElement?.parentElement
+  width.value = parentEl?.clientWidth ? parentEl.clientWidth + "px" : undefined
+  height.value = parentEl?.clientHeight ? parentEl.clientHeight + "px" : undefined
 })
 </script>

package/widgets/EodashItemFilter.vue

@@ -0,0 +1,60 @@
+<template>
+  <DynamicWebComponent :link="link" tag-name="eox-itemfilter" :properties="properties" :on-mounted="onMounted" />
+</template>
+<script setup>
+import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
+
+const link = () => import("@eox/itemfilter");
+
+const properties = {
+  config: {
+    titleProperty: "title",
+    filterProperties: [
+      {
+        keys: ["title", "themes"],
+        title: "Search",
+        type: "text",
+        expanded: true,
+      },
+      {
+        key: "themes",
+        title: "Theme",
+        type: "multiselect",
+        featured: true,
+      },
+    ],
+    aggregateResults: "themes",
+    enableHighlighting: true,
+  },
+};
+
+/** @type {import("../core/types").WebComponentProps["onMounted"]}*/
+const onMounted = (el, store, router) => {
+  /**
+   * @typedef {object} Item
+   * @property {string} href
+   * */
+  /** @type {any} */ (el).apply(
+  // Only list child elements in list
+  store.stac?.filter((item) => item.rel === "child")
+);
+  // Check if indicator is selected
+  const { query } = router.currentRoute.value;
+  if ("indicator" in query) {
+    const match = store.stac?.find((item) => item.id === query.indicator);
+    if (match) {
+      //@ts-expect-error
+      (el).selectedResult = match;
+      store.loadSelectedSTAC(match.href);
+    }
+  }
+  /** @type {any} */ (el).config.onSelect =
+    /**
+     * @param {Item} item
+     * */
+    async (item) => {
+      console.log(item);
+      await store.loadSelectedSTAC(item.href);
+    };
+};
+</script>

package/widgets/EodashMap.vue

@@ -4,51 +4,69 @@
 </template>
 <script setup>
 import { inject, watch } from "vue";
-import { toAbsolute } from 'stac-js/src/http.js';
+import { toAbsolute } from "stac-js/src/http.js";
 import { EodashCollection } from "@/utils/eodashSTAC";
 import { eodashKey } from "@/store/Keys";
 import { mapInstance, datetime } from "@/store/States";
 import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
 import { storeToRefs } from "pinia";
-import '@eox/map/dist/eox-map-advanced-layers-and-sources.js';
+import { useRouter } from "vue-router";
+import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 
-const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey)
+const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
 
 const properties = {
   class: "fill-height fill-width overflow-none",
   center: [15, 48],
   layers: [{ type: "Tile", source: { type: "OSM" } }],
+};
+const router = useRouter();
+const { query } = router.currentRoute.value;
+if ("x" in query && "y" in query) {
+  properties.center = [Number(query.x), Number(query.y)];
 }
-const link = () => import("@eox/map")
+if ("z" in query) {
+  // @ts-ignore
+  properties.zoom = query.z;
+}
+const link = () => import("@eox/map");
 
 /** @type {import("openlayers").EventsListenerFunctionType}*/
 let handleMoveEnd;
 
 /** @type {import("@/types").WebComponentProps["onMounted"]} */
-const onMounted = (el, store, router) => {
-  datetime.value = /** @type {string} */ (router.currentRoute.value.query["datetime"] ?? "");
-  mapInstance.value =  /** @type {any} */(el).map;
+const onMounted = (el, store, _router) => {
+  mapInstance.value = /** @type {any} */ (el).map;
 
-  const { selectedStac } = storeToRefs(store)
+  const { selectedStac } = storeToRefs(store);
 
-  watch([selectedStac, datetime], async ([updatedStac, updatedTime]) => {
-    if (updatedStac) {
-      const parentCollUrl = toAbsolute(updatedStac.links[1].href, eodashConfig.stacEndpoint);
-      const childCollUrl = toAbsolute(updatedStac.links[1].href, parentCollUrl);
-      const eodash = new EodashCollection(childCollUrl);
-      if (updatedTime) {
-        /** @type {any} */(el).layers = await eodash.createLayersJson(new Date(updatedTime));
-      } else {
-        /** @type {any} */(el).layers = await eodash.createLayersJson();
+  watch(
+    [selectedStac, datetime],
+    async ([updatedStac, updatedTime]) => {
+      if (updatedStac) {
+        const parentCollUrl = toAbsolute(
+          `./${updatedStac.id}/collection.json`,
+          eodashConfig.stacEndpoint
+        );
+        const childCollUrl = toAbsolute(
+          updatedStac.links[1].href,
+          parentCollUrl
+        );
+        const eodash = new EodashCollection(childCollUrl);
+        if (updatedTime) {
+          /** @type {any} */ (el).layers = await eodash.createLayersJson(
+          new Date(updatedTime)
+        );
+        } else {
+          /** @type {any} */ (el).layers = await eodash.createLayersJson();
+        }
       }
-    }
-  }, { immediate: true })
-}
+    },
+    { immediate: true }
+  );
+};
 /** @type {import("@/types").WebComponentProps["onUnmounted"]} */
 const onUnmounted = (_el, _store, _router) => {
-  mapInstance.value?.un('moveend', handleMoveEnd);
-}
-
-
-
+  mapInstance.value?.un("moveend", handleMoveEnd);
+};
 </script>