diff --git a/frontend/src/app/download/download.component.html b/frontend/src/app/download/download.component.html index 1989abb..72990e2 100644 --- a/frontend/src/app/download/download.component.html +++ b/frontend/src/app/download/download.component.html @@ -1,25 +1,66 @@

Download File

-

Access your files quickly and securely

-
- - - +
+

Access your files quickly and securely

+
+ + + - - -

Files are available for a limited time. Ensure the code or link is correct and the file is still downloadable.

+ + +

Files are available for a limited time. Ensure the code or link is correct and the file is still downloadable.

+
+
+
+
+
{{ downloadProgress | number:'1.0-0' }}%
+

Downloading...

+

Your file is being downloaded in the background. Please wait...

+

{{ downloadDuration }} seconds passed.

+
+
+
+
+ Success +

Download complete!

+

File {{ fileName }} has been downloaded and saved to your drive.

+

The download took {{ downloadDuration }} seconds.

+ + +
+ +
+
+
+

Did you know?

+

{{ funfact }}

+
+
+
+ +

The file cant be downloaded!

@@ -41,3 +82,6 @@
+ diff --git a/frontend/src/app/download/download.component.ts b/frontend/src/app/download/download.component.ts index 3a2ae41..795f329 100644 --- a/frontend/src/app/download/download.component.ts +++ b/frontend/src/app/download/download.component.ts @@ -2,14 +2,18 @@ import {Component, ElementRef, ViewChild} from '@angular/core'; import axios from "axios"; import {DevelopmentStore} from "../../store/DevelopmentStore"; import {FormsModule} from "@angular/forms"; -import {NgIf} from "@angular/common"; +import {DecimalPipe, NgIf} from "@angular/common"; +import funfacts from "../../assets/funfacts"; +import {RouterLink} from "@angular/router"; @Component({ selector: 'app-download', standalone: true, imports: [ FormsModule, - NgIf + NgIf, + DecimalPipe, + RouterLink ], templateUrl: './download.component.html', styleUrl: './download.component.scss' @@ -18,15 +22,23 @@ export class DownloadComponent { @ViewChild('download_not_possible') download_not_possible: ElementRef | undefined; - inputFileId: string = ""; + inputFileId: string = "2402171"; fileId: string = ""; filePassword: string = ""; + fileName: string = ""; downloadInfo: DownloadInfo | null = null; + fileDownloadStarted: boolean = false; + fileDownloadFinished: boolean = false; waitingForPassword: boolean = false; + downloadProgress: number = 0; + downloadDuration: string = ""; + + funfact: string = ""; constructor(private developmentStore: DevelopmentStore) { + this.funfact = funfacts[Math.floor(Math.random() * funfacts.length)]; this.speedTest(); } @@ -98,6 +110,8 @@ export class DownloadComponent { } private downloadFile() { + const startTime = new Date().getTime(); + this.fileDownloadStarted = true; axios({ method: 'get', url: this.developmentStore.getBaseUrl() + 'api/v1/download?fileId=' + this.fileId, @@ -105,15 +119,24 @@ export class DownloadComponent { headers: { 'Access-Control-Allow-Origin': '*', // Allow CORS }, - onDownloadProgress: function(progressEvent) { + onDownloadProgress: (progressEvent) => { + const endTime = new Date().getTime(); + const duration = (endTime - startTime) / 1000; + this.downloadDuration = duration.toFixed(0); // Calculate the percentage of download completed if(progressEvent.total) { const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); + this.downloadProgress = percentCompleted; console.log(percentCompleted + '%'); // Log the percentage or update any progress UI component } } }) .then(response => { + const endTime = new Date().getTime(); + const duration = (endTime - startTime) / 1000; + this.downloadDuration = duration.toFixed(2); + this.fileDownloadFinished = true; + const contentDisposition = response.headers['content-disposition']; let filename = "default_filename"; // Default filename in case parsing fails @@ -124,6 +147,7 @@ export class DownloadComponent { filename = matches[1]; } } + this.fileName = filename; const blob = new Blob([response.data], {type: 'application/octet-stream'}); const url = window.URL.createObjectURL(blob); diff --git a/frontend/src/assets/funfacts.ts b/frontend/src/assets/funfacts.ts new file mode 100644 index 0000000..7edf729 --- /dev/null +++ b/frontend/src/assets/funfacts.ts @@ -0,0 +1,24 @@ + +let funfacts = [ + "Honey never spoils. Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old and still edible.", + "Octopuses have three hearts and blue blood.", + "Bananas are berries, but strawberries are not.", + "The shortest war in history was between Britain and Zanzibar on August 27, 1896. Zanzibar surrendered after 38 minutes.", + "A day on Venus is longer than a year on Venus.", + "The Eiffel Tower can be 15 cm taller during the summer when the iron heats up and expands.", + "Cows have best friends and can become stressed if they are separated.", + "A group of flamingos is called a flamboyance.", + "The unicorn is the national animal of Scotland.", + "More people are killed each year by cows than by sharks.", + "The total weight of all the ants on Earth is about the same as the weight of all the humans on Earth.", + "Wombat poop is cube-shaped.", + "The inventor of the frisbee was turned into a frisbee after he died.", + "There are more possible iterations of a game of chess than there are atoms in the known universe.", + "The heart of a blue whale is so large that a human can swim through the arteries.", + "Vending machines kill 4 times as many people as sharks per year.", + "Butterflies taste with their feet.", + "In Switzerland, it is illegal to own just one guinea pig because they are prone to loneliness.", + "Snails can sleep for up to three years.", + "The old Twitter bird actually had a name - Larry." +]; +export default funfacts;