Merge pull request #304 from ldgallery/oz-splash-screen

viewer: optional user-defined markdown splash screen

1 files changed, 68 insertions, 0 deletions

diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
new file mode 100644
index 0000000..dcb845d
--- /dev/null
+++ b/viewer/src/views/SplashScreen.vue
@@ -0,0 +1,68 @@
+<template>
+  <b-loading v-if="isLoading" active />
+  <div v-else-if="markdown" :class="$style.splashscreen" class="scrollbar">
+    <Markdown :style="config.style" class="flex-grow-1" :markdown="markdown" />
+    <b-button size="is-large" :label="buttonAcknowledgeLabel" @click="validation" />
+  </div>
+</template>
+
+<script lang="ts">
+import { SplashScreenConfig } from "@/@types/splashscreen";
+import { Markdown } from "@/components/async";
+import FetchWithCheck from "@/services/fetchWithCheck";
+import { TranslateResult } from "vue-i18n";
+import { Component, Emit, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {
+    Markdown,
+  },
+})
+export default class SplashScreen extends Vue {
+  isLoading: boolean = true;
+  markdown: string | null = null;
+
+  get config(): SplashScreenConfig {
+    return this.$uiStore.splashScreenConfig!;
+  }
+
+  created() {
+    this.fetchMarkdown();
+  }
+
+  fetchMarkdown() {
+    FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
+      .then(response => response.text())
+      .then(text => (this.markdown = text))
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `${reason}`,
+      actionText: this.$t("snack.retry"),
+      position: "is-top",
+      type: "is-danger",
+      indefinite: true,
+      onAction: this.fetchMarkdown,
+    });
+  }
+
+  get buttonAcknowledgeLabel(): TranslateResult {
+    return this.config.buttonAcknowledgeLabel ?? this.$t("splashScreen.button.acknowledge");
+  }
+
+  @Emit()
+  validation() {}
+}
+</script>
+
+<style lang="scss" module>
+.splashscreen {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 32px;
+}
+</style>