@eodash/eodash 5.0.0-alpha.2.5 → 5.0.0-alpha.2.7

package/widgets/EodashItemFilter.vue

@@ -1,5 +1,10 @@
 <template>
-  <DynamicWebComponent :link="link" tag-name="eox-itemfilter" :properties="properties" :on-mounted="onMounted" />
+  <DynamicWebComponent
+    :link="link"
+    tag-name="eox-itemfilter"
+    :properties="properties"
+    :on-mounted="onMounted"
+  />
 </template>
 <script setup>
 import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
@@ -31,10 +36,10 @@ const properties = {
   },
 };
 
-/** @type {import("@/types").WebComponentProps["onMounted"]}*/
+/** @type {import("@/types").WebComponentProps["onMounted"]} */
 const onMounted = (el, store) => {
   /** @type {any} */ (el).style.height = "100%";
-  
+
   const style = document.createElement("style");
   style.innerHTML = `
     section {
@@ -59,15 +64,13 @@ const onMounted = (el, store) => {
   /**
    * @typedef {object} Item
    * @property {string} href
-   * */
+   */
   /** @type {any} */ (el).apply(
-  // Only list child elements in list
-  store.stac?.filter((item) => item.rel === "child")
-);
+    // Only list child elements in list
+    store.stac?.filter((item) => item.rel === "child"),
+  );
   /** @type {any} */ (el).config.onSelect =
-    /**
-     * @param {Item} item
-     * */
+    /** @param {Item} item */
     async (item) => {
       console.log(item);
       await store.loadSelectedSTAC(item.href);

package/widgets/EodashMap.vue

@@ -1,11 +1,16 @@
 <template>
-  <DynamicWebComponent :link="link" tag-name="eox-map" :properties="properties" :on-mounted="onMounted"
-    :on-unmounted="onUnmounted" />
+  <DynamicWebComponent
+    :link="link"
+    tag-name="eox-map"
+    :properties="properties"
+    :on-mounted="onMounted"
+    :on-unmounted="onUnmounted"
+  />
 </template>
 <script setup>
 import { inject, watch } from "vue";
 import { toAbsolute } from "stac-js/src/http.js";
-import { EodashCollection } from "@/utils/eodashSTAC";
+import { EodashCollection, extractCollectionUrls } from "@/utils/eodashSTAC";
 import { eodashKey } from "@/utils/keys";
 import { datetime, mapPosition } from "@/store/States";
 import DynamicWebComponent from "@/components/DynamicWebComponent.vue";
@@ -14,26 +19,53 @@ import "@eox/map/dist/eox-map-advanced-layers-and-sources.js";
 
 const eodashConfig = /** @type {import("@/types").Eodash} */ inject(eodashKey);
 
-/** @type {Record<string,unknown>} */
+/** @type {Record<string, unknown>} */
 const properties = {
   class: "fill-height fill-width overflow-none",
   center: [15, 48],
-  layers: [{ type: "Tile", source: { type: "OSM" } }],
+  zoom: 4,
+  // TODO: we should probably introduce some way of defining
+  layers: [
+    {
+      type: "Vector",
+      source: {
+        type: "Vector",
+        url: "https://openlayers.org/data/vector/ecoregions.json",
+        format: "GeoJSON",
+      },
+    },
+    {
+      type: "Tile",
+      properties: {
+        id: "osm",
+        title: "Background",
+      },
+      source: {
+        type: "OSM",
+      },
+    },
+  ],
 };
 // Check if selected indicator was already set in store
 if (mapPosition && mapPosition.value && mapPosition.value.length === 3) {
   // TODO: do further checks for invalid values?
+  // TODO: can we expect the values to be in a specific projection
   properties.center = [mapPosition.value?.[0], mapPosition.value[1]];
   properties.zoom = mapPosition.value[2];
 }
 
 const link = () => import("@eox/map");
 
-/** @type {import("openlayers").EventsListenerFunctionType}*/
+/** @type {import("openlayers").EventsListenerFunctionType} */
 const handleMoveEnd = (evt) => {
   const map = /** @type {import("openlayers").Map | undefined} */ (
-    /** @type {*} */ (evt).map
+    /** @type {any} */ (evt).map
   );
+  /*
+  const currentProj = map?.getView().getProjection();
+  const transFunc = getTransform(currentProj?.getCode(), 'EPSG:4326');
+  const [x, y] = transFunc(map?.getView().getCenter() ?? [0, 0], undefined, undefined);
+  */
   const [x, y] = map?.getView().getCenter() ?? [0, 0];
   const z = map?.getView().getZoom();
   if (!Number.isNaN(x) && !Number.isNaN(y) && !Number.isNaN(z)) {
@@ -45,7 +77,6 @@ const handleMoveEnd = (evt) => {
 const onMounted = (el, store) => {
   /** @type {any} */
   (el)?.map?.on("moveend", handleMoveEnd);
-
   const { selectedStac } = storeToRefs(store);
 
   watch(
@@ -54,23 +85,59 @@ const onMounted = (el, store) => {
       if (updatedStac) {
         const parentCollUrl = toAbsolute(
           `./${updatedStac.id}/collection.json`,
-          eodashConfig.stacEndpoint
-        );
-        const childCollUrl = toAbsolute(
-          updatedStac.links[1].href,
-          parentCollUrl
+          eodashConfig.stacEndpoint,
         );
-        const eodash = new EodashCollection(childCollUrl);
-        if (updatedTime) {
-          /** @type {any} */ (el).layers = await eodash.createLayersJson(
-          new Date(updatedTime)
+        const collectionUrls = extractCollectionUrls(
+          selectedStac.value,
+          parentCollUrl,
         );
-        } else {
-          /** @type {any} */ (el).layers = await eodash.createLayersJson();
+        /** @type {import("@/utils/eodashSTAC").EodashCollection[]} */
+        const eodashCollections = [];
+        collectionUrls.forEach((cu) => {
+          eodashCollections.push(new EodashCollection(cu));
+        });
+        const layersCollection = [];
+        for (let idx = 0; idx < eodashCollections.length; idx++) {
+          const ec = eodashCollections[idx];
+          let layers;
+          if (updatedTime) {
+            layers = await ec.createLayersJson(new Date(updatedTime));
+          } else {
+            layers = await ec.createLayersJson();
+          }
+          if (layers) {
+            layersCollection.push(...layers);
+          }
         }
+        // TODO: add base layers and overlays as defined in the top collection / indicator
+        // Probably best also to introduce background and overlay groups
+        // For now adding OSM as background
+        layersCollection.push({
+          type: "Tile",
+          properties: {
+            id: "osm",
+            title: "Background",
+          },
+          source: {
+            type: "OSM",
+          },
+        });
+
+        // TODO: we can check if the collection / indicator has a specific
+        //       projection it wants to be displayed in the map we can register
+        //       and set the attribute here, e.g. like following
+        /* 
+        (el)?.registerProjection(
+          'EPSG:3031','+proj=stere +lat_0=-90 +lat_ts=-71 +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs +type=crs'
+        );
+        (el)?.projection = "EPSG:3031";
+        */
+
+        /** @type {any} */
+        (el).layers = layersCollection;
       }
     },
-    { immediate: true }
+    { immediate: true },
   );
 };
 

package/widgets/EodashMapBtns.vue

@@ -0,0 +1,34 @@
+<template>
+  <div ref="rootRef" class="d-flex align-end justify-end my-3 pa-2">
+    <v-btn
+      class="map-btn"
+      color="primary"
+      :icon="[mdiMapPlus]"
+      @click="showMapState = !showMapState"
+    />
+    <ExportState :header="header" :code="code" v-model="showMapState" />
+  </div>
+</template>
+<script setup>
+import { makePanelTransparent } from "@/composables";
+import { mdiMapPlus } from "@mdi/js";
+import ExportState from "^/ExportState.vue";
+import { ref } from "vue";
+const header = "Export Map";
+const code = `<h2>
+           code example
+         </h2>`;
+
+const showMapState = ref(false);
+
+/** @type {import("vue").Ref<HTMLDivElement|null>} */
+const rootRef = ref(null);
+makePanelTransparent(rootRef);
+</script>
+<style scoped>
+.map-btn {
+  width: 36px;
+  height: 36px;
+  border-radius: 25%;
+}
+</style>

package/widgets/ExportState.vue

@@ -0,0 +1,112 @@
+<template>
+  <PopUp v-model="dialog">
+    <v-card>
+      <v-card-title class="bg-primary">
+        <h5 class="text-h5">Storytelling map configuration</h5>
+      </v-card-title>
+
+      <v-card-text class="py-5">
+        <p class="text-body-2">
+          Copy and paste this code into the map layers field of the storytelling
+          editor:
+        </p>
+        <div class="pa-3 code-block">
+          {{ getLayers(props.for) }}
+        </div>
+
+        <div style="position: absolute; bottom: 15px">
+          <v-expand-transition>
+            <div v-if="copySuccess" class="text-success mr-3">
+              <v-icon color="success" left :icon="[mdiClipboardCheckOutline]" />
+              <small>copied!</small>
+            </div>
+          </v-expand-transition>
+        </div>
+        <v-row class="d-flex pt-3 justify-end">
+          <v-col cols="6" class="flex-column align-center text-end">
+            <v-btn
+              v-for="btn in copyBtns"
+              class="text-body-2"
+              @click="btn.copyFn"
+              :key="btn.id"
+              small
+              variant="text"
+              :prepend-icon="[mdiContentCopy]"
+            >
+              copy as {{ btn.copyAs }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <v-divider></v-divider>
+
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn variant="text" @click="dialog = !dialog"> Close </v-btn>
+      </v-card-actions>
+    </v-card>
+  </PopUp>
+</template>
+<script setup>
+import { mdiClipboardCheckOutline, mdiContentCopy } from "@mdi/js";
+import PopUp from "./PopUp.vue";
+import { copyToClipBoard } from "@/utils";
+import { computed, ref } from "vue";
+import { getLayers } from "@/store/Actions";
+import { mapPosition } from "@/store/States";
+
+const dialog = defineModel({ type: Boolean, required: true, default: false });
+
+const props = defineProps({
+  for: {
+    type: String,
+    default: "eox-map",
+  },
+});
+
+const copySuccess = ref(false);
+
+const copyBtns = [
+  {
+    id: Symbol(),
+    copyFn: async () => await copyToClipBoard(mapEntryCode.value, copySuccess),
+    copyAs: "simple map",
+  },
+  {
+    id: Symbol(),
+    copyFn: async () =>
+      await copyToClipBoard(JSON.stringify(getLayers(props?.for)), copySuccess),
+    copyAs: "layers configuration",
+  },
+  {
+    id: Symbol(),
+    copyFn: async () => await copyToClipBoard(mapStepCode.value, copySuccess),
+    copyAs: "map tour section",
+  },
+];
+
+const mapStepCode = computed(() => {
+  const [x, y, z] = mapPosition.value;
+  const preTag = "### <!--{ layers=";
+  const endTag = `zoom="${z}" center=[${[x, y]}] animationOptions={duration:500}}-->
+#### Tour step title
+Text describing the current step of the tour and why it is interesting what the map shows currently
+`;
+  return `${preTag}'${JSON.stringify(getLayers(props?.for))}' ${endTag}`;
+});
+const mapEntryCode = computed(() => {
+  const [x, y, z] = mapPosition.value;
+  const preTag =
+    '## Map Example <!--{as="eox-map" style="width: 100%; height: 500px;" layers=';
+  const endTag = `zoom="${z}" center=[${[x, y]}] }-->`;
+  return `${preTag}'${JSON.stringify(getLayers(props?.for))}' ${endTag}`;
+});
+</script>
+<style scoped>
+.code-block {
+  background-color: #ddd;
+  font-family: monospace;
+  font-size: small;
+}
+</style>

package/widgets/PopUp.vue

@@ -0,0 +1,40 @@
+<template>
+  <span>
+    <v-dialog
+      max-width="500px"
+      max-height="500px"
+      absolute
+      scrollable
+      scroll-strategy="block"
+      close-on-back
+      v-model="dialog"
+    >
+      <v-sheet>
+        <component
+          v-if="widget"
+          :is="definedWidget.component"
+          :key="definedWidget.id"
+          v-bind="definedWidget.props"
+        />
+        <span v-if="$slots.default">
+          <slot />
+        </span>
+      </v-sheet>
+    </v-dialog>
+  </span>
+</template>
+<script setup>
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+
+const dialog = defineModel({ type: Boolean, required: true, default: false });
+
+const props = defineProps({
+  widget: {
+    /** @type {import("vue").PropType<import("@/types").Widget>} */
+    type: Object,
+    default: undefined,
+  },
+});
+
+const [definedWidget] = useDefineWidgets([props?.widget]);
+</script>

package/widgets/WidgetsContainer.vue

@@ -1,6 +1,12 @@
 <template>
-  <details is="animated-details" v-for="mod, idx in importedWidgets" ref="detailsEls" :key="idx" class="overflow-auto"
-    exclusive>
+  <details
+    is="animated-details"
+    v-for="(mod, idx) in importedWidgets"
+    ref="detailsEls"
+    :key="idx"
+    class="overflow-auto"
+    exclusive
+  >
     <summary ref="summaryEls">{{ mod.value.title }}</summary>
     <span :style="{ height: widgetHeight }" class="d-flex flex-column">
       <component :is="mod.value.component" v-bind="mod.value.props" />
@@ -8,41 +14,53 @@
   </details>
 </template>
 <script setup>
-import { useDefineWidgets } from '@/composables/DefineWidgets';
-import { nextTick, onMounted } from 'vue';
-import { ref } from 'vue';
-import { useLayout } from 'vuetify/lib/framework.mjs';
-import 'animated-details'
+import { useDefineWidgets } from "@/composables/DefineWidgets";
+import { nextTick, onMounted } from "vue";
+import { ref } from "vue";
+import { useLayout } from "vuetify/lib/framework.mjs";
+import "animated-details";
 
 const props = defineProps({
   widgets: {
-    /** @type {import('vue').PropType<Omit<import("@/types").Widget,'layout'>[]>} */
+    /**
+     * @type {import("vue").PropType<
+     *   Omit<import("@/types").Widget, "layout">[]
+     * >}
+     */
     type: Array,
     required: true,
-  }
-})
+  },
+});
 
-const importedWidgets = useDefineWidgets(props.widgets)
+const importedWidgets = useDefineWidgets(props.widgets);
 
 /**
- *  details elements template ref
- * @type {import('vue').Ref<HTMLDetailsElement[]>}
- **/
-const detailsEls = ref([])
+ * Details elements template ref
+ *
+ * @type {import("vue").Ref<HTMLDetailsElement[]>}
+ */
+const detailsEls = ref([]);
 /**
- *  summary elements template ref
- * @type {import('vue').Ref<HTMLDetailsElement[]>}
- **/
-const summaryEls = ref([])
-const widgetHeight = ref('')
-const summariesHeights = ref(0)
+ * Summary elements template ref
+ *
+ * @type {import("vue").Ref<HTMLDetailsElement[]>}
+ */
+const summaryEls = ref([]);
+const widgetHeight = ref("");
+const summariesHeights = ref(0);
 
-
-const { mainRect } = useLayout()
+const { mainRect } = useLayout();
 onMounted(async () => {
   await nextTick(() => {
-    summariesHeights.value = summaryEls.value.reduce((acc, el) => acc += el.clientHeight, 0)
-    widgetHeight.value = ((detailsEls.value[0].parentElement?.scrollHeight ?? 0) - summariesHeights.value - mainRect.value['top']) + 'px'
-  })
-})
+    summariesHeights.value = summaryEls.value.reduce(
+      (acc, el) => (acc += el.clientHeight),
+      0,
+    );
+    widgetHeight.value =
+      (detailsEls.value[0].parentElement?.scrollHeight ?? 0) -
+      summariesHeights.value -
+      mainRect.value["top"] +
+      "px";
+  });
+});
 </script>