aboutsummaryrefslogtreecommitdiff
path: root/src-vue/src
diff options
context:
space:
mode:
authorGeckoEidechse <40122905+GeckoEidechse@users.noreply.github.com>2022-10-25 14:43:02 +0200
committerGitHub <noreply@github.com>2022-10-25 14:43:02 +0200
commit20c92238a8ffb2bfd2b2ae6a208844434fb7ebfb (patch)
treef87e86a2af0e682e40fea66149166cb8a71aa434 /src-vue/src
parentd64c3b64c9623f341b761a692ac0012452c69d8f (diff)
downloadFlightCore-20c92238a8ffb2bfd2b2ae6a208844434fb7ebfb.tar.gz
FlightCore-20c92238a8ffb2bfd2b2ae6a208844434fb7ebfb.zip
feat: Show installed mods (#28)
Simply parses `enabledmods.json`. In the future we should also opt to check individual mods and compare with the JSON file.
Diffstat (limited to 'src-vue/src')
-rw-r--r--src-vue/src/App.vue11
-rw-r--r--src-vue/src/style.css15
-rw-r--r--src-vue/src/utils/NorthstarMod.d.ts5
-rw-r--r--src-vue/src/views/ModsView.vue37
4 files changed, 67 insertions, 1 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 115330c3..5eeeb93b 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -34,6 +34,7 @@ export default {
</script>
<template>
+ <div class="app-inner">
<div id="fc_bg__container" />
<el-menu
@@ -56,6 +57,7 @@ export default {
<el-button color="white" icon="SemiSelect" @click="minimize" circle />
<el-button color="white" icon="CloseBold" @click="close" circle />
</div>
+ </div>
</template>
<style>
@@ -63,6 +65,10 @@ export default {
#fc__menu_bar {
border: none !important;
}
+.app-inner {
+ height: 100%;
+ width: 100%;
+}
/* Header item */
#fc__menu_bar .el-menu-item {
@@ -84,6 +90,11 @@ export default {
background-color: transparent;
}
+.app-inner > .fc__mods__container {
+ overflow-y: auto;
+ height: calc(100% - var(--fc-menu_height));
+}
+
/* Header menu */
#fc__menu_bar {
background-image: radial-gradient(transparent 1px);
diff --git a/src-vue/src/style.css b/src-vue/src/style.css
index 6fd4a793..6e00975d 100644
--- a/src-vue/src/style.css
+++ b/src-vue/src/style.css
@@ -1,3 +1,12 @@
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ height: 100%;
+ width: 100%;
+}
+
body {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
@@ -5,6 +14,12 @@ body {
user-select: none;
}
+#app {
+ position: relative;
+ height: 100%;
+ width: 100%;
+}
+
#fc_bg__container {
background: url(/src/assets/wallpaperflare.com_wallpaper.jpg) center no-repeat;
background-size: cover;
diff --git a/src-vue/src/utils/NorthstarMod.d.ts b/src-vue/src/utils/NorthstarMod.d.ts
new file mode 100644
index 00000000..b0ce0ed3
--- /dev/null
+++ b/src-vue/src/utils/NorthstarMod.d.ts
@@ -0,0 +1,5 @@
+// Matches Rust struct (in lib.rs).
+export interface NorthstarMod {
+ name: String,
+ enabled: bool,
+}
diff --git a/src-vue/src/views/ModsView.vue b/src-vue/src/views/ModsView.vue
index c37f5fe2..934d6b9d 100644
--- a/src-vue/src/views/ModsView.vue
+++ b/src-vue/src/views/ModsView.vue
@@ -1,15 +1,50 @@
<template>
<div class="fc__mods__container">
<h3>Installed Mods:</h3>
- TODO
+ <div>
+ <el-card shadow="hover" v-for="mod in installed_mods">
+ <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
+ disabled />
+ {{mod.name}}
+ </el-card>
+ </div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
+import { ElNotification } from "element-plus";
+import { invoke } from '@tauri-apps/api/tauri';
+import { GameInstall } from "../utils/GameInstall";
+import { NorthstarMod } from "../utils/NorthstarMod"
export default defineComponent({
name: "ModsView",
+ data() {
+ return {
+ installed_mods: [] as NorthstarMod[],
+ }
+ },
+ async mounted() {
+ let game_install = {
+ game_path: this.$store.state.game_path,
+ install_type: this.$store.state.install_type
+ } as GameInstall;
+ // Call back-end for installed mods
+ await invoke("get_installed_mods_caller", { gameInstall: game_install })
+ .then((message) => {
+ this.installed_mods = (message as NorthstarMod[]);
+ })
+ .catch((error) => {
+ console.error(error);
+ ElNotification({
+ title: 'Error',
+ message: error,
+ type: 'error',
+ position: 'bottom-right'
+ });
+ });
+ }
});
</script>