Download Progress Bar

components/viewer/ProjectMenu.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <h5>Default Files</h5>
+    <ul class="list-group mb-3">
+      <li
+        v-for="projects in projectList.items"
+        :key="projects.title"
+        class="list-group-item"
+      >
+        <a
+          href="#"
+          :data-fileurl="projects.remoteFileUrl"
+          @click.prevent="loadRemoteFile"
+        >
+          {{ projects.title }}
+        </a>
+      </li>
+    </ul>
+    <div
+      v-if="isLoading"
+      class="d-flex align-items-center justify-content-start gap-3 mb-3"
+    >
+      <div class="spinner-border text-primary" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+      <strong>{{ !progress ? 'Loading ...' : progress }}</strong>
+    </div>
+  </div>
+  <div>
+    <h5>Load File</h5>
+    <LoadProject />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ViewerProjectList } from 'composables/viewer';
+import { Project } from '~/composables/project';
+import { useProjectRefs, useProjectStore } from '~/composables/store/project';
+import { useViewerStore } from '~/composables/store/viewer';
+
+const isLoading = ref<boolean>(false);
+const progress = ref<string | null>(null);
+
+const { projectList } = defineProps<{
+  projectList: ViewerProjectList;
+}>();
+
+const { loadProject, unloadProject } = useProjectStore();
+const { toggleProjectMenu } = useViewerStore();
+const { isLoaded } = useProjectRefs();
+
+const loadRemoteFile = async ({ target }: MouseEvent) => {
+  if (target && target instanceof HTMLAnchorElement) {
+    const fileURL = target.dataset.fileurl;
+    if (!fileURL) return;
+    isLoading.value = true;
+
+    const response = await fetch(fileURL);
+
+    let result: Project;
+    if (response.ok) {
+      const reader = response.body!.getReader();
+
+      let received = 0;
+      const chunks = [];
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        chunks.push(value);
+        received += value.length;
+
+        await nextTick(() => {
+          const receivedMB = received / (1024 * 1024);
+          const neat = Math.round(receivedMB * 100) / 100;
+          progress.value = `Downloaded ${neat} Mb`;
+        });
+      }
+
+      const bodyBytes = new Uint8Array(received);
+      let pos = 0;
+      for (const chunk of chunks) {
+        bodyBytes.set(chunk, pos);
+        pos += chunk.length;
+      }
+
+      const bodyText = new TextDecoder('utf-8').decode(bodyBytes);
+      result = JSON.parse(bodyText);
+    } else {
+      return;
+    }
+
+    if (isLoaded.value) {
+      unloadProject();
+    }
+    // Wait for the unloadProject to finish before loading the new project
+    await nextTick(() => {
+      loadProject(result, fileURL);
+      toggleProjectMenu(false);
+      isLoading.value = false;
+    });
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/css/bootstrap/config';
+</style>

components/viewer/modal/MenuModal.vue

@@ -0,0 +1,24 @@
+<template>
+  <ModalDialog :show="isProjectMenuVisible" @close="toggleProjectMenu(false)">
+    <template #header>
+      <h5 class="m-0">Project Menu</h5>
+    </template>
+    <template #default>
+      <div>
+        <ProjectMenu :project-list="viewerProjectList" />
+      </div>
+    </template>
+  </ModalDialog>
+</template>
+
+<script setup lang="ts">
+import ProjectMenu from '~/components/viewer/ProjectMenu.vue';
+import { useViewerRefs, useViewerStore } from '~/composables/store/viewer';
+
+const { toggleProjectMenu, viewerProjectList } = useViewerStore();
+const { isProjectMenuVisible } = useViewerRefs();
+</script>
+
+<style scoped lang="scss">
+@import '~/assets/css/bootstrap/config';
+</style>

components/viewer/style/engine.ts

@@ -36,7 +36,6 @@ export function createStyles<T>(
   generators: StyleGenerator<T>[],
 ): string {
   const styles = map((generator) => generator.gen(styling).trim(), generators);
-  console.log('Generated Styles', styles);
   return join('\n', styles);
 }
 

pages/index.vue

@@ -11,41 +11,36 @@
       </div>
     </div>
     <StyleProject :styles="project.data.styling" />
-    <ViewBackpack />
-    <ViewSearch />
-    <ModalDialog :show="isProjectMenuVisible" @close="toggleProjectMenu(false)">
-      <template #header>
-        <h5 class="m-0">Project Menu</h5>
-      </template>
-      <template #default>
-        <ViewProjectMenu :project-list="projectList" />
-      </template>
-    </ModalDialog>
+    <BackpackModal />
+    <SearchModal />
+    <MenuModal />
   </div>
   <div v-else class="dialog-container">
-    <ViewProjectMenu :project-list="projectList" />
+    <div class="dialog bg-dark-subtle text-light">
+      <ProjectMenu :project-list="projectList" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import ViewBackpack from '~/components/viewer/modal/ViewBackpack.vue';
-import ViewProjectMenu from '~/components/viewer/modal/ViewProjectMenu.vue';
-import ViewSearch from '~/components/viewer/modal/ViewSearch.vue';
+import BackpackModal from '~/components/viewer/modal/BackpackModal.vue';
+import MenuModal from '~/components/viewer/modal/MenuModal.vue';
+import SearchModal from '~/components/viewer/modal/SearchModal.vue';
+import ProjectMenu from '~/components/viewer/ProjectMenu.vue';
 import StyleProject from '~/components/viewer/style/StyleProject.vue';
 import ViewMenuBar from '~/components/viewer/ViewMenuBar.vue';
 import { useProjectRefs } from '~/composables/store/project';
-import { useViewerRefs, useViewerStore } from '~/composables/store/viewer';
+import { useViewerRefs } from '~/composables/store/viewer';
 
 const { project } = useProjectRefs();
 const { viewerProjectList } = useViewerRefs();
 
 const projectList = computed(() => viewerProjectList.value);
-
-const { toggleProjectMenu } = useViewerStore();
-const { isProjectMenuVisible } = useViewerRefs();
 </script>
 
 <style lang="scss">
+@import '~/assets/css/bootstrap/config';
+
 .project {
   font-family: sans-serif;
   padding: 0 1em;
@@ -59,8 +54,10 @@ const { isProjectMenuVisible } = useViewerRefs();
 
 .dialog-container {
   min-height: 50vh;
+  margin-top: 5em;
 
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;