Profile Options (#120)

* init profile settings

* more work

* finish everything

* Switch to index approach

* Fix settings str split

* Run lint

theseus_gui/src/components/ui/InstallConfirmModal.vue

@@ -2,9 +2,6 @@
 import { Button, Modal, XIcon, DownloadIcon } from 'omorphia'
 import { install as pack_install } from '@/helpers/pack'
 import { ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
 
 const version = ref('')
 const title = ref('')
@@ -23,9 +20,7 @@ defineExpose({
 
 async function install() {
   installing.value = true
-  let id = await pack_install(version.value)
   await pack_install(version.value, title.value, icon.value ? icon.value : null)
-  await router.push({ path: `/instance/${encodeURIComponent(id)}` })
   confirmModal.value.hide()
 }
 </script>

theseus_gui/src/components/ui/InstanceCreationModal.vue

@@ -18,14 +18,14 @@
         <p class="input-label">Name</p>
         <input v-model="profile_name" class="text-input" type="text" />
       </div>
+      <div class="input-row">
+        <p class="input-label">Loader</p>
+        <Chips v-model="loader" :items="loaders" />
+      </div>
       <div class="input-row">
         <p class="input-label">Game Version</p>
         <div class="versions">
-          <DropdownSelect
-            v-model="game_version"
-            :options="game_versions"
-            :render-up="!showAdvanced"
-          />
+          <DropdownSelect v-model="game_version" :options="game_versions" render-up />
           <Checkbox
             v-if="showAdvanced"
             v-model="showSnapshots"
@@ -34,15 +34,11 @@
           />
         </div>
       </div>
-      <div class="input-row">
-        <p class="input-label">Loader</p>
-        <Chips v-model="loader" :items="loaders" />
-      </div>
-      <div v-if="showAdvanced" class="input-row">
+      <div v-if="showAdvanced && loader !== 'vanilla'" class="input-row">
         <p class="input-label">Loader Version</p>
         <Chips v-model="loader_version" :items="['stable', 'latest', 'other']" />
       </div>
-      <div v-if="showAdvanced && loader_version === 'other'">
+      <div v-if="showAdvanced && loader_version === 'other' && loader !== 'vanilla'">
         <div v-if="game_version" class="input-row">
           <p class="input-label">Select Version</p>
           <DropdownSelect
@@ -98,7 +94,7 @@ const router = useRouter()
 
 const profile_name = ref('')
 const game_version = ref('')
-const loader = ref('')
+const loader = ref('vanilla')
 const loader_version = ref('stable')
 const specified_loader_version = ref('')
 const showContent = ref(false)
@@ -143,17 +139,31 @@ const [fabric_versions, forge_versions, quilt_versions, all_game_versions, loade
       )
       .then(ref),
   ])
+loaders.value.push('vanilla')
 
 const game_versions = computed(() => {
   return all_game_versions.value
-    .filter((item) => item.version_type === 'release' || showSnapshots.value)
+    .filter((item) => {
+      let defaultVal = item.version_type === 'release' || showSnapshots.value
+      if (loader.value === 'fabric') {
+        defaultVal &= fabric_versions.value.gameVersions.some((x) => item.version === x.id)
+      } else if (loader.value === 'forge') {
+        defaultVal &= forge_versions.value.gameVersions.some((x) => item.version === x.id)
+      } else if (loader.value === 'quilt') {
+        defaultVal &= quilt_versions.value.gameVersions.some((x) => item.version === x.id)
+      }
+
+      return defaultVal
+    })
     .map((item) => item.version)
 })
 
 const modal = ref(null)
 
 const check_valid = computed(() => {
-  return profile_name.value && game_version.value
+  return (
+    profile_name.value && game_version.value && game_versions.value.includes(game_version.value)
+  )
 })
 
 const create_instance = async () => {
@@ -166,7 +176,7 @@ const create_instance = async () => {
       profile_name.value,
       game_version.value,
       loader.value,
-      loader_version_value ?? 'stable',
+      loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
       icon.value
     )
 
@@ -185,7 +195,7 @@ const upload_icon = async () => {
     filters: [
       {
         name: 'Image',
-        extensions: ['png', 'jpeg'],
+        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
       },
     ],
   })

theseus_gui/src/components/ui/JavaDetectionModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <Modal ref="detectJavaModal" header="Select java version">
+    <div class="auto-detect-modal">
+      <div class="table">
+        <div class="table-row table-head">
+          <div class="table-cell table-text">Version</div>
+          <div class="table-cell table-text">Path</div>
+          <div class="table-cell table-text">Actions</div>
+        </div>
+        <div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+          <div class="table-cell table-text">
+            <span>{{ javaInstall.version }}</span>
+          </div>
+          <div class="table-cell table-text">
+            <span>{{ javaInstall.path }}</span>
+          </div>
+          <div class="table-cell table-text manage">
+            <Button v-if="currentSelected.path === javaInstall.path" disabled
+              ><CheckIcon /> Selected</Button
+            >
+            <Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+          </div>
+        </div>
+        <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+          <div class="table-cell table-text">No JARS Found!</div>
+        </div>
+      </div>
+      <div class="button-group">
+        <Button @click="$refs.detectJavaModal.hide()">
+          <XIcon />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script setup>
+import { Modal, PlusIcon, CheckIcon, Button, XIcon } from 'omorphia'
+import { ref } from 'vue'
+import {
+  find_jre_17_jres,
+  find_jre_18plus_jres,
+  find_jre_8_jres,
+  get_all_jre,
+} from '@/helpers/jre.js'
+
+const chosenInstallOptions = ref([])
+const detectJavaModal = ref(null)
+const currentSelected = ref({})
+
+defineExpose({
+  show: async (version, currentSelectedJava) => {
+    if (version <= 8 && !!version) {
+      console.log(version)
+      chosenInstallOptions.value = await find_jre_8_jres()
+    } else if (version >= 18) {
+      chosenInstallOptions.value = await find_jre_18plus_jres()
+    } else if (version) {
+      chosenInstallOptions.value = await find_jre_17_jres()
+    } else {
+      console.log('get all')
+      chosenInstallOptions.value = await get_all_jre()
+    }
+
+    currentSelected.value = currentSelectedJava
+    if (!currentSelected.value) {
+      currentSelected.value = { path: '', version: '' }
+    }
+
+    detectJavaModal.value.show()
+  },
+})
+
+const emit = defineEmits(['submit'])
+
+function setJavaInstall(javaInstall) {
+  emit('submit', javaInstall)
+  detectJavaModal.value.hide()
+}
+</script>
+<style lang="scss" scoped>
+.auto-detect-modal {
+  padding: 1rem;
+
+  .table {
+    .table-row {
+      grid-template-columns: 1fr 4fr 1.5fr;
+    }
+
+    span {
+      display: inherit;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.button-group {
+  margin-top: 1rem;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.manage {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>

theseus_gui/src/components/ui/JavaSelector.vue

@@ -0,0 +1,149 @@
+<template>
+  <JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
+  <div class="toggle-setting">
+    <input
+      :disabled="props.disabled"
+      :value="props.modelValue.path"
+      type="text"
+      class="installation-input"
+      :placeholder="placeholder ?? '/path/to/java'"
+      @input="
+        (val) => {
+          emit('update:modelValue', {
+            ...props.modelValue,
+            path: val.target.value,
+          })
+        }
+      "
+    />
+    <span class="installation-buttons">
+      <Button
+        :disabled="props.disabled"
+        @click="$refs.detectJavaModal.show(props.version, props.modelValue)"
+      >
+        <SearchIcon />
+        Auto Detect
+      </Button>
+      <Button :disabled="props.disabled" @click="handleJavaFileInput()">
+        <BrowseIcon />
+        Browse
+      </Button>
+      <Button :disabled="props.disabled" @click="testJava">
+        <PlayIcon />
+        Test
+      </Button>
+      <AnimatedLogo v-if="testingJava === true" class="testing-loader" />
+      <CheckIcon
+        v-else-if="testingJavaSuccess === true && testingJava === false"
+        class="test-success"
+      />
+      <XIcon v-else-if="testingJavaSuccess === false && testingJava === false" class="test-fail" />
+    </span>
+  </div>
+</template>
+
+<script setup>
+import { Button, SearchIcon, PlayIcon, CheckIcon, XIcon, AnimatedLogo } from 'omorphia'
+import { BrowseIcon } from '@/assets/icons'
+import { get_jre } from '@/helpers/jre.js'
+import { ref } from 'vue'
+import { open } from '@tauri-apps/api/dialog'
+import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+
+const props = defineProps({
+  version: {
+    type: Number,
+    required: false,
+    default: null,
+  },
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const testingJava = ref(false)
+const testingJavaSuccess = ref(null)
+async function testJava() {
+  testingJava.value = true
+  let result = await get_jre(props.modelValue.path)
+  testingJava.value = false
+  testingJavaSuccess.value = !!result
+
+  setTimeout(() => {
+    testingJavaSuccess.value = null
+  }, 2000)
+}
+
+async function handleJavaFileInput() {
+  let filePath = await open()
+
+  if (filePath) {
+    let result = await get_jre(filePath)
+    if (!result) {
+      result = {
+        path: filePath,
+        version: props.version.toString(),
+        architecture: 'x86',
+      }
+    }
+
+    emit('update:modelValue', result)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.installation-input {
+  width: 100% !important;
+  flex-grow: 1;
+}
+
+.toggle-setting {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.installation-buttons {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.test-success {
+  color: var(--color-green);
+}
+
+.test-fail {
+  color: var(--color-red);
+}
+</style>
+<style lang="scss">
+.testing-loader {
+  height: 1rem !important;
+  width: 1rem !important;
+
+  svg {
+    height: inherit !important;
+    width: inherit !important;
+  }
+}
+</style>