Basic download logic finished

- Added download progress UI
- Added download finished

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<HTMLDialogElement> | 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);