From 865d182a1798d96df347c91d26edcec6ddea74c5 Mon Sep 17 00:00:00 2001
From: Antoine Duquenoy <duquenoyantoine.study@gmail.com>
Date: Tue, 2 Oct 2018 22:52:57 +0200
Subject: [PATCH] Upload d'un fichier

---
 Front/index.html |  25 ++++++++++++++++++++++++-
 Front/js/home.js | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 142 insertions(+), 18 deletions(-)

diff --git a/Front/index.html b/Front/index.html
index f12bd70..04f59fd 100644
--- a/Front/index.html
+++ b/Front/index.html
@@ -151,19 +151,42 @@
 
                 <h4>Choix du fichier</h4>
 
+                <input id="filesExplorer" type="file" style="display:none"></input>
                 <div class="upload-drop-zone" id="drop-zone">
                   Clic ou dépose un fichier ici
                 </div>
 
                 <div class="progress">
-                  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
+                  <div id="file-progress" class="progress-bar" role="progressbar" style="width: 75%; display:none">25%</div>
                 </div>
 
               </div>
+
+              <button id="sendButton" type="button" class="btn btn-secondary btn-lg btn-block"style="margin-top:50px;">Envoyer</button>
+
             </div>
 
       </div>
 
+      <div class="modal fade" id="warningFilesNumber" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title" id="modal-title">Attention</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div id="modal-content" class="modal-body">
+              Un seul fichier peut être envoyé !
+            </div>
+            <div class="modal-footer">
+              <button id="modal-button" type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
     </div>
 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
diff --git a/Front/js/home.js b/Front/js/home.js
index f5f60a0..ce1418e 100644
--- a/Front/js/home.js
+++ b/Front/js/home.js
@@ -1,21 +1,122 @@
-var tableNodes;
-
 $(document).ready(function() {
 
-    tableNodes = $('#nodes-table').DataTable( {
-        select: {
-            style: 'multi'
-        }
-    } );
-
-    tableNodes.on( 'select', function (e, dt, type, indexes) {
-            var rowData = tableNodes.rows( indexes ).data().toArray();
-            console.log(JSON.stringify(rowData));
-        } );
-
-    tableNodes.on( 'deselect', function (e, dt, type, indexes) {
-            var rowData = tableNodes.rows(indexes).data().toArray();
-            console.log(JSON.stringify(rowData));
-        } );
+/********** Tableau **********/
+
+  var tableNodes = $('#nodes-table').DataTable( {
+      select: {
+          style: 'multi'
+      }
+  } );
+
+  var nodeSet = new Set();
+
+  tableNodes.on('select', function (e, dt, type, indexes) {
+    var rowData = tableNodes.rows(indexes).data().toArray()[0];
+    nodeSet.add(rowData[0]);
+  } );
+
+  tableNodes.on('deselect', function (e, dt, type, indexes) {
+    var rowData = tableNodes.rows(indexes).data().toArray()[0];
+    nodeSet.delete(rowData[0]);
+  } );
+
+/********** Drop Zone **********/
+
+  var formData = new FormData();
+  var dropZone = document.querySelector("#drop-zone");
+  dropZone.style.cursor = "pointer";
+  var file = document.getElementById("filesExplorer");
+  var fileProgress = document.getElementById("file-progress");
+  var readyToSend = false;
+
+  dropZone.addEventListener('click', function() {
+    delete formData;
+    formData = new FormData();
+    file.click();
+  })
+
+  file.addEventListener('change', function() {
+    dropZone.innerHTML = this.files[0].name;
+    formData.append("file", this.files[0]);
+    formData.append("filename", this.files[0].name);
+    readyToSend = true;
+  }, false)
+
+  dropZone.addEventListener('drop', function(e) {
+    e.preventDefault();
+    delete formData;
+    formData = new FormData();
+    dropZone.style.borderWidth = '2px';
+    var files = e.dataTransfer.files;
+
+    if(files.length > 1) {
+      $("#warningFilesNumber").modal()
+      return;
+    }
+    dropZone.innerHTML = files[0].name;
+    formData.append("file", files[0]);
+    formData.append("filename", files[0].name);
+    readyToSend = true;
+  }, false)
+
+  dropZone.addEventListener('dragenter', function(e) {
+      console.log("Enter");
+      dropZone.style.borderWidth = '5px';
+  }, false);
+
+  dropZone.addEventListener('dragleave', function(e) {
+    console.log("Leave");
+    dropZone.style.borderWidth = '2px';
+  }, false);
+
+  dropZone.addEventListener('dragover', function(e) {
+      e.preventDefault();
+  }, false);
+
+  document.getElementById("sendButton").addEventListener('click', function() {
+    var modalContent = document.getElementById("modal-content");
+    var modalTitle = document.getElementById("modal-title");
+    if(readyToSend && nodeSet.size > 0) {
+      formData.append("nodes", Array.from(nodeSet).join(';'));
+      var request = new XMLHttpRequest();
+      request.open("POST", "file.php");
+
+      request.upload.onloadstart = function(e) {
+        fileProgress.style.display = 'block';
+        fileProgress.style.width = 0 + "px"
+        fileProgress.innerHTML = "0%";
+      }
+
+      request.upload.onprogress = function(e) {
+        var p = 100 - ((e.total - e.loaded) / e.total * 100);
+        fileProgress.style.width = Math.ceil(p) + "%"
+        fileProgress.innerHTML = Math.ceil(p) + "%";
+      }
+
+      request.upload.onloadend = function(e) {
+        fileProgress.style.width = 100 + "%"
+        fileProgress.innerHTML = "100%";
+        var modalButton = document.getElementById("modal-button");
+
+        modalButton.addEventListener('click', function(e) {
+          location.reload();
+        })
+
+        modalContent.innerHTML = "Upload terminé !";
+        modalTitle.innerHTML = "Félicitations";
+        $("#warningFilesNumber").modal()
+      }
+
+      request.send(formData);
+
+      delete formData;
+      formData = new FormData();
+    }
+    else {
+      modalContent.innerHTML = "Veuillez choisir un fichier !";
+      modalTitle.innerHTML = "Attention";
+      $("#warningFilesNumber").modal()
+    }
+  })
 
 } );
--
libgit2 0.21.2