openaire-library/utils/dataTransfer/transferData.component.html

188 lines
10 KiB
HTML

<a (click)="open()"
[title]="'Send data to cloud storage [demo]'"
[attr.uk-tooltip]="'pos: right; cls: uk-active uk-text-small uk-padding-small'"
> <span icon="cloud-upload"></span>
<span class="uk-icon-button uk-icon landing-action-button landing-action-button-portal">
<span uk-icon="cloud-upload"></span>
</span>
</a>
<!-- This is the modal -->
<modal-alert #egiTransferModal large="true" [okDisabled]="destinationPath.length == 0 || status == 'succeeded'
||status == 'active' || !validatePath() || !validateDestinationUrl() || (!this.downloadElements || this.downloadElements.length == 0)"
(alertOutput)="transfer()" >
<div *ngIf="!accessToken" class="">
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
In order to send data to a Cloud Storage, you would need to be authenticated, please login via EGI check-in.
</div>
<div class="uk-text-center">
<button *ngIf="!accessToken" class="uk-button uk-button-default" (click)="checkin()">Login
</button>
</div>
</div>
<div *ngIf="accessToken" class="">
<div class="uk-width-1-1 uk-margin-top uk-margin-bottom uk-text-center">
You have requested to send the data corresponding to the DOI <a [href]="selectedSourceUrl" target="_blank">{{selectedSourceUrl.split(doiPrefix)[1]}}</a> to a cloud storage using the EOSC Data Transfer service
</div>
<div class="uk-grid uk-child-width-1-2 uk-grid-divider">
<!-- Source -->
<div class="uk-first-column source">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Available DOI URLs:</p>
<div input type="select" [(value)]="selectedSourceUrl" placeholder="DOI URL" hint="Select..."
[options]="sourceUrls" (valueChange)="this.parse()"></div>
<div *ngIf="status!='active'" class="uk-margin-top">
<div>{{this.downloadElements.length}} files found:</div>
<div class="uk-overflow-auto" style="max-height: 135px">
<ul>
<li *ngFor=" let element of this.downloadElements">{{ element.name}}
</li>
</ul>
</div>
<div *ngIf="!this.downloadElements || this.downloadElements.length == 0"> - </div>
</div>
</div>
<!-- Destination -->
<div *ngIf="destinationOptions" class="destination">
<!-- -->
<!-- Testing:<br>-->
<!-- https://dcache-demo.desy.de:2443-->
<!-- <br>-->
<!-- /Demonstrators/EOSC-Future/EGI/-->
<!-- <br>-->
<!-- -->
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Please select the
Destination Storage technology:</p>
<div input type="select" [(value)]="selectedDestination" placeholder="Destination Storage" hint="Select..."
[options]="destinationOptions" (valueChange)="folders = {}; sourceUrlValidators()"></div>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide the
corresponding storage destination url:</p>
<div input [(value)]="destinationUrl" placeholder="Give a destination url..."
[validators]="URLValidators" class=""></div>
<ng-container
*ngIf="selectedDestination.authType == 'password' || selectedDestination.authType == 'keys'">
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide
authentication if needed:</p>
<div class="uk-grid uk-child-width-1-2">
<div input [(value)]="destinationAuthUser" [placeholder]="'Give ' + (selectedDestination.authType ==
'password'? 'username':'access key') "
class=""></div>
<div input password=true [(value)]="destinationAuthPass" [placeholder]="'Give ' + (selectedDestination.authType ==
'password'? 'password':'secret key') "
class=""></div>
</div>
</ng-container>
<p class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom uk-margin-top">Provide the corresponding storage destination path:</p>
<div input [(value)]="destinationPath" placeholder="Give a destination path..."
[validators]="pathValidators" class=""></div>
<!-- <div *ngIf="selectedDestination.hasBrowse">-->
<p *ngIf="selectedDestination.canBrowse" class="uk-text-meta uk-text-xsmall uk-margin-remove-bottom"> or <a
[ngClass]="!validateDestinationUrl() ? 'uk-text-muted uk-disabled' : 'uk-text-primary'" [attr.disabled]="!destinationUrl"
(click)="browseFolder('/')">browse</a> to
select a folder.</p>
<div *ngIf="folders['/']" class="uk-height-small uk-overflow-auto">
<ng-container *ngTemplateOutlet="folderListTmpl; context: { folder : folders['/'], folderPath: '/'}"></ng-container>
</div>
<!-- </div>-->
<ng-container *ngIf="selectedDestination.destination == 'ftp'">
<p>Comming soon!</p>
</ng-container>
</div>
</div>
<!-- [class.uk-alert-success]="status && status.indexOf('error')==-1"-->
<!-- [class.uk-alert-error]="status && status.indexOf('error')!=-1">-->
<div id="transferAlert" *ngIf="message" class="uk-width-1-1 uk-alert" [ngClass]="'uk-alert-'+statusMessage" uk-alert>
<div [innerHTML]="message"></div>
<!-- <a *ngIf="status != 'succeeded' && status != 'active'" (click)="transfer()">-->
<!-- Try again!-->
<!-- </a>-->
<div *ngIf="status == 'active'" class="uk-flex uk-flex-center uk-text-muted">
<div>
<span class="uk-icon uk-spinner">
<svg width="60" height="60" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"
data-svg="spinner"><circle
fill="none" stroke="#000" cx="15" cy="15" r="14" style="stroke-width: 2px;"></circle></svg>
</span>
</div>
</div>
<a *ngIf="status != 'active'" class="uk-alert-close" uk-close></a>
</div>
<!-- <div *ngIf="jobId || status == 'canceled'">
<button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="getStatus()">Check status</button>
<button *ngIf=" status != 'canceled'" class="uk-button uk-button-default" (click)="cancel()">Cancel</button>
<div>{{statusMessage}}</div>
</div>-->
<!-- <div *ngIf=" status != 'canceled'" class="uk-width-1-1 uk-text-right "-->
<!-- [class.uk-invisible]="!(status == 'succeeded' || status.indexOf('error')!=-1)">-->
<!-- <button class="uk-button uk-button-default uk-margin-top " (click)="close()">Close</button>-->
<!-- </div>-->
<!-- TESTS -->
<!-- <button (click)="hasBrowse()"
class="uk-button uk-button-primary uk-margin-top"
>
has Browse
</button>
<button (click)="createFolder()"
class="uk-button uk-button-primary uk-margin-top"
>
Create folder new
</button>
<button (click)="deleteFolder()"
class="uk-button uk-button-primary uk-margin-top"
>
delete folder new
</button>-->
<!-- End of TESTS-->
</div>
</modal-alert>
<!-- Browse Templates -->
<ng-template #folderListTmpl let-folder="folder" let-folderPath="folderPath" >
<ng-container *ngTemplateOutlet="folderTmpl; context: { folder: folder, folderPath:folderPath}"></ng-container>
<ul *ngIf="folders[folderPath] && folders[folderPath].isOpen" class="uk-list uk-list-divider uk-margin-small-left folder " style="border-left: 1px solid #e3e3e3; padding-left: 5px;">
<li *ngFor=" let file of files[folderPath]">
<ng-container *ngIf="file.isFolder else itsFile">
<ng-container *ngTemplateOutlet = "folderListTmpl; context:{ folder: file,
folderPath:file.accessUrl.split(destinationUrl)[1]}"></ng-container>
</ng-container>
<ng-template #itsFile>
<ng-container *ngTemplateOutlet="fileTmpl; context: { file: file}"></ng-container>
</ng-template>
</li>
</ul>
</ng-template>
<ng-template #fileTmpl let-file="file">
<div class="uk-grid uk-grid-small uk-flex uk-flex-middle">
<!-- <span uk-icon="file"></span>-->
<span class="uk-width-expand uk-text-truncate">{{file['name']}}</span>
<span
class="uk-width-auto uk-text-truncate uk-text-small uk-text-italic">{{(file.createdAt?file.createdAt:file.modifiedAt) |date : 'medium'}}</span>
</div>
</ng-template>
<ng-template #folderTmpl let-folder="folder" let-folderPath="folderPath">
<div *ngIf="folder" [class.uk-background-muted]="destinationPath == folderPath">
<div class="uk-grid uk-grid-small uk-flex uk-flex-middle">
<a >
<div class="uk-grid uk-grid-small">
<span (click)="browseFolder(folderPath)" uk-icon="icon:triangle-down; ratio:1.1"
title="Expand/ Collapse"></span>
<span (click)="destinationPath = folderPath" title="Select folder">
<span uk-icon="folder"></span> <span
class="uk-width-expand uk-text-truncate uk-margin-small-left">{{folder.name?folder.name:folder.accessUrl.split(destinationUrl)[1]}}</span>
<!--<span class="uk-width-auto uk-text-truncate">{{(folder.createdAt?folder.createdAt:folder.modifiedAt) |date : 'medium'}}</span>-->
</span>
</div>
</a>
<!-- <a *ngIf="destinationPath != folderPath" (click)="destinationPath = folderPath" class="uk-button uk-button-default uk-button-small">select</a>-->
</div>
</div>
</ng-template>