You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Sup_File/src/app/book/book.component.html

490 lines
30 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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="https://localhost:3000/download/{{file._id.toString()}}" 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._id.toString())" 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>
<!-- Button trigger modal-->
<button id="openModalButton" type="button" class="btn btn-primary waves-light" [hidden]="true" data-toggle="modal" data-target="#basicExample" (click)="cookies?.show()" mdbWavesEffect>
Bottom
</button>
<!--Modal: modalCookie-->
<div mdbModal #cookies="mdb-modal" class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: false}">
<div *ngIf="allUserFile?.length === 0" class="modal-dialog modal-frame modal-bottom text-center" role="document">
<div class="modal-content" id="cookiesModal" style="background-color: #7283a7!important;">
<div class="modal-body">
<div class="row px-4">
<p class="pt-3 pr-2 text-white">Our website use cookies do you agree ?</p>
<button type="button" class="btn btn-outline-white btn-md waves-light" data-dismiss="modal" (click)="cookies.hide()" mdbWavesEffect>Close</button>
<button type="button" class="btn btn-outline-white btn-md waves-light" data-toggle="modal" data-target="#basicExample" (click)="rules.show()" mdbWavesEffect>Read rules</button>
</div>
</div>
</div>
</div>
</div>
<!--Modal: modalCookie-->
<!--Modal-->
<div mdbModal #rules="mdb-modal" class="modal fade" id="basicExample" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="overflow: auto;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Rules</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="rules.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
<br>
<br>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<br>
<br>
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
<br>
<br>
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-light" data-dismiss="modal" (click)="rules.hide()" mdbWavesEffect>Close</button>
</div>
</div>
</div>
</div>
<!--Modal-->