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

package/core/eodash.js

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

package/core/plugins/index.js

@@ -1,15 +1,7 @@
-/**
- * plugins/index.ts
- *
- * Automatically included in `./src/main.ts`
- */
-
-// Plugins
 import vuetify from './vuetify';
-import router from './router';
 import { createPinia } from 'pinia';
-import eodashConfig from '@/eodashConfig';
-import { eodashConfigKey } from '@/store/Keys';
+import eodash from '@/eodash';
+import { eodashKey } from '@/utils/keys';
 import store from '../store';
 
 export const pinia = createPinia();
@@ -21,7 +13,6 @@ export function registerPlugins(app) {
   window.eodashStore = store;
 
   app.use(vuetify)
-    .use(router)
     .use(pinia)
-    .provide(eodashConfigKey, eodashConfig);
+    .provide(eodashKey, eodash);
 }

package/core/plugins/vuetify.js

@@ -10,9 +10,10 @@ import 'vuetify/styles';
 
 
 import { createVuetify } from 'vuetify';
+// import {} from "vuetify"
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
-export default createVuetify({
+const vuetify = createVuetify({
   theme: {
     themes: {
       dashboardTheme: {},
@@ -24,4 +25,6 @@ export default createVuetify({
       },
     },
   },
-});
+})
+
+export default vuetify

package/core/store/Actions.js

@@ -1,28 +0,0 @@
-/**
- * loads font in the app using `webfontloader`
- * @param {string} [family="Roboto"]
- * @param {string} [link]
- * @returns {Promise<string>} - font family name
- * @see {@link "https://github.com/typekit/webfontloader "}
- */
-export const loadFont = async (family = "Roboto", link) => {
-  const WebFontLoader = (await import('webfontloader')).default;
-  if (link) {
-    WebFontLoader.load({
-      custom: {
-        // Use FVD notation to include families https://github.com/typekit/fvd
-        families: [family],
-        // Path to stylesheet that defines font-face
-        urls: [link],
-      },
-    });
-  }
-  else {
-    WebFontLoader.load({
-      google: {
-        families: [family]
-      }
-    });
-  }
-  return family;
-};

package/core/store/States.js

@@ -4,9 +4,18 @@ 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("")
 
 /**
- * ol map object. Updated by the config file.
- * @type {import("vue").Ref<import('openlayers').Map | null>}
+ * Current map position
+ * @type {import("vue").Ref<(number|undefined)[]>}
  */
-export const mapInstance = ref(null);
+export const mapPosition = ref([])

package/core/store/stac.js

@@ -2,7 +2,8 @@ import { defineStore } from 'pinia';
 import { inject, ref } from 'vue';
 import axios from 'axios';
 import { useAbsoluteUrl } from '@/composables/index';
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/utils/keys';
+import { indicator } from '@/store/States';
 
 export const useSTAcStore = defineStore('stac', () => {
   /**
@@ -14,22 +15,22 @@ export const useSTAcStore = defineStore('stac', () => {
   /**
    * selected STAC object.
    * @type {import('vue').Ref<import('stac-ts').StacCatalog |
-   * import('stac-ts').StacCollection |import('stac-ts').StacItem
+   *  import('stac-ts').StacCollection |import('stac-ts').StacItem
    * | null>}
    */
   const selectedStac = ref(null);
 
 
-  const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey));
+  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
 
   /**
    * fetches root stac catalog and assign it to `stac`
    * @async
-   * @param {import("@/types").StacEndpoint} [url = eodashConfig.stacEndpoint]
+   * @param {import("@/types").StacEndpoint} [url = eodash.stacEndpoint]
    * @returns {Promise<void>}
    * @see {@link stac}
    */
-  async function loadSTAC(url = eodashConfig.stacEndpoint) {
+  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) {
@@ -54,6 +55,7 @@ export const useSTAcStore = defineStore('stac', () => {
 
     await axios.get(absoluteUrl.value).then(resp => {
       selectedStac.value = resp.data;
+      indicator.value = selectedStac.value?.id ?? "";
     }).catch(err => console.error(err));
   }