Merge pull request #2 from Alystrasz/feat/new-ui

Full UI rework

1 files changed, 88 insertions, 0 deletions

diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
new file mode 100644
index 00000000..0e5498e9
--- /dev/null
+++ b/src-vue/src/views/SettingsView.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="fc_settings__container">
+        <!-- Game folder location -->
+        <h3>Manage installation</h3>
+        <el-input
+            v-model="$store.state.game_path"
+            class="w-50 m-2"
+            placeholder="Choose installation folder"
+            @click="updateGamePath"
+        >
+            <template #prepend>
+                <el-button icon="Folder" @click="updateGamePath"/>
+            </template>
+        </el-input>
+        <h3>About:</h3>
+        UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
+    </div>
+</template>
+
+<script lang="ts">
+import { open } from '@tauri-apps/api/dialog';
+import { appDir } from '@tauri-apps/api/path';
+import { invoke } from "@tauri-apps/api";
+import { defineComponent } from "vue";
+import { ElNotification } from 'element-plus';
+
+export default defineComponent({
+    name: "SettingsView",
+    methods: {
+        async updateGamePath() {
+            // Open a selection dialog for directories
+            const selected = await open({
+                directory: true,
+                multiple: false,
+                defaultPath: await appDir(),
+            });
+            if (Array.isArray(selected)) {
+                // user selected multiple directories
+                alert("Please only select a single directory");
+            } else if (selected === null) {
+                // user cancelled the selection
+            } else {
+                // user selected a single directory
+
+                // Verify if valid Titanfall2 install location
+                let is_valid_titanfall2_install = await invoke("verify_install_location", { gamePath: selected }) as boolean;
+                if (is_valid_titanfall2_install) {
+                    this.$store.state.game_path = selected;
+                    // Check for Northstar install
+                    this.$store.commit('checkNorthstarUpdates');
+                }
+                else {
+                    // Not valid Titanfall2 install
+                    ElNotification({
+                        title: 'Wrong folder',
+                        message: "Selected folder is not a valid Titanfall2 install.",
+                        type: 'error',
+                        position: 'bottom-right'
+                    });
+                }
+            }
+        }
+    },
+    mounted() {
+        document.querySelector('input')!.disabled = true;
+    }
+});
+</script>
+
+<style scoped>
+.fc_settings__container {
+    max-width: 1200px;
+    padding: 20px 30px;
+    margin: 0 auto;
+    color: white;
+}
+
+h3:first-of-type {
+    margin-top: 0;
+    margin-bottom: 1em;
+    text-transform: uppercase;
+    font-weight: unset;
+}
+
+.el-input {
+    width: 50%;
+}
+</style>