Commit 1d5c942c authored by ext.sopra.ncastejon's avatar ext.sopra.ncastejon
Browse files

Change the way to display the spinner and abort icons.

parent 8b1eb9f9
......@@ -2732,9 +2732,9 @@
"dev": true
},
"@types/node": {
"version": "6.14.7",
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.7.tgz",
"integrity": "sha512-YbPXbaynBTe0pVExPhL76TsWnxSPeFAvImIsmylpBWn/yfw+lHy+Q68aawvZHsgskT44ZAoeE67GM5f+Brekew==",
"version": "6.14.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.9.tgz",
"integrity": "sha512-leP/gxHunuazPdZaCvsCefPQxinqUDsCxCR5xaDUrY2MkYxQRFZZwU5e7GojyYsGB7QVtCi7iVEl/hoFXQYc+w==",
"dev": true
},
"@types/q": {
......@@ -14092,4 +14092,4 @@
"integrity": "sha512-GkPiJL8jifSrKReKaTZ5jkhrMEgXbXYC+IPo1iquBjayRa0q86w3Dipjn8b415jpitMExe9lV8iTsv8tk3DGag=="
}
}
}
\ No newline at end of file
}
......@@ -3,8 +3,8 @@
<ng-container *ngFor="let format of resource.formats; let i=index">
<app-resource-download-item [formatName]="format.name" [formatExtension]="format.fileExtension"
[resourceName]="resource.metadataLink.name" [isQueryable]="true" (saveEvent)="saveFile(format, i)"
(abortEvent)="abortDownload(format,i)"
[isLoading]="isLoading[i]">
(abortEvent)="abortDownload(i)"
[whichStepLoading]="whichStepLoading[i]">
</app-resource-download-item>
</ng-container>
</div>
\ No newline at end of file
......@@ -13,15 +13,20 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
@Input() resource: Resource;
// Event fired when one tab is closed or refreshed
// Event fired when one tab is closed or refreshed. We abort the on-going request
@HostListener('window:beforeunload')
abortCurrentRequest() {
this.controller.abort();
}
isLoading: boolean[];
// Variable to manage the icon display for each resource. Possible values:
// - 'loading': display the spinner
// - 'cancel': display the cross to abort the on-going request
// - null: display the download icon
whichStepLoading: string[];
signal: AbortSignal;
controller: AbortController;
timeOut: number;
labelLayer = {
WFS: 'typename',
......@@ -39,7 +44,7 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
private _notificationService: NotificationService) { }
ngOnInit() {
this.isLoading = Array(this.resource.formats.length);
this.whichStepLoading = Array(this.resource.formats.length);
// Used to abort the request if needed
this.controller = new AbortController();
this.signal = this.controller.signal;
......@@ -50,7 +55,12 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
}
saveFile(format: Format, index: number) {
this.isLoading[index] = true;
this.whichStepLoading[index] = 'loading';
this.timeOut = window.setTimeout(() => {
this.whichStepLoading[index] = 'cancel';
// tslint:disable-next-line: align
}, 2000);
fetch(this.getQueryableUrl(format), { signal: this.signal }).then((response) => {
// To allow the download, get the repsons as a blob
......@@ -61,20 +71,22 @@ export class ResourceCustomDownloadableComponent implements OnInit, OnDestroy {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.rel = 'noopener';
a.download = `${this.resource.metadataLink.name}.${format.fileExtension}`;
document.body.appendChild(a); // append the element to the dom -> otherwise it will not work in firefox
a.click();
a.remove();
this.isLoading[index] = false;
this.whichStepLoading[index] = null;
clearTimeout(this.timeOut); // If the download is under 2000ms, we clear the ongoing timeout
})
.catch((err) => {
console.log('The fetch could not succeeded', err.message);
});
}
abortDownload(format: Format, index: number) {
abortDownload(index: number) {
this.controller.abort();
this.isLoading[index] = false;
this.whichStepLoading[index] = null;
// Create a new for a new DOM Request
this.controller = new AbortController();
......
......@@ -10,7 +10,7 @@
</div>
</div>
<div class="resource-download-icon" (click)="saveResource()" *ngIf="!isLoading">
<div class="resource-download-icon" (click)="saveResource()" *ngIf="!whichStepLoading">
<a>
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" fill="none" viewBox="0 0 22 21">
<path fill="#4668AB"
......@@ -20,12 +20,14 @@
</svg>
</a>
</div>
<div class="resource-download-icon" *ngIf="isLoading">
<div class="resource-download-icon" *ngIf="whichStepLoading">
<div class="is-loading">
<i class="fas fa-spinner fa-spin has-text-danger"></i>
<img src="../../../../../../assets/img/close.svg" alt="Icon pour arreter le téléchargement"
(click)=abortDownload()>
<div class="is-loading"
[attr.data-tooltip]="whichStepLoading === 'cancel' ? abortMessage : null">
<i class="fas fa-spinner fa-spin fa-2x" *ngIf="whichStepLoading === 'loading'"></i>
<img *ngIf="whichStepLoading === 'cancel'" src="../../../../../../assets/img/close.svg"
[alt]="abortMessage" (click)=abortDownload()>
</div>
</div>
......
......@@ -31,7 +31,7 @@
}
.resource-download-icon {
padding: 0.5rem 0.4rem;
padding: 0.4rem 0.4rem;
border: 1px solid $grey-super-light-color;
border-radius: 4px;
margin-right: 0.75rem;
......@@ -42,6 +42,7 @@
svg {
height: 1.5rem;
width: 1.5rem;
fill: $link-color;
}
......@@ -50,30 +51,19 @@
}
}
.is-loading img {
height: 16px;
width: 16px;
.is-loading {
&:hover {
cursor: pointer;
}
}
display: flex;
.is-loading {
i {
display: block;
}
img {
display: none;
}
}
.resource-download-icon:hover .is-loading{
i {
display: none;
height: 1.5rem;
font-size: 1.5rem;
}
img {
display: block;
height: 1.5rem;
width: 1.5rem;
cursor: pointer;
}
}
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { geosource } from '../../../../../../i18n/traductions';
@Component({
selector: 'app-resource-download-item',
......@@ -12,10 +13,12 @@ export class ResourceDownloadItemComponent implements OnInit {
@Input() resourceName: string;
@Input() resourceUrl ?: string;
@Input() isQueryable: boolean;
@Input() isLoading ?: boolean;
@Input() whichStepLoading ?: string;
@Output() saveEvent = new EventEmitter();
@Output() abortEvent = new EventEmitter();
abortMessage: string = geosource.downloads.abort;
constructor() { }
ngOnInit() {
......@@ -26,8 +29,7 @@ export class ResourceDownloadItemComponent implements OnInit {
}
abortDownload() {
console.log('try to emit the event');
this.abortEvent.emit(null);
}
}
......@@ -436,8 +436,8 @@
<target>Downloads</target>
</trans-unit>
<trans-unit id="dataset.detail.api" datatype="html">
<source>Downloads</source>
<target>Downloads</target>
<source>API</source>
<target>API</target>
</trans-unit>
<trans-unit id="dataset.detail.info" datatype="html">
<source>This dataset doesn't contain geographical data.</source>
......
......@@ -203,6 +203,9 @@ export const geosource = {
copied: 'Copié !',
share: 'Copier le lien',
},
downloads: {
abort: 'Annuler le téléchargement en cours',
},
licence: {
other: 'Autre licence',
},
......
......@@ -203,6 +203,9 @@ export const geosource = {
copied: 'Copied !',
share: 'Copy the link',
},
downloads: {
abort: 'Cancel the download in progress',
},
licence: {
other: 'Other license',
},
......
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