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: upload progress bar

Browse source
This commit is contained in:
Sebastian Pravda 2022-12-03 14:13:50 +01:00 committed by EETagent
parent bc3b72068a
commit fb52bc68a9
5 changed files with 88 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/lib/components/dashboard/CoverLetterUploadCard.svelte
View file

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

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

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

9
frontend/src/lib/components/dashboard/PortfolioLetterUploadCard.svelte
View file

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

9
frontend/src/lib/components/dashboard/PortfolioZipUploadCard.svelte
View file

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

22
frontend/src/lib/components/dashboard/ProgressBar.svelte Normal file
View file

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