fix: ui

Angular2Guy · May 8, 2024 · 8189036 · 8189036
1 parent f584b48
commit 8189036
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/frontend/src/angular/src/app/image-query/image-query.component.html b/frontend/src/angular/src/app/image-query/image-query.component.html
@@ -27,7 +27,15 @@
 <div>
 <form [formGroup]="imageForm">
  @if(uploading) {
-  <div class="upload-spinner"><mat-spinner></mat-spinner></div>
+  <div class="upload-spinner">
+  <div>
+  <mat-spinner class="auto-margin"></mat-spinner>
+  <div  class="auto-margin" i18n="@@searchWorking">The AI is working on the answer.</div>
+    <div  class="auto-margin" i18n="@@searchBePatient">
+      Please be patient. {{ msWorking / 1000 | number : "1.3" }} sec.
+    </div>
+  </div>
+  </div>
   } @else if(result) {
   <div class="horizontal-container">
   	<div><img [src]="result.b64Image"></div>

diff --git a/frontend/src/angular/src/app/image-query/image-query.component.scss b/frontend/src/angular/src/app/image-query/image-query.component.scss
@@ -43,8 +43,13 @@
   display: flex;
   width: 100%;
   justify-content: center;
+  margin: 10px;
 }
 
+.auto-margin {
+	margin: auto;
+	text-align: center;
+}
 
 .horizontal-container {
 	display: flex;

diff --git a/frontend/src/angular/src/app/image-query/image-query.component.ts b/frontend/src/angular/src/app/image-query/image-query.component.ts
@@ -16,7 +16,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import {MatInputModule} from '@angular/material/input'; 
 import { MatButtonModule } from '@angular/material/button';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { tap } from 'rxjs';
+import { Subscription, interval, map, tap } from 'rxjs';
 import { ImageService } from '../service/image.service';
 import { ImageFile } from '../model/image-file';
 import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
@@ -37,6 +37,8 @@ export class ImageQueryComponent {
   });
   protected uploading = false;
   protected result: ImageFile | null = null;
+  protected msWorking = 0;
+  private repeatSub: Subscription | null = null;
 
   constructor(private imageService: ImageService, private destroyRef: DestroyRef, private router: Router) { }
 
@@ -58,8 +60,19 @@ export class ImageQueryComponent {
   protected upload(): void {
     //console.log(this.file);
     if (!!this.imageForm.controls.file.value) {
+	  const startDate = new Date();
+	  this.msWorking = 0;	  
 	  this.result = null;
 	  this.uploading = true;
+	  this.repeatSub?.unsubscribe();
+      this.repeatSub = interval(100)
+      .pipe(
+        map(() => new Date()),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe(
+        (newDate) => (this.msWorking = newDate.getTime() - startDate.getTime())
+      );
       const formData = new FormData();
       const myFile = this.imageForm.controls.file.value;
       formData.append('file', myFile as Blob, myFile?.name as string);