dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-24 12:35:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: file upload status improvements

Browse source
This commit is contained in:
Sebastian Pravda 2022-12-03 16:59:33 +01:00 committed by EETagent
parent fb52bc68a9
commit 1285c2a9ce
6 changed files with 71 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
View file

@ -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>

4
frontend/src/lib/components/dashboard/FileType.svelte
View file

@ -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>

42
frontend/src/lib/components/dashboard/StatusNotificationBig.svelte Normal file
View file

@ -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>

12
frontend/src/lib/components/dashboard/StatusNotification.svelte → frontend/src/lib/components/dashboard/StatusNotificationDot.svelte
View file

@ -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 {

11
frontend/src/lib/components/layout/FullLayout.svelte
View file

@ -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 {

2
frontend/src/routes/(candidate)/(authenticated)/dashboard/+page.svelte
View file

@ -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;
}