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

package/core/components/Footer.vue

@@ -1,16 +1,19 @@
 <template>
   <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.
+    <p class="pt-0" style="font-size: 0.8rem;">
+      {{ eodash.brand.footerText ?? "" }}
     </p>
-    <div class="footer-text">
-      {{ new Date().getFullYear() }} — <strong>{{ title }}</strong>
+    <div>
+      <a href="https://github.com/eodash/eodash" class="text-white" target="_blank">eodash</a> by
+      <a href="https://eox.at" target="_blank" class="text-white">
+        <img :src='`data:image/svg+xml;base64,${base64Logo}`' height="11px">
+      </a>
     </div>
   </v-footer>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/utils/keys';
 import { ref } from 'vue';
 import { inject } from 'vue';
 import { useDisplay } from 'vuetify/lib/framework.mjs';
@@ -20,13 +23,9 @@ import { useDisplay } from 'vuetify/lib/framework.mjs';
  * @type {import('vue').Ref<import('vuetify/lib/components/index.mjs').VFooter | null>}
  */
 const footer = ref(null)
-const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
-const title = eodashConfig.brand?.shortName ?? eodashConfig.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;
-}
-</style>

package/core/components/Header.vue

@@ -1,38 +1,14 @@
 <template>
   <v-app-bar color="primary">
-    <v-app-bar-title class="cursor-pointer">{{ title }}</v-app-bar-title>
-    <v-toolbar-items v-if="eodashConfig.routes">
-      <v-btn v-for="route in eodashConfig.routes" :key="route.to" variant="text" @click="navigateTo(route.to)">
-        {{ route.title }}
-      </v-btn>
-    </v-toolbar-items>
-    <v-img class="mx-12 logo" :src="eodashConfig.brand?.logo" />
+    <v-app-bar-title>{{ title }}</v-app-bar-title>
+    <v-img class="mx-12" style="max-width: 140px;" :src="eodash.brand?.logo" />
   </v-app-bar>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
+import { eodashKey } from '@/utils/keys';
 import { inject } from 'vue';
-import { useRouter } from 'vue-router';
 
-const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey))
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
 
-const title = eodashConfig.brand?.name
-
-const { push } = useRouter()
-
-/**
- * @param {string} to
- */
-const navigateTo = (to) => {
-  if (to.toLowerCase().startsWith('http')) {
-    window.open(to, '_self')
-  } else {
-    push(to)
-  }
-}
+const title = eodash.brand?.name
 </script>
-<style scoped lang='scss'>
-.logo {
-  max-width: 140px;
-}
-</style>

package/core/components/Loading.vue

@@ -0,0 +1,27 @@
+<template>
+  <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>
+        <template #fallback>
+          <div class="text-center">
+            Loading...
+          </div>
+        </template>
+      </Suspense>
+    </v-col>
+  </v-row>
+</template>
+<script setup>
+import { inject } from 'vue';
+import { eodashKey } from '@/utils/keys';
+import { useDefineWidgets } from '@/composables/DefineWidgets';
+
+const eodash = /** @type {import("@/types").Eodash} */ (inject(eodashKey))
+
+const [loading] = useDefineWidgets([eodash.template.loading])
+
+</script>

package/core/components/MobileLayout.vue

@@ -1,78 +1,49 @@
 <template>
-  <v-main class="overflow-none" style="height: 91dvh;">
+  <v-main class="overflow-hidden" style="height: 91dvh;">
+
+    <component id="bg-widget" :is="bgWidget.component" v-bind="bgWidget.props"></component>
+
+    <div v-show="activeIdx === idx" id="overlay" class="pa-2" v-for="(importedWidget, idx) in importedWidgets"
+      :key="idx" :style="{
+        bottom: tabsHeightFromBtm, position: 'absolute', overflow: 'hidden',
+        width: '100%', left: 0, top: mainRect.top + 'px', zIndex: 1, background: 'rgb(var(--v-theme-surface))'
+      }">
+      <v-btn icon variant="text" style="height: 5%;position: relative;" @click="activeIdx = -1">&#x2715;</v-btn>
+      <component style="height: 94% !important;" :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 || 48) + '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>
 
