⚡️ Rewrite download manager

frontend/src/views/AudioDownload.vue

@@ -11,33 +11,8 @@ const state_list = ref([]);
 
 const auto_download = ref(false);
 
-onMounted(() => {
-  setInterval(() => {
-    axios.get("http://localhost:8000/progress").then((resp) => {
-      state_list.value = resp.data;
-      for (const [i, s] of state_list.value.entries()) {
-        if (
-          auto_download.value &&
-          counter.value.downloading == 0 &&
-          s.number &&
-          s.title &&
-          s.total == 0
-        ) {
-          axios.post("http://localhost:8000/download", {
-            id: i,
-            parent_dir: "/home/zhao/Desktop/tmp",
-          });
-          break;
-        }
-      }
-    });
-  }, 500);
-});
-
 const counter = computed(() => {
-  if (state_list.value.length == 0) {
-    return { fetching: true, downloading: false };
-  }
+  const total = state_list.value.length;
   let ready = 0;
   let downloading = 0;
   let finished = 0;
@@ -45,30 +20,55 @@ const counter = computed(() => {
     if (s.number && s.title && s.total == 0) {
       ready++;
     } else if (s.received < s.total) {
+      ready++;
       downloading++;
-    } else if (s.total <= s.received && s.total != 0) {
+    } else if (s.total != 0 && s.received == s.total) {
+      ready++;
       finished++;
     }
   });
-  return { ready: ready, downloading: downloading, finished: finished };
+  return {
+    total: total,
+    ready: ready,
+    downloading: downloading,
+    finished: finished,
+  };
 });
 
 const progress_info = computed(() => {
-  const total = state_list.value.length;
-  const { ready, downloading, finished } = counter.value;
+  const { ready, downloading, finished, total } = counter.value;
   const fetch_info = "Fetching Information";
+  const ready_info = "Ready";
   const download_info = "Downloading";
   const finished_info = "Downloads Complete";
-  if (total == 0) {
-    return { display: fetch_info, finished: 0, total: 0 };
-  } else if (ready < total && downloading == 0 && finished == 0) {
+  if (ready < total) {
     return { display: fetch_info, finished: ready, total: total };
-  } else if (finished + downloading + ready == total && finished < total) {
-    return { display: download_info, finished: finished + downloading, total: total };
+  } else if (ready == total && !downloading && !finished) {
+    return { display: ready_info, finished: ready, total: total };
+  } else if (finished < total) {
+    return {
+      display: download_info,
+      finished: finished,
+      total: total,
+    };
   } else if (finished == total) {
     return { display: finished_info, finished: finished, total: total };
   }
 });
+
+function start_download() {
+  axios.post("http://localhost:8000/download", {
+    parent_dir: "/home/zhao/Desktop/tmp",
+  });
+}
+
+onMounted(() => {
+  setInterval(() => {
+    axios.get("http://localhost:8000/progress").then((resp) => {
+      state_list.value = resp.data;
+    });
+  }, 200);
+});
 </script>
 
 <template>
@@ -87,7 +87,8 @@ const progress_info = computed(() => {
     </div>
     <DownloadButton
       @enable-download="auto_download = true"
-      v-if="counter.ready == state_list.length"
+      v-if="!auto_download && counter.ready == counter.total"
+      @click="start_download"
     ></DownloadButton>
     <TotalProgress v-else v-bind="progress_info"></TotalProgress>
   </div>