aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/SplashScreen.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/views/SplashScreen.vue')
-rw-r--r--viewer/src/views/SplashScreen.vue68
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 @@
1<template>
2 <b-loading v-if="isLoading" active />
3 <div v-else-if="markdown" :class="$style.splashscreen" class="scrollbar">
4 <Markdown :style="config.style" class="flex-grow-1" :markdown="markdown" />
5 <b-button size="is-large" :label="buttonAcknowledgeLabel" @click="validation" />
6 </div>
7</template>
8
9<script lang="ts">
10import { SplashScreenConfig } from "@/@types/splashscreen";
11import { Markdown } from "@/components/async";
12import FetchWithCheck from "@/services/fetchWithCheck";
13import { TranslateResult } from "vue-i18n";
14import { Component, Emit, Vue } from "vue-property-decorator";
15
16@Component({
17 components: {
18 Markdown,
19 },
20})
21export default class SplashScreen extends Vue {
22 isLoading: boolean = true;
23 markdown: string | null = null;
24
25 get config(): SplashScreenConfig {
26 return this.$uiStore.splashScreenConfig!;
27 }
28
29 created() {
30 this.fetchMarkdown();
31 }
32
33 fetchMarkdown() {
34 FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
35 .then(response => response.text())
36 .then(text => (this.markdown = text))
37 .finally(() => (this.isLoading = false))
38 .catch(this.displayError);
39 }
40
41 displayError(reason: any) {
42 this.$buefy.snackbar.open({
43 message: `${reason}`,
44 actionText: this.$t("snack.retry"),
45 position: "is-top",
46 type: "is-danger",
47 indefinite: true,
48 onAction: this.fetchMarkdown,
49 });
50 }
51
52 get buttonAcknowledgeLabel(): TranslateResult {
53 return this.config.buttonAcknowledgeLabel ?? this.$t("splashScreen.button.acknowledge");
54 }
55
56 @Emit()
57 validation() {}
58}
59</script>
60
61<style lang="scss" module>
62.splashscreen {
63 display: flex;
64 flex-flow: column;
65 align-items: center;
66 padding: 32px;
67}
68</style>