From 1c99ff7d60f9dbf6aa60d98744babf33124e9cac Mon Sep 17 00:00:00 2001
From: Zhao Zuohong <zhbaor@zhaozuohong.vip>
Date: Thu, 23 Feb 2023 19:46:22 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20TotalProgress=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.vue                      |  4 +--
 frontend/src/components/TotalProgress.vue | 33 +++++++++++++++++++++++
 frontend/src/views/AudioDownload.vue      | 32 +++++++++++++---------
 3 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/TotalProgress.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 67bb598..ec77da1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -5,9 +5,7 @@ import AudioDownload from "./views/AudioDownload.vue";
 </script>
 
 <template>
-  <div class="vh-100 vw-100 bg-body-secondary">
-    <AudioDownload></AudioDownload>
-  </div>
+  <AudioDownload></AudioDownload>
 </template>
 
 <style scoped></style>
diff --git a/frontend/src/components/TotalProgress.vue b/frontend/src/components/TotalProgress.vue
new file mode 100644
index 0000000..c23cb26
--- /dev/null
+++ b/frontend/src/components/TotalProgress.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  display: String,
+  finished: Number,
+  total: Number,
+});
+
+const progress = computed(() => {
+  return Math.round((props.finished / props.total) * 100);
+});
+</script>
+
+<template>
+  <div class="shadow-lg bg-body px-3 pt-2 pb-3 border-top border-2 z-3">
+    <div class="mb-1 text-center">
+      {{ display }}<span class="px-2">-</span>{{ finished }} / {{ total }}
+    </div>
+    <div class="progress" role="progressbar">
+      <div
+        class="progress-bar progress-bar-striped progress-bar-animated"
+        :style="{ width: progress + '%' }"
+      ></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.progress {
+  height: 24px;
+}
+</style>
diff --git a/frontend/src/views/AudioDownload.vue b/frontend/src/views/AudioDownload.vue
index eb7b318..773d438 100644
--- a/frontend/src/views/AudioDownload.vue
+++ b/frontend/src/views/AudioDownload.vue
@@ -1,5 +1,6 @@
 <script setup>
 import AudioCard from "../components/AudioCard.vue";
+import TotalProgress from "../components/TotalProgress.vue";
 
 const p1 = {
   number: "BV1es41127Fd",
@@ -27,21 +28,26 @@ const p4 = {
 </script>
 
 <template>
-  <div class="container overflow-hidden">
-    <div class="row g-3 py-3">
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-        <AudioCard v-bind="p1"></AudioCard>
-      </div>
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-        <AudioCard v-bind="p2"></AudioCard>
-      </div>
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-        <AudioCard v-bind="p3"></AudioCard>
-      </div>
-      <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
-        <AudioCard v-bind="p4"></AudioCard>
+  <div
+    class="vh-100 vw-100 bg-body-secondary overflow-scroll d-flex flex-column"
+  >
+    <div class="container overflow-y-scroll flex-grow-1">
+      <div class="row g-3 py-3">
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+          <AudioCard v-bind="p1"></AudioCard>
+        </div>
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+          <AudioCard v-bind="p2"></AudioCard>
+        </div>
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+          <AudioCard v-bind="p3"></AudioCard>
+        </div>
+        <div class="col-12 col-md-10 offset-md-1 col-xl-6 offset-xl-0">
+          <AudioCard v-bind="p4"></AudioCard>
+        </div>
       </div>
     </div>
+    <TotalProgress display="Downloading" :finished="114514" :total="191981"></TotalProgress>
   </div>
 </template>