zwischenstand

src/pages/vault/[vaultId]/extensions/[extensionId].vue

@@ -1,7 +1,16 @@
 <template>
+  {{ iframeSrc }}
   <div class="w-full h-full">
-    <iframe class="w-full h-full" @load="" ref="iFrameRef"> </iframe>
-    <p>{{ t("loading") }}</p>
+    <iframe
+      v-if="iframeSrc"
+      class="w-full h-full"
+      @load=""
+      ref="iFrameRef"
+      :src="iframeSrc"
+      sandbox="allow-scripts allow-same-origin"
+    >
+    </iframe>
+    <p v-else>{{ t("loading") }}</p>
   </div>
 </template>
 
@@ -10,8 +19,21 @@ definePageMeta({
   name: "haexExtension",
 });
 
-const iframeRef = useTemplateRef("iFrameRef");
 const { t } = useI18n();
+const iframeRef = useTemplateRef("iFrameRef");
+
+const { extensionEntry: iframeSrc, currentExtension } = storeToRefs(useExtensionsStore());
+const extensionStore = useExtensionsStore();
+
+watch(iframeSrc, () => console.log("iframeSrc", iframeSrc.value), { immediate: true });
+
+onMounted(async () => {
+  const minfest = await extensionStore.readManifestFileAsync(
+    currentExtension.value!.id,
+    currentExtension.value!.version
+  );
+  console.log("manifest", minfest, extensionStore.extensionEntry);
+});
 </script>
 
 <i18n lang="yaml">

src/pages/vault/[vaultId]/extensions/index.vue

@@ -1,9 +1,92 @@
 <template>
-    <div>add extension</div>
+  <div class="flex flex-col">
+    <h1>{{ t("title") }}</h1>
+    <UiButton @click="loadExtensionManifestAsync">
+      {{ t("extension.add") }}
+    </UiButton>
+
+    <HaexExtensionManifestConfirm
+      :manifest="extension.manifest!"
+      v-model:open="showConfirmation"
+      @confirm="addExtensionAsync"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
+import { join } from "@tauri-apps/api/path";
+import { open } from "@tauri-apps/plugin-dialog";
+import { readTextFile } from "@tauri-apps/plugin-fs";
+
 definePageMeta({
-    name: "haexExtensionAdd",
+  name: "extensionOverview",
 });
+
+const { t } = useI18n();
+const extensionStore = useExtensionsStore();
+
+const showConfirmation = ref(false);
+
+const extension = reactive<{
+  manifest: IHaexHubExtensionManifest | null | undefined;
+  path: string | null;
+}>({
+  manifest: null,
+  path: "",
+});
+
+const loadExtensionManifestAsync = async () => {
+  try {
+    extension.path = await open({ directory: true, recursive: true });
+    if (!extension.path) return;
+
+    const manifestFile = JSON.parse(
+      await readTextFile(await join(extension.path, "manifest.json"))
+    );
+
+    if (!extensionStore.checkManifest(manifestFile))
+      throw new Error(`Manifest fehlerhaft ${JSON.stringify(manifestFile)}`);
+
+    extension.manifest = manifestFile;
+    showConfirmation.value = true;
+  } catch (error) {
+    console.error("Fehler beim Laden des Moduls:", error);
+  }
+};
+
+const { add } = useSnackbar();
+
+const addExtensionAsync = async () => {
+  try {
+    await extensionStore.installAsync(extension.path);
+    await extensionStore.loadExtensionsAsync();
+    console.log("Modul erfolgreich geladen");
+    add({
+      type: "success",
+      title: t("extension.success.title", { extension: extension.manifest?.name }),
+      text: t("extension.success.text"),
+    });
+  } catch (error) {
+    console.error("Fehler beim Laden des Moduls:", error);
+    add({ type: "error", text: JSON.stringify(error) });
+  }
+};
 </script>
+
+<i18n lang="json">
+{
+  "de": {
+    "title": "Erweiterung installieren",
+    "extension": {
+      "add": "Erweiterung hinzufügen",
+      "success": {
+        "title": "{extension} hinzugefügt",
+        "text": "Die Erweiterung wurde erfolgreich hinzugefügt"
+      }
+    }
+  },
+  "en": {
+    "title": "Install extension"
+  }
+}
+</i18n>

src/pages/vault/[vaultId]/index.vue

@@ -1,9 +1,15 @@
 <template>
-    <div class="h-screen bg-blue-200"></div>
+  <div class="bg-blue-200 h-full">aaaaa</div>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
-    name: "vaultOverview",
+  name: "vaultOverview",
+});
+
+const extensionStore = useExtensionsStore();
+
+onMounted(async () => {
+  await extensionStore.loadExtensionsAsync();
 });
 </script>