Fix syncing, repairing, add edit method (#111)

* Fix syncing, repairing, add edit method

* comp err

* temp push up

* fixes

* fix more

* add frontend

theseus_gui/src/components/ui/InstallConfirmModal.vue

@@ -1,25 +1,25 @@
 <script setup>
 import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
-import { useRouter } from 'vue-router'
 import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
 
-const router = useRouter()
-
 const version = ref('')
+const title = ref('')
+const icon = ref('')
 const confirmModal = ref(null)
 
 defineExpose({
-  show: (id) => {
+  show: (id, projectTitle, projectIcon) => {
     version.value = id
+    title.value = projectTitle
+    icon.value = projectIcon
     confirmModal.value.show()
   },
 })
 
 async function install() {
-  let id = await pack_install(version.value)
-  await router.push({ path: `/instance/${encodeURIComponent(id)}` })
   confirmModal.value.hide()
+  await pack_install(version.value, title.value, icon.value ? icon.value : null)
 }
 </script>
 

theseus_gui/src/components/ui/Instance.vue

@@ -74,13 +74,13 @@ const install = async (e) => {
     ) {
       try {
         modLoading.value = true
-        await pack_install(versions[0].id, props.instance.title)
+        await pack_install(versions[0].id, props.instance.title, props.instance.icon_url)
         modLoading.value = false
       } catch (err) {
         console.error(err)
         modLoading.value = false
       }
-    } else confirmModal.value.show(versions[0].id)
+    } else confirmModal.value.show(versions[0].id, props.instance.title, props.instance.icon_url)
   }
 
   modLoading.value = false
@@ -119,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>
 
@@ -147,10 +147,12 @@ await process_listener((e) => {
       @mouseenter="checkProcess"
     >
       <Avatar
-        size="lg"
+        size="none"
         :src="
           props.instance.metadata
-            ? convertFileSrc(props.instance.metadata?.icon)
+            ? props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http')
+              ? props.instance.metadata.icon
+              : convertFileSrc(props.instance.metadata?.icon)
             : props.instance.icon_url
         "
         alt="Mod card"
@@ -315,8 +317,14 @@ await process_listener((e) => {
     background: hsl(220, 11%, 11%) !important;
   }
 
-  .mod-image {
-    border-radius: 1.5rem !important;
+  > .avatar {
+    --size: 100%;
+
+    width: 100% !important;
+    height: auto !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    aspect-ratio: 1 / 1 !important;
   }
 
   .project-info {

theseus_gui/src/components/ui/InstanceInstallModal.vue

@@ -55,7 +55,7 @@ async function install(instance) {
   await installMod(instance.path, version.id)
   await installVersionDependencies(instance, version)
 
-  instance.installed = true
+  instance.installedMod = true
   instance.installing = false
 }
 
@@ -75,7 +75,7 @@ const filteredVersions = computed(() => {
 
   filtered.map((profile) => {
     profile.installing = false
-    profile.installed = checkInstalled(profile, project.value)
+    profile.installedMod = checkInstalled(profile, project.value)
   })
 
   return filtered
@@ -149,10 +149,12 @@ const check_valid = computed(() => {
             <Avatar :src="convertFileSrc(profile.metadata.icon)" class="profile-image" />
             {{ profile.metadata.name }}
           </Button>
-          <Button :disabled="profile.installed || profile.installing" @click="install(profile)">
-            <DownloadIcon v-if="!profile.installed && !profile.installing" />
-            <CheckIcon v-else-if="profile.installed" />
-            {{ profile.installing ? 'Installing...' : profile.installed ? 'Installed' : 'Install' }}
+          <Button :disabled="profile.installedMod || profile.installing" @click="install(profile)">
+            <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+            <CheckIcon v-else-if="profile.installedMod" />
+            {{
+              profile.installing ? 'Installing...' : profile.installedMod ? 'Installed' : 'Install'
+            }}
           </Button>
         </div>
       </div>

theseus_gui/src/components/ui/News.vue

@@ -1,91 +0,0 @@
-<script setup>
-import { Card, ChevronRightIcon } from 'omorphia'
-const props = defineProps({
-  news: {
-    type: Object,
-    default() {
-      return {}
-    },
-  },
-})
-</script>
-
-<template>
-  <Card class="news-cta">
-    <img :src="props.news.img" alt="News Image" />
-    <div class="body">
-      <div class="headline">
-        <h2>{{ props.news.headline }}</h2>
-        <p>{{ props.news.blurb }}</p>
-      </div>
-      <div class="underline">
-        <p>{{ props.news.source }}</p>
-        <a href="#"><ChevronRightIcon /></a>
-      </div>
-    </div>
-  </Card>
-</template>
-
-<style lang="scss" scoped>
-.news-cta {
-  display: flex;
-  justify-content: center;
-  padding: 0;
-  background: var(--color-raised-bg);
-  min-width: 24.125rem; /* from wireframe */
-  min-height: 8.5rem; /* from wireframe */
-  box-shadow: var(--shadow-raised-lg);
-  cursor: pointer;
-  transition: all ease-in-out 0.1s;
-  &:hover {
-    box-shadow: var(--shadow-floating);
-    filter: brightness(0.85);
-  }
-  img {
-    display: flex;
-    width: 8.4375rem; /* from wireframe */
-    height: 8.5rem; /* from wireframe */
-    border-radius: 0.9rem 0 0 0.9rem;
-  }
-  .body {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 8.5rem; /* from wireframe */
-    padding: 0.45rem;
-    .headline {
-      display: inherit;
-      flex-direction: inherit;
-      margin: 0.4rem 0;
-      width: 100%;
-      h2 {
-        font-size: 1rem;
-        text-transform: uppercase;
-      }
-      p {
-        font-size: 0.7rem;
-      }
-    }
-    .underline {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      width: 100%;
-      margin-top: auto;
-      p {
-        font-size: 0.7rem;
-      }
-      a {
-        transition: all ease-in-out 0.2s;
-        width: 1.5rem;
-        color: var(--color-primary);
-        font-size: 1.3rem;
-        &:hover {
-          transform: translate(1px);
-          filter: brightness(150%);
-        }
-      }
-    }
-  }
-}
-</style>