Sup_File/src/app/book/book.component.html
2018-06-24 18:06:36 +02:00

398 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="container-fluid">
<div *ngIf="mainFolder" class="card d-print-inline-flex text-center topcard">
<div class="row">
<div class="col-md-4 card-text">
<p> <strong>Current Folder :</strong> {{mainFolder?.name}}</p>
</div>
<div class="col-md-4 card-text">
<p> <strong>Used space :</strong> {{sizeFile.toString() === '0' ? '0' : (sizeFile/ ( 1024 * 1024 ) | number : '1.2-2')}} Mo / 30 Go</p>
</div>
<div class="col-md-4 card-text">
<p> <strong>Path :</strong> {{mainFolder?.path}}</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box-container align-middle" fxLayout="column" [ngStyle.lt-sm]="'min-height: 400;'">
<dropzone *ngIf="type === 'component'" class="dropzone-container" [config]="config" fxLayout="row" fxLayoutAlign="start strech" fxFlex="auto" [message]="'Click or drag file here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>
</div>
</div>
</div>
</div>
<div class="topButtons">
<div class="row topButtonsRow">
<div class="col-md-8 align-middle l-flex--center">
<button type="button" class="btn btn-primary btn-sm" mdbTooltip="Back To : {{mainFolder?.parent}}" placement="top" (click)="backToParentFolder()" *ngIf="mainFolder?.path !== 'Home'"><i class="fa fa-chevron-left" aria-hidden="true"></i> {{mainFolder?.parent}}</button>
<button type="button" class="btn btn-primary btn-sm" mdbTooltip="Nouveau dossier" placement="top" (click)="createBool()" *ngIf="isClickCreateFolder === false">
<i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-folder-o" aria-hidden="true"></i></i>
</button>
<div class="md-form input-group" *ngIf="isClickCreateFolder === true">
<div class="input-group-btn">
<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Créer : {{inputCreateFolder}}" placement="top" type="button" mdbWavesEffect (click)="createFolder()">Créer</button>
</div>
<input type="search" class="form-control" placeholder="Nom du nouveau dossier..." [(ngModel)]="inputCreateFolder">
</div>
<label class="btn btn-secondary btn-sm" mdbTooltip="Choose a file" placement="top" >
<i class="fa fa-plus-circle" aria-hidden="true"><i class="fa fa-file-o" aria-hidden="true"></i></i>
<input type="file" style="display: none;" #myPicture name="myPicture" (change)="fileChangeEvent($event)">
</label>
<button *ngIf="fileChooseName !== 'None'" type="button" class="btn btn-default btn-sm" mdbTooltip="Add File : {{fileChooseName}}" placement="top" (click)="upload()" >Add selected file : {{fileChooseName}}</button>
</div>
<div class="col-md-4 align-middle l-flex--center">
<!--<form class="md-form active-pink active-pink-2 mb-3">-->
<!--<div class="row">-->
<!--<i class="fa fa-search" aria-hidden="true"></i>-->
<!--<input #query (keyup)="filter(query.value)" type="text" class="form-control form-control-sm ml-3 w-75" placeholder="Search File" aria-label="Search">-->
<!--<div class="list-group" *ngFor="let folder of filterAllUserFolder">-->
<!--<a class="list-group-item list-group-item-action waves-light" (click)="openFolder(folder.path)" mdbWavesEffect>-->
<!--{{folder.name}}-->
<!--<br>-->
<!--{{folder?.path}}-->
<!--</a>-->
<!--</div>-->
<!--</div>-->
<!--</form>-->
<mdb-completer [label]="'Find folder'" initialValue="Find folder" (selected)="openFolder('searchStr')" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService" [minSearchLength]="0">
</mdb-completer>
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Size</th>
<th>Type</th>
<th>Date added</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let folder of allUserFolder; let i = index;">
<td class="row">
<div class="col-md-4">
<i class="fa fa-folder fa-2x" aria-hidden="true"></i>
</div>
<div class="btn-group d-print-inline-flex text-center">
<!--Dropdown primary-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-primary y btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
<i class="fa fa fa-folder-open" aria-hidden="true"></i>
</button>
<!--Menu-->
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" mdbTooltip="Ouvrir : {{folder?.name}}" placement="top" (click)="openFolder(folder?.path)">Open Folder</a>
<a class="dropdown-item" mdbTooltip="Supprimer : {{folder?.name}}" placement="top" (click)="deleteFolder(folder)">Delete Folder</a>
<h6 class="dropdown-header">Rename</h6>
<div class="d-print-inline-flex text-center">
<input type="search" class="form-control col-xs-2" placeholder= "{{folder?.name}}" [(ngModel)]="folder.name">
<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{folder.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFolder(folder)">
<i class="fa fa-pencil prefix"></i>
</button>
</div>
</div>
</div>
<!--/Dropdown primary-->
<div class="btn-group" dropdown>
<button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{folder?.name}}" placement="top" mdbWavesEffect>
<i class="fa fa-arrows" aria-hidden="true"></i>
</button>
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" *ngFor="let folderDest of allUserAppFolder; let i = index;" (click)="moveFolder(folder, folderDest)">{{folderDest?.name}}</a>
</div>
</div>
</div>
</td>
<td>
<label>{{folder.name}}</label>
</td>
<!--<td>{{ folder.name }}</td>-->
<td><label></label></td>
<td><label>Folder</label></td>
<td><label></label></td>
</tr>
<tr *ngFor="let file of allUserFile; let i = index;">
<td class="row">
<div class="col-md-4">
<i class="fa fa-file fa-2x" aria-hidden="true"></i>
</div>
<div class="btn-group d-print-inline-flex text-center">
<!--Dropdown primary-->
<div class="dropdown" dropdown>
<!--Trigger-->
<button dropdownToggle class="btn btn-primary btn-sm dropdown-toggle waves-light" type="button" mdbWavesEffect>
<i class="fa fa-edit" aria-hidden="true"></i>
</button>
<!--Menu-->
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" href="{{file.data}}" download="{{ file.name.toString()}}">Download</a>
<a class="dropdown-item" mdbTooltip="Supprimer : {{file.name}}" placement="top" (click)="deleteFile(file)">Delete</a>
<a class="dropdown-item" (click)="basicModal.show()" mdbWavesEffect>Preview</a>
<a class="dropdown-item" (click)="linkModal.show()" mdbWavesEffect>Download Link</a>
<div class="divider dropdown-divider"></div>
<h6 class="dropdown-header">Rename</h6>
<div class="d-print-inline-flex text-center">
<input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">
<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
<i class="fa fa-pencil prefix"></i>
</button>
</div>
</div>
</div>
<!--/Modal-->
<div mdbModal #basicModal="mdb-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
<div class="modal-dialog modal-notify info modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Preview</h4>
</div>
<div class="modal-body img-fluid text-center">
<div *ngIf="file.type === ('image/jpeg')">
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
</div>
<div *ngIf="file.type === ('image/png')">
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
</div>
<div *ngIf="file.type === ('application/pdf')">
<!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
<object [data]=file.urlSafe type="application/pdf"
width="350" height="200" typemustmatch>
</object>
</div>
<div *ngIf="file.type === ('video/mp4')">
<!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
<vg-player style="height: 200px; width: 350px">
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source [src]=file.urlSafe type="video/mp4">
</video>
</vg-player>
</div>
<div *ngIf="file.type === ('text/plain')">
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
<div>{{test}}</div>
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
<object [data]=file.urlSafe type="text/plain"
width="350" height="200" typemustmatch>
</object>
</div>
<div *ngIf="file.type === ''">
<i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
<!--<object [data]=file.url type="text/plain"
width="350" height="200" typemustmatch>
</object>-->
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
<div>{{test}}</div>
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
</div>
<div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
<!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
<vg-player style="height: 50px; width: 350px">
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-mute></vg-mute>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<audio #media [vgMedia]="media" id="myAudio" preload="auto">
<source [src]=file.urlSafe type="audio/mp3">
</audio>
</vg-player>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
<!--<button type="button" class="btn btn-primary relative waves-light" mdbWavesEffect>Save changes</button>-->
</div>
</div>
</div>
</div>
<!--/Modal-->
<!--/Modal-->
<div mdbModal #linkModal="mdb-modal" class="modal fade" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-notify modal-info" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100 white-text" id="myModalLabel">Share Link</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="linkModal.hide()">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<div class="modal-body text-center">
<div class="container-fluid">
<div class="col-md-12">
<div class="col-md-12">
<i class="fa file-o" aria-hidden="true"></i>
</div>
<div class="col-md-12">
<div *ngIf="file.type === ('image/jpeg')">
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
</div>
<div *ngIf="file.type === ('image/png')">
<img [src]=file.urlSafe class="img-fluid" width="350" height="200">
</div>
<div *ngIf="file.type === ('application/pdf')">
<!--<i class="fa fa-file-pdf-o" aria-hidden="true"></i>-->
<object [data]=file.urlSafe type="application/pdf"
width="350" height="200" typemustmatch>
</object>
</div>
<div *ngIf="file.type === ('video/mp4')">
<!--<i class="fa fa-file-movie-o" aria-hidden="true"></i>-->
<vg-player style="height: 200px; width: 350px">
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source [src]=file.urlSafe type="video/mp4">
</video>
</vg-player>
</div>
<div *ngIf="file.type === ('text/plain')">
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
<div>{{test}}</div>
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
<object [data]=file.urlSafe type="text/plain"
width="350" height="200" typemustmatch>
</object>
</div>
<div *ngIf="file.type === ''">
<i class="fa fa-file-o fa-5x" aria-hidden="true" width="350" height="200"></i>
<!--<object [data]=file.url type="text/plain"
width="350" height="200" typemustmatch>
</object>-->
<!--<div>{{ reader !== 'undifined' ? reader.result : ''}}</div>
<div>{{test}}</div>
<a href = "../../../public/{{file._id + getStringExtention(file)}}">show me</a>-->
</div>
<div *ngIf="(file.type === ('audio/mp3')) || (file.type === ('audio/mpeg'))">
<!--<i class="fa fa-file-audio-o" aria-hidden="true"></i>-->
<vg-player style="height: 50px; width: 350px">
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-mute></vg-mute>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<audio #media [vgMedia]="media" id="myAudio" preload="auto">
<source [src]=file.urlSafe type="audio/mp3">
</audio>
</vg-player>
</div>
</div>
</div>
<hr>
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<p><strong> {{file.name}} </strong></p>
</div>
<div class="col-md-6">
<p><strong> {{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</strong></p>
</div>
</div>
</div>
<div class="col-md-12">
<i class="fa unlock-alt" aria-hidden="true"></i>
<i class="fa unlock" aria-hidden="true"></i>
<i class="fa unlock-alt" aria-hidden="true"></i>
<i class="fa unlock" aria-hidden="true"></i>
<div class="md-form">
<input value="http://localhost:3000/{{file.url}}" disabled="disabled" type="text" id="shareLink" class="form-control" mdbInputDirective>
<label for="shareLink">Link</label>
</div>
</div>
</div>
</div>
<div class="modal-footer justify-content-center">
<a type="button" class="btn btn-secondary waves-light" (click)="copyLink(file.url)" mdbWavesEffect>Copy Link <i class="fa fa-copy ml-1" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!--/Modal-->
<!--/Dropdown primary-->
<div class="btn-group" dropdown>
<!--Trigger-->
<button type="button" dropdownToggle class="btn btn-secondary btn-sm dropdown-toggle-split px-3 waves-light" mdbTooltip="Move : {{file.name}}" placement="top" mdbWavesEffect>
<i class="fa fa-arrows" aria-hidden="true"></i>
</button>
<!--Menu-->
<div class="dropdown-menu dropdown-primary">
<a class="dropdown-item" *ngFor="let folder of allUserAppFolder; let i = index;" (click)="moveFile(file, folder)">{{folder.name}}</a>
</div>
</div>
</div>
</td>
<td>
<!--<button class="btn btn-primary btn-sm waves-light" mdbTooltip="Renommer : {{file.name}}" placement="top" type="button" mdbWavesEffect (click)="renameFile(file)">
<i class="fa fa-pencil prefix"></i>
</button>
<input type="search" class="form-control col-xs-2" placeholder= "{{file.name}}" [(ngModel)]="file.name">-->
<label>{{file.name}}</label>
</td>
<!--<td>{{ file.name }}</td>-->
<td>{{ file.taille / ( 1024 * 1024 ) | number : '1.2-2'}} Mo</td>
<td>{{ file.type }}</td>
<td>{{ file.lastDate | date: 'MM/dd/yyyy'}}</td>
</tr>
</tbody>
</table>