From 1285c2a9ced7f18dc80f99536b974618c3ec97ac Mon Sep 17 00:00:00 2001
From: Sebastian Pravda <sebastian.pravda@gmail.com>
Date: Sat, 3 Dec 2022 16:59:33 +0100
Subject: [PATCH] feat: file upload status improvements

---
 .../dashboard/DashboardUploadCard.svelte      | 19 ++++++---
 .../lib/components/dashboard/FileType.svelte  |  4 +-
 .../dashboard/StatusNotificationBig.svelte    | 42 +++++++++++++++++++
 ...on.svelte => StatusNotificationDot.svelte} | 12 +++---
 .../lib/components/layout/FullLayout.svelte   | 11 +++--
 .../(authenticated)/dashboard/+page.svelte    |  2 +-
 6 files changed, 71 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
 rename frontend/src/lib/components/dashboard/{StatusNotification.svelte => StatusNotificationDot.svelte} (68%)

diff --git a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
index 76ae502..4438317 100644
--- a/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
+++ b/frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
@@ -3,9 +3,9 @@
 	import FileDrop from 'filedrop-svelte';
 	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';
+	import StatusNotificationDot from './StatusNotificationDot.svelte';
 
 	const dispatch = createEventDispatcher();
 
@@ -22,7 +22,8 @@
 
 	$: if ($submissionProgress) {
 		status = getStatus();
-		console.log('type' + fileType + ' status: ' + status);
+		// console.log('type' + fileType + ' status: ' + status);
+		fileDropped = status === 'uploaded' || status === 'submitted';
 	}
 
 	const getStatus = (): Status => {
@@ -86,22 +87,28 @@
 <div class="card uploadCard">
 	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
 		<h3 class="">{title}</h3>
-		<StatusNotification {status} />
 		<div class="mt-1 sm:mt-0">
 			<FileType {filetype} {filesize} />
 		</div>
+		<div class="mb-16 mr-8">
+			<StatusNotificationDot {status} />
+		</div>
 	</div>
 	{#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>
+				{#if bytesTotal === 0}
+					<h2 class="text-xl font-bold">{status === 'submitted' ? "Odesláno" : "Nahráno"}</h2>
+				{:else}
+					<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>
+				{/if}
 			</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>
+				<h2 class="text-2xl text-sspsBlueDark font-bold mb-2">{Math.round(progress * 100)} %</h2>
 				<ProgressBar progress={progress}></ProgressBar>
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/dashboard/FileType.svelte b/frontend/src/lib/components/dashboard/FileType.svelte
index 49d0cdf..2a1a01d 100644
--- a/frontend/src/lib/components/dashboard/FileType.svelte
+++ b/frontend/src/lib/components/dashboard/FileType.svelte
@@ -4,9 +4,9 @@
 </script>
 
 <div>
-	<span class="text-sspsBlue italic text-sm">{filetype}</span>
+	<span class="text-sspsBlue italic text-lg">{filetype}</span>
 	<span class="mx-2 text-sspsGray">/</span>
-	<span class="text-sspsBlue italic text-sm">Max {filesize}</span>
+	<span class="text-sspsBlue italic text-lg">Max {filesize}</span>
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
new file mode 100644
index 0000000..0173972
--- /dev/null
+++ b/frontend/src/lib/components/dashboard/StatusNotificationBig.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Status } from "$lib/stores/portfolio";
+    import StatusNotificationDot from "./StatusNotificationDot.svelte";
+
+    export let status: Status;
+
+    let title: string;
+    switch (status) {
+        case "submitted":
+            title = "Soubory odeslány!";
+            break;
+        case "uploaded":
+            title = "Soubory nahrány!";
+            break;
+        case "missing":
+            title = "Chybí soubory!";
+            break;
+    }
+
+</script>
+<div class="bg-white rounded-full flex mb-8">
+    <div class="mt-3 mb-3 ml-3 flex flex-row">
+        <h2 class="ml-2 text-2xl text-sspsBlueDark font-bold">{title}</h2>
+        <span class="ml-32  w-8 h-8 rounded-full self-center {status}" />
+        <!-- <StatusNotificationDot {status} /> -->
+    </div>
+</div>
+
+<style>
+    .submitted {
+        @apply bg-[#35e000ff];
+    }
+
+    .uploaded {
+        @apply bg-[#ff8530ff];
+    }
+
+    .missing {
+        @apply bg-[#ff3030ff];
+    }
+</style>
+
diff --git a/frontend/src/lib/components/dashboard/StatusNotification.svelte b/frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
similarity index 68%
rename from frontend/src/lib/components/dashboard/StatusNotification.svelte
rename to frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
index c99b615..436633b 100644
--- a/frontend/src/lib/components/dashboard/StatusNotification.svelte
+++ b/frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
@@ -19,22 +19,22 @@
 </script>
 
 <!-- make red dot -->
-<div class="flex flex-col justify-between">
-    <span class="mt-1 w-5 h-5 rounded-full {status}" />
-    <h3 class="ml-8 font-bold text-xl">{title}</h3>
+<div class="flex flex-row justify-between">
+    <span class="mt-1 w-6 h-6 rounded-full {status}" />
+    <!-- <h3 class="ml-8 font-bold text-xl">{title}</h3> -->
 </div>
 
 <style>
     span {
-		@apply absolute rounded-full p-1;
+		@apply rounded-full p-1;
 	}
 
     .submitted {
-        @apply bg-green-700;
+        @apply bg-[#35e000ff];
     }
 
     .uploaded {
-        @apply bg-yellow-700;
+        @apply bg-[#ff8530ff];
     }
 
     .missing {
diff --git a/frontend/src/lib/components/layout/FullLayout.svelte b/frontend/src/lib/components/layout/FullLayout.svelte
index 7928cf1..9dea958 100644
--- a/frontend/src/lib/components/layout/FullLayout.svelte
+++ b/frontend/src/lib/components/layout/FullLayout.svelte
@@ -6,10 +6,10 @@
 
 <div class="bg">
 	<div class="bgOverlay">
-		<!-- <img class="logo" src={logo} alt="SSPŠ logo" /> -->
-		<!-- <div class="darkModeToggle">
+		<img class="logo" src={logo}  alt="SSPŠ logo" />
+		<div class="darkModeToggle">
 			<DarkModeToggle backgroundColor="dark" />
-		</div> -->
+		</div>
 	</div>
 	<div style={`background-image: url(${backgroundImage});`} class="bgImage" />
 </div>
@@ -20,6 +20,9 @@
 </div>
 
 <style>
+	.logo {
+		@apply w-[200px] h-[200px]
+	}
 	.bgImage {
 		@apply -z-20;
 		@apply absolute min-w-screen min-w-full min-h-screen;
@@ -34,7 +37,7 @@
 	.bgOverlay .logo {
 		@apply absolute top-0 left-0;
 		@apply hidden md:inline-block;
-		@apply h-auto max-w-56;
+		@apply h-auto max-w-72;
 		@apply p-7;
 	}
 	.bgOverlay .darkModeToggle {
diff --git a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
index e2a522b..fca6e10 100644
--- a/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
+++ b/frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
@@ -53,7 +53,7 @@
 
 <style>
 	.dashboardDesktop {
-		@apply w-[70vw] h-[70vh];
+		@apply w-[65vw] h-[65vh];
 		@apply hidden md:grid grid-cols-8 grid-rows-2 gap-10;
 	}