From 5d94f865ce3de06af3a4b55ad977e648bf853f13 Mon Sep 17 00:00:00 2001
From: Viicious <anis.benziane@gmail.com>
Date: Sun, 24 Jun 2018 18:06:36 +0200
Subject: [PATCH] download page design

---
 bin/www                                       |   4 +-
 package-lock.json                             |  10 ++
 src/app/app.module.ts                         |   9 +-
 src/app/book/book.component.html              | 121 +++++++++++++++++-
 src/app/book/book.component.ts                |  19 ++-
 .../download-link.component.html              |  56 ++++++++
 .../download-link.component.scss              |  44 +++++++
 .../download-link.component.spec.ts           |  25 ++++
 .../download-link/download-link.component.ts  |  15 +++
 .../{logo supfile.png => logoSupfile.png}     | Bin
 10 files changed, 296 insertions(+), 7 deletions(-)
 create mode 100644 src/app/download-link/download-link.component.html
 create mode 100644 src/app/download-link/download-link.component.scss
 create mode 100644 src/app/download-link/download-link.component.spec.ts
 create mode 100644 src/app/download-link/download-link.component.ts
 rename src/assets/{logo supfile.png => logoSupfile.png} (100%)

diff --git a/bin/www b/bin/www
index 822cb10..1c340ee 100644
--- a/bin/www
+++ b/bin/www
@@ -35,8 +35,8 @@ var credentials = {
     passphrase: 'titi'
 };
 
-var server = https.createServer(credentials, app);
-//var server = http.createServer(app);
+//var server = https.createServer(credentials, app);
+var server = http.createServer(app);
 
 
 
diff --git a/package-lock.json b/package-lock.json
index 5e25d44..80992d8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3639,6 +3639,16 @@
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
     },
+    "angular-6-clipboard": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/angular-6-clipboard/-/angular-6-clipboard-1.0.0.tgz",
+      "integrity": "sha512-g8g99MpGH/r3DdZ6I0R99dCIaPI/U68cvWFgc/GRlHqdo3Gm/wsdRD2cPDRWymnHADSC9THr5jXz00OmWenjWQ=="
+    },
+    "angular-clipboard": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/angular-clipboard/-/angular-clipboard-1.6.2.tgz",
+      "integrity": "sha512-T5kK6X6fFigLPd2szxW8ETEOLNW9z/9RqdlXtLAY7nakrI62BH8FGOxIes36tvAP/9numwokEWKVLy0WpNkB7w=="
+    },
     "ansi-align": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ef9eb5e..d326bdb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { DropzoneModule } from 'ngx-dropzone-wrapper';
 import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
 import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
 import { HomeComponent } from './home/home.component';
+import { DownloadLinkComponent } from './download-link/download-link.component';
 
 
 const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
@@ -66,6 +67,11 @@ const appRoutes: Routes = [
         component: SignupComponent,
         data: { title: 'Sign Up' }
     },
