Commit b96b6b81 authored by Janik Münzenberger's avatar Janik Münzenberger
Browse files

Loading spinner for analysis start

parent 9cdcda2a
......@@ -17,3 +17,12 @@ label {
cursor: pointer;
}
.loader {
border: 2px solid #f3f3f3;
border-radius: 50%;
border-top: 2px solid #333;
width: 20px;
height: 20px;
-webkit-animation: 2s linear infinite spin;
animation: 2s linear infinite spin;
}
\ No newline at end of file
......@@ -6,17 +6,13 @@
<form #analysisForm="ngForm" class="row col-md-6 col-sm-12 mx-auto justify-content-center flex-column" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="crop_id">{{"ANALYSIS.SELECT_A_CROP" | translate}}</label>
<select id="crop_id" name="crop_id" class="custom-select mb-3" [(ngModel)]="selected" [disabled]="push">
<option *ngFor="let plant of plants" [value]="plant._id" >{{plant.name}}</option>
<select id="crop_id" name="crop_id" class="custom-select mb-3" [(ngModel)]="selected" [disabled]="push || load">
<option *ngFor="let plant of plants" [value]="plant._id">{{plant.name}}</option>
</select>
</div>
<div class="custom-file mb-3">
<input autocomplete="photo" type='file'
(change)="onSelectFile($event)" accept="image/*"
class="inputfile col-md-3"
id="image_file" name="image_file"
[disabled]="push"
#image ngModel>
<input autocomplete="photo" type='file' (change)="onSelectFile($event)" accept="image/*" class="inputfile col-md-3" id="image_file"
name="image_file" [disabled]="push || load" #image ngModel>
<label class="custom-file-label" for="image_file">{{"ANALYSIS.SELECT_IMAGE" | translate}}</label>
</div>
......@@ -25,17 +21,21 @@
<div *ngIf="showImage == true" class="form-group mt-2">
<label for="notification_email" class="col-form-label">{{"ANALYSIS.TO_EMAIL" | translate}}:</label>
<input type="email" autocomplete="email"
id="notification_email" name="notification_email"
class="form-control" [(ngModel)]="notification_email"
[disabled]="push">
<input type="email" autocomplete="email" id="notification_email" name="notification_email" class="form-control" [(ngModel)]="notification_email"
[disabled]="push || load">
</div>
<div *ngIf="showImage == true" class="mt-3 mx-auto" [hidden]="push">
<button type="button" type="submit" class="btn btn-primary btn-lg">{{"ANALYSIS.ANALYSE" | translate}}</button>
<button type="button" type="submit" class="btn btn-primary btn-lg" [disabled]="load">
<div *ngIf="load" class="loader"></div>
{{load ? "" : ("ANALYSIS.ANALYSE" | translate)}}
</button>
</div>
</form>
<div class="col-md-8 alert alert-danger mx-auto" style="display: none;" #error>
{{"ANALYSIS.NO_RESULT" | translate}}
<div class="col-md-12">
<div class="col-md-8 alert alert-danger mx-auto" style="display: none;" #error>
{{"ANALYSIS.NO_RESULT" | translate}}
</div>
<div class="col-md-8 alert alert-success mx-auto" [hidden]="!push">
<i class="fas fa-check mr-3"></i>{{"ANALYSIS.PUSH" | translate}}</div>
</div>
<div class="col-md-8 alert alert-success mx-auto" [hidden]="!push"><i class="fas fa-check mr-3"></i>{{"ANALYSIS.PUSH" | translate}}</div>
......@@ -18,6 +18,7 @@ export class AnalyseComponent implements OnInit {
url = '';
showImage = false;
push: boolean = false;
load: boolean = false;
notification_email: string = "";
plants: IPlant[] = [];
......@@ -62,7 +63,7 @@ export class AnalyseComponent implements OnInit {
formData.append('notification_email', this.notification_email);
if(this.notificationService.subscription)
formData.append('subscription', JSON.stringify(this.notificationService.subscription));
this.load = true;
this.aService.startAnalysis(formData)
.then(res => {
if(res.method === 'poll'){
......@@ -70,9 +71,11 @@ export class AnalyseComponent implements OnInit {
}else{
this.push = true;
}
this.load = false;
})
.catch(err => {
this.error.nativeElement.style.display = 'block';
this.load = false;
console.error(err);
});
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment