Offline mode (#403)

* offline mode * fixes, mixpanels, etc * changes * prettier * rev * actions
2023-08-04 19:51:46 -07:00
parent b772f916b1
commit 6a76811bed
36 changed files with 427 additions and 123 deletions
--- a/theseus_gui/src/pages/Browse.vue
+++ b/theseus_gui/src/pages/Browse.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, nextTick, ref, readonly, shallowRef, watch } from 'vue'
+import { computed, nextTick, ref, readonly, shallowRef, watch, onUnmounted } from 'vue'
 import {
  Pagination,
  Checkbox,
@@ -31,10 +31,17 @@ import IncompatibilityWarningModal from '@/components/ui/IncompatibilityWarningM
 import { useFetch } from '@/helpers/fetch.js'
 import { check_installed, get as getInstance } from '@/helpers/profile.js'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { isOffline } from '@/helpers/utils'
+import { offline_listener } from '@/helpers/events'

 const router = useRouter()
 const route = useRoute()

+const offline = ref(await isOffline())
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
 const confirmModal = ref(null)
 const modInstallModal = ref(null)
 const incompatibilityWarningModal = ref(null)
@@ -498,10 +505,12 @@ const showLoaders = computed(
      instanceContext.value === null) ||
    ignoreInstanceLoaders.value
 )
+
+onUnmounted(() => unlistenOffline())
 </script>

 <template>
-  <div ref="searchWrapper" class="search-container">
+  <div v-if="!offline" ref="searchWrapper" class="search-container">
    <aside class="filter-panel">
      <Card v-if="instanceContext" class="small-instance">
        <router-link :to="`/instance/${encodeURIComponent(instanceContext.path)}`" class="instance">
