Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
web-et-numerique
web-et-numerique-internet
data.grandlyon.com
web-portal
components
custom-apps
web-app
Commits
8b1eb9f9
Commit
8b1eb9f9
authored
Feb 04, 2020
by
ext.sopra.ncastejon
Browse files
Manage manually the download of resources (remove the filesave depedency).
parent
7f97f4f5
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.html
View file @
8b1eb9f9
<div
class=
"resource"
>
<ng-container
*ngFor=
"let format of resource.formats"
>
<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)"
>
[resourceName]=
"resource.metadataLink.name"
[isQueryable]=
"true"
(saveEvent)=
"saveFile(format, i)"
(abortEvent)=
"abortDownload(format,i)"
[isLoading]=
"isLoading[i]"
>
</app-resource-download-item>
</ng-container>
</div>
\ No newline at end of file
src/app/dataset-detail/components/dataset-downloads/resource-custom-download/resource-custom-download.component.ts
View file @
8b1eb9f9
import
{
Component
,
Input
,
OnInit
}
from
'
@angular/core
'
;
import
{
notificationMessages
}
from
'
../../../../../i18n/traductions
'
;
import
{
Component
,
HostListener
,
Input
,
OnDestroy
,
OnInit
}
from
'
@angular/core
'
;
import
{
NotificationService
}
from
'
../../../../core/services
'
;
import
{
linkFormats
}
from
'
../../../../shared/models
'
;
import
{
Format
,
Resource
}
from
'
../../../models
'
;
...
...
@@ -9,11 +8,21 @@ import { Format, Resource } from '../../../models';
templateUrl
:
'
./resource-custom-download.component.html
'
,
styleUrls
:
[
'
./resource-custom-download.component.scss
'
],
})
export
class
ResourceCustomDownloadableComponent
implements
OnInit
{
export
class
ResourceCustomDownloadableComponent
implements
OnInit
,
OnDestroy
{
linkFormats
=
linkFormats
;
@
Input
()
resource
:
Resource
;
// Event fired when one tab is closed or refreshed
@
HostListener
(
'
window:beforeunload
'
)
abortCurrentRequest
()
{
this
.
controller
.
abort
();
}
isLoading
:
boolean
[];
signal
:
AbortSignal
;
controller
:
AbortController
;
labelLayer
=
{
WFS
:
'
typename
'
,
WMS
:
'
layers
'
,
...
...
@@ -30,16 +39,47 @@ export class ResourceCustomDownloadableComponent implements OnInit {
private
_notificationService
:
NotificationService
)
{
}
ngOnInit
()
{
this
.
isLoading
=
Array
(
this
.
resource
.
formats
.
length
);
// Used to abort the request if needed
this
.
controller
=
new
AbortController
();
this
.
signal
=
this
.
controller
.
signal
;
}
ngOnDestroy
()
{
this
.
controller
.
abort
();
}
saveFile
(
format
:
Format
)
{
saveAs
(
this
.
getQueryableUrl
(
format
),
`
${
this
.
resource
.
metadataLink
.
name
}
.
${
format
.
fileExtension
}
`
);
this
.
_notificationService
.
notify
(
{
type
:
'
success
'
,
message
:
notificationMessages
.
general
.
startDownload
,
},
);
saveFile
(
format
:
Format
,
index
:
number
)
{
this
.
isLoading
[
index
]
=
true
;
fetch
(
this
.
getQueryableUrl
(
format
),
{
signal
:
this
.
signal
}).
then
((
response
)
=>
{
// To allow the download, get the repsons as a blob
return
response
.
blob
();
})
.
then
((
blob
)
=>
{
// Create a temporary link and click on it to launch the blob download
const
url
=
window
.
URL
.
createObjectURL
(
blob
);
const
a
=
document
.
createElement
(
'
a
'
);
a
.
href
=
url
;
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
;
})
.
catch
((
err
)
=>
{
console
.
log
(
'
The fetch could not succeeded
'
,
err
.
message
);
});
}
abortDownload
(
format
:
Format
,
index
:
number
)
{
this
.
controller
.
abort
();
this
.
isLoading
[
index
]
=
false
;
// Create a new for a new DOM Request
this
.
controller
=
new
AbortController
();
this
.
signal
=
this
.
controller
.
signal
;
}
getQueryableUrl
(
format
:
Format
)
{
...
...
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.html
View file @
8b1eb9f9
...
...
@@ -10,18 +10,25 @@
</div>
</div>
<ng-container
*ngIf=
"isQueryable; else other"
>
<div
class=
"resource-download-icon"
(click)=
"saveResource()"
>
<a>
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"22"
height=
"21"
fill=
"none"
viewBox=
"0 0 22 21"
>
<path
fill=
"#4668AB"
d=
"M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z"
/>
<path
fill=
"#4668AB"
d=
"M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z"
/>
</svg>
</a>
<div
class=
"resource-download-icon"
(click)=
"saveResource()"
*ngIf=
"!isLoading"
>
<a>
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"22"
height=
"21"
fill=
"none"
viewBox=
"0 0 22 21"
>
<path
fill=
"#4668AB"
d=
"M21.323 13.961h-.338c-.339 0-.677.339-.677.677v4.57H1.692v-4.57a.667.667 0 0 0-.677-.677H.677c-.339 0-.677.339-.677.677V20.223c0 .423.338.677.677.677h20.646c.338 0 .677-.339.677-.677v-5.585a.667.667 0 0 0-.677-.677z"
/>
<path
fill=
"#4668AB"
d=
"M10.323 15.315c.085.085.254.17.339.17.084.084.254.084.338.084.085 0 .254 0 .339-.084.17 0 .254-.085.338-.17L17.6 9.223c.17-.254.17-.592 0-.761l-.423-.424c-.169-.253-.592-.253-.761 0l-4.57 4.654V.846C11.847.338 11.509 0 11 0c-.507 0-.846.338-.846.846v11.846L5.585 8.038c-.17-.253-.508-.253-.762 0l-.423.424c-.169.253-.169.592 0 .761l5.923 6.092z"
/>
</svg>
</a>
</div>
<div
class=
"resource-download-icon"
*ngIf=
"isLoading"
>
<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>
</ng-container>
</div>
<ng-template
#other
>
<div
class=
"resource-download-icon"
>
...
...
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.scss
View file @
8b1eb9f9
@import
'../../../../../../scss/variables.scss'
;
@import
'../.././../../../../../node_modules/bulma/sass/utilities/_all.sass'
;
.resource-download
{
display
:
flex
;
background-color
:
white
;
justify-content
:
space-between
;
align-items
:
center
;
border-bottom
:
1px
solid
#f2f2f2
;
margin-top
:
0
.5rem
;
padding-bottom
:
0
.5rem
;
@import
'../../../../../../scss/variables.scss'
;
@import
'../.././../../../../../node_modules/bulma/sass/utilities/_all.sass'
;
.resource-download
{
display
:
flex
;
background-color
:
white
;
justify-content
:
space-between
;
align-items
:
center
;
border-bottom
:
1px
solid
#f2f2f2
;
margin-top
:
0
.5rem
;
padding-bottom
:
0
.5rem
;
}
.resource-left
{
display
:
flex
;
align-items
:
center
;
margin-right
:
0
.5rem
;
.resource-main
{
margin-left
:
2rem
;
}
.resource-left
{
display
:
flex
;
align-items
:
center
;
margin-right
:
0
.5rem
;
.resource-main-name
span
{
font-size
:
0
.875rem
;
word-break
:
break-all
;
.resource-main
{
margin-left
:
2
rem
;
@media
screen
and
(
min-width
:
$tablet
)
{
font-size
:
1
rem
;
}
}
}
.resource-main-name
span
{
font-size
:
0
.875rem
;
word-break
:
break-all
;
.resource-download-icon
{
padding
:
0
.5rem
0
.4rem
;
border
:
1px
solid
$grey-super-light-color
;
border-radius
:
4px
;
margin-right
:
0
.75rem
;
@media
screen
and
(
min-width
:
$tablet
)
{
font-size
:
1rem
;
}
}
a
{
display
:
flex
;
}
.resource-download-icon
{
padding
:
0
.5rem
0
.4rem
;
border
:
1px
solid
$grey-super-light-color
;
border-radius
:
4px
;
margin-right
:
0
.75rem
;
svg
{
height
:
1
.5rem
;
fill
:
$link-color
;
}
a
{
display
:
flex
;
}
&
:hover
{
opacity
:
0
.7
;
}
}
svg
{
height
:
1
.5rem
;
fill
:
$link-color
;
}
.is-loading
img
{
height
:
16px
;
width
:
16px
;
&
:hover
{
opacity
:
0
.7
;
}
&
:hover
{
cursor
:
pointer
;
}
}
.is-loading
{
i
{
display
:
block
;
}
img
{
display
:
none
;
}
}
.resource-download-icon
:hover
.is-loading
{
i
{
display
:
none
;
}
img
{
display
:
block
;
}
}
src/app/dataset-detail/components/dataset-downloads/resource-download-item/resource-download-item/resource-download-item.component.ts
View file @
8b1eb9f9
...
...
@@ -12,7 +12,9 @@ export class ResourceDownloadItemComponent implements OnInit {
@
Input
()
resourceName
:
string
;
@
Input
()
resourceUrl
?:
string
;
@
Input
()
isQueryable
:
boolean
;
@
Input
()
isLoading
?:
boolean
;
@
Output
()
saveEvent
=
new
EventEmitter
();
@
Output
()
abortEvent
=
new
EventEmitter
();
constructor
()
{
}
...
...
@@ -22,4 +24,10 @@ export class ResourceDownloadItemComponent implements OnInit {
saveResource
()
{
this
.
saveEvent
.
emit
(
null
);
}
abortDownload
()
{
console
.
log
(
'
try to emit the event
'
);
this
.
abortEvent
.
emit
(
null
);
}
}
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment