Max665/sharepulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic download logic finished

Browse Source 
- Added download progress UI
- Added download finished
This commit is contained in:
Max W.
2024-02-18 00:13:44 +01:00
parent c084af461f
commit 7f742dac63
3 changed files with 112 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
frontend/src/app/download/download.component.html
View File

@ -1,25 +1,66 @@
<div class="container mx-auto p-4 mt-4 animate-in fade-in slide-in-from-left-6 duration-300">
<h1 class="text-4xl font-bold text-center text-gray-800 mb-2">Download File</h1>
<p class="text-md text-center text-gray-600 mb-6">Access your files quickly and securely</p>
<div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
<img class="w-56 mt-6 mb-6" src="./assets/cloud-arrow-down-solid.svg">
<input type="text" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter download code/link" [(ngModel)]="inputFileId"/>
<input
*ngIf="downloadInfo && downloadInfo.passwordProtected && downloadInfo.downloadable"
type="password" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter file password..." [(ngModel)]="filePassword"/>
<div
*ngIf="!fileDownloadStarted && !fileDownloadFinished"
>
<p class="text-md text-center text-gray-600 mb-6">Access your files quickly and securely</p>
<div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
<img class="w-56 mt-6 mb-6" src="./assets/cloud-arrow-down-solid.svg">
<input type="text" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter download code/link" [(ngModel)]="inputFileId"/>
<input
*ngIf="downloadInfo && downloadInfo.passwordProtected && downloadInfo.downloadable"
type="password" class="input input-bordered text-center w-full max-w-md mb-6" placeholder="Enter file password..." [(ngModel)]="filePassword"/>
<button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" (click)="requestDownload()">
Download
</button>
<button
(click)="download_not_possible.showModal()"
class="btn btn-secondary btn-outline w-full max-w-md flex justify-center items-center mb-4">
Reset
</button>
<p class="text-gray-600 text-center w-2/3">Files are available for a limited time. Ensure the code or link is correct and the file is still downloadable.</p>
<button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" (click)="requestDownload()">
Download
</button>
<button
(click)="download_not_possible.showModal()"
class="btn btn-secondary btn-outline w-full max-w-md flex justify-center items-center mb-4">
Reset
</button>
<p class="text-gray-600 text-center w-2/3">Files are available for a limited time. Ensure the code or link is correct and the file is still downloadable.</p>
</div>
</div>
<div
*ngIf="fileDownloadStarted && !fileDownloadFinished"
>
<div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
<div class="radial-progress mb-6" [style.--value]="downloadProgress" style="--size:12rem; --thickness: 2rem;" role="progressbar">{{ downloadProgress | number:'1.0-0' }}%</div>
<h3 class="text-xl font-bold text-center text-gray-800 mb-2">Downloading...</h3>
<p class="text-gray-600 text-center w-2/3 mb-6">Your file is being downloaded in the background. Please wait...</p>
<p class="text-gray-600 text-center w-2/3 mb-6">{{ downloadDuration }} seconds passed.</p>
</div>
</div>
<div
*ngIf="fileDownloadFinished"
>
<div class="bg-white shadow-lg rounded-lg p-6 flex flex-col items-center justify-center">
<img class="w-16 mb-6" src="./assets/circle-check-solid.svg" alt="Success">
<p class="text-xl font-bold text-center text-gray-800 mb-6">Download complete!</p>
<p class="text-gray-600 text-center w-2/3 mb-3">File {{ fileName }} has been downloaded and saved to your drive.</p>
<p class="text-gray-600 text-center w-2/3 mb-6">The download took {{ downloadDuration }} seconds.</p>
<button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" >
Save to disk (again)
</button>
<button class="btn btn-primary w-full max-w-md flex justify-center items-center mb-4" routerLink="/home">
Back to home
</button>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div *ngIf="fileDownloadStarted && !fileDownloadFinished" class="card w-96 bg-base-100 shadow-xl">
<div class="card-body flex flex-col items-center justify-center">
<h2 class="card-title text-center">Did you know?</h2>
<p class="text-center">{{ funfact }}</p>
</div>
</div>
</div>
<dialog #download_not_possible class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">The file cant be downloaded!</h3>
@ -41,3 +82,6 @@
<button>close</button>
</form>
</dialog>
<div class="invisible h-0 w-0">
<img src="./assets/circle-check-solid.svg">
</div>