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

package/bin/serverConfig.js

@@ -9,7 +9,8 @@ import {
   cachePath, publicPath, userConfig,
   buildTargetPath,
   logger,
-  rootPath
+  rootPath,
+  internalWidgetsPath
 } from "./utils.js";
 import { readFile } from "fs/promises";
 import { defineConfig, searchForWorkspaceRoot } from "vite"
@@ -61,7 +62,8 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
       alias: {
         '@': fileURLToPath(new URL('../core', import.meta.url)),
         '^': fileURLToPath(new URL('../widgets', import.meta.url)),
-        "user:config": entryPath
+        "user:config": entryPath,
+        "user:widgets": internalWidgetsPath
       },
       extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
     },
@@ -78,7 +80,7 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
     },
     root: fileURLToPath(new URL('..', import.meta.url)),
     optimizeDeps: mode === "development" ? {
-      include: ["webfontloader", "vuetify", "vue", "pinia"],
+      include: ["webfontloader", "vuetify", "vue", "pinia", "stac-js", "urijs"],
       noDiscovery: true,
     } : {},
     /** @type {string|false} */
@@ -100,7 +102,7 @@ export const serverConfig = /** @type {import('vite').UserConfigFnPromise}*/(def
  * @type {import("vite").ServerHook}
  */
 async function configureServer(server) {
-  server.watcher.add([entryPath, runtimeConfigPath])
+  server.watcher.add([entryPath, runtimeConfigPath, path.join(internalWidgetsPath, "**/*.vue")])
 
   let updatedPath = ''
   const loggerInfo = logger.info

package/bin/utils.js

@@ -21,6 +21,7 @@ const pkg = JSON.parse(
  * @property {string | false} publicDir
  * @property {string} outDir
  * @property {string} entryPoint
+ * @property {string} widgets
  * @property {string} cacheDir
  * @property {string} runtime
  * @property {string} base
@@ -33,7 +34,8 @@ cli.version(pkg.version, '-v, --version', 'output the current version')
   .option('--publicDir <path>', 'path to statically served assets folder')
   .option('--no-publicDir', 'stop serving static assets')
   .option('--outDir <path>', 'minified output folder')
-  .option('-e, --entryPoint <path>', 'file exporting `defineConfig`')
+  .option('-e, --entryPoint <path>', 'file exporting `createEodash`')
+  .option('-w, --widgets <path>', 'folder that contains vue components as internal widgets')
   .option('--cacheDir <path>', 'cache folder')
   .option('-r, --runtime <path>', 'file exporting eodash client runtime config')
   .option('-b, --base <path>', 'base public path')
@@ -52,6 +54,7 @@ export const appPath = fileURLToPath(new URL("..", import.meta.url)),
   srcPath = path.join(rootPath, "/src"),
   runtimeConfigPath = userConfig.runtime ? path.resolve(rootPath, userConfig.runtime) : path.join(srcPath, "./runtime.js"),
   entryPath = userConfig.entryPoint ? path.resolve(rootPath, userConfig.entryPoint) : path.join(srcPath, "/main.js"),
+  internalWidgetsPath = userConfig.widgets ? path.resolve(rootPath, userConfig.widgets) : path.join(srcPath, "widgets"),
   dotEodashPath = path.join(rootPath, "/.eodash"),
   buildTargetPath = userConfig.outDir ? path.resolve(rootPath, userConfig.outDir) : path.join(dotEodashPath, '/dist'),
   cachePath = userConfig.cacheDir ? path.resolve(rootPath, userConfig.cacheDir) : path.join(dotEodashPath, 'cache');
@@ -84,6 +87,7 @@ async function getUserConfig(options, command) {
     entryPoint: options.entryPoint ?? config?.entryPoint,
     outDir: options.outDir ?? config?.outDir,
     publicDir: options.publicDir ?? config?.publicDir,
-    runtime: options.runtime ?? config?.runtime
+    runtime: options.runtime ?? config?.runtime,
+    widgets: options.widgets ?? config?.widgets
   }
 }

package/core/App.vue

@@ -8,7 +8,16 @@
 
           <!-- loading state -->
           <template #fallback>
-            Loading...
+            <v-row class="d-flex justify-center align-center ">
+              <v-col class="flex-column justify-center align-center">
+                <Suspense>
+                  <component v-if="loading.component" :is="loading.component" v-bind="loading.props"></component>
+                  <div v-else class="text-center">
+                    Loading...
+                  </div>
+                </Suspense>
+              </v-col>
+            </v-row>
           </template>
         </Suspense>
       </template>
@@ -17,5 +26,11 @@
 </template>
 
 <script setup>
-//
+import { inject } from 'vue';
+import { eodashKey } from './store/Keys';
+import { useDefineWidgets } from './composables/DefineWidgets';
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
+
+const [loading] = useDefineWidgets([eodash.template.loading])
 </script>

package/core/components/DashboardLayout.vue

@@ -7,8 +7,8 @@
       <eox-layout-item v-for="(config, idx) in widgetsConfig" ref="itemEls" :key="idx" class="custom-widget"
         :x="config.layout.x" :y="config.layout.y" :h="config.layout.h" :w="config.layout.w">
 
-        <v-btn position="absolute" variant="tonal" :style="slideBtns[idx].style" class="slide-btn"
-          @click="slideInOut(idx)">
+        <v-btn v-if="slideBtns[idx].enabled" position="absolute" variant="tonal" :style="slideBtns[idx].style"
+          class="slide-btn" @click="slideInOut(idx)">
           <v-icon :icon="slideBtns[idx].active ? slideBtns[idx].icon.in : slideBtns[idx].icon.out" />
         </v-btn>
         <component :key="importedWidgets[idx].value.id" :is="importedWidgets[idx].value.component"
@@ -43,6 +43,7 @@ const { slideBtns, slideInOut } = useSlidePanels(itemEls, widgetsConfig)
 </script>
 <style scoped>
 eox-layout-item {
+  border-radius: 0px;
   background: rgb(var(--v-theme-surface))
 }
 

package/core/components/Footer.vue

@@ -2,10 +2,13 @@
   <v-footer ref="footer" :height="mdAndDown ? '48px' : 'auto'" color="secondary" app
     class="d-flex justify-space-between">
     <p class="pt-0 footer-text">
-      Phasellus feugiat arcu sapien, et iaculis ipsum elementum sit amet. Mauris cursus commodo interdum.
+      {{ eodash.brand.footerText ?? "" }}
     </p>
     <div class="footer-text">
-      {{ new Date().getFullYear() }} — <strong>{{ title }}</strong>
+      <a href="https://github.com/eodash/eodash" target="_blank">eodash</a> by
+      <a href="https://eox.at" target="_blank">
+        <img :src='`data:image/svg+xml;base64,${base64Logo}`' height="11px">
+      </a>
     </div>
   </v-footer>
 </template>
@@ -22,11 +25,16 @@ import { useDisplay } from 'vuetify/lib/framework.mjs';
 const footer = ref(null)
 const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
-const title = eodash.brand?.shortName ?? eodash.brand?.name
 const { mdAndDown } = useDisplay()
+const eoxLogo = `<svg width="100%" height="100%" viewBox="0 0 355 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="ink_ext_XXXXXX"><path id="path5076" d="M152.986,40.52l-0.75,-0.019l-0.737,-0.056l-0.725,-0.093l-0.713,-0.127l-0.7,-0.162l-0.7,-0.196l-0.675,-0.228l-0.65,-0.261l-0.65,-0.292l-0.625,-0.319l-0.612,-0.352l-0.588,-0.377l-0.562,-0.407l-0.55,-0.431l-0.538,-0.457l-0.5,-0.481l-0.487,-0.505l-0.45,-0.528l-0.438,-0.55l-0.4,-0.57l-0.375,-0.59l-0.35,-0.609l-0.325,-0.627l-0.287,-0.645l-0.263,-0.66l-0.225,-0.676l-0.2,-0.69l-0.162,-0.704l-0.125,-0.717l-0.1,-0.728l-0.05,-0.739l-0.025,-0.748c0,-8.023 6.512,-14.532 14.537,-14.532c8.038,0 14.538,6.509 14.538,14.532c0,8.036 -6.5,14.544 -14.538,14.544Z" style="fill:none;"/><path id="path5078" d="M165.748,-0.002c-42.009,0 -76.06,18.985 -76.06,42.402c0,13.268 10.921,25.102 28.021,32.875c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.186 16.83,-40.82 45.148,-49.615c-14.687,6.665 -24.923,21.427 -24.923,38.599c0,23.218 18.648,42.046 41.773,42.383c-0.037,0.005 -0.087,0.015 -0.137,0.02c0.263,0 0.512,0.009 0.762,0.009c42.013,0 76.076,-18.984 76.076,-42.412c0,-13.261 -10.937,-25.097 -28.037,-32.871l0.75,0.522l0.736,0.531l0.713,0.543l0.7,0.555l0.687,0.566l0.664,0.578l0.649,0.588l0.625,0.6l0.613,0.609l0.588,0.621l0.574,0.631l0.562,0.643l0.538,0.652l0.513,0.662l0.5,0.672l0.475,0.684l0.449,0.693l0.438,0.703l0.425,0.713l0.387,0.723l0.375,0.73l0.352,0.74l0.336,0.75l0.3,0.76l0.287,0.77l0.264,0.777l0.25,0.787l0.211,0.795l0.188,0.805l0.175,0.812l0.151,0.82l0.125,0.831c2.675,20.19 -16.838,40.825 -45.151,49.619c14.688,-6.665 24.926,-21.426 24.926,-38.614c0,-23.202 -18.65,-42.026 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.526,-0.01 -0.789,-0.01Zm-13.248,11.314c7.817,0 14.25,6.433 14.25,14.25c0,0.001 0,0.001 0,0.001c0,7.817 -6.433,14.249 -14.25,14.249c-7.817,0 -14.25,-6.432 -14.25,-14.249c0,-0.001 0,-0.001 0,-0.001c0,-7.817 6.433,-14.25 14.25,-14.25Z" style="fill:#fff;fill-rule:nonzero;"/><path id="path5080" d="M213.786,9.529l0.75,0.521l0.738,0.532l0.712,0.544l0.7,0.555l0.688,0.566l0.662,0.577l0.65,0.588l0.625,0.6l0.613,0.61l0.587,0.62l0.575,0.631l0.563,0.643l0.537,0.652l0.513,0.663l0.5,0.672l0.475,0.684l0.45,0.692l0.437,0.703l0.425,0.712l0.388,0.723l0.375,0.731l0.35,0.741l0.337,0.75l0.3,0.76l0.288,0.769l0.262,0.777l0.25,0.786l0.213,0.797l0.187,0.804l0.175,0.812l0.15,0.821l0.125,0.83c2.675,20.19 -16.837,40.825 -45.15,49.619c14.688,-6.665 24.925,-21.426 24.925,-38.614c0,-23.202 -18.65,-42.025 -41.775,-42.367c0.05,-0.005 0.1,-0.015 0.15,-0.025c-0.262,0 -0.525,-0.01 -0.787,-0.01c-42.01,0 -76.062,18.985 -76.062,42.402c0,13.268 10.922,25.103 28.022,32.876c-8.081,-5.487 -13.403,-12.973 -14.584,-21.859c-2.685,-20.187 16.831,-40.82 45.149,-49.615c-14.688,6.665 -24.925,21.426 -24.925,38.598c0,23.218 18.65,42.046 41.775,42.383c-0.038,0.005 -0.088,0.015 -0.138,0.02c0.263,0 0.513,0.01 0.763,0.01c42.012,-0.001 76.075,-18.985 76.075,-42.413c0,-13.261 -10.938,-25.097 -28.038,-32.871Z" style="fill:none;"/><path id="path5082" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0" style="fill:#fff;fill-rule:nonzero;"/><path id="path5084" d="M354.323,82.586l-41.999,-42.002l38.524,-38.515l-29.913,0l-23.562,23.559l-23.563,-23.559l-29.924,0l38.525,38.515l-42,42.002l29.913,0l27.049,-27.046l27.05,27.046l29.9,0Z" style="fill:none;"/><path id="path5086" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453" style="fill:#fff;fill-rule:nonzero;"/><path id="path5088" d="M0,2.069l75.033,0l0,16.489l-51.629,0l0,14.931l40.258,0l0,16.495l-40.258,0l0,16.05l53.124,0l0,16.488l-76.528,0l0,-80.453Z" style="fill:none;"/></g></svg>`
+const base64Logo = window.btoa(eoxLogo)
 </script>
 <style scoped lang='scss'>
 .footer-text {
   font-size: 0.8rem;
 }
+
+.footer-text a {
+  color: white;
+}
 </style>

package/core/components/MobileLayout.vue

@@ -1,29 +1,29 @@
 <template>
-  <v-main class="overflow-none" style="height: 91dvh;">
+  <v-main class="overflow-hidden" style="height: 91dvh;">
 
     <component :is="bgWidget.component" v-bind="bgWidget.props"></component>
 
-    <v-row no-gutters class="d-flex justify-center align-end">
-      <v-col v-for="(importedWidget, idx) in importedWidgets" :key="idx" :cols="cols"
-        class="flex-column fill-height fill-width elevation-1 align-start ma-0 justify-center">
-        <span class="d-flex pa-2 justify-center ma-0 panel-header align-center fill-width"
-          @click="handleSelection(idx)">
-          {{ importedWidget.value.title }}
-        </span>
-        <div v-show="activeIdx === idx" class="overlay align-self-end overflow-auto pa-2">
-          <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1">&#x2715;</v-btn>
-          <component :key="importedWidget.value.id" :is="importedWidget.value.component" v-show="activeIdx === idx"
-            v-bind="importedWidget.value.props" />
-        </div>
-      </v-col>
-    </v-row>
+    <div v-show="activeIdx === idx" class="overlay pa-2" :style="{ bottom: tabsBottom }"
+      v-for="(importedWidget, idx) in importedWidgets" :key="idx">
+      <v-btn icon variant="text" class="close-btn" @click="activeIdx = -1">&#x2715;</v-btn>
+      <component :key="importedWidget.value.id" :is="importedWidget.value.component" v-show="activeIdx === idx"
+        v-bind="importedWidget.value.props" />
+    </div>
+
+    <v-tabs ref="tabs" align-tabs="center" bg-color="surface"
+      :style="{ position: 'relative', bottom: mainRect.bottom + 'px', zIndex: 10 }" show-arrows v-model="activeIdx">
+      <v-tab v-for="(importedWidget, idx) in importedWidgets" :key="idx" :value="idx">
+        {{ importedWidget.value.title }}
+      </v-tab>
+    </v-tabs>
+
   </v-main>
 </template>
 <script setup>
 import { eodashKey } from '@/store/Keys';
-import { inject } from 'vue';
+import { inject, ref, onMounted } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
-import { ref } from 'vue';
+import { useLayout } from "vuetify"
 
 const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
 
@@ -32,47 +32,30 @@ const widgetsConfig = eodash.template.widgets
 const importedWidgets = useDefineWidgets(widgetsConfig)
 const [bgWidget] = useDefineWidgets([eodash.template?.background])
 
+const { mainRect } = useLayout()
 
-
-/**
- * number of flex columns
- */
-const cols = importedWidgets.length / 12
-
-/**
- * index of the active tab
- */
 const activeIdx = ref(-1)
 
-/**
-* @param {number} idx
-**/
-const handleSelection = (idx) => {
-  activeIdx.value = activeIdx.value === idx ? -1 : idx
-}
+/** @type {import("vue").Ref<import("vuetify/components").VTabs|null>} */
+const tabs = ref(null)
+const tabsBottom = ref('')
+onMounted(() => {
+  tabsBottom.value = mainRect.value.bottom + (/** @type {HTMLElement} */(tabs.value?.$el)?.clientHeight ?? 0) + "px"
+})
 </script>
 <style scoped lang='scss'>
-.panel-header {
-  height: auto;
-  margin: 0;
-  width: 100%;
-  position: relative;
-  bottom: 64px;
-  z-index: 10;
-  background: rgb(var(--v-theme-background));
-}
-
 .overlay {
   position: absolute;
   width: 100%;
   left: 0;
   top: 64px;
-  bottom: 64px;
   z-index: 1;
-  background: rgb(var(--v-theme-background));
+  background: rgb(var(--v-theme-surface));
 }
 
 .close-btn {
-  justify-self: end;
+  position: relative;
+  height: 1rem;
+  font-size: 0.8rem;
 }
 </style>

package/core/composables/DefineWidgets.js

@@ -2,8 +2,6 @@ import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
 import { useSTAcStore } from '@/store/stac'
 import { storeToRefs } from 'pinia'
 
-
-
 /**
  * @typedef {{
  *   component:import('vue').Component | null;
@@ -17,14 +15,24 @@ import { storeToRefs } from 'pinia'
  * @typedef {import('vue').ShallowRef<DefinedWidget>} ReactiveDefinedWidget
 */
 
+const internalWidgets = (() => {
+  /**
+   * @type {Record<string,() => Promise<import('vue').Component>>}
+   */
+  const importMap = {
+    ...import.meta.glob('^/**/*.vue'),
+    ...import.meta.glob("user:widgets/**/*.vue")
+  }
+  for (const key in importMap) {
+    const newKey = /** @type {string} */(key.split('/').at(-1)).slice(0, -4)
+    Object.defineProperty(importMap, newKey,
+      /** @type {PropertyDescriptor} */(Object.getOwnPropertyDescriptor(importMap, key)));
+    delete importMap[key];
+  }
+  return importMap
+})();
 
 
-/**
- * import map to all vue components inside `widgets` directory.
- * @type {Record<string,() => Promise<import('vue').Component>>}
- */
-const internalWidgets = import.meta.glob('^/**/*.vue')
-
 /**
  * Composable that converts widgets Configurations to defined imported widgets
  * @param { (import("@/types").Widget | import("@/types").BackgroundWidget | undefined)[] |
@@ -46,7 +54,6 @@ export const useDefineWidgets = (widgetConfigs) => {
       props: {},
       title: '',
       id: Symbol(),
-      no: '4'
     })
 
     if ('defineWidget' in (config ?? {})) {
@@ -84,10 +91,10 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case 'internal':
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[`/widgets/${/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name}.vue`],
+        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
         suspensible: true
       })
-      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.props ?? {})
+      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.properties ?? {})
 
       break;
 

package/core/composables/index.js

@@ -1,11 +1,12 @@
 // functions of this folder can only be consumed inside setup stores,
 // setup functions or vue composition api components
 
-import { reactive } from "vue"
-import { currentUrl } from "@/store/States"
-import eodashConfig from "@/eodash"
-import { useTheme } from "vuetify/lib/framework.mjs"
-
+import { reactive } from "vue";
+import { currentUrl, datetime, mapInstance, indicator } from "@/store/States";
+import eodashConfig from "@/eodash";
+import { useTheme } from "vuetify/lib/framework.mjs";
+import { useRouter } from "vue-router";
+import { onMounted, onUnmounted, watch } from "vue";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
@@ -14,10 +15,10 @@ import { useTheme } from "vuetify/lib/framework.mjs"
  * @returns {import('vue').Ref<string>} - returns `currentUrl`
  * @see {@link '@/store/States.js'}
  */
-export const useAbsoluteUrl = (rel = '', base = eodashConfig.stacEndpoint) => {
-  if (!rel || rel.includes('http')) {
-    currentUrl.value = base
-    return currentUrl
+export const useAbsoluteUrl = (rel = "", base = eodashConfig.stacEndpoint) => {
+  if (!rel || rel.includes("http")) {
+    currentUrl.value = base;
+    return currentUrl;
   }
 
   const st = base.split("/");
@@ -25,17 +26,14 @@ export const useAbsoluteUrl = (rel = '', base = eodashConfig.stacEndpoint) => {
   st.pop();
 
   for (let i = 0; i < arr.length; i++) {
-    if (arr[i] == ".")
-      continue;
-    if (arr[i] == "..")
-      st.pop();
-    else
-      st.push(arr[i]);
+    if (arr[i] == ".") continue;
+    if (arr[i] == "..") st.pop();
+    else st.push(arr[i]);
   }
 
   currentUrl.value = st.join("/");
-  return currentUrl
-}
+  return currentUrl;
+};
 
 /**
  * Adds slide in and out functionality to Elements
@@ -43,84 +41,107 @@ export const useAbsoluteUrl = (rel = '', base = eodashConfig.stacEndpoint) => {
  * @param {import("@/types").Widget[]} configs
  */
 export const useSlidePanels = (elements, configs) => {
-
   /**
    * Sliding direction
    */
-  const slideDirs = configs.map(m => m.layout.x == 0 ? 'left' : m.layout.x == 12 - m.layout.w ? 'right' : m.layout.y < 6 ? 'up' : 'down')
+  const slideDirs = configs.map((m) =>
+    m.layout.x == 0
+      ? "left"
+      : m.layout.x == 12 - m.layout.w
+        ? "right"
+        : m.layout.y < 6
+          ? "up"
+          : "down"
+  );
 
   /**
    * Array of sliding button's style and icons
    */
-  const slideBtns = slideDirs.map(d => {
-    const btn = reactive({ style: {}, icon: { in: '', out: '' }, active: false })
-    switch (d) {
-      case 'left':
-        btn.style = { 'top': '50%', 'right': '-11%' }
-        btn.icon.in = 'mdi-chevron-double-right'
-        btn.icon.out = 'mdi-chevron-double-left'
+  const slideBtns = slideDirs.map((dir, idx) => {
+    const btn = reactive({
+      style: {},
+      icon: { in: "", out: "" },
+      active: false,
+      enabled: true,
+    });
+    if (configs[idx].slidable === false) {
+      btn.enabled = false;
+      return btn;
+    }
+
+    switch (dir) {
+      case "left":
+        btn.style = { top: "50%", right: "-11%" };
+        btn.icon.in = "mdi-chevron-double-right";
+        btn.icon.out = "mdi-chevron-double-left";
 
         break;
-      case 'right':
-        btn.style = { 'top': '50%', 'left': '-11%' }
-        btn.icon.in = 'mdi-chevron-double-left'
-        btn.icon.out = 'mdi-chevron-double-right'
+      case "right":
+        btn.style = { top: "50%", left: "-11%" };
+        btn.icon.in = "mdi-chevron-double-left";
+        btn.icon.out = "mdi-chevron-double-right";
 
         break;
-      case 'up':
-        btn.style = { 'right': '50%', 'bottom': '-17%' }
-        btn.icon.in = 'mdi-chevron-double-down'
-        btn.icon.out = 'mdi-chevron-double-up'
+      case "up":
+        btn.style = { right: "50%", bottom: "-17%" };
+        btn.icon.in = "mdi-chevron-double-down";
+        btn.icon.out = "mdi-chevron-double-up";
 
         break;
-      case 'down':
-        btn.style = { 'right': '50%', 'top': '-17%' }
-        btn.icon.in = 'mdi-chevron-double-up'
-        btn.icon.out = 'mdi-chevron-double-down'
+      case "down":
+        btn.style = { right: "50%", top: "-17%" };
+        btn.icon.in = "mdi-chevron-double-up";
+        btn.icon.out = "mdi-chevron-double-down";
         break;
 
       default:
-        console.error('sliding error')
+        console.error("sliding error");
         break;
     }
-    return btn
-  })
+    return btn;
+  });
 
   /**
    * Transforms the element's position based on the direction
    * @param {number} idx - index of the pressed element
    */
   const slideInOut = (idx) => {
-    const parentStyle = /** @type {CSSStyleDeclaration} */ (elements.value?.[idx].style)
+    const parentStyle = /** @type {CSSStyleDeclaration} */ (
+      elements.value?.[idx].style
+    );
     if (parentStyle?.transform.length) {
-      slideBtns[idx].active = false
+      slideBtns[idx].active = false;
       parentStyle.transform = "";
     } else {
-      slideBtns[idx].active = true
-      parentStyle.transition = "transform 0.3s ease-in-out"
+      slideBtns[idx].active = true;
+      parentStyle.transition = "transform 0.3s ease-in-out";
       switch (slideDirs[idx]) {
-        case 'left':
-          parentStyle.transform = "translateX(-100%)"
+        case "left":
+          parentStyle.transform = "translateX(-100%)";
           break;
-        case 'right':
-          parentStyle.transform = "translateX(100%)"
+        case "right":
+          parentStyle.transform = "translateX(100%)";
           break;
-        case 'up':
-          parentStyle.transform = `translateY(-${((configs[idx].layout.y / configs[idx].layout.h) * 100) + 100}%)`
+        case "up":
+          parentStyle.transform = `translateY(-${(configs[idx].layout.y / configs[idx].layout.h) * 100 + 100
+            }%)`;
           break;
-        case 'down':
-          parentStyle.transform = `translateY(${((Math.max(0, 12 - configs[idx].layout.y - configs[idx].layout.h) / configs[idx].layout.h) * 100) + 100}%)`;
+        case "down":
+          parentStyle.transform = `translateY(${(Math.max(0, 12 - configs[idx].layout.y - configs[idx].layout.h) /
+            configs[idx].layout.h) *
+            100 +
+            100
+            }%)`;
           break;
 
         default:
-          console.error('sliding error')
+          console.error("sliding error");
           break;
       }
     }
-  }
-  return { slideBtns, slideInOut }
-}
-
+  };
+  return { slideBtns, slideInOut };
+};
 
 /**
  * Updates an existing Vuetify theme.
@@ -132,16 +153,82 @@ export const useSlidePanels = (elements, configs) => {
 export const useUpdateTheme = (themeName, themeDefinition = {}) => {
   const theme = useTheme();
 
-  /** @type {Array<keyof import('vuetify').ThemeDefinition>} */(Object.keys(themeDefinition)).forEach((key) => {
-    if (key === 'dark') {
-      theme.themes.value[themeName][key] = /** @type {Boolean} */ (themeDefinition[key])
+  /** @type {Array<keyof import('vuetify').ThemeDefinition>} */ (
+    Object.keys(themeDefinition)
+  ).forEach((key) => {
+    if (key === "dark") {
+      theme.themes.value[themeName][key] = /** @type {Boolean} */ (
+        themeDefinition[key]
+      );
     } else {
       //@ts-expect-error
       theme.themes.value[themeName][key] = {
         ...theme.themes.value[themeName][key],
-        ...themeDefinition[key]
-      }
+        ...themeDefinition[key],
+      };
     }
-  })
-  return theme
-}
+  });
+  return theme;
+};
+
+/**
+ * Composable that initiates route query params to store
+ * STAC related values
+ */
+export const useRouteParams = () => {
+  const router = useRouter();
+  /**
+   * @type {import("openlayers").EventsListenerFunctionType}
+   */
+  const handleMoveEnd = (evt) => {
+    const map = /** @type {import("openlayers").Map | undefined} */ (
+      /** @type {*} */ (evt).map
+    );
+    const [x, y] = map?.getView().getCenter() ?? [0, 0];
+    const z = map?.getView().getZoom();
+    const currentQuery = router.currentRoute.value.query;
+    router.push({
+      query: {
+        ...currentQuery,
+        x: x.toFixed(4),
+        y: y.toFixed(4),
+        z: z?.toFixed(4),
+      },
+    });
+  };
+  onMounted(() => {
+    // Set datetime based on kvp
+    if (
+      "datetime" in router.currentRoute.value.query &&
+      router.currentRoute.value.query["datetime"] !== ""
+    ) {
+      // @ts-ignore
+      datetime.value =
+        /** @type {string} */ router.currentRoute.value.query["datetime"];
+    }
+    watch(
+      [datetime, mapInstance, currentUrl, indicator],
+      ([updatedDate, updatedMap, _updatedUrl, updatedIndicator]) => {
+        const [x, y] = updatedMap?.getView().getCenter() ?? [0, 0];
+        // lets reduce unnecessary accuracy
+        const currentQuery = router.currentRoute.value.query;
+        router.push({
+          query: {
+            ...currentQuery,
+            indicator: updatedIndicator,
+            x: x.toFixed(4),
+            y: y.toFixed(4),
+            z: updatedMap?.getView().getZoom().toFixed(),
+            datetime: updatedDate,
+            // url: updatedUrl,
+          },
+        });
+        updatedMap?.on("moveend", handleMoveEnd);
+      }
+    );
+  });
+
+  onUnmounted(() => {
+    mapInstance.value?.un("moveend", handleMoveEnd);
+  });
+};