fix: update @eodash/eodash to v5.0.0

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "config-template",
+  "name": "eodash-instance-template",
   "version": "1.0.0",
   "description": "",
   "type": "module",
@@ -12,16 +12,15 @@
     "format": "prettier . --write"
   },
   "dependencies": {
-    "@eodash/eodash": "^5.0.0-alpha.2.18",
-    "@eox/stacinfo": "^0.3.3"
+    "@eodash/eodash": "^5.0.0"
   },
   "author": "",
   "devDependencies": {
     "@eox/eslint-config": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.27.0",
-    "typescript": "^5.5.4"
+    "eslint": "^8.57.1",
+    "eslint-plugin-vue": "^9.33.0",
+    "typescript": "^5.8.3"
   }
 }

src/main.js

@@ -1,135 +1,33 @@
-import { createEodash, store } from "@eodash/eodash";
-const { currentUrl } = store.states;
+import { createEodash } from "@eodash/eodash";
+import light from "./templates/light";
+import expert from "./templates/expert";
+import compare from "./templates/compare";
 
 export default createEodash({
-  id: "template-id",
-  stacEndpoint:
-    "https://eodashcatalog.eox.at/test-style/trilateral/catalog.json",
-  brand: {
-    name: "Dashboard",
-    font: {
-      family: "Poppins",
-      link: new URL("./assets/poppins.css", import.meta.url).href,
-    },
-    logo: "/logo.png",
-    errorMessage:
-      "something went wrong, please contact [email protected] if the issue persists",
-    footerText: "eodash instance template",
-    theme: {
-      colors: {
-        primary: "#004170",
-        secondary: "#004170",
-        background: "#fff",
-        surface: "#fff",
+    id: "demo",
+    stacEndpoint: "https://esa-eodashboards.github.io/eodashboard-catalog/trilateral/catalog.json",
+    brand: {
+      name: "Dashboard",
+      font: {
+        family: "Poppins",
+        link: new URL("./assets/poppins.css", import.meta.url).href,
       },
-    },
-  },
-  template: {
-    gap: 0,
-    background: {
-      id: Symbol(),
-      type: "internal",
-      widget: {
-        name: "EodashMap",
-        properties: {
-          // enableCompare: true,
+      logo: "/logo.png",
+      errorMessage:
+        "something went wrong, please contact [email protected] if the issue persists",
+      footerText: "eodash instance template",
+      theme: {
+        colors: {
+          primary: "#004170",
+          secondary: "#004170",
+          background: "#fff",
+          surface: "#fff",
         },
       },
     },
-    widgets: [
-      {
-        id: Symbol(),
-        type: "internal",
-        title: "Indicators",
-        layout: { x: 0, y: 0, w: 3, h: 8 },
-        widget: {
-          name: "EodashItemFilter",
-          properties: {
-            // enableCompare: true,
-            aggregateResults: "collection_group",
-          },
-        },
-      },
-      {
-        id: Symbol(),
-        type: "internal",
-        title: "Layer Control",
-        layout: { x: 0, y: 8, w: 3, h: 4 },
-        widget: {
-          name: "EodashLayerControl",
-        },
-      },
-      {
-        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: `.single-property {columns: 1!important;}
-                      h1 {margin:0px!important;font-size:16px!important;}
-                      header h1:after {
-                        content:' ';
-                        display:block;
-                        border:1px solid #d0d0d0;
-                      }
-                      h2 {font-size:15px}
-                      h3 {font-size:14px}
-                      summary {cursor: pointer;}
-                      #properties li > .value { font-weight: normal !important;}
-                      main {padding-bottom: 10px;}
-                      .footer-container {line-height:1;}
-                      .footer-container button {margin-top: -10px;}
-                      .footer-container small {font-size:10px;line-height:1;}`,
-                    header: '["title"]',
-                    tags: '["themes"]',
-                    subheader: "[]",
-                    properties: '["satellite","sensor","agency","extent"]',
-                    featured: '["description","providers","assets","links"]',
-                    footer: '["sci:citation"]',
-                  },
-                  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;
-        },
-      },
-    ],
-  },
-});
+    templates: {
+     light,
+     expert,
+     compare
+    }
+  });

src/templates/compare.js

@@ -0,0 +1,143 @@
+import { mdiViewDashboardVariant } from "@mdi/js";
+
+/** @type {import("@eodash/eodash").Template} */
+export default {
+  gap: 16,
+  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: "background-map",
+    type: "internal",
+    widget: {
+      name: "EodashMap",
+      properties: {
+        enableCompare: true,
+      },
+    },
+  },
+  widgets: [
+    {
+      id: Symbol(),
+      type: "internal",
+      title: "Tools",
+      layout: { x: 0, y: 0, w: 3, h: 1 },
+      widget: {
+        name: "EodashTools",
+        properties: {
+          layoutTarget: "expert",
+          layoutIcon: mdiViewDashboardVariant,
+          itemFilterConfig: {
+            cssVars: {
+              "--form-flex-direction": "row",
+            },
+          },
+        },
+      },
+    },
+    // compare indicators
+    {
+      id: Symbol(),
+      type: "internal",
+      title: "Compare Tools",
+      layout: { x: 9, y: 0, w: 3, h: 1 },
+      widget: {
+        name: "EodashTools",
+        properties: {
+          showLayoutSwitcher: false,
+          indicatorBtnText: "Select an indicator to compare",
+          itemFilterConfig: {
+            enableCompare: true,
+            // resultsTitle:"Select an indicator to compare",
+            filtersTitle: "Select an indicator to compare",
+            // filterProperties: [],
+            cssVars: {
+              "--form-flex-direction": "row",
+            },
+          },
+        },
+      },
+    },
+    {
+      id: Symbol(),
+      type: "internal",
+      title: "Layers",
+      layout: { x: 0, y: 1, w: 3, h: 6 },
+      widget: {
+        name: "EodashLayerControl",
+      },
+    },
+    {
+      id: Symbol(),
+      title: "Comparison Layers",
+      layout: { x: 9, y: 1, w: 3, h: 6 },
+      type: "internal",
+      widget: {
+        name: "EodashLayerControl",
+        properties: {
+          map: "second",
+        },
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) =>
+        selectedSTAC?.links.some((l) => l.rel === "service")
+          ? {
+              id: Symbol(),
+              type: "internal",
+              title: "Processes",
+              layout: { x: 0, y: 7, w: 3, h: 5 },
+              widget: {
+                name: "EodashProcess",
+              },
+            }
+          : null,
+    },
+    {
+      defineWidget: (selected) => {
+        return selected
+          ? {
+              id: "Buttons",
+              layout: { x: 8, y: 0, w: 1, h: 2 },
+              title: "Buttons",
+              type: "internal",
+              widget: {
+                name: "EodashMapBtns",
+              },
+            }
+          : null;
+      },
+    },
+    {
+      defineWidget: (selectedSTAC) => {
+        return selectedSTAC
+          ? {
+              id: "Datepicker",
+              type: "internal",
+              layout: { x: 5, y: 8, w: 2, h: 4 },
+              title: "Date",
+              widget: {
+                name: "EodashDatePicker",
+                properties: {
+                  hintText: `<b>Hint:</b> closest available date is displayed <br />
+                                    on map (see Analysis Layers)`,
+                },
+              },
+            }
+          : null;
+      },
+    },
+  ],
+};