+    {
+        path: 'download',
+        component: DownloadLinkComponent ,
+        data: { title: 'download' }
+    },
     { path: '',
          redirectTo: '/home',
          pathMatch: 'full'
@@ -79,7 +85,8 @@ const appRoutes: Routes = [
     LoginComponent,
     SignupComponent,
     MainComponent,
-    BookComponent
+    BookComponent,
+    DownloadLinkComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/book/book.component.html b/src/app/book/book.component.html
index a11a9f4..9ed8153 100644
--- a/src/app/book/book.component.html
+++ b/src/app/book/book.component.html
@@ -71,7 +71,7 @@
 
 
 </div>
-<table class="table table-striped">
+<table class="table">
     <thead>
     <tr>
         <th>#</th>
@@ -151,6 +151,7 @@
                         <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">
@@ -163,7 +164,7 @@
                 </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" role="document">
+                    <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()">
@@ -171,7 +172,7 @@
                                 </button>
                                 <h4 class="modal-title w-100" id="myModalLabel">Preview</h4>
                             </div>
-                            <div class="modal-body img-fluid">
+                            <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>
@@ -244,6 +245,120 @@
                     </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-->
 
 
diff --git a/src/app/book/book.component.ts b/src/app/book/book.component.ts
index 5185f2a..f967ae3 100644
--- a/src/app/book/book.component.ts
+++ b/src/app/book/book.component.ts
@@ -15,7 +15,6 @@ import { DropzoneComponent , DropzoneDirective,
     DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
 
 
-
 import { CompleterService } from '../typescripts/pro';
 
 
@@ -87,6 +86,24 @@ export class BookComponent implements OnInit, OnDestroy {
         this.sizeFile = 0;
 
   }
+    copyLink(val) {
+
+        let selBox = document.createElement('textarea');
+
+        selBox.style.position = 'fixed';
+        selBox.style.left = '0';
+        selBox.style.top = '0';
+        selBox.style.opacity = '0';
+        selBox.value = 'http://localhost:3000/' + val;
+
+        document.body.appendChild(selBox);
+        selBox.focus();
+        selBox.select();
+
+        document.execCommand('copy');
+        document.body.removeChild(selBox);
+    }
+
     sendMessage() {
         this.messageEvent.emit('caca')
     }
diff --git a/src/app/download-link/download-link.component.html b/src/app/download-link/download-link.component.html
new file mode 100644
index 0000000..18f3f6e
--- /dev/null
+++ b/src/app/download-link/download-link.component.html
@@ -0,0 +1,56 @@
+<!--Navbar-->
+<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar indigo">
+  <logo>
+    <a class="logo navbar-brand waves-light" mdbWavesEffect href="#"><strong>SupFile</strong></a>
+  </logo>
+  <links>
+    <ul class="navbar-nav mr-auto">
+    </ul>
+  </links>
+</mdb-navbar>
+
+<section class="view intro-2 mask rgba-gradient">
+  <div class="container-fluid full-bg-img mask rgba-gradient">
+    <!--Grid column-->
+    <div class="col-lg-6 col-md-8">
+
+      <!--Card-->
+      <div class="card text-white card-cascade narrower card-image">
+
+        <div class="text-white text-center align-items-center">
+        <!--Card image-->
+        <div class="card-header text-center">
+          <h2 class="h2-responsive">File Download</h2>
+        </div>
+        <!--/Card image-->
+
+
+          <!--Card content-->
+          <div class="card-body text-center">
+            <div class="col-md-12">
+              <div class="row">
+                <div class="col-md-6">
+                  <i class="fa fa-file fa-4x" aria-hidden="true"></i>
+                </div>
+                <div class="col-md-6">
+                  <p><strong>Name</strong></p>
+                  <p>Lenght</p>
+                </div>
+              </div>
+            </div>
+
+            <hr class="hr-light mb-3 mt-4">
+
+            <button class="btn btn-outline-white wow fadeInleft waves-light">Download</button>
+
+          </div>
+          <!--/.Card content-->
+        </div>
+
+      </div>
+      <!--/.Card-->
+
+    </div>
+    <!--Grid column-->
+  </div>
+</section>
diff --git a/src/app/download-link/download-link.component.scss b/src/app/download-link/download-link.component.scss
new file mode 100644
index 0000000..f83a29d
--- /dev/null
+++ b/src/app/download-link/download-link.component.scss
@@ -0,0 +1,44 @@
+.container-fluid {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-body {
+  margin-top: 5rem;
+  margin-bottom: 3rem;
+}
+
+.intro-2 {
+  background: url("http://mdbootstrap.com/img/Photos/Others/img%20(42).jpg")no-repeat center center;
+  background-size: cover;
+  background-attachment: fixed;
+}
+.view {
+  height: 100vh !important;
+}
+
+@media (max-width: 740px) {
+  .full-height,
+  .full-height body,
+  .full-height header,
+  .full-height header .view {
+    height: 1040px;
+  }
+}
+
+.rgba-gradient .full-bg-img {
+  background: linear-gradient(45deg, rgba(83, 125, 210, 0.4), rgba(178, 30, 123, 0.4) 100%);
+}
+.card {
+  background-color: rgba(229, 228, 255, 0.2);
+}
+
+.md-form .prefix {
+  font-size: 1.5rem;
+  margin-top: 1rem;
+}
+.md-form label {
+  color: #ffffff;
+}
\ No newline at end of file
diff --git a/src/app/download-link/download-link.component.spec.ts b/src/app/download-link/download-link.component.spec.ts
new file mode 100644
index 0000000..b121237
--- /dev/null
+++ b/src/app/download-link/download-link.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadLinkComponent } from './download-link.component';
+
+describe('DownloadLinkComponent', () => {
+  let component: DownloadLinkComponent;
+  let fixture: ComponentFixture<DownloadLinkComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DownloadLinkComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadLinkComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/download-link/download-link.component.ts b/src/app/download-link/download-link.component.ts
new file mode 100644
index 0000000..a930f83
--- /dev/null
+++ b/src/app/download-link/download-link.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-download-link',
+  templateUrl: './download-link.component.html',
+  styleUrls: ['./download-link.component.scss']
+})
+export class DownloadLinkComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/src/assets/logo supfile.png b/src/assets/logoSupfile.png
similarity index 100%
rename from src/assets/logo supfile.png
rename to src/assets/logoSupfile.png