Add mod index

src-tauri/src/main.rs

@@ -58,6 +58,7 @@ fn path_join(path_string: String, second_path_string: String) -> String {
 #[derive(serde::Serialize)]
 struct ProgressPayload {
   current_mod: String,
+  mod_index: usize,
   progress: i32,
 }
 
@@ -93,14 +94,15 @@ async fn download_modpack(data: serde_json::Value, window: tauri::Window) {
   let modpack: Modpack = serde_json::from_value(data).unwrap();
 
   tauri::async_runtime::spawn(async move {
-    for mcmod in modpack.mods.iter() {
+    for (i, mcmod) in modpack.mods.iter().enumerate() {
       for n in 1..=100 {
         std::thread::sleep(std::time::Duration::from_millis(100));
         window
           .emit(
             "install-progress",
             ProgressPayload {
               current_mod: mcmod.name.clone(),
+              mod_index: i + 1,
               progress: n,
             },
           )

src/pages/Installing.vue

@@ -7,28 +7,34 @@
         <div class="bg-gray-200 rounded-full overflow-hidden">
             <div class="h-2 bg-teal-600 rounded-full" v-bind:style="{ width: progress + '%' }" />
         </div>
-        <p class="text-sm text-center text-neutral-100" v-text="currentMod"></p>
+        <p class="text-sm text-center text-neutral-100" v-text="modStatus"></p>
     </div>
 </template>
 
 <script setup lang="ts">
 import { Modpack } from '../api/getModpacks';
 import { listen } from '@tauri-apps/api/event';
 import downloadModpack from '../api/downloadModpack';
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 
 const props = defineProps<{
     selectedModpack: Modpack,
 }>()
 
 const currentMod = ref<string>('');
+const modIndex = ref<Number>(0);
 const progress = ref<Number>(0);
 
+const modStatus = computed(() => {
+    return `${currentMod.value} (${modIndex.value} / ${props.selectedModpack.mods.length})`
+})
+
 const emit = defineEmits(['navigate', 'next'])
 
 interface payload {
     current_mod: string,
+    mod_index: Number,
     progress: Number,
 }
 
@@ -42,6 +48,7 @@ onMounted(async () => {
         console.log(event.payload);
         const payload = event.payload as payload;
         currentMod.value = payload.current_mod;
+        modIndex.value = payload.mod_index;
         progress.value = payload.progress;
     })