dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-08 01:00:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add archive icon and fix max upload size for PDF/ZIP

Browse source
This commit is contained in:
EETagent 2022-12-03 21:15:53 +01:00
parent 602d27d1bd
commit d5892922fb
2 changed files with 33 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
frontend/src/lib/assets/archive.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

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

@ -8,6 +8,7 @@
import StatusNotificationDot from './StatusNotificationDot.svelte'; import StatusNotificationDot from './StatusNotificationDot.svelte';
import documentIcon from '$lib/assets/document.png'; import documentIcon from '$lib/assets/document.png';
import archiveIcon from '$lib/assets/archive.png';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -34,7 +35,7 @@
case UploadStatus.None: case UploadStatus.None:
return 'missing'; return 'missing';
case UploadStatus.Some: case UploadStatus.Some:
if ($submissionProgress.files!.some(code => code === fileType)) { if ($submissionProgress.files!.some((code) => code === fileType)) {
return 'uploaded'; return 'uploaded';
} }
return 'missing'; return 'missing';
@ -45,7 +46,7 @@
default: default:
return 'missing'; return 'missing';
} }
} };
let dashAnimationProgress = 0; let dashAnimationProgress = 0;
let dashAnimationInterval: NodeJS.Timer; let dashAnimationInterval: NodeJS.Timer;
@ -67,7 +68,7 @@
accepted: Array<File>; accepted: Array<File>;
rejected: Array<File>; rejected: Array<File>;
}; };
const onFileDrop = (dropped: Dropped) => { const onFileDrop = (dropped: Dropped) => {
console.log(dropped); console.log(dropped);
if (dropped.accepted.length > 0) { if (dropped.accepted.length > 0) {
@ -96,31 +97,52 @@
<StatusNotificationDot {status} /> <StatusNotificationDot {status} />
</div> </div>
</div> </div>
{#if fileDropped} {#if fileDropped}
<div class="flex content-around justify-between items-center mb-5 ml-5 mr-5"> <div class="flex content-around justify-between items-center mb-5 ml-5 mr-5">
<img src={documentIcon} alt=""> <div class="w-28">
<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> <img class="w-full" src={filetype == 'PDF' ? documentIcon : archiveIcon} alt="Icon" />
</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"
/></svg
>
<div class="items-center"> <div class="items-center">
{#if bytesTotal === 0 || Math.round(progress * 100) === 100} {#if bytesTotal === 0 || Math.round(progress * 100) === 100}
<h2 class="text-xl font-bold">{status === 'submitted' ? "Odesláno" : "Nahráno"}</h2> <h2 class="text-xl font-bold">{status === 'submitted' ? 'Odesláno' : 'Nahráno'}</h2>
{:else} {:else}
<h2 class="text-xl">Nahráno {((bytesTotal / 1_000_000) * progress).toFixed(1)} MB</h2> <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> <h2 class="text-xl self-center">z {(bytesTotal / 1_000_000).toFixed(1)} MB</h2>
{/if} {/if}
</div> </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> <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"
/></svg
>
<div class="items-center text-center"> <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> <ProgressBar {progress} />
</div> </div>
</div> </div>
{:else} {:else}
<div class="flex-1 mt-6"> <div class="flex-1 mt-6">
<FileDrop <FileDrop
multiple={false} multiple={false}
maxSize={filetype == 'PDF' ? 100_000_000 : 10_000_000} maxSize={filetype == 'PDF' ? 10_000_000 : 100_000_000}
accept={filetype == 'PDF' ? 'application/pdf' : 'application/zip'} accept={filetype == 'PDF' ? 'application/pdf' : 'application/zip'}
on:filedrop={(e) => onFileDrop(e.detail.files)} on:filedrop={(e) => onFileDrop(e.detail.files)}
on:filedragenter={dashAnimationStart} on:filedragenter={dashAnimationStart}
on:filedragleave={dashAnimationStop} on:filedragleave={dashAnimationStop}