Implement loading (#104)

* Implement loading * LoadingBar * Run linter * Update App.vue * Loading bar all the things * Update SplashScreen.vue * Update SplashScreen.vue * Update App.vue * initial revert * Update Instance.vue * revert css * Fix instance * More reverting * Run lint * Finalize changes * Revert "Merge branch 'master' into loading" This reverts commit 3014e765fb6fb343f3030fd8a822edd97fb2af41, reversing changes made to b780e859d2b53a203eb3561ba3be88af083d9c15. * Fix loading issues * fix lint * Revert "Revert "Merge branch 'master' into loading"" This reverts commit 971ef8466613579b7f523edbd25b692df62d0f86. --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me>
2023-05-10 18:50:42 -04:00
parent 9be0d16f75
commit 71cf2c53f5
21 changed files with 463 additions and 188 deletions
--- a/theseus_gui/src/App.vue
+++ b/theseus_gui/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { RouterView, RouterLink } from 'vue-router'
 import { HomeIcon, SearchIcon, LibraryIcon, PlusIcon, SettingsIcon, Button } from 'omorphia'
 import { useLoading, useTheming } from '@/store/state'
@@ -8,21 +8,31 @@ import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import { get } from '@/helpers/settings'
 import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
 import RunningAppBar from '@/components/ui/RunningAppBar.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
 import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'

 const themeStore = useTheming()

+const isLoading = ref(true)
 onMounted(async () => {
  const { settings, collapsed_navigation } = await get()
  themeStore.setThemeState(settings)
  themeStore.collapsedNavigation = collapsed_navigation
 })

+defineExpose({
+  initialize: async () => {
+    isLoading.value = false
+    const { theme } = await get()
+    themeStore.setThemeState(theme)
+  },
+})
 const loading = useLoading()
 </script>

 <template>
-  <div class="container">
+  <SplashScreen v-if="isLoading" app-loading />
+  <div v-else class="container">
    <div class="nav-container" :class="{ expanded: !themeStore.collapsedNavigation }">
      <div class="nav-section">
        <suspense>
@@ -150,7 +160,6 @@ const loading = useLoading()
      text-align: center;
      padding: 0 0 0 1rem;
      height: 3.25rem;
-      z-index: 11;

      .navigation-controls {
        display: inherit;
@@ -222,7 +231,6 @@ const loading = useLoading()
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
-  z-index: 10;
  height: 100%;
  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
  padding: 1rem;
--- a/theseus_gui/src/components/RowDisplay.vue
+++ b/theseus_gui/src/components/RowDisplay.vue
@@ -193,7 +193,7 @@ const handleRightPage = () => {
 }

 .row-instance {
-  min-width: 12rem;
-  max-width: 12rem;
+  min-width: 10.5rem;
+  max-width: 10.5rem;
 }
 </style>
--- a/theseus_gui/src/components/ui/AccountsCard.vue
+++ b/theseus_gui/src/components/ui/AccountsCard.vue
@@ -194,7 +194,7 @@ onBeforeUnmount(() => {
  flex-direction: column;
  top: 0.5rem;
  left: 5.5rem;
-  z-index: 100;
+  z-index: 9;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid var(--color-button-bg);
--- a/theseus_gui/src/components/ui/Instance.vue
+++ b/theseus_gui/src/components/ui/Instance.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { shallowRef, ref } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ofetch } from 'ofetch'
 import { Card, SaveIcon, XIcon, Avatar, AnimatedLogo } from 'omorphia'
@@ -59,34 +59,28 @@ const checkProcess = async () => {
 const install = async (e) => {
  e.stopPropagation()
  modLoading.value = true
-  const [data, versions] = await Promise.all([
-    ofetch(
-      `https://api.modrinth.com/v2/project/${
-        props.instance.metadata
-          ? props.instance.metadata?.linked_data?.project_id
-          : props.instance.project_id
-      }`
-    ).then(shallowRef),
-    ofetch(
-      `https://api.modrinth.com/v2/project/${
-        props.instance.metadata
-          ? props.instance.metadata?.linked_dadta?.project_id
-          : props.instance.project_id
-      }/version`
-    ).then(shallowRef),
-  ])
+  const versions = await ofetch(
+    `https://api.modrinth.com/v2/project/${props.instance.project_id}/version`
+  )

-  if (data.value.project_type === 'modpack') {
+  if (props.instance.project_type === 'modpack') {
    const packs = Object.values(await list())

    if (
      packs.length === 0 ||
      !packs
        .map((value) => value.metadata)
-        .find((pack) => pack.linked_data?.project_id === data.value.id)
+        .find((pack) => pack.linked_data?.project_id === props.instance.project_id)
    ) {
-      await pack_install(versions.value[0].id)
-    } else confirmModal.value.show(versions.value[0].id)
+      try {
+        modLoading.value = true
+        await pack_install(versions[0].id, props.instance.title)
+        modLoading.value = false
+      } catch (err) {
+        console.error(err)
+        modLoading.value = false
+      }
+    } else confirmModal.value.show(versions[0].id)
  }

  modLoading.value = false
@@ -125,7 +119,7 @@ const stop = async (e) => {
 }

 await process_listener((e) => {
-  if (e.event === 'Finished' && e.uuid == uuid.value) playing.value = false
+  if (e.event === 'Finished' && e.uuid === uuid.value) playing.value = false
 })
 </script>

@@ -213,6 +207,10 @@ await process_listener((e) => {
      font-weight: bolder;
    }
  }
+
+  .cta {
+    display: none;
+  }
 }

 .instance {
@@ -281,7 +279,7 @@ await process_listener((e) => {
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
-  z-index: 41;
+  z-index: 1;
  width: 3rem;
  height: 3rem;
  right: 1rem;
--- a/theseus_gui/src/components/ui/ProgressBar.vue
+++ b/theseus_gui/src/components/ui/ProgressBar.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="progress-bar">
+    <div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  progress: {
+    type: Number,
+    required: true,
+    validator(value) {
+      return value >= 0 && value <= 100
+    },
+  },
+})
+</script>
+
+<style scoped>
+.progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--color-button-bg);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  background-color: var(--color-brand);
+  transition: width 0.3s;
+}
+</style>
--- a/theseus_gui/src/components/ui/RunningAppBar.vue
+++ b/theseus_gui/src/components/ui/RunningAppBar.vue
@@ -10,30 +10,65 @@
    <Button icon-only class="icon-button" @click="goToTerminal()">
      <TerminalIcon />
    </Button>
+    <Button
+      v-if="currentLoadingBars.length > 0"
+      ref="infoButton"
+      icon-only
+      class="icon-button show-card-icon"
+      @click="toggleCard()"
+    >
+      <DownloadIcon />
+    </Button>
  </div>
  <div v-else class="status">
    <span class="circle stopped" />
    <span class="running-text"> No running profiles </span>
+    <Button
+      v-if="currentLoadingBars.length > 0"
+      ref="infoButton"
+      icon-only
+      class="icon-button show-card-icon"
+      @click="toggleCard()"
+    >
+      <DownloadIcon />
+    </Button>
  </div>
+  <transition name="download">
+    <Card v-if="showCard === true" ref="card" class="info-card">
+      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+        <h3 class="info-title">
+          {{ loadingBar.bar_type.pack_name ?? 'Installing Modpack' }}
+        </h3>
+        <ProgressBar :progress="Math.floor(loadingBar.current)" />
+        <div class="row">{{ Math.floor(loadingBar.current) }}% {{ loadingBar.message }}</div>
+      </div>
+    </Card>
+  </transition>
 </template>

 <script setup>
-import { Button } from 'omorphia'
+import { Button, DownloadIcon, Card } from 'omorphia'
 import { StopIcon, TerminalIcon } from '@/assets/icons'
-import { ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import {
  get_all_running_profiles as getRunningProfiles,
  kill_by_uuid as killProfile,
  get_uuids_by_profile_path as getProfileProcesses,
 } from '@/helpers/process'
-import { process_listener } from '@/helpers/events'
+import { loading_listener, process_listener } from '@/helpers/events'
 import { useRouter } from 'vue-router'
+import { progress_bars_list } from '@/helpers/state.js'
+import ProgressBar from '@/components/ui/ProgressBar.vue'

 const router = useRouter()
+const card = ref(null)
+const infoButton = ref(null)
+const showCard = ref(false)

 const currentProcesses = ref(await getRunningProfiles())

-await process_listener(async () => {
+await process_listener(async (event) => {
+  console.log(event)
  await refresh()
 })

@@ -48,13 +83,54 @@ const stop = async () => {
  } catch (e) {
    console.error(e)
  }
-
  await refresh()
 }

 const goToTerminal = () => {
  router.push(`/instance/${encodeURIComponent(currentProcesses.value[0].path)}/logs`)
 }
+
+const currentLoadingBars = ref(Object.values(await progress_bars_list()))
+
+await loading_listener(async () => {
+  await refreshInfo()
+})
+
+const refreshInfo = async () => {
+  const currentLoadingBarCount = currentLoadingBars.value.length
+  currentLoadingBars.value = Object.values(await progress_bars_list())
+  if (currentLoadingBars.value.length === 0) {
+    showCard.value = false
+  } else if (currentLoadingBarCount < currentLoadingBars.value.length) {
+    showCard.value = true
+  }
+}
+
+const handleClickOutside = (event) => {
+  console.log('clicked outside from appbar')
+  if (
+    card.value &&
+    infoButton.value.$el !== event.target &&
+    card.value.$el !== event.target &&
+    !document.elementsFromPoint(event.clientX, event.clientY).includes(card.value.$el) &&
+    !document.elementsFromPoint(event.clientX, event.clientY).includes(infoButton.value.$el)
+  ) {
+    showCard.value = false
+  }
+}
+
+const toggleCard = async () => {
+  showCard.value = !showCard.value
+  await refreshInfo()
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
+})
 </script>

 <style scoped lang="scss">
@@ -100,4 +176,94 @@ const goToTerminal = () => {
    --text-color: var(--color-red) !important;
  }
 }
+
+.info-card {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  width: 20rem;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+
+  &.hidden {
+    transform: translateY(-100%);
+  }
+}
+
+.loading-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+
+  :hover {
+    background-color: var(--color-raised-bg-hover);
+  }
+}
+
+.loading-text {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+.loading-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: block;
+
+  :deep(svg) {
+    left: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}
+
+.show-card-icon {
+  color: var(--color-brand);
+}
+
+.download-enter-active,
+.download-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.download-enter-from,
+.download-leave-to {
+  opacity: 0;
+}
+
+.progress-bar {
+  width: 100%;
+}
+
+.info-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.info-title {
+  margin: 0;
+}
 </style>
--- a/theseus_gui/src/components/ui/SplashScreen.vue
+++ b/theseus_gui/src/components/ui/SplashScreen.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="page-loading" :class="{ 'app-loading': appLoading }">
+    <AnimatedLogo class="initializing-icon" />
+  </div>
+</template>
+
+<script setup>
+import { AnimatedLogo } from 'omorphia'
+
+defineProps({
+  appLoading: Boolean,
+})
+</script>
+
+<style scoped lang="scss">
+.page-loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  &.app-loading {
+    background-color: #16181c;
+    height: 100vh;
+  }
+}
+
+.initializing-icon {
+  width: 12rem;
+  height: 12rem;
+
+  :deep(svg),
+  svg {
+    width: 12rem;
+    height: 12rem;
+  }
+}
+</style>
--- a/theseus_gui/src/main.js
+++ b/theseus_gui/src/main.js
@@ -16,8 +16,10 @@ app.use(pinia)
 app.use(FloatingVue)
 app.mixin(loadCssMixin)

+const mountedApp = app.mount('#app')
+
 initialize_state()
-  .then(() => app.mount('#app'))
+  .then(() => mountedApp.initialize())
  .catch((err) => {
    console.error(err)
  })
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -13,7 +13,6 @@ import {
  Card,
  ClientIcon,
  ServerIcon,
-  AnimatedLogo,
  NavRow,
  formatCategoryHeader,
 } from 'omorphia'
@@ -23,6 +22,7 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
 import { useRoute } from 'vue-router'
 import Instance from '@/components/ui/Instance.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'

 const route = useRoute()

@@ -36,25 +36,28 @@ const breadcrumbs = useBreadcrumbs()
 const showSnapshots = ref(false)
 const loading = ref(true)

-const [categories, loaders, availableGameVersions] = await Promise.all([
-  get_categories(),
-  get_loaders(),
-  get_game_versions(),
-])
+const categories = ref([])
+const loaders = ref([])
+const availableGameVersions = ref([])

-onMounted(() => {
+onMounted(async () => {
+  ;[categories.value, loaders.value, availableGameVersions.value] = await Promise.all([
+    get_categories(),
+    get_loaders(),
+    get_game_versions(),
+  ])
  breadcrumbs.setContext({ name: 'Browse', link: route.path })
  if (searchStore.projectType === 'modpack') {
    searchStore.instanceContext = null
  }
  searchStore.searchInput = ''
-  handleReset()
-  switchPage(1)
+  await handleReset()
+  loading.value = false
 })

 const sortedCategories = computed(() => {
  const values = new Map()
-  for (const category of categories.filter(
+  for (const category of categories.value.filter(
    (cat) =>
      cat.project_type ===
      (searchStore.projectType === 'datapack' ? 'mod' : searchStore.projectType)
@@ -67,7 +70,7 @@ const sortedCategories = computed(() => {
  return values
 })

-const getSearchResults = async (shouldLoad = false) => {
+const getSearchResults = async () => {
  const queryString = searchStore.getQueryString()
  if (searchStore.instanceContext) {
    showVersions.value = false
@@ -75,16 +78,10 @@ const getSearchResults = async (shouldLoad = false) => {
      searchStore.projectType === 'mod' || searchStore.projectType === 'resourcepack'
    )
  }
-  if (shouldLoad === true) {
-    loading.value = true
-  }
  const response = await ofetch(`https://api.modrinth.com/v2/search${queryString}`)
-  loading.value = false
  searchStore.setSearchResults(response)
 }

-getSearchResults(true)
-
 const handleReset = async () => {
  searchStore.currentPage = 1
  searchStore.offset = 0
@@ -309,7 +306,7 @@ watch(
        :count="searchStore.pageCount"
        @switch-page="switchPage"
      />
-      <AnimatedLogo v-if="loading" class="loading" />
+      <SplashScreen v-if="loading" />
      <section v-else class="project-list display-mode--list instance-results" role="list">
        <ProjectCard
          v-for="result in searchStore.searchResults"
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef, onUnmounted } from 'vue'
+import { ref, onUnmounted, shallowRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
@@ -16,7 +16,7 @@ const breadcrumbs = useBreadcrumbs()

 breadcrumbs.setRootContext({ name: 'Home', link: route.path })

-const recentInstances = shallowRef()
+const recentInstances = shallowRef(Object.values(await list()))

 const getInstances = async () => {
  filter.value = ''
--- a/theseus_gui/src/pages/Library.vue
+++ b/theseus_gui/src/pages/Library.vue
@@ -4,6 +4,7 @@ import GridDisplay from '@/components/GridDisplay.vue'
 import { list } from '@/helpers/profile.js'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { loading_listener } from '@/helpers/events.js'

 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -17,12 +18,21 @@ const instances = shallowRef(
 const modpacks = shallowRef(
  Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
 )
+
+loading_listener(async (profile) => {
+  console.log(profile)
+  if (profile.event === 'loaded') {
+    const profiles = await list()
+    instances.value = Object.values(profiles).filter((prof) => !prof.metadata.linked_project_id)
+    modpacks.value = Object.values(profiles).filter((prof) => prof.metadata.linked_project_id)
+  }
+})
 </script>

 <template>
  <div>
-    <GridDisplay label="Instances" :instances="instances" />
-    <GridDisplay label="Modpacks" :instances="modpacks" />
+    <GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
+    <GridDisplay v-if="modpacks.length > 0" label="Modpacks" :instances="modpacks" />
  </div>
 </template>

--- a/theseus_gui/src/pages/Settings.vue
+++ b/theseus_gui/src/pages/Settings.vue
@@ -28,8 +28,8 @@ if (!fetchSettings.java_globals?.JAVA_8)
  fetchSettings.java_globals.JAVA_8 = { path: '', version: '' }
 if (!fetchSettings.java_globals?.JAVA_17)
  fetchSettings.java_globals.JAVA_17 = { path: '', version: '' }
-
 const settings = ref(fetchSettings)
+
 const chosenInstallOptions = ref([])
 const browsingInstall = ref(0)

--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -68,9 +68,9 @@ import {
  get_uuids_by_profile_path,
  kill_by_uuid,
 } from '@/helpers/process'
-import { process_listener } from '@/helpers/events'
+import { process_listener, profile_listener } from '@/helpers/events'
 import { useRoute } from 'vue-router'
-import { shallowRef, ref, onUnmounted } from 'vue'
+import { ref, onUnmounted } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import { open } from '@tauri-apps/api/dialog'
 import { useBreadcrumbs, useSearch } from '@/store/state'
@@ -79,15 +79,21 @@ const route = useRoute()
 const searchStore = useSearch()
 const breadcrumbs = useBreadcrumbs()

-const instance = shallowRef(await get(route.params.id))
-searchStore.instanceContext = instance.value
+const instance = ref(await get(route.params.id))

+searchStore.instanceContext = instance.value
 breadcrumbs.setName('Instance', instance.value.metadata.name)
 breadcrumbs.setContext({
  name: instance.value.metadata.name,
  link: route.path,
 })

+profile_listener(async (event) => {
+  if (event.profile_path === route.params.id) {
+    instance.value = await get(route.params.id)
+  }
+})
+
 const uuid = ref(null)
 const playing = ref(false)
 const loading = ref(false)
--- a/theseus_gui/src/pages/project/Gallery.vue
+++ b/theseus_gui/src/pages/project/Gallery.vue
@@ -164,7 +164,7 @@ const expandImage = (item, index) => {

 .expanded-image-modal {
  position: fixed;
-  z-index: 20;
+  z-index: 10;
  overflow: auto;
  top: 0;
  left: 0;
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -291,7 +291,7 @@ async function install(version) {
        .map((value) => value.metadata)
        .find((pack) => pack.linked_data?.project_id === data.value.id)
    ) {
-      let id = await packInstall(queuedVersionData.id)
+      let id = await packInstall(queuedVersionData.id, data.value.title)
      await router.push({ path: `/instance/${encodeURIComponent(id)}` })
    } else {
      confirmModal.value.show(queuedVersionData.id)