@@ -695,7 +704,7 @@ const showLoaders = computed(
        class="pagination-before"
        @switch-page="onSearchChange"
      />
-      <SplashScreen v-if="loading" />
+      <SplashScreen v-if="loading || offline" />
      <section v-else class="project-list display-mode--list instance-results" role="list">
        <SearchCard
          v-for="result in results.hits"
--- a/theseus_gui/src/pages/Index.vue
+++ b/theseus_gui/src/pages/Index.vue
@@ -1,13 +1,14 @@
 <script setup>
-import { ref, onUnmounted, shallowRef } from 'vue'
+import { ref, onUnmounted, shallowRef, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import RowDisplay from '@/components/RowDisplay.vue'
 import { list } from '@/helpers/profile.js'
-import { profile_listener } from '@/helpers/events'
+import { offline_listener, profile_listener } from '@/helpers/events'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
 import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/notifications.js'
 import dayjs from 'dayjs'
+import { isOffline } from '@/helpers/utils'

 const featuredModpacks = ref({})
 const featuredMods = ref({})
@@ -20,6 +21,8 @@ breadcrumbs.setRootContext({ name: 'Home', link: route.path })

 const recentInstances = shallowRef([])

+const offline = ref(await isOffline())
+
 const getInstances = async () => {
  const profiles = await list(true).catch(handleError)
  recentInstances.value = Object.values(profiles).sort((a, b) => {
@@ -40,32 +43,55 @@ const getFeaturedModpacks = async () => {
    `https://api.modrinth.com/v2/search?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
    'featured modpacks'
  )
-  featuredModpacks.value = response.hits
+  if (response) featuredModpacks.value = response.hits
 }
 const getFeaturedMods = async () => {
  const response = await useFetch(
    'https://api.modrinth.com/v2/search?facets=[["project_type:mod"]]&limit=10&index=follows',
    'featured mods'
  )
-  featuredMods.value = response.hits
+  if (response) featuredMods.value = response.hits
 }

 await getInstances()
-await Promise.all([getFeaturedModpacks(), getFeaturedMods()])

-const unlisten = await profile_listener(async (e) => {
+if (!offline.value) {
+  await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+}
+
+const unlistenProfile = await profile_listener(async (e) => {
  await getInstances()
  if (e.event === 'created' || e.event === 'removed') {
    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
  }
 })

-onUnmounted(() => unlisten())
+const unlistenOffline = await offline_listener(async (b) => {
+  offline.value = b
+  if (!b) {
+    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+  }
+})
+
+// computed sums of recentInstances, featuredModpacks, featuredMods, treating them as arrays if they are not
+const total = computed(() => {
+  return (
+    (recentInstances.value?.length ?? 0) +
+    (featuredModpacks.value?.length ?? 0) +
+    (featuredMods.value?.length ?? 0)
+  )
+})
+
+onUnmounted(() => {
+  unlistenProfile()
+  unlistenOffline()
+})
 </script>

 <template>
  <div class="page-container">
    <RowDisplay
+      v-if="total > 0"
      :instances="[
        {
          label: 'Jump back in',
--- a/theseus_gui/src/pages/Library.vue
+++ b/theseus_gui/src/pages/Library.vue
@@ -1,14 +1,15 @@
 <script setup>
-import { onUnmounted, shallowRef } from 'vue'
+import { onUnmounted, ref, shallowRef } from 'vue'
 import GridDisplay from '@/components/GridDisplay.vue'
 import { list } from '@/helpers/profile.js'
 import { useRoute } from 'vue-router'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
-import { profile_listener } from '@/helpers/events.js'
+import { offline_listener, profile_listener } from '@/helpers/events.js'
 import { handleError } from '@/store/notifications.js'
 import { Button, PlusIcon } from 'omorphia'
 import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
 import { NewInstanceImage } from '@/assets/icons'
+import { isOffline } from '@/helpers/utils'

 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -18,11 +19,19 @@ breadcrumbs.setRootContext({ name: 'Library', link: route.path })
 const profiles = await list(true).catch(handleError)
 const instances = shallowRef(Object.values(profiles))

-const unlisten = await profile_listener(async () => {
+const offline = ref(await isOffline())
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
+const unlistenProfile = await profile_listener(async () => {
  const profiles = await list(true).catch(handleError)
  instances.value = Object.values(profiles)
 })
-onUnmounted(() => unlisten())
+onUnmounted(() => {
+  unlistenProfile()
+  unlistenOffline()
+})
 </script>

 <template>
@@ -37,7 +46,7 @@ onUnmounted(() => unlisten())
      <NewInstanceImage />
    </div>
    <h3>No instances found</h3>
-    <Button color="primary" @click="$refs.installationModal.show()">
+    <Button color="primary" :disabled="offline" @click="$refs.installationModal.show()">
      <PlusIcon />
      Create new instance
    </Button>
--- a/theseus_gui/src/pages/Settings.vue
+++ b/theseus_gui/src/pages/Settings.vue
@@ -5,7 +5,7 @@ import { handleError, useTheming } from '@/store/state'
 import { get, set } from '@/helpers/settings'
 import { get_max_memory } from '@/helpers/jre'
 import JavaSelector from '@/components/ui/JavaSelector.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_opt_out_tracking, mixpanel_opt_in_tracking } from '@/helpers/mixpanel'

 const pageOptions = ['Home', 'Library']

@@ -30,9 +30,9 @@ watch(
    const setSettings = JSON.parse(JSON.stringify(newSettings))

    if (setSettings.opt_out_analytics) {
-      mixpanel.opt_out_tracking()
+      mixpanel_opt_out_tracking()
    } else {
-      mixpanel.opt_in_tracking()
+      mixpanel_opt_in_tracking()
    }

    if (setSettings.java_globals.JAVA_8?.path === '') {
--- a/theseus_gui/src/pages/instance/Index.vue
+++ b/theseus_gui/src/pages/instance/Index.vue
@@ -86,7 +86,12 @@
      <RouterView v-slot="{ Component }">
        <template v-if="Component">
          <Suspense @pending="loadingBar.startLoading()" @resolve="loadingBar.stopLoading()">
-            <component :is="Component" :instance="instance" :options="options"></component>
+            <component
+              :is="Component"
+              :instance="instance"
+              :options="options"
+              :offline="offline"
+            ></component>
          </Suspense>
        </template>
      </RouterView>
@@ -144,13 +149,13 @@ import {
  get_uuids_by_profile_path,
  kill_by_uuid,
 } from '@/helpers/process'
-import { process_listener, profile_listener } from '@/helpers/events'
+import { offline_listener, process_listener, profile_listener } from '@/helpers/events'
 import { useRoute, useRouter } from 'vue-router'
 import { ref, onUnmounted } from 'vue'
 import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
-import { showProfileInFolder } from '@/helpers/utils.js'
+import { isOffline, showProfileInFolder } from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { PackageIcon } from '@/assets/icons/index.js'
 import ExportModal from '@/components/ui/ExportModal.vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
@@ -170,6 +175,8 @@ breadcrumbs.setContext({
  query: route.query,
 })

+const offline = ref(await isOffline())
+
 const loadingBar = useLoading()

 const uuid = ref(null)
@@ -183,7 +190,7 @@ const startInstance = async (context) => {
  loading.value = false
  playing.value = true

-  mixpanel.track('InstanceStart', {
+  mixpanel_track('InstanceStart', {
    loader: instance.value.metadata.loader,
    game_version: instance.value.metadata.game_version,
    source: context,
@@ -211,7 +218,7 @@ const stopInstance = async (context) => {
    uuids.forEach(async (u) => await kill_by_uuid(u).catch(handleError))
  } else await kill_by_uuid(uuid.value).catch(handleError)

-  mixpanel.track('InstanceStop', {
+  mixpanel_track('InstanceStop', {
    loader: instance.value.metadata.loader,
    game_version: instance.value.metadata.game_version,
    source: context,
@@ -292,9 +299,14 @@ const unlistenProcesses = await process_listener((e) => {
  if (e.event === 'finished' && uuid.value === e.uuid) playing.value = false
 })

+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
 onUnmounted(() => {
  unlistenProcesses()
  unlistenProfiles()
+  unlistenOffline()
 })
 </script>

--- a/theseus_gui/src/pages/instance/Logs.vue
+++ b/theseus_gui/src/pages/instance/Logs.vue
@@ -15,7 +15,7 @@
          <CheckIcon v-else />
          {{ copied ? 'Copied' : 'Copy' }}
        </Button>
-        <Button color="primary" @click="share">
+        <Button color="primary" :disabled="offline" @click="share">
          <ShareIcon />
          Share
        </Button>
@@ -78,6 +78,10 @@ const props = defineProps({
    type: Object,
    required: true,
  },
+  offline: {
+    type: Boolean,
+    default: false,
+  },
 })

 const logs = ref([])
--- a/theseus_gui/src/pages/instance/Mods.vue
+++ b/theseus_gui/src/pages/instance/Mods.vue
@@ -93,6 +93,7 @@
            </Button>
            <Button
              class="transparent update"
+              :disabled="offline"
              @click="updateAll()"
              @mouseover="selectedOption = 'Update'"
            >
@@ -139,7 +140,7 @@
            </Button>
          </section>
          <section v-if="selectedOption === 'Update'" class="options">
-            <Button class="transparent" @click="updateAll()">
+            <Button class="transparent" :disabled="offline" @click="updateAll()">
              <UpdatedIcon />
              Update all
            </Button>
@@ -181,6 +182,7 @@
            <router-link
              v-if="mod.slug"
              :to="{ path: `/project/${mod.slug}/`, query: { i: props.instance.path } }"
+              :disabled="offline"
              class="mod-content"
            >
              <Avatar :src="mod.icon" />
@@ -208,7 +210,7 @@
            <Button
              v-else
              v-tooltip="'Update project'"
-              :disabled="!mod.outdated"
+              :disabled="!mod.outdated || offline"
              icon-only
              @click="updateProject(mod)"
            >
@@ -345,7 +347,7 @@ import {
  update_project,
 } from '@/helpers/profile.js'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { open } from '@tauri-apps/api/dialog'
 import { listen } from '@tauri-apps/api/event'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
@@ -368,6 +370,12 @@ const props = defineProps({
      return {}
    },
  },
+  offline: {
+    type: Boolean,
+    default() {
+      return false
+    },
+  },
 })

 const projects = ref([])
@@ -376,8 +384,9 @@ const showingOptions = ref(false)

 const initProjects = (initInstance) => {
  projects.value = []
+  if (!initInstance || !initInstance.projects) return
  for (const [path, project] of Object.entries(initInstance.projects)) {
-    if (project.metadata.type === 'modrinth') {
+    if (project.metadata.type === 'modrinth' && !props.offline) {
      let owner = project.metadata.members.find((x) => x.role === 'Owner')
      projects.value.push({
        path,
@@ -442,6 +451,13 @@ watch(
  }
 )

+watch(
+  () => props.offline,
+  () => {
+    if (props.instance) initProjects(props.instance)
+  }
+)
+
 const searchFilter = ref('')
 const selectAll = ref(false)
 const selectedProjectType = ref('All')
@@ -576,7 +592,7 @@ const updateAll = async () => {
    projects.value[project].updating = false
  }

-  mixpanel.track('InstanceUpdateAll', {
+  mixpanel_track('InstanceUpdateAll', {
    loader: props.instance.metadata.loader,
    game_version: props.instance.metadata.game_version,
    count: setProjects.length,
@@ -601,7 +617,7 @@ const updateProject = async (mod) => {
  mod.version = mod.updateVersion.version_number
  mod.updateVersion = null

-  mixpanel.track('InstanceProjectUpdate', {
+  mixpanel_track('InstanceProjectUpdate', {
    loader: props.instance.metadata.loader,
    game_version: props.instance.metadata.game_version,
    id: mod.id,
@@ -628,7 +644,7 @@ const toggleDisableMod = async (mod) => {
    .then((newPath) => {
      mod.path = newPath
      mod.disabled = !mod.disabled
-      mixpanel.track('InstanceProjectDisable', {
+      mixpanel_track('InstanceProjectDisable', {
        loader: props.instance.metadata.loader,
        game_version: props.instance.metadata.game_version,
        id: mod.id,
@@ -649,7 +665,7 @@ const removeMod = async (mod) => {
  await remove_project(props.instance.path, mod.path).catch(handleError)
  projects.value = projects.value.filter((x) => mod.path !== x.path)

-  mixpanel.track('InstanceProjectRemove', {
+  mixpanel_track('InstanceProjectRemove', {
    loader: props.instance.metadata.loader,
    game_version: props.instance.metadata.game_version,
    id: mod.id,
@@ -778,7 +794,7 @@ listen('tauri://file-drop', async (event) => {
    }
    initProjects(await get(props.instance.path).catch(handleError))
  }
-  mixpanel.track('InstanceCreate', {
+  mixpanel_track('InstanceCreate', {
    source: 'FileDrop',
  })
 })
--- a/theseus_gui/src/pages/instance/Options.vue
+++ b/theseus_gui/src/pages/instance/Options.vue
@@ -90,7 +90,12 @@
          Allows you to change the mod loader, loader version, or game version of the instance.
        </span>
      </label>
-      <button id="edit-versions" class="btn" @click="$refs.changeVersionsModal.show()">
+      <button
+        id="edit-versions"
+        class="btn"
+        @click="$refs.changeVersionsModal.show()"
+        :disabled="offline"
+      >
        <EditIcon />
        Edit versions
      </button>
@@ -291,7 +296,7 @@
      <button
        id="repair-profile"
        class="btn btn-highlight"
-        :disabled="repairing"
+        :disabled="repairing || offline"
        @click="repairProfile"
      >
        <HammerIcon /> Repair
@@ -308,7 +313,7 @@
      <button
        id="repair-profile"
        class="btn btn-highlight"
-        :disabled="repairing"
+        :disabled="repairing || offline"
        @click="repairModpack"
      >
        <DownloadIcon /> Reinstall
@@ -373,7 +378,7 @@ import { open } from '@tauri-apps/api/dialog'
 import { get_fabric_versions, get_forge_versions, get_quilt_versions } from '@/helpers/metadata.js'
 import { get_game_versions, get_loaders } from '@/helpers/tags.js'
 import { handleError } from '@/store/notifications.js'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'
 import { useTheming } from '@/store/theme.js'

 const router = useRouter()
@@ -383,6 +388,10 @@ const props = defineProps({
    type: Object,
    required: true,
  },
+  offline: {
+    type: Boolean,
+    default: false,
+  },
 })

 const themeStore = useTheming()
@@ -403,7 +412,7 @@ const availableGroups = ref([
 async function resetIcon() {
  icon.value = null
  await edit_icon(props.instance.path, null).catch(handleError)
-  mixpanel.track('InstanceRemoveIcon')
+  mixpanel_track('InstanceRemoveIcon')
 }

 async function setIcon() {
@@ -422,7 +431,7 @@ async function setIcon() {
  icon.value = value
  await edit_icon(props.instance.path, icon.value).catch(handleError)

-  mixpanel.track('InstanceSetIcon')
+  mixpanel_track('InstanceSetIcon')
 }

 const globalSettings = await get().catch(handleError)
@@ -536,7 +545,7 @@ async function repairProfile() {
  await install(props.instance.path).catch(handleError)
  repairing.value = false

-  mixpanel.track('InstanceRepair', {
+  mixpanel_track('InstanceRepair', {
    loader: props.instance.metadata.loader,
    game_version: props.instance.metadata.game_version,
  })
@@ -547,7 +556,7 @@ async function repairModpack() {
  await update_repair_modrinth(props.instance.path).catch(handleError)
  repairing.value = false

-  mixpanel.track('InstanceRepair', {
+  mixpanel_track('InstanceRepair', {
    loader: props.instance.metadata.loader,
    game_version: props.instance.metadata.game_version,
  })
@@ -559,7 +568,7 @@ async function removeProfile() {
  await remove(props.instance.path).catch(handleError)
  removing.value = false

-  mixpanel.track('InstanceRemove', {
+  mixpanel_track('InstanceRemove', {
    loader: props.instance.metadata.loader,
    game_version: props.instance.metadata.game_version,
  })
--- a/theseus_gui/src/pages/project/Gallery.vue
+++ b/theseus_gui/src/pages/project/Gallery.vue
@@ -93,7 +93,7 @@ import {
  Button,
 } from 'omorphia'
 import { ref } from 'vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'

 const props = defineProps({
  project: {
@@ -112,7 +112,7 @@ const nextImage = () => {
    expandedGalleryIndex.value = 0
  }
  expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
-  mixpanel.track('GalleryImageNext', {
+  mixpanel_track('GalleryImageNext', {
    project_id: props.project.id,
    url: expandedGalleryItem.value.url,
  })
@@ -124,7 +124,7 @@ const previousImage = () => {
    expandedGalleryIndex.value = props.project.gallery.length - 1
  }
  expandedGalleryItem.value = props.project.gallery[expandedGalleryIndex.value]
-  mixpanel.track('GalleryImagePrevious', {
+  mixpanel_track('GalleryImagePrevious', {
    project_id: props.project.id,
    url: expandedGalleryItem.value,
  })
@@ -135,7 +135,7 @@ const expandImage = (item, index) => {
  expandedGalleryIndex.value = index
  zoomedIn.value = false

-  mixpanel.track('GalleryImageExpand', {
+  mixpanel_track('GalleryImageExpand', {
    project_id: props.project.id,
    url: item.url,
  })
--- a/theseus_gui/src/pages/project/Index.vue
+++ b/theseus_gui/src/pages/project/Index.vue
@@ -267,7 +267,7 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useRoute } from 'vue-router'
 import { ref, shallowRef, watch } from 'vue'
-import { installVersionDependencies } from '@/helpers/utils'
+import { installVersionDependencies, isOffline } from '@/helpers/utils'
 import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import ModInstallModal from '@/components/ui/ModInstallModal.vue'
 import { useBreadcrumbs } from '@/store/breadcrumbs'
@@ -276,7 +276,7 @@ import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/notifications.js'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
-import mixpanel from 'mixpanel-browser'
+import { mixpanel_track } from '@/helpers/mixpanel'

 const route = useRoute()
 const breadcrumbs = useBreadcrumbs()
@@ -297,6 +297,8 @@ const instance = ref(null)
 const installed = ref(false)
 const installedVersion = ref(null)

+const offline = ref(await isOffline())
+
 async function fetchProjectData() {
  ;[
    data.value,
@@ -325,7 +327,7 @@ async function fetchProjectData() {
    : null
 }

-await fetchProjectData()
+if (!offline.value) await fetchProjectData()

 watch(
  () => route.params.id,
@@ -392,7 +394,7 @@ async function install(version) {
        data.value.icon_url
      ).catch(handleError)

-      mixpanel.track('PackInstall', {
+      mixpanel_track('PackInstall', {
        id: data.value.id,
        version_id: queuedVersionData.id,
        title: data.value.title,
@@ -434,7 +436,7 @@ async function install(version) {
          await installMod(instance.value.path, selectedVersion.id).catch(handleError)
          await installVersionDependencies(instance.value, queuedVersionData)
          installedVersion.value = selectedVersion.id
-          mixpanel.track('ProjectInstall', {
+          mixpanel_track('ProjectInstall', {
            loader: instance.value.metadata.loader,
            game_version: instance.value.metadata.game_version,
            id: data.value.id,
@@ -458,7 +460,7 @@ async function install(version) {
          await installMod(instance.value.path, queuedVersionData.id).catch(handleError)
          await installVersionDependencies(instance.value, queuedVersionData)
          installedVersion.value = queuedVersionData.id
-          mixpanel.track('ProjectInstall', {
+          mixpanel_track('ProjectInstall', {
            loader: instance.value.metadata.loader,
            game_version: instance.value.metadata.game_version,
            id: data.value.id,