-    <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>
   </v-main>
 </template>
 <script setup>
-import { eodashConfigKey } from '@/store/Keys';
-import { inject } from 'vue';
+import { eodashKey } from '@/utils/keys';
+import { inject, ref, onMounted } from 'vue';
 import { useDefineWidgets } from '@/composables/DefineWidgets'
-import { ref } from 'vue';
+import { useLayout } from "vuetify"
 
-const eodashConfig = /** @type {import("@/types").EodashConfig} */(inject(eodashConfigKey));
+const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey));
 
 //import widgets
-const widgetsConfig = eodashConfig.template.widgets
+const widgetsConfig = eodash.template.widgets
 const importedWidgets = useDefineWidgets(widgetsConfig)
-const [bgWidget] = useDefineWidgets([eodashConfig.template?.background])
-
-
+const [bgWidget] = useDefineWidgets([eodash.template?.background])
 
-/**
- * number of flex columns
- */
-const cols = importedWidgets.length / 12
+const { mainRect } = useLayout()
 
-/**
- * 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 tabsHeightFromBtm = ref('')
+onMounted(() => {
+  tabsHeightFromBtm.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));
-}
-
-.close-btn {
-  justify-self: end;
-}
-</style>

package/core/composables/DefineEodash.js

@@ -0,0 +1,57 @@
+import store from "@/store";
+import { eodashKey } from "@/utils/keys";
+import { inject } from "vue";
+
+
+
+/**
+ * Sets user defined instance on runtime.
+ * Consumes `/@fs/config.js` and assign it to `eodash`
+ * @async
+ * @returns {Promise<import("@/types").Eodash>}
+ * @param {string | undefined} runtimeConfig
+ * @see {@linkplain '@/eodash.js'}
+ */
+export const useEodashRuntime = async (runtimeConfig) => {
+  const eodash = /** @type {import("@/types").Eodash} */(inject(eodashKey))
+  /**
+   * @param {import("@/types").Eodash} config
+   */
+  const assignInstance = (config) => {
+       /** @type {(keyof import("@/types").Eodash)[]} */(Object.keys(eodash))
+      .forEach((key) => {
+        //@ts-expect-error
+        eodash[key] = config[key]
+      })
+  }
+
+  if (runtimeConfig) {
+    assignInstance((await import( /* @vite-ignore */new URL(runtimeConfig, import.meta.url).href)).default);
+    return eodash
+  }
+
+  try {
+    assignInstance(
+      (await import( /* @vite-ignore */new URL('/config.js', import.meta.url).href)).default
+    )
+  } catch {
+    try {
+      assignInstance(await import("user:config").then(async m => await m['default']))
+    } catch {
+      console.error('no dashboard configuration defined')
+    }
+  }
+  return eodash
+}
+
+/**
+ * @param {((store:import("@/types").EodashStore)=> Promise<import("@/types").Eodash>)
+ * | import("@/types").Eodash}  config
+ */
+export const createEodash = async (config) => {
+  if (config instanceof Function) {
+    return await config(store)
+  } else {
+    return config
+  }
+}

package/core/composables/DefineWidgets.js

@@ -1,8 +1,7 @@
 import { defineAsyncComponent, reactive, shallowRef, watch } from 'vue'
 import { useSTAcStore } from '@/store/stac'
 import { storeToRefs } from 'pinia'
-
-
+import Loading from '@/components/Loading.vue';
 
 /**
  * @typedef {{
@@ -17,17 +16,27 @@ 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").WidgetConfig | import("@/types").BackgroundWidgetConfig | undefined)[] |
+ * @param { (import("@/types").Widget | import("@/types").BackgroundWidget | undefined)[] |
  * import("@/types").WidgetsContainerProps['widgets'] | undefined} widgetConfigs
  * @returns {Array<ReactiveDefinedWidget>}
  **/
