Save map and time state in URL

package.json

@@ -6,6 +6,8 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@vuepic/vue-datepicker": "^9.0.3",
+    "@vueuse/components": "^12.0.0",
+    "@vueuse/core": "^12.0.0",
     "@wwtelescope/engine-pinia": "^0.9.0",
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.1.3",

src/ShareButton.vue

@@ -0,0 +1,68 @@
+
+<template>
+  <use-clipboard v-slot="{ copy, copied }" :source="source">
+    <v-tooltip :text="copied ? 'Link Copied' : 'Copy link to share view'">
+      <template v-slot:activator="{ props }">
+        <v-btn
+          aria-label="Copy link to share view"
+          class="share-button"
+          icon
+          @click="copy()"
+          @keyup.enter="copy()"
+          v-bind="props"
+          :color="buttonColor"
+          :elevation="elevation"
+          :size="size"
+          :rounded="rounded"
+        >
+          <v-icon :color="iconColor">mdi-share-variant</v-icon>
+        </v-btn>
+      </template>
+    </v-tooltip>
+  </use-clipboard>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    source: {
+      type: String,
+      required: true,
+    },
+    buttonColor: {
+      type: String,
+      default: "#ffffff66",
+    },
+    iconColor: {
+      type: String,
+      default: "#333",
+    },
+    elevation: {
+      type: [String, Number],
+      default: "0",
+    },
+    size: {
+      type: String,
+      default: "small",
+    },
+    rounded: {
+      type: [String, Number],
+      default: "1",
+    },
+
+  },
+});
+</script>
+
+<style scoped>
+.share-button {
+  z-index: 1000;
+  background-color: rgb(255 255 255);
+  border: 1px solid black;
+  backdrop-filter: blur(5px);
+  padding-inline: 5px;
+  border-radius: 10px;
+}
+</style>

src/SnackbarAlert.vue

@@ -0,0 +1,128 @@
+<script lang="ts">
+/**
+ * v-snackbar wrapper component. The message can be passed
+ * as a prop or as as the default slot. Props are passed
+ * through to v-snackbar.
+ * 
+ * Example Usage
+ * 
+ * <SnackbarAlert msg="Hello there" />
+ * 
+ * <SnackbarAlert msg="Hello there">
+ *  <template v-slot:activator="{ onClick, id }">
+ *   <v-btn :id="id" @click="onClick" color="primary">
+ *    Custom Activator
+ *   </v-btn>
+ *  </template>
+ * </SnackbarAlert>
+ * 
+ */
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: "SnackbarAlert",
+
+  emits: ['update:modelValue'],
+
+  props: {
+    msg: {
+      type: String || undefined || null,
+      required: false,
+      default: undefined,
+    },
+    hide: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    label: {
+      type: String,
+      required: false,
+      default: "Recent changes"
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    hideButton: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data() {
+    return {
+      snackbar: false,
+    };
+  },
+
+  methods: {
+    openDialog() {
+      if (this.snackbar) return;
+
+      this.snackbar = true;
+      this.$emit('update:modelValue', true);
+      this.$nextTick(() => {
+        (this.$refs.snackbarMessage as HTMLElement).focus();
+      });
+    },
+    closeDialog() {
+      this.snackbar = false;
+      this.$emit('update:modelValue', false);
+      // make sure the focus goes back to the right place
+      this.$nextTick(() => {
+        this.$el.querySelector('#snackbar-activator')?.focus();
+        this.$el.querySelector('#snackbar-activator-slot')?.focus();
+      });
+    },
+  },
+
+  watch: {
+    modelValue(val: boolean) {
+      if (val) {
+        this.openDialog();
+      } else {
+        this.closeDialog();
+      }
+    }
+  }
+
+
+});
+</script>
+
+<template>
+  <div class="cds-snackbar-alert ma-2" v-if="!hide">
+
+    <slot v-if="!hideButton" name="activator" :onClick="openDialog" id="snackbar-activator-slot">
+      <v-btn @click="openDialog" color="#333" id="snackbar-activator" size="small">
+        <template v-slot:prepend>
+          <v-icon color="red" icon="mdi-alert-octagram"></v-icon>
+        </template>
+        {{ label }}
+      </v-btn>
+    </slot>
+
+    <v-snackbar 
+      v-model="snackbar" 
+      location="top center" 
+      v-bind="$attrs"
+      close-on-back
+      role="alert"
+      aria-live="assertive"
+      >
+      <span ref="snackbarMessage" tabindex="0" @keydown.esc="closeDialog">
+      <slot> {{ msg }} </slot>
+      </span>
+
+
+      <template v-slot:actions>
+        <v-btn tabindex="0" color="red" variant="text" @click="closeDialog">
+          Close
+        </v-btn>
+      </template>
+    </v-snackbar>
+  </div>
+</template>