Finishes wiring up the profile page. (#93)

* MOD373 Play and stop btns wired up.

* MOD373 Re-adds run helper.

* Cleans up play and stop methods. Adds intermediate loading btn.

* Wires up opening profile directory.

* Further wires up profile page to process events.

* Listens in on processe for btn display.

* Merges master into profilepage branch.

* Drops process_listener during unmount.

* Ensures uuid has value for listener. Checks event uuid in profile_listener.

theseus_gui/src/pages/instance/Index.vue

@@ -10,11 +10,30 @@
           </span>
         </div>
         <span class="button-group">
-          <Button color="primary" class="instance-button" @click="run($route.params.id)">
+          <Button
+            v-if="playing === true"
+            color="danger"
+            class="instance-button"
+            @click="stopInstance"
+            @mouseover="checkProcess"
+          >
+            <XIcon />
+            Stop
+          </Button>
+          <Button
+            v-else-if="playing === false && loading === false"
+            color="primary"
+            class="instance-button"
+            @click="startInstance"
+            @mouseover="checkProcess"
+          >
             <PlayIcon />
             Play
           </Button>
-          <Button class="instance-button" icon-only>
+          <Button v-else-if="loading === true && playing === false" disabled class="instance-button"
+            >Loading...</Button
+          >
+          <Button class="instance-button" icon-only @click="open({ defaultPath: instance.path })">
             <OpenFolderIcon />
           </Button>
         </span>
@@ -41,14 +60,20 @@
   </div>
 </template>
 <script setup>
-import { BoxIcon, SettingsIcon, FileIcon, Button, Avatar, Card, Promotion } from 'omorphia'
+import { BoxIcon, SettingsIcon, FileIcon, XIcon, Button, Avatar, Card, Promotion } from 'omorphia'
 import { PlayIcon, OpenFolderIcon } from '@/assets/icons'
 import { get, run } from '@/helpers/profile'
+import {
+  get_all_running_profile_paths,
+  get_uuids_by_profile_path,
+  kill_by_uuid,
+} from '@/helpers/process'
+import { process_listener } from '@/helpers/events'
 import { useRoute } from 'vue-router'
-import { shallowRef } from 'vue'
+import { shallowRef, ref, onUnmounted } from 'vue'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
-import { useSearch } from '@/store/search'
-import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { open } from '@tauri-apps/api/dialog'
+import { useBreadcrumbs, useSearch } from '@/store/state'
 
 const route = useRoute()
 const searchStore = useSearch()
@@ -62,6 +87,53 @@ breadcrumbs.setContext({
   name: instance.value.metadata.name,
   link: route.path,
 })
+
+const uuid = ref(null)
+const playing = ref(false)
+const loading = ref(false)
+
+const startInstance = async () => {
+  loading.value = true
+  uuid.value = await run(route.params.id)
+  loading.value = false
+  playing.value = true
+}
+
+const checkProcess = async () => {
+  const runningPaths = await get_all_running_profile_paths()
+  if (runningPaths.includes(instance.value.path)) {
+    playing.value = true
+    return
+  }
+
+  playing.value = false
+  uuid.value = null
+}
+
+await checkProcess()
+
+const stopInstance = async () => {
+  playing.value = false
+
+  try {
+    if (!uuid.value) {
+      const uuids = await get_uuids_by_profile_path(instance.value.path)
+      uuid.value = uuids[0] // populate Uuid to listen for in the process_listener
+      uuids.forEach(async (u) => await kill_by_uuid(u))
+    } else await kill_by_uuid(uuid.value)
+  } catch (err) {
+    // Theseus currently throws:
+    //  "Error launching Minecraft: Minecraft exited with non-zero code 1" error
+    // For now, we will catch and just warn
+    console.warn(err)
+  }
+}
+
+const unlisten = await process_listener((e) => {
+  if (e.event === 'Finished' && uuid.value === e.uuid) playing.value = false
+})
+
+onUnmounted(() => unlisten())
 </script>
 
 <style scoped lang="scss">