diff --git a/package-lock.json b/package-lock.json
index 351754f1478a04b42e5c8be5317c2d7e3925d0c6..3219addd4d124e19033fb61437f277e3ab4792d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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
+}
diff --git a/package.json b/package.json
index 330969809573536f121dca2425c72e98a5375c90..03bb5cd1a4dc3c67a159bb23b27967e0cc9141a5 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
"@types/jasminewd2": "^2.0.6",
"@types/jwt-decode": "^2.2.1",
"@types/mapbox-gl": "^0.54.1",
- "@types/node": "^6.14.2",
+ "@types/node": "^6.14.9",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html
index b002bc73ed0ed001c3f4f686372b278cbbdb37b8..96578bcd7809c5845bd4b46d249ff0fabed342a3 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html
@@ -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
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
index 48df324feaa8d5ce57f663a6db145d48f53657eb..088b3729662ac96176166705f7b4a69fa5e28998 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
@@ -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();
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
index 6318687f9d157f670bfd6c29b9607a691940e14c..1d71a62e9423652a5bed81f8f78f33a6292a63fb 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
@@ -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>
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
index 1f91e78a7c939a4f59cab303b8523acfcb4c307c..4af6afec4d7ff7ef5996be56c2f13dccc748cbc5 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
@@ -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;
}
}
diff --git a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
index 6281b2b45de351526cf3de8714c95aea8fc1225c..c7bc7c9e745af324ece974c45d02eb71c1929e87 100644
--- a/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
+++ b/src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
@@ -1,4 +1,5 @@
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);
}
+
}
diff --git a/src/i18n/messages.en.xlf b/src/i18n/messages.en.xlf
index 2e26413a4ee7d4e6f5f015d0d5322dc5199de634..450a81b0979d2dd303f7faad68ffda7ebbfaafb3 100644
--- a/src/i18n/messages.en.xlf
+++ b/src/i18n/messages.en.xlf
@@ -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>
diff --git a/src/i18n/traductions.fr.ts b/src/i18n/traductions.fr.ts
index 6075377f0749402dd7140af11e053d9f38649d91..26e2a9c1d8318848a290bf0e7f09f0a7538a1080 100644
--- a/src/i18n/traductions.fr.ts
+++ b/src/i18n/traductions.fr.ts
@@ -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',
},
diff --git a/src/i18n/traductions.ts b/src/i18n/traductions.ts
index 5223babe1a709c49574f7c4af395950e7afc3ff5..609ab1449309fd0be0ca483d02ee440092adb9c9 100644
--- a/src/i18n/traductions.ts
+++ b/src/i18n/traductions.ts
@@ -203,6 +203,9 @@ export const geosource = {
copied: 'Copied !',
share: 'Copy the link',
},
+ downloads: {
+ abort: 'Cancel the download in progress',
+ },
licence: {
other: 'Other license',
},