@@ -46,7 +55,6 @@ export const useDefineWidgets = (widgetConfigs) => {
       props: {},
       title: '',
       id: Symbol(),
-      no: '4'
     })
 
     if ('defineWidget' in (config ?? {})) {
@@ -84,17 +92,19 @@ const getWidgetDefinition = (config) => {
   switch (config?.type) {
     case 'internal':
       importedWidget.component = defineAsyncComponent({
-        loader: internalWidgets[`/widgets/${/** @type {import("@/types").InternalComponentConfig} **/(config)?.widget.name}.vue`],
-        suspensible: true
+        loader: internalWidgets[/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.name],
+        suspensible: true,
+        loadingComponent: Loading
       })
-      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentConfig} **/(config)?.widget.props ?? {})
+      importedWidget.props = reactive(/** @type {import("@/types").InternalComponentWidget} **/(config)?.widget.properties ?? {})
 
       break;
 
     case 'web-component':
       importedWidget.component = defineAsyncComponent({
         loader: () => import('@/components/DynamicWebComponent.vue'),
-        suspensible: true
+        suspensible: true,
+        loadingComponent: Loading
       })
       importedWidget.props = reactive(config.widget)
 
@@ -102,7 +112,8 @@ const getWidgetDefinition = (config) => {
     case 'iframe':
       importedWidget.component = defineAsyncComponent({
         loader: () => import('@/components/IframeWrapper.vue'),
-        suspensible: true
+        suspensible: true,
+        loadingComponent: Loading
       })
       importedWidget.props = reactive(config.widget)
       break;

package/core/composables/index.js

@@ -1,23 +1,23 @@
 // 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 "@/eodashConfig"
-import { useTheme } from "vuetify/lib/framework.mjs"
-
+import { reactive } from "vue";
+import { currentUrl, indicator, mapPosition } from "@/store/States";
+import eodash from "@/eodash";
+import { useTheme } from "vuetify/lib/framework.mjs";
+import { onMounted, watch } from "vue";
 
 /**
  * Creates an absolute URL from a relative link and assignes it to `currentUrl`
  * @param {string} [rel = '']
- * @param {string} [base = eodashConfig.stacEndpoint] - base URL, default value is the root stac catalog
+ * @param {string} [base = eodash.stacEndpoint] - base URL, default value is the root stac catalog
  * @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 = eodash.stacEndpoint) => {
+  if (!rel || rel.includes("http")) {
+    currentUrl.value = base;
+    return currentUrl;
   }
 
   const st = base.split("/");
@@ -25,102 +25,122 @@ 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
  * @param {import('vue').Ref<HTMLElement[]|null>} elements - elements to add the functionality to
- * @param {import("@/types").WidgetConfig[]} configs
+ * @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 +152,68 @@ 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;
+};
+
+/**
+ * Composable that syncs store and  URLSearchParameters
+ */
+
+export const useURLSearchParametersSync = () => {
+  onMounted(() => {
+    // Analyze currently set url params when first loaded and set them in the store
+    if ('URLSearchParams' in window) {
+      const searchParams = new URLSearchParams(window.location.search);
+      let x, y, z;
+      searchParams.forEach((value, key) => {
+        if (key === "indicator") {
+          indicator.value = value;
+        }
+        if (key === "x") {
+          x = value;
+        }
+        if (key === "y") {
+          y = value;
+        }
+        if (key === "z") {
+          z = value;
+        }
+      })
+      if (x !== undefined && y !== undefined && z !== undefined) {
+        mapPosition.value = [x, y, z];
       }
     }
-  })
-  return theme
-}
+    watch(
+      [indicator, mapPosition],
+      ([updatedIndicator, updatedMapPosition]) => {
+        if ('URLSearchParams' in window) {
+          const searchParams = new URLSearchParams(window.location.search);
+          if (updatedIndicator !== "") {
+            searchParams.set("indicator", updatedIndicator);
+          }
+          if (updatedMapPosition && updatedMapPosition.length === 3) {
+            searchParams.set("x", updatedMapPosition[0]?.toFixed(4) ?? '');
+            searchParams.set("y", updatedMapPosition[1]?.toFixed(4) ?? '');
+            searchParams.set("z", updatedMapPosition[2]?.toFixed(4) ?? '');
+          }
+          const newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
+          history.pushState(null, '', newRelativePathQuery);
+        }
+      })
+  });
+};