feat: Add initial skeleton for ModsView (#27)

* feat: Backend code to get list of installed mods

For now simply parses `enabledmods.json`.
Note that this file will not be up-to-date if the user just installed a
mod but hasn't launched Northstar yet.

* feat: Empty skeleton page for ModsView

Will be populated later with list of installed mods

* chore: Remove leftover print statement

7 files changed, 109 insertions, 5 deletions

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 8a97a108..84920727 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -26,6 +26,12 @@ pub struct GameInstall {
     pub install_type: InstallType,
 }
 
+#[derive(Serialize, Deserialize, Debug, Clone)]
+pub struct NorthstarMod {
+    pub name: String,
+    pub enabled: bool,
+}
+
 /// Check version number of a mod
 pub fn check_mod_version_number(path_to_mod_folder: String) -> Result<String, anyhow::Error> {
     // println!("{}", format!("{}/mod.json", path_to_mod_folder));
@@ -471,3 +477,36 @@ pub fn set_mod_enabled_status(
 
     Ok(())
 }
+
+/// Gets list of installed mods and their properties
+/// - name
+/// - is enabled?
+pub fn get_installed_mods(game_install: GameInstall) -> Result<Vec<NorthstarMod>, String> {
+    let enabled_mods_json_path = format!("{}/R2Northstar/enabledmods.json", game_install.game_path);
+    // Open file
+    let data = match std::fs::read_to_string(enabled_mods_json_path) {
+        Ok(data) => data,
+        Err(err) => return Err(err.to_string()),
+    };
+    // Check if valid JSON and parse
+    let res: serde_json::Value = match serde_json::from_str(&data) {
+        Ok(res) => res,
+        Err(err) => return Err(err.to_string()),
+    };
+
+    let mut installed_mods = Vec::new();
+
+    for (key, value) in res.as_object().unwrap() {
+
+        let current_mod: NorthstarMod = NorthstarMod {
+            name: key.to_string(),
+            enabled: value.as_bool().unwrap(),
+        };
+        installed_mods.push(current_mod);
+    }
+
+    dbg!(&res);
+    dbg!(installed_mods.clone());
+
+    Ok(installed_mods)
+}
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 4826ef52..0cb329d2 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -12,8 +12,8 @@ use std::{
 use app::{
     check_is_flightcore_outdated, check_is_valid_game_path, check_northstar_running,
     check_origin_running, convert_release_candidate_number, find_game_install_location,
-    get_enabled_mods, get_host_os, get_log_list, get_northstar_version_number, install_northstar,
-    launch_northstar, set_mod_enabled_status, GameInstall, linux_checks_librs
+    get_enabled_mods, get_host_os, get_installed_mods, get_log_list, get_northstar_version_number,
+    install_northstar, launch_northstar, linux_checks_librs, set_mod_enabled_status, GameInstall, NorthstarMod,
 };
 
 mod repair_and_verify;
@@ -88,7 +88,8 @@ fn main() {
             set_mod_enabled_status_caller,
             disable_all_but_core_caller,
             is_debug_mode,
-            linux_checks
+            linux_checks,
+            get_installed_mods_caller,
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
@@ -297,3 +298,8 @@ fn set_mod_enabled_status_caller(
 fn disable_all_but_core_caller(game_install: GameInstall) -> Result<(), String> {
     disable_all_but_core(game_install)
 }
+
+#[tauri::command]
+async fn get_installed_mods_caller(game_install: GameInstall) -> Result<Vec<NorthstarMod>, String> {
+    get_installed_mods(game_install)
+}
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 68372fc7..115330c3 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -2,6 +2,7 @@
 import ChangelogView from './views/ChangelogView.vue';
 import DeveloperView from './views/DeveloperView.vue';
 import PlayView from './views/PlayView.vue';
+import ModsView from './views/ModsView.vue';
 import SettingsView from './views/SettingsView.vue';
 import { appWindow } from '@tauri-apps/api/window';
 import { store } from './plugins/store';
@@ -12,7 +13,8 @@ export default {
       ChangelogView,
       DeveloperView,
       PlayView,
-      SettingsView
+      SettingsView,
+      ModsView
   },
   data() {
     return {}
@@ -43,6 +45,7 @@ export default {
     >
         <el-menu-item index="/">Play</el-menu-item>
         <el-menu-item index="/changelog">Changelog</el-menu-item>
+        <el-menu-item index="/mods">Mods</el-menu-item>
         <el-menu-item index="/settings">Settings</el-menu-item>
         <el-menu-item index="/dev" v-if="$store.state.developer_mode">Dev</el-menu-item>
     </el-menu>
diff --git a/src-vue/src/main.ts b/src-vue/src/main.ts
index dc18b443..95bea7af 100644
--- a/src-vue/src/main.ts
+++ b/src-vue/src/main.ts
@@ -5,6 +5,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { store } from './plugins/store';
 import PlayView from "./views/PlayView.vue";
 import ChangelogView from "./views/ChangelogView.vue";
+import ModsView from "./views/ModsView.vue";
 import SettingsView from "./views/SettingsView.vue";
 import DeveloperView from "./views/DeveloperView.vue";
 import {createRouter, createWebHashHistory} from "vue-router";
@@ -32,6 +33,7 @@ app.use( store, '$store' );
 const routes = [
     { path: '/', name: 'Main', component: async () => PlayView},
     { path: '/changelog', name: 'Changelog', component: async () => ChangelogView},
+    { path: '/mods', name: 'Mods', component: async () => ModsView},
     { path: '/settings', name: 'Settings', component: async () => SettingsView},
     { path: '/dev', name: 'Dev', component: async () => DeveloperView}
 ];
diff --git a/src-vue/src/utils/Tabs.ts b/src-vue/src/utils/Tabs.ts
index 48320950..027f9f0a 100644
--- a/src-vue/src/utils/Tabs.ts
+++ b/src-vue/src/utils/Tabs.ts
@@ -2,5 +2,6 @@ export enum Tabs {
     PLAY = '/',
     CHANGELOG = '/changelog',
     SETTINGS = '/settings',
-    DEV = '/dev'
+    DEV = '/dev',
+    MODS = '/mods'
 }
diff --git a/src-vue/src/views/DeveloperView.vue b/src-vue/src/views/DeveloperView.vue
index 3a7ec8f5..8bcd36ea 100644
--- a/src-vue/src/views/DeveloperView.vue
+++ b/src-vue/src/views/DeveloperView.vue
@@ -22,6 +22,10 @@
             Disable all but core mods
         </el-button>
 
+        <el-button type="primary" @click="getInstalledMods">
+            Get installed mods
+        </el-button>
+
     </div>
 </template>
 
@@ -112,6 +116,33 @@ export default defineComponent({
                         position: 'bottom-right'
                     });
                 });
+        },
+        async getInstalledMods() {
+            let game_install = {
+                game_path: this.$store.state.game_path,
+                install_type: this.$store.state.install_type
+            } as GameInstall;
+            await invoke("get_installed_mods_caller", { gameInstall: game_install }).then((message) => {
+                // Simply console logging for now
+                // In the future we should display the installed mods somewhere
+                console.log(message);
+
+                // Just a visual indicator that it worked
+                ElNotification({
+                    title: 'Success',
+                    message: "Success",
+                    type: 'success',
+                    position: 'bottom-right'
+                });
+            })
+                .catch((error) => {
+                    ElNotification({
+                        title: 'Error',
+                        message: error,
+                        type: 'error',
+                        position: 'bottom-right'
+                    });
+                });
         }
     }
 });
diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
new file mode 100644
index 00000000..c37f5fe2
--- /dev/null
+++ b/src-vue/src/views/ModsView.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="fc__mods__container">
+        <h3>Installed Mods:</h3>
+        TODO
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    name: "ModsView",
+});
+</script>
+
+<style scoped>
+.fc__mods__container {
+    padding: 20px 30px;
+    color: white;
+    position: relative;
+}
+</style>