show pagenumbers/-labels instead of items in the tree, metadata and infobar

src/App.vue

@@ -36,7 +36,6 @@ export default {
       collection: {},
       config: {},
       imageurl: '',
-      itemcontent: {},
       itemurl: '',
       itemurls: [],
       label: '',
@@ -60,7 +59,7 @@ export default {
           this.collection = data;
           this.label = this.getLabel(data);
 
-          this.tree.push({ label: this.label, children: [] });
+          this.tree.push({ label: this.label, labelKey: this.label, children: [] });
 
           if (Array.isArray(data.sequence)) {
             data.sequence.forEach((seq) => this.getManifest(seq.id));
@@ -77,14 +76,17 @@ export default {
         });
     },
     getItemContent(itemurl) {
+      const itemcontent = {};
+
       this.request(itemurl)
         .then((data) => {
-          this.itemcontent.collectiontitle = data.title ? data.title : 'No Title provided';
-          this.itemcontent.contenturl = data.content;
-          this.itemcontent.imageurl = data.image && data.image.id ? data.image.id : '';
-          this.itemcontent.itemlanguage = data.language;
-          this.itemcontent.pagenumber = data.n ? data.n : 'No pagenumber provided';
+          itemcontent.collectiontitle = data.title ? data.title : 'No Title provided';
+          itemcontent.contenturl = data.content;
+          itemcontent.imageurl = data.image && data.image.id ? data.image.id : '';
+          itemcontent.itemlanguage = data.language;
+          itemcontent.pagenumber = data.n ? data.n : 'No pagenumber provided';
         });
+      return itemcontent;
     },
     getItemIndex(nodelabel) {
       let idx = 0;
@@ -97,11 +99,12 @@ export default {
     },
     getItemUrls(sequence, label) {
       const urls = [];
-
+      let ctr = 0;
       sequence.forEach((obj) => {
         urls.push(
           {
             label: obj.id,
+            labelKey: ctr += 1,
             handler: (node) => {
               if (this.itemurl === node.label) {
                 return;
@@ -134,7 +137,11 @@ export default {
           this.manifests.push(data);
 
           this.tree[0].children.push(
-            { label: data.label, children: this.getItemUrls(data.sequence, data.label) },
+            {
+              label: data.label,
+              labelKey: data.label,
+              children: this.getItemUrls(data.sequence, data.label),
+            },
           );
 
           if (!this.label) {

src/components/metadata.vue

@@ -2,7 +2,7 @@
   <div>
     <q-list v-if="Object.keys(collection).length">
       <q-item>
-        <q-item-section class="text-h6">Collection</q-item-section>
+        <q-item-section class="text-h6 text-uppercase">Collection</q-item-section>
       </q-item>
       <q-item>
         <q-item-section>
@@ -29,10 +29,12 @@
         </q-item-section>
       </q-item>
     </q-list>
+
     <q-separator inset class="q-mt-md q-mb-sm" />
+
     <q-list>
       <q-item>
-        <q-item-section class="text-h6">
+        <q-item-section class="text-h6 text-uppercase">
           Manuscript {{ sequenceindex + 1 }} / {{ manifests.length }}
         </q-item-section>
       </q-item>
@@ -43,6 +45,24 @@
         </q-item-section>
       </q-item>
     </q-list>
+
+    <q-separator inset class="q-mt-md q-mb-sm" />
+
+    <q-list>
+      <q-item>
+        <q-item-section class="text-h6 text-uppercase">
+          Page {{ itemindex + 1 }} / {{ itemcount }}
+        </q-item-section>
+      </q-item>
+      <q-item>
+        <q-item-section>
+          <q-item-label overline class="text-uppercase">Pagelabel:</q-item-label>
+          <q-item-label>
+            <small style="color: red;">1st draft. Yet buggy ...</small>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
   </div>
 </template>
 
@@ -51,10 +71,12 @@ export default {
   name: 'Metadata',
   props: {
     collection: Object,
+    itemurl: String,
     manifests: Array,
   },
   data() {
     return {
+      itemindex: 0,
       sequenceindex: 0,
     };
   },
@@ -62,11 +84,22 @@ export default {
     manifesttitle() {
       return this.manifests[this.sequenceindex].label;
     },
+    itemcount() {
+      return this.manifests[this.sequenceindex].sequence.length;
+    },
   },
   mounted() {
     this.$root.$on('update-sequence-index', (index) => {
       this.sequenceindex = index;
     });
+
+    this.$root.$on('update-item', (url) => {
+      this.manifests[this.sequenceindex].sequence.forEach((item, index) => {
+        if (item.id === url) {
+          this.itemindex = index;
+        }
+      });
+    });
   },
 };
 </script>

src/components/openseadragon.vue

 <template>
-  <figure id="openseadragon" style="height: 100vh; overflow: hidden;">
+  <figure id="openseadragon">
     <nav>
       <q-btn
         v-for="(btn, idx) in buttons" :key="idx"
@@ -63,6 +63,8 @@ export default {
 
 <style scoped>
 figure {
+  height: 100vh;
   margin: 16px;
+  overflow: hidden;
 }
 </style>

src/components/quasar-tree.vue

@@ -5,6 +5,7 @@
       :icon="fasCaretRight"
       :nodes="tree"
       node-key="label"
+      label-key="labelKey"
       >
     </q-tree>
   </div>

src/views/quasar-mainview.vue

@@ -46,6 +46,7 @@
 
                 <Metadata v-if="manifests.length"
                   :collection="collection"
+                  :itemurl="itemurl"
                   :manifests="manifests"
                   >
                 </Metadata>