From fb52bc68a97c94fcce1fba4fb0f3df8f6acf94fe Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Sat, 3 Dec 2022 14:13:50 +0100
Subject: [PATCH] feat: upload progress bar

---
 .../dashboard/CoverLetterUploadCard.svelte    |  9 +--
 .../dashboard/DashboardUploadCard.svelte      | 76 +++++++++++++------
 .../PortfolioLetterUploadCard.svelte          |  9 +--
 .../dashboard/PortfolioZipUploadCard.svelte   |  9 +--
 .../components/dashboard/ProgressBar.svelte   | 22 ++++++
 5 files changed, 88 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/lib/components/dashboard/ProgressBar.svelte

diff --git a/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte b/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
index 54b2b41..36df3a1 100644
--- a/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { AxiosProgressEvent } from "axios";
 	import { fetchSubmProgress } from "$lib/stores/portfolio";
 	import { apiUploadCoverLetter } from "$lib/@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
-    const onFileDrop = async (file: File) => {
-        await apiUploadCoverLetter(file, (progressEvent: AxiosProgressEvent) => {
-            console.log(progressEvent.progress)
-        });
+    const onFileDrop = async (detail: any) => {
+        const file = detail.file;
+        const callback = detail.callback;
+        await apiUploadCoverLetter(file, callback);
         await fetchSubmProgress();
     }
 
diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index a4562c2..76ae502 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -4,6 +4,8 @@
 	import { submissionProgress, UploadStatus, type Status } from '$lib/stores/portfolio';
 	import { createEventDispatcher } from 'svelte';
 	import StatusNotification from './StatusNotification.svelte';
+	import ProgressBar from './ProgressBar.svelte';
+	import type { AxiosProgressEvent } from 'axios';
 
 	const dispatch = createEventDispatcher();
 
@@ -12,6 +14,10 @@
 	export let filesize: string;
 	export let fileType: number;
 
+	let fileDropped: boolean = false;
+	let progress: number = 1;
+	let bytesTotal: number = 0;
+
 	let status: Status;
 
 	$: if ($submissionProgress) {
@@ -62,40 +68,66 @@
 	const onFileDrop = (dropped: Dropped) => {
 		console.log(dropped);
 		if (dropped.accepted.length > 0) {
-			dispatch('filedrop', dropped.accepted[0]);
+			fileDropped = true;
+			const file = dropped.accepted[0];
+			// send the request in outer component
+			dispatch('filedrop', {
+				file: file,
+				callback: (progressEvent: AxiosProgressEvent) => {
+					console.log(progressEvent.bytes);
+					progress = progressEvent.progress!;
+					bytesTotal = progressEvent.total ?? 0;
+				}
+			});
 		}
 	};
 </script>
 
 <div class="card uploadCard">
 	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
-		<h3>{title}</h3>
+		<h3 class="">{title}</h3>
 		<StatusNotification {status} />
 		<div class="mt-1 sm:mt-0">
 			<FileType {filetype} {filesize} />
 		</div>
 	</div>
-	<div class="flex-1 mt-6">
-		<FileDrop
-			multiple={false}
-			maxSize={filetype == 'PDF' ? 100_000_000 : 10_000_000}
-			accept={filetype == 'PDF' ? 'application/pdf' : 'application/zip'}
-			
-			on:filedrop={(e) => onFileDrop(e.detail.files)}
-			on:filedragenter={dashAnimationStart}
-			on:filedragleave={dashAnimationStop}
-		>
-			<div
-				class="drag group"
-				on:mouseenter={dashAnimationStart}
-				on:mouseleave={dashAnimationStop}
-				style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
-			>
-				<span class="text-[#406280]">Sem přetáhněte,</span>
-				<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
+	{#if fileDropped}	
+		<div class="flex content-around justify-between items-center mb-5 ml-5 mr-5">
+			<svg class="w-35 h-35" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+			<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"><line x1="0" y="0" x2="0" y2="40" stroke="#406280ff" stroke-width="2" stroke-dasharray="3"></line></svg>
+			<div class="items-center">
+				<h2 class="text-xl">Nahráno {((bytesTotal / 1_000_000) * progress).toFixed(1)} MB</h2>
+				<h2 class="text-xl self-center">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
 			</div>
-		</FileDrop>
-	</div>
+			<svg class="h-25" viewBox="0 0 2 40" xmlns="http://www.w3.org/2000/svg"><line x1="0" y="0" x2="0" y2="40" stroke="#406280ff" stroke-width="2" stroke-dasharray="3"></line></svg>
+			<div class="items-center text-center">
+				<h2 class="text-2xl text-sspsBlueDark font-bold mb-2">{Math.round(progress * 100) + "%"}</h2>
+				<ProgressBar progress={progress}></ProgressBar>
+			</div>
+		</div>
+	{:else}
+		<div class="flex-1 mt-6">
+			<FileDrop
+				multiple={false}
+				maxSize={filetype == 'PDF' ? 100_000_000 : 10_000_000}
+				accept={filetype == 'PDF' ? 'application/pdf' : 'application/zip'}
+				
+				on:filedrop={(e) => onFileDrop(e.detail.files)}
+				on:filedragenter={dashAnimationStart}
+				on:filedragleave={dashAnimationStop}
+			>
+				<div
+					class="drag group"
+					on:mouseenter={dashAnimationStart}
+					on:mouseleave={dashAnimationStop}
+					style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
+				>
+					<span class="text-[#406280]">Sem přetáhněte,</span>
+					<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
+				</div>
+			</FileDrop>
+		</div>
+	{/if}
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte b/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
index f63f4ec..d4c7a2d 100644
--- a/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { AxiosProgressEvent } from "axios";
 	import { fetchSubmProgress } from "$lib/stores/portfolio";
 	import { apiUploadPortfolioLetter } from "../../@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
-    const onFileDrop = async (file: File) => {
-        await apiUploadPortfolioLetter(file, (progressEvent: AxiosProgressEvent) => {
-            console.log(progressEvent.loaded)
-        });
+    const onFileDrop = async (detail: any) => {
+        const file = detail.file;
+        const callback = detail.callback;
+        await apiUploadPortfolioLetter(file, callback);
         await fetchSubmProgress();
     }
 
diff --git a/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte b/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
index f0b248e..ba18522 100644
--- a/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import type { AxiosProgressEvent } from "axios";
 	import { fetchSubmProgress } from "$lib/stores/portfolio";
 	import { apiUploadPortfolioZip } from "$lib/@api/candidate";
 	import DashboardUploadCard from "./DashboardUploadCard.svelte";
 
-    const onFileDrop = async (file: File) => {
-        await apiUploadPortfolioZip(file, (progressEvent: AxiosProgressEvent) => {
-            console.log(progressEvent.loaded)
-        });
+    const onFileDrop = async (detail: any) => {
+        const file = detail.file;
+        const callback = detail.callback;
+        await apiUploadPortfolioZip(file, callback);
         await fetchSubmProgress();
     }
 
diff --git a/frontend/src/lib/components/dashboard/ProgressBar.svelte b/frontend/src/lib/components/dashboard/ProgressBar.svelte
new file mode 100644
index 0000000..8f90964
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/ProgressBar.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    export let progress: number;
+</script>
+
+<div class="progress-bar">
+    <svg class="animated animate-ease-linear"
+         width="40mm"
+         height="8mm"
+         viewBox="0 0 50 6"
+         version="1.1"
+         xmlns="http://www.w3.org/2000/svg">
+
+        <line x1="5" y1="3" x2="45" y2="3" stroke="#e6e6e6" stroke-width="6" stroke-linecap="round" />
+
+        {#if progress === 1}
+            <line x1="5" y1="3" x2={progress * 45} y2="3" stroke="#35e000ff" stroke-width="3" stroke-linecap="round" />
+        {:else}
+            <line x1="5" y1="3" x2={progress * 45} y2="3" stroke="#75bff8ff" stroke-width="3" stroke-linecap="round" />
+        {/if}
+    >
+    </svg>
+</div>
\ No newline at end of file