feat: Add dropdown menu for profiles (#494)

Adds a dropdown menu to settings that allows selecting a different profile.

Currently gated behind dev mode being active.

3 files changed, 91 insertions, 0 deletions

diff --git a/src-vue/src/i18n/lang/en.json b/src-vue/src/i18n/lang/en.json
index 238c6c41..1fa4e7ee 100644
--- a/src-vue/src/i18n/lang/en.json
+++ b/src-vue/src/i18n/lang/en.json
@@ -110,6 +110,10 @@
         "show_deprecated_mods_desc1": "This allows you to see deprecated mods in the online mods collection.",
         "show_deprecated_mods_desc2": "Watch out, such mods are usually deprecated for a good reason.",
 
+        "profile": {
+            "active": "Active Profile"
+        },
+
         "repair": {
             "title": "Repair",
             "open_window": "Open repair window",
@@ -150,6 +154,13 @@
             }
         },
 
+        "profile": {
+            "invalid": {
+                "title": "Invalid Profile",
+                "text": "The profile you tried to switch to is no longer valid."
+            }
+        },
+
         "flightcore_outdated": {
             "title": "FlightCore outdated!",
             "text": "Please update FlightCore.\nRunning outdated version {oldVersion}.\nNewest is {newVersion}!"
diff --git a/src-vue/src/plugins/store.ts b/src-vue/src/plugins/store.ts
index e18498a6..8f0c3fee 100644
--- a/src-vue/src/plugins/store.ts
+++ b/src-vue/src/plugins/store.ts
@@ -38,6 +38,7 @@ export interface FlightCoreStore {
     thunderstoreMods: ThunderstoreMod[],
     thunderstoreModsCategories: string[],
     installed_mods: NorthstarMod[],
+    available_profiles: string[],
 
     northstar_is_running: boolean,
     origin_is_running: boolean,
@@ -62,6 +63,8 @@ export const store = createStore<FlightCoreStore>({
             developer_mode: false,
             game_install: {} as unknown as GameInstall,
 
+            available_profiles: [],
+
             flightcore_version: "",
 
             installed_northstar_version: "",
@@ -284,6 +287,9 @@ export const store = createStore<FlightCoreStore>({
                 return;
             }
 
+            // Clear installed mod list first so we don't end up with leftovers
+            state.installed_mods = [];
+
             // Call back-end for installed mods
             await invoke("get_installed_mods_and_properties", { gameInstall: state.game_install })
                 .then((message) => {
@@ -312,6 +318,16 @@ export const store = createStore<FlightCoreStore>({
                 i18n.global.tc(`channels.names.${state.northstar_release_canal}`),
                 i18n.global.tc('channels.release.switch.text', {canal: state.northstar_release_canal}),
             );
+        },
+        async fetchProfiles(state: FlightCoreStore) {
+            await invoke("fetch_profiles", { gameInstall: state.game_install })
+                .then((message) => {
+                    state.available_profiles = message as string[];
+                })
+                .catch((error) => {
+                    console.error(error);
+                    showErrorNotification(error);
+                });
         }
     }
 });
@@ -415,6 +431,8 @@ async function _initializeApp(state: any) {
         await _get_northstar_version_number(state);
     }
 
+    store.commit('fetchProfiles');
+
     await invoke<[number, number]>("get_server_player_count")
         .then((message) => {
             state.player_count = message[0];
@@ -465,6 +483,8 @@ function _initializeListeners(state: any) {
  * state, for it to be displayed in UI.
  */
 async function _get_northstar_version_number(state: any) {
+    state.installed_northstar_version = "";
+
     await invoke("get_northstar_version_number", { gameInstall: state.game_install })
         .then((message) => {
             let northstar_version_number: string = message as string;
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index c7ca2ded..c209da31 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -21,6 +21,21 @@
                     </el-input>
                 </div>
 
+                <!-- Northstar Active Profile -->
+                <div class="fc_parameter__panel" v-if="$store.state.developer_mode">
+                    <h3>{{ $t('settings.profile.active') }}</h3>
+                    <el-dropdown trigger="click">
+                        <el-button>
+                            {{ $store.state.game_install.profile }} <el-icon class="el-icon--right"><arrow-down /></el-icon>
+                        </el-button>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item v-for="profile in $store.state.available_profiles" @click="switchProfile(profile)">{{ profile }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </div>
+
                 <!-- Thunderstore mods per page configuration -->
                 <div class="fc_parameter__panel">
                     <h3>{{ $t('settings.nb_ts_mods_per_page') }}</h3>
@@ -96,6 +111,7 @@ import { showErrorNotification, showNotification } from "../utils/ui";
 import LanguageSelector from "../components/LanguageSelector.vue";
 const persistentStore = new Store('flight-core-settings.json');
 import { open } from '@tauri-apps/api/shell';
+import { i18n } from '../main';
 
 export default defineComponent({
     name: "SettingsView",
@@ -144,6 +160,17 @@ export default defineComponent({
                 persistentStore.set('thunderstore-mods-per-page', { value });
                 await persistentStore.save(); // explicit save to disk
             }
+        },
+        availableProfiles(): Object {
+            let profiles = this.$store.state.available_profiles
+
+            // convert string array to object array so we can fill a table
+            let data = profiles.reduce(
+                (a: Object[], v: string) => [...a, {"name": v}],
+                []
+            );
+
+            return data;
         }
     },
     methods: {
@@ -172,6 +199,39 @@ export default defineComponent({
         async openGameInstallFolder() {
             // Opens the folder in default file explorer application
             await open(`${this.$store.state.game_install.game_path}`);
+        },
+        async switchProfile(value: string) {
+            let store = this.$store;
+            let state = store.state;
+
+            await invoke("validate_profile", { gameInstall: state.game_install, profile: value })
+                .then(async (message) => {
+                    if (!message)
+                    {
+                        // Profile is no longer valid, inform the user...
+                        showErrorNotification(
+                            i18n.global.tc('notification.profile.invalid.text'),
+                            i18n.global.tc('notification.profile.invalid.title')
+                        );
+
+                        // ...and refresh
+                        store.commit('fetchProfiles');
+                        return;
+                    }
+
+                    state.game_install.profile = value;
+
+                    // Check for Northstar updates
+                    store.commit('checkNorthstarUpdates');
+
+                    // Save change in persistent store
+                    await persistentStore.set('game-install', { value: state.game_install });
+                    await persistentStore.save(); // explicit save to disk
+                })
+                .catch((error) => {
+                    console.error(error);
+                    showErrorNotification(error);
+                });
         }
     },
     mounted() {