archive retrieval now works

src/components/ArchiveCard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-
+import useArchiveStore from "@/stores/archive";
+import { versionNotes } from "@/utils/types";
 import {
   IonButton,
   IonCard,
@@ -13,8 +14,11 @@ IonLabel, IonItem,
     IonList
 } from "@ionic/vue";
 import {chevronForward} from "ionicons/icons";
+import { ref, watch } from "vue";
 
+const archive = useArchiveStore();
 const emit = defineEmits<{(e: "back"): void, (e: "disconnect"): void, (e: "details"):void}>();
+const versions = ref<versionNotes[]>([]);
 
 const back = () => {
   emit("back");
@@ -24,10 +28,13 @@ const disconnect = () => {
   emit("disconnect");
 };
 
-const details = () => {
+const details = (index: number) => {
+  archive.setShownI(index);
   emit("details");
 }
 
+watch(() => archive.getArchive, (newValue) => versions.value = newValue, {immediate: true});
+
 </script>
 
 <template>
@@ -47,10 +54,10 @@ const details = () => {
     <ion-card-content>
       <ion-button @click="back">Back</ion-button>
       <ion-list lines="full" class="item-scroll">
-        <ion-item :button="true" v-for="i in 10" :key="i" @click="details">
+        <ion-item :button="true" v-for="(version, index) in versions" :key="index" @click="details(index)">
           <ion-label>
-            <strong>v{{i}}</strong> <br>
-            <ion-note>date</ion-note>
+            <strong>{{version.title}}</strong> <br>
+            <ion-note>{{ version.date }}</ion-note>
           </ion-label>
           <div slot="end" class="metadata-end-wrapper">
             <ion-icon color="medium" :icon="chevronForward"></ion-icon>