feat: provide and render metadata object according to API specs

pls refer to: refer to https://subugoe.pages.gwdg.de/emo/text-api/page/specs/#manifest-object

src/App.vue

@@ -6,7 +6,7 @@
         :collectiontitle="collectiontitle"
         :config="config"
         :imageurl="imageurl"
-        :itemlabel="itemlabel"
+        :item="item"
         :itemurls="itemurls"
         :manifests="manifests"
         :panels="panels"
@@ -14,15 +14,14 @@
 
       <q-page-container>
         <router-view
-          :annotations="annotations"
           :collection="collection"
           :config="config"
           :contenturl="contenturl"
           :fontsize="fontsize"
           :imageurl="imageurl"
-          :itemlabel="itemlabel"
+          :item="item"
           :labels="config.labels"
-          :language="itemlanguage"
+          :language="language"
           :manifests="manifests"
           :panels="panels"
           :request="request"
@@ -53,7 +52,6 @@ export default {
   mixins: [Panels],
   data() {
     return {
-      annotations: {},
       collection: {},
       collectiontitle: '',
       contenturl: '',
@@ -61,11 +59,10 @@ export default {
       fontsize: 14,
       imageurl: '',
       isCollection: false,
-      itemlabel: '',
-      itemlanguage: '',
+      item: {},
       itemurl: '',
       itemurls: [],
-      label: '',
+      language: '',
       manifests: [],
       tree: [],
     };
@@ -143,7 +140,7 @@ export default {
       this.request(url)
         .then((data) => {
           this.collection = data;
-          this.label = this.getLabel(data);
+          this.collectiontitle = this.getLabel(data);
 
           this.tree.push(
             {
@@ -151,8 +148,8 @@ export default {
               handler: (node) => {
                 this.$root.$emit('update-tree-knots', node.label);
               },
-              label: this.label,
-              'label-key': this.label,
+              label: this.collectiontitle,
+              'label-key': this.collectiontitle,
               selectable: false,
             },
           );
@@ -178,16 +175,10 @@ export default {
     getItemData(url) {
       this.request(url)
         .then((data) => {
-          this.collectiontitle = data.title.title;
-          this.contenturl = data.content;
-          this.imageurl = data.image && data.image.id ? data.image.id : '';
-          this.itemlabel = data.n ? data.n : 'No itemlabel :(';
+          this.item = data;
 
-          // note: the scholars didn't mark the item language yet, so atm the API provides them all.
-          // since we know, we are dealing with the arabic part of the collection, we define the language to be arabic.
-          const [language] = data['x-langString'] ? data['x-langString'].split(',') : data.lang;
-
-          this.itemlanguage = language;
+          this.contenturl = data.content || '';
+          this.imageurl = data.image.id || '';
         });
     },
     /**
@@ -206,6 +197,17 @@ export default {
       });
       return idx;
     },
+    /**
+      * extract the 'label part' of the itemurl
+      * caller: *getItemUrls()*
+      *
+      * @param string itemurl
+      *
+      * @return string 'label part'
+      */
+    getItemLabel(itemurl) {
+      return itemurl.replace(/.*-(.*)\/latest.*$/, '$1');
+    },
     /**
       * get all itemurls hosted by each manifest's sequence to populate the aprropriate tree node
       * caller: *getManifest()*
@@ -218,13 +220,13 @@ export default {
     getItemUrls(sequence, label) {
       const urls = [];
 
-      sequence.forEach((obj) => {
-        const pagelabel = this.getPageLabel(obj.id);
+      sequence.forEach((item) => {
+        const itemLabel = this.getItemLabel(item.id);
 
         urls.push(
           {
-            label: obj.id,
-            'label-key': `${this.config.labels.item} ${pagelabel}`,
+            label: item.id,
+            'label-key': `${this.config.labels.item} ${itemLabel}`,
             handler: (node) => {
               if (this.itemurl === node.label) {
                 return;
@@ -288,10 +290,6 @@ export default {
               selectable: false,
             },
           );
-
-          if (!this.label) {
-            this.label = this.getLabel(data);
-          }
           // make sure that urls are set just once on init
           if (!this.itemurl && data.sequence[0]) {
             this.itemurl = data.sequence[0].id;
@@ -299,17 +297,6 @@ export default {
           }
         });
     },
-    /**
-      * extract the 'label part' of the itemurl
-      * caller: *getItemUrls()*
-      *
-      * @param string itemurl
-      *
-      * @return string 'label part'
-      */
-    getPageLabel(itemurl) {
-      return itemurl.replace(/.*-(.*)\/latest.*$/, '$1');
-    },
     /**
       * caller: *getItemUrls()*
       *

src/components/content.vue

@@ -103,7 +103,7 @@ export default {
 
     this.$root.$on('update-sequence-index', (index) => {
       if (this.manifests[index].support) {
-        this.manifests[index].support.map(this.getSupport);
+        // this.manifests[index].support.map(this.getSupport);
       }
     });
   },

src/components/header.vue

@@ -8,7 +8,7 @@
         v-if="config.headers.info && manifests.length"
         class="col-xs-12 q-pl-md"
         :collectiontitle="collectiontitle"
-        :itemlabel="itemlabel"
+        :item="item"
         :manifests="manifests"
       />
     </div>
@@ -70,9 +70,9 @@ export default {
       type: String,
       default: () => '',
     },
-    itemlabel: {
-      type: String,
-      default: () => '',
+    item: {
+      type: Object,
+      default: () => {},
     },
     itemurls: {
       type: Array,

src/components/infobar.vue

@@ -11,7 +11,7 @@
         :color="$q.dark.isActive ? 'white' : 'accent'"
         :name="fasChevronRight"
       />
-      <span>Sheet {{ itemlabel }}</span>
+      <span>Sheet {{ item.n }}</span>
     </h2>
   </div>
 </template>
@@ -26,9 +26,9 @@ export default {
       type: String,
       default: () => '',
     },
-    itemlabel: {
-      type: String,
-      default: () => '',
+    item: {
+      type: Object,
+      default: () => {},
     },
     manifests: {
       type: Array,

src/components/metadata.vue

 <template>
   <div class="scroll-panel">
     <!-- Collection-->
-    <q-list v-if="Object.keys(collection).length && config.meta.collection.all">
+    <q-list v-if="config.meta.collection.all && Object.keys(collection).length">
       <q-item>
         <q-item-section class="text-h6 caps">
           Collection
         </q-item-section>
       </q-item>
 
-      <q-item v-if="config.meta.collection.title">
+      <q-item v-if="collection.collector.name">
         <q-item-section>
           <q-item-label
             overline
             class="text-uppercase"
           >
-            Title:
+            Collector:
           </q-item-label>
+
           <q-item-label>
-            {{ collection.title ? collection.title[0].title : '' }}
+            {{ collection.collector.name }}
           </q-item-label>
         </q-item-section>
       </q-item>
 
-      <q-item v-if="config.meta.collection.collector && collection.collector.name">
+      <q-item v-if="collection.title[0].title">
         <q-item-section>
           <q-item-label
             overline
             class="text-uppercase"
           >
-            Collector:
+            Title:
           </q-item-label>
+
           <q-item-label>
-            {{ collection.collector && collection.collector.name ? collection.collector.name : '' }}
+            {{ collection.title[0].title }}
           </q-item-label>
         </q-item-section>
       </q-item>
 
-      <q-item v-if="config.meta.collection.description && collection.description">
+      <q-item v-if="collection.description">
         <q-item-section>
           <q-item-label
             overline
@@ -44,6 +46,7 @@
           >
             Description:
           </q-item-label>
+
           <q-item-label>
             {{ collection.description }}
           </q-item-label>
@@ -52,8 +55,8 @@
 
       <q-separator
         v-if="showSeparator(config.meta.collection.all && (config.meta.manifest.all || config.meta.item.all))"
-        inset
         class="q-mt-md q-mb-sm"
+        inset
       />
     </q-list>
 
@@ -65,7 +68,7 @@
         </q-item-section>
       </q-item>
 
-      <q-item v-if="config.meta.manifest.label && title">
+      <q-item v-if="mLabel">
         <q-item-section>
           <q-item-label
             overline
@@ -73,57 +76,34 @@
           >
             Label:
           </q-item-label>
-          <q-item-label>{{ title }}</q-item-label>
-        </q-item-section>
-      </q-item>
-
-      <q-item v-if="config.meta.manifest.creation && date">
-        <q-item-section>
-          <q-item-label
-            overline
-            class="text-uppercase"
-          >
-            Year of creation:
-          </q-item-label>
-          <q-item-label>{{ date }}</q-item-label>
-        </q-item-section>
-      </q-item>
-
-      <q-item v-if="config.meta.manifest.editor && editor">
-        <q-item-section>
-          <q-item-label
-            overline
-            class="text-uppercase"
-          >
-            Editor:
-          </q-item-label>
-          <q-item-label>{{ editor }}</q-item-label>
-        </q-item-section>
-      </q-item>
 
-      <q-item v-if="config.meta.manifest.location && location">
-        <q-item-section>
-          <q-item-label
-            overline
-            class="text-uppercase"
-          >
-            Current location:
-          </q-item-label>
-          <q-item-label>{{ location }}</q-item-label>
+          <q-item-label>{{ mLabel }}</q-item-label>
         </q-item-section>
       </q-item>
 
-      <q-item v-if="config.meta.manifest.origin && origin">
-        <q-item-section>
-          <q-item-label
-            overline
-            class="text-uppercase"
-          >
-            Origin:
-          </q-item-label>
-          <q-item-label>{{ origin }}</q-item-label>
-        </q-item-section>
-      </q-item>
+      <!--  this part renders the metadata object provided by the manifest object according to the generic API specs given:
+            pls refer to https://subugoe.pages.gwdg.de/emo/text-api/page/specs/#manifest-object
+      -->
+      <div v-if="manifests[sequenceindex].metadata">
+        <q-item
+          v-for="(meta, idx) in manifests[sequenceindex].metadata"
+          :key="idx"
+        >
+          <q-item-section>
+            <q-item-label
+              overline
+              class="text-uppercase"
+            >
+              {{ meta.key }}:
+            </q-item-label>
+
+            <q-item-label>{{ meta.value }}</q-item-label>
+          </q-item-section>
+        </q-item>
+      </div>
+      <!--
+          End of metadata object
+      -->
     </q-list>
 
     <q-separator
@@ -140,7 +120,7 @@
         </q-item-section>
       </q-item>
 
-      <q-item v-if="config.meta.item.label">
+      <q-item v-if="item.n">
         <q-item-section>
           <q-item-label
             overline
@@ -148,11 +128,12 @@
           >
             Label:
           </q-item-label>
-          <q-item-label>{{ itemlabel }}</q-item-label>
+
+          <q-item-label>{{ item.n }}</q-item-label>
         </q-item-section>
       </q-item>
 
-      <q-item v-if="config.meta.item.language">
+      <q-item v-if="language">
         <q-item-section>
           <q-item-label
             overline
@@ -168,6 +149,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'Metadata',
   props: {
@@ -179,9 +161,9 @@ export default {
       type: Object,
       default: () => {},
     },
-    itemlabel: {
-      type: String,
-      default: () => '',
+    item: {
+      type: Object,
+      default: () => {},
     },
     labels: {
       type: Object,
@@ -203,30 +185,10 @@ export default {
     };
   },
   computed: {
-    date() {
-      return this.manifests[this.sequenceindex]['x-date'];
-    },
-    editor() {
-      if (Array.isArray(this.manifests[this.sequenceindex]['x-editor'])) {
-        let editors = '';
-
-        Object.values(this.manifests[this.sequenceindex]['x-editor']).forEach((ed) => {
-          editors += `${ed.name}, `;
-        });
-        return editors.slice(0, -2);
-      }
-      return '';
-    },
     itemcount() {
       return this.manifests[this.sequenceindex].sequence.length;
     },
-    location() {
-      return this.manifests[this.sequenceindex]['x-location'];
-    },
-    origin() {
-      return this.manifests[this.sequenceindex]['x-origin'];
-    },
-    title() {
+    mLabel() {
       return this.manifests[this.sequenceindex].label;
     },
   },
@@ -247,8 +209,8 @@ export default {
     });
   },
   methods: {
-    showSeparator(showme) {
-      return showme === true;
+    showSeparator(condition) {
+      return condition === true;
     },
   },
 };

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-      "entrypoint": "",
+      "entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "colors": {
         "primary": "",
         "secondary": "",

src/views/mainview.vue

@@ -106,9 +106,9 @@ export default {
       type: String,
       default: () => '',
     },
-    itemlabel: {
-      type: String,
-      default: () => '',
+    item: {
+      type: Object,
+      default: () => {},
     },
     labels: {
       type: Object,