hook up mod dev tools platform selection to router

The-Egg-Corp · Nov 11, 2024 · 2f4d0be · 2f4d0be
1 parent 0c69bd8
commit 2f4d0be
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 29 deletions.
diff --git a/frontend/src/components/reusable/PlatformSelectPanels.vue b/frontend/src/components/reusable/PlatformSelectPanels.vue
@@ -35,6 +35,8 @@ const items = ref([{
     label: 'Package Validater',
     icon: 'pi pi-check-square' 
 }])
+
+const props = defineEmits(['selectThunderstore', 'selectNexus'])
 </script>
 
 <template>
@@ -48,7 +50,7 @@ const items = ref([{
         <div class="blur w-full h-full">
             <div class="flex column panel-text">
                 Thunderstore
-                <Button class="mt-3" label="Select"/>
+                <Button class="mt-3" label="Select" @click="$emit('selectThunderstore')"/>
             </div>
         </div>
     </SplitterPanel>
@@ -57,7 +59,7 @@ const items = ref([{
         <div class="blur w-full h-full">
             <div class="flex column panel-text">
                 Nexus Mods
-                <Button class="mt-3" label="Select"/>    
+                <Button class="mt-3" label="Select" @click="$emit('selectNexus')"/>
             </div>
         </div>
     </SplitterPanel>

diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
@@ -3,11 +3,14 @@ import type { RouteRecordRaw } from 'vue-router'
 const Dashboard = () => import('../views/Dashboard.vue')
 const GameSelection = () => import('../views/GameSelection.vue')
 const SelectedGame = () => import('../views/SelectedGame.vue')
-const ModDevTools = () => import('../views/mod-dev-tools/ModDevTools.vue')
+
+const ModDevTools = () => import('../views/mod-dev-tools/PlatformSelection.vue')
+const ModDevToolsThunderstore = () => import('../views/mod-dev-tools/Thunderstore.vue')
+const ModDevToolsNexus = () => import('../views/mod-dev-tools/Nexus.vue')
 
 const ROUTES: RouteRecordRaw[] = [{
-    path: '/', 
-    name: 'Dashboard', 
+    path: '/',
+    name: 'Dashboard',
     component: Dashboard
 }, {
     path: '/game-selection',
@@ -19,8 +22,16 @@ const ROUTES: RouteRecordRaw[] = [{
     component: SelectedGame
 }, {
     path: '/mod-dev-tools',
-    name: 'Mod Dev Tools',
+    name: 'Mod Dev Tools (Platform Selection)',
     component: ModDevTools
+}, {
+    path: '/mod-dev-tools/thunderstore',
+    name: 'Mod Dev Tools (Thunderstore)',
+    component: ModDevToolsThunderstore
+}, {
+    path: '/mod-dev-tools/nexus',
+    name: 'Mod Dev Tools (Nexus)',
+    component: ModDevToolsNexus
 }]
 
 export default ROUTES
diff --git a/frontend/src/views/mod-dev-tools/ModDevTools.vue b/frontend/src/views/mod-dev-tools/ModDevTools.vue
diff --git a/frontend/src/views/mod-dev-tools/Nexus.vue b/frontend/src/views/mod-dev-tools/Nexus.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/mod-dev-tools/PlatformSelection.vue b/frontend/src/views/mod-dev-tools/PlatformSelection.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { PlatformSelectPanels } from "@components"
+import { onUnmounted, ref } from "vue"
+
+// enum Platform {
+//     THUNDERSTORE = 1,
+//     NEXUS
+// }
+
+// const selectedPlatform = ref(0)
+// const setSelectedPlatform = (platform: Platform) => {
+//     selectedPlatform.value = platform
+//     console.log(`[ModDevTools] Selected platform set to '${Platform[platform]}'. Index: ${platform}`)
+// }
+
+// onUnmounted(() => {
+//     selectedPlatform.value = 0
+// })
+</script>
+
+<template>
+    <PlatformSelectPanels
+        @selectThunderstore="$router.push('/mod-dev-tools/thunderstore')" 
+        @selectNexus="$router.push('/mod-dev-tools/nexus')"
+    />
+</template>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/views/mod-dev-tools/Thunderstore.vue b/frontend/src/views/mod-dev-tools/Thunderstore.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>