Commit 41e9596e authored by dindigala's avatar dindigala
Browse files

feat: implementation of loading in annotation panel

parent 4edf4b8b
Pipeline #213757 passed with stages
in 3 minutes and 32 seconds
......@@ -21,7 +21,7 @@
<q-page-container class="root">
<router-view
:annotations="annotations"
:annotation-loading="annotationLoading"
:annotation-loaded="annotationLoaded"
:collection="collection"
:config="config"
:contenttypes="contentTypes"
......@@ -54,7 +54,7 @@ export default {
data() {
return {
annotations: [],
annotationLoading: false,
annotationLoaded: false,
collection: {},
collectiontitle: '',
config: {},
......@@ -143,7 +143,7 @@ export default {
*/
async getAnnotations(url) {
this.annotations = [];
this.annotationLoading = false;
this.annotationLoaded = false;
try {
const annotations = await this.request(url);
......@@ -163,7 +163,7 @@ export default {
} catch (err) {
this.annotations = [];
} finally {
this.annotationLoading = true;
this.annotationLoaded = true;
}
},
/**
......
<template>
<div class="item">
<div class="item relative-position">
<q-tabs
v-model="currentTab"
active-color="$q.dark.isActive ? 'white' : 'accent'"
......@@ -19,8 +19,13 @@
<AnnotationToggles />
<LoadingProgress
v-if="!annotationLoaded || isProcessing"
:loadingprogress="!annotationLoaded || isProcessing"
/>
<AnnotationList
v-if="currentAnnotations.length"
v-else-if="currentAnnotations.length && annotationLoaded && !isProcessing"
class="custom-font"
:configured-annotations="currentAnnotations"
:get-icon="getIcon"
......@@ -29,7 +34,7 @@
/>
<div
v-else
v-else-if="annotationLoaded && !currentAnnotations.length && !isProcessing"
class="q-pa-sm"
>
<Notification
......@@ -57,6 +62,7 @@ import AnnotationToggles from '@/components/annotations/toggles.vue';
import AnnotationList from '@/components/annotations/list.vue';
import AnnotationOptions from '@/components/annotations/options.vue';
import LoadingProgress from '@/components/loading.vue';
import Notification from '@/components/notification.vue';
export default {
......@@ -65,6 +71,7 @@ export default {
AnnotationToggles,
AnnotationList,
AnnotationOptions,
LoadingProgress,
Notification,
},
mixins: [Annotation],
......@@ -73,7 +80,7 @@ export default {
type: Array,
default: () => [],
},
annotationLoading: {
annotationLoaded: {
type: Boolean,
default: false,
},
......@@ -85,13 +92,14 @@ export default {
data() {
return {
configuredAnnotations: [],
currentTab: '',
ids: [],
isProcessing: false,
messages: {
none: 'noAnnotationMessage',
},
selectedAll: false,
selectedNone: true,
currentTab: '',
};
},
computed: {
......@@ -139,14 +147,17 @@ export default {
},
},
mounted() {
this.$root.$on('update-annotations', (content) => {
this.$root.$on('update-annotations', (content, isProcessing) => {
this.isProcessing = !!isProcessing;
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');
this.ids = [...doc.body.querySelectorAll('[id]')].map((el) => el.getAttribute('id'));
this.configuredAnnotations = [];
const interval = setInterval(() => {
if (this.annotationLoading) {
if (this.annotationLoaded) {
this.configuredAnnotations = this.filterAnnotationTypes();
const firstTab = this.annotationTabs.find((x) => x.type.length)?.key || '';
......@@ -155,7 +166,7 @@ export default {
this.currentTab = firstTab;
clearInterval(interval);
}
}, 500);
}, 50);
});
},
methods: {
......
......@@ -121,6 +121,8 @@ export default {
this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
},
async activeTab(url) {
this.$root.$emit('update-annotations', [], true);
const data = await this.request(url, 'text');
if (this.supportType) {
......@@ -129,7 +131,7 @@ export default {
this.content = data;
this.$root.$emit('update-annotations', data);
this.$root.$emit('update-annotations', data, false);
},
},
async created() {
......
<template>
<q-inner-loading
:showing="loadingprogress"
>
<q-spinner
size="3em"
color="primary"
/>
</q-inner-loading>
</template>
<script>
export default {
name: 'LoadingProgress',
props: {
loadingprogress: {
type: Boolean,
},
textcontentprogress: {
type: Boolean,
},
},
data: () => ({
}),
};
</script>
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "",
"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
"annotations": {
"show": true,
"types": [
......
......@@ -85,7 +85,7 @@ export default {
type: Array,
default: () => [],
},
annotationLoading: {
annotationLoaded: {
type: Boolean,
default: false,
},
......@@ -121,6 +121,9 @@ export default {
type: Object,
default: () => {},
},
loadingprogress: {
type: Boolean,
},
manifests: {
type: Array,
default: () => [],
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment