Changements visuels

*Il est désormais possible de voir le réseau que l'on est entrain de créé grâce à un bouton *De légers changements ont eu lieu pour une meilleure érgonomie

Changements visuels
*Il est désormais possible de voir le réseau que l'on est entrain de créé grâce à un bouton *De légers changements ont eu lieu pour une meilleure érgonomie
sfeutrie
1 parent e7370ebe
Showing 2 changed files with 102 additions and 39 deletions Show diff stats
PFE06/src/main/resources/static/js/nodes.js
PFE06/src/main/resources/templates/update.html
@@ -12,7 +12,36 @@ var allDone = document.getElementById(&quot;allDone&quot;);
 var nextNode = document.getElementById("nextNode");
 var addNode = document.getElementById("addNode");
 var delNode = document.getElementById("delNode");
-var editNode = document.getElementById("editNode");
+//var editNode = document.getElementById("editNode");
+
+function displayNetwork(){
+    var divNetwork = document.getElementById("network");
+    divNetwork.innerHTML = "";
+    console.log(nodes.length);
+    var firstUl = document.createElement("UL");
+    firstUl.setAttribute("class", "list-group");
+    for(var i=0;i<nodes.length;i++){
+        console.log("SALUT");
+        var firstIl = document.createElement("IL");
+        firstIl.setAttribute("class", "list-group-item");
+        var tempText = document.createTextNode(nodes[i].name);
+        firstIl.appendChild(tempText);
+        var secondUl = document.createElement("UL");
+        secondUl.setAttribute("class", "list-group");
+        for(var j=0;j<nodes[i].sensors.length;j++){
+            var secondIl = document.createElement("IL");
+            secondIl.setAttribute("class", "list-group-item");
+            tempText = document.createTextNode(nodes[i].sensors[j].name);
+            secondIl.appendChild(tempText);
+            secondUl.appendChild(secondIl);
+        }
+        firstIl.appendChild(secondUl);
+        firstUl.appendChild(firstIl);
+    }
+    divNetwork.appendChild(firstUl);
+    //var container = document.getElementsByClassName("container");
+    //container.appendChild(divNetwork);
+}
 function deleteRow(r) {
     var i = r.parentNode.parentNode.rowIndex;
@@ -72,43 +101,6 @@ function clearAll() {
     document.getElementById("sensorsTable").innerHTML = "";
 }
-allDone.addEventListener('click', function() {
-    if(nodes.length !== 0) {
-        var xhr = new XMLHttpRequest();
-        var url = "/updatenodes";
-        xhr.open("POST", url, true);
-        xhr.setRequestHeader("Content-Type", "application/json");
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4 && xhr.status === 200) {
-                location.reload();
-            }
-        };
-        var data = JSON.stringify(nodes);
-        console.log(data);
-        xhr.send(data);
-    }
-})
-
-prevNode.addEventListener('click', function() {
-    index--;
-    if(index < 0) {
-        index = nodes.length - 1;
-    }
-    if(nodes.length != 0) {
-        displayNode(index);
-    }
-})
-
-nextNode.addEventListener('click', function() {
-    index++;
-    if(index >= nodes.length) {
-        index = 0;
-    }
-    if(nodes.length != 0) {
-        displayNode(index);
-    }
-})
-
 addNode.addEventListener('click', function() {
     var node = {
         'name': nodeName.value,
@@ -124,9 +116,12 @@ addNode.addEventListener(&#39;click&#39;, function() {
         clearAll();
         index = nodes.length;
     }
+    displayNetwork();
 })
+
 editNode.addEventListener('click', function() {
+    console.log("edit : " + index);
     if(index !== -1 && index !== nodes.length) {
         nodes[index].name = nodeName.value;
         nodes[index].ip = nodeIP.value;
@@ -134,6 +129,7 @@ editNode.addEventListener(&#39;click&#39;, function() {
         nodes[index].sensors = sensors.slice(0);
         clearAll();
         index = nodes.length;
+        displayNetwork();
     }
 })
@@ -145,4 +141,49 @@ delNode.addEventListener(&#39;click&#39;, function() {
     }
 })
+allDone.addEventListener('click', function() {
+    if(nodes.length !== 0) {
+        var divNetwork = document.getElementById("network");
+        divNetwork.innerHTML = "";
+        var xhr = new XMLHttpRequest();
+        var url = "/updatenodes";
+        xhr.open("POST", url, true);
+        xhr.setRequestHeader("Content-Type", "application/json");
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4 && xhr.status === 200) {
+                location.reload();
+            }
+        };
+        var data = JSON.stringify(nodes);
+        console.log(data);
+        xhr.send(data);
+    }
+})
+
+prevNode.addEventListener('click', function() {
+    index--;
+    if(index < 0) {
+        index = 0;
+        //index = nodes.length - 1;
+    }
+    if(nodes.length != 0) {
+        displayNode(index);
+    }
+    console.log("prev : " + index);
+})
+
+nextNode.addEventListener('click', function() {
+    index++;
+    if(index >= nodes.length) {
+        clearAll();
+        index = nodes.length;
+        //index = 0;
+    }
+    else if(nodes.length != 0) {
+        displayNode(index);
+    }
+    console.log("next : " + index);
+})
+
+
@@ -116,8 +116,11 @@ nodes:
         </table>
         <button id="addNode" type="button" class="btn btn-success" style="margin-bottom:50px;">Ajouter ce noeud</button>
-        <button id="editNode" type="button" class="btn btn-warning" style="margin-bottom:50px;">Modifier ce noeud</button>
+        <button id="editNode" type="button" class="btn btn-warning" style="margin-bottom:50px;">Appliquer les modifications</button>
         <button id="delNode" type="button" class="btn btn-danger" style="margin-bottom:50px;">Supprimer ce noeud</button>
+        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#networkDisplay" style="margin-bottom:50px;">
+            Afficher le réseau en création
+        </button>
         <br/>
@@ -125,7 +128,26 @@ nodes:
         <button id="allDone" type="button" class="btn btn-primary">Terminer</button>
         <button id="nextNode" type="button" class="btn btn-secondary">></button>
+        <!-- The Modal -->
+        <div class="modal fade" id="networkDisplay">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <!-- Modal Header -->
+                    <div class="modal-header">
+                        <h4 class="modal-title">Apercu de réseau en création</h4>
+                        <button type="button" class="close" data-dismiss="modal">&times;</button>
+                    </div>
+                    <!-- Modal body -->
+                    <div class="modal-body" id="network">
+                    </div>
+                    <!-- Modal footer -->
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">fermer</button>
+                    </div>
+                </div>
+            </div>
+        </div>
         <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Relancer une mise à jour</h1>
         <div class="form-team">