Antoine Duquenoy / PFE_IMA5_2018_2019_P06

Commit 3fa7d40b258d2a5e309448a395f16d5c5bffb647

Authored by sfeutrie
1 parent e7370ebe

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
Showing 2 changed files with 102 additions and 39 deletions   Show diff stats
Inline Side-by-side
PFE06/src/main/resources/static/js/nodes.js
  Show/Hide comments   View file @3fa7d40
... ... @@ -12,7 +12,36 @@ var allDone = document.getElementById("allDone");
12 12 var nextNode = document.getElementById("nextNode");
13 13 var addNode = document.getElementById("addNode");
14 14 var delNode = document.getElementById("delNode");
15   -var editNode = document.getElementById("editNode");
  15 +//var editNode = document.getElementById("editNode");
  16 +
  17 +function displayNetwork(){
  18 + var divNetwork = document.getElementById("network");
  19 + divNetwork.innerHTML = "";
  20 + console.log(nodes.length);
  21 + var firstUl = document.createElement("UL");
  22 + firstUl.setAttribute("class", "list-group");
  23 + for(var i=0;i<nodes.length;i++){
  24 + console.log("SALUT");
  25 + var firstIl = document.createElement("IL");
  26 + firstIl.setAttribute("class", "list-group-item");
  27 + var tempText = document.createTextNode(nodes[i].name);
  28 + firstIl.appendChild(tempText);
  29 + var secondUl = document.createElement("UL");
  30 + secondUl.setAttribute("class", "list-group");
  31 + for(var j=0;j<nodes[i].sensors.length;j++){
  32 + var secondIl = document.createElement("IL");
  33 + secondIl.setAttribute("class", "list-group-item");
  34 + tempText = document.createTextNode(nodes[i].sensors[j].name);
  35 + secondIl.appendChild(tempText);
  36 + secondUl.appendChild(secondIl);
  37 + }
  38 + firstIl.appendChild(secondUl);
  39 + firstUl.appendChild(firstIl);
  40 + }
  41 + divNetwork.appendChild(firstUl);
  42 + //var container = document.getElementsByClassName("container");
  43 + //container.appendChild(divNetwork);
  44 +}
16 45  
17 46 function deleteRow(r) {
18 47 var i = r.parentNode.parentNode.rowIndex;
... ... @@ -72,43 +101,6 @@ function clearAll() {
72 101 document.getElementById("sensorsTable").innerHTML = "";
73 102 }
74 103  
75   -allDone.addEventListener('click', function() {
76   - if(nodes.length !== 0) {
77   - var xhr = new XMLHttpRequest();
78   - var url = "/updatenodes";
79   - xhr.open("POST", url, true);
80   - xhr.setRequestHeader("Content-Type", "application/json");
81   - xhr.onreadystatechange = function () {
82   - if (xhr.readyState === 4 && xhr.status === 200) {
83   - location.reload();
84   - }
85   - };
86   - var data = JSON.stringify(nodes);
87   - console.log(data);
88   - xhr.send(data);
89   - }
90   -})
91   -
92   -prevNode.addEventListener('click', function() {
93   - index--;
94   - if(index < 0) {
95   - index = nodes.length - 1;
96   - }
97   - if(nodes.length != 0) {
98   - displayNode(index);
99   - }
100   -})
101   -
102   -nextNode.addEventListener('click', function() {
103   - index++;
104   - if(index >= nodes.length) {
105   - index = 0;
106   - }
107   - if(nodes.length != 0) {
108   - displayNode(index);
109   - }
110   -})
111   -
112 104 addNode.addEventListener('click', function() {
113 105 var node = {
114 106 'name': nodeName.value,
... ... @@ -124,9 +116,12 @@ addNode.addEventListener(&#39;click&#39;, function() {
124 116 clearAll();
125 117 index = nodes.length;
126 118 }
  119 + displayNetwork();
127 120 })
128 121  
  122 +
129 123 editNode.addEventListener('click', function() {
  124 + console.log("edit : " + index);
130 125 if(index !== -1 && index !== nodes.length) {
131 126 nodes[index].name = nodeName.value;
132 127 nodes[index].ip = nodeIP.value;
... ... @@ -134,6 +129,7 @@ editNode.addEventListener(&#39;click&#39;, function() {
134 129 nodes[index].sensors = sensors.slice(0);
135 130 clearAll();
136 131 index = nodes.length;
  132 + displayNetwork();
137 133 }
138 134 })
139 135  
... ... @@ -145,4 +141,49 @@ delNode.addEventListener(&#39;click&#39;, function() {
145 141 }
146 142 })
147 143  
  144 +allDone.addEventListener('click', function() {
  145 + if(nodes.length !== 0) {
  146 + var divNetwork = document.getElementById("network");
  147 + divNetwork.innerHTML = "";
  148 + var xhr = new XMLHttpRequest();
  149 + var url = "/updatenodes";
  150 + xhr.open("POST", url, true);
  151 + xhr.setRequestHeader("Content-Type", "application/json");
  152 + xhr.onreadystatechange = function () {
  153 + if (xhr.readyState === 4 && xhr.status === 200) {
  154 + location.reload();
  155 + }
  156 + };
  157 + var data = JSON.stringify(nodes);
  158 + console.log(data);
  159 + xhr.send(data);
  160 + }
  161 +})
  162 +
  163 +prevNode.addEventListener('click', function() {
  164 + index--;
  165 + if(index < 0) {
  166 + index = 0;
  167 + //index = nodes.length - 1;
  168 + }
  169 + if(nodes.length != 0) {
  170 + displayNode(index);
  171 + }
  172 + console.log("prev : " + index);
  173 +})
  174 +
  175 +nextNode.addEventListener('click', function() {
  176 + index++;
  177 + if(index >= nodes.length) {
  178 + clearAll();
  179 + index = nodes.length;
  180 + //index = 0;
  181 + }
  182 + else if(nodes.length != 0) {
  183 + displayNode(index);
  184 + }
  185 + console.log("next : " + index);
  186 +})
  187 +
  188 +
148 189  
... ...
PFE06/src/main/resources/templates/update.html
  Show/Hide comments   View file @3fa7d40
... ... @@ -116,8 +116,11 @@ nodes:
116 116 </table>
117 117  
118 118 <button id="addNode" type="button" class="btn btn-success" style="margin-bottom:50px;">Ajouter ce noeud</button>
119   - <button id="editNode" type="button" class="btn btn-warning" style="margin-bottom:50px;">Modifier ce noeud</button>
  119 + <button id="editNode" type="button" class="btn btn-warning" style="margin-bottom:50px;">Appliquer les modifications</button>
120 120 <button id="delNode" type="button" class="btn btn-danger" style="margin-bottom:50px;">Supprimer ce noeud</button>
  121 + <button type="button" class="btn btn-info" data-toggle="modal" data-target="#networkDisplay" style="margin-bottom:50px;">
  122 + Afficher le réseau en création
  123 + </button>
121 124  
122 125 <br/>
123 126  
... ... @@ -125,7 +128,26 @@ nodes:
125 128 <button id="allDone" type="button" class="btn btn-primary">Terminer</button>
126 129 <button id="nextNode" type="button" class="btn btn-secondary">></button>
127 130  
  131 + <!-- The Modal -->
  132 + <div class="modal fade" id="networkDisplay">
  133 + <div class="modal-dialog modal-dialog-centered">
  134 + <div class="modal-content">
  135 + <!-- Modal Header -->
  136 + <div class="modal-header">
  137 + <h4 class="modal-title">Apercu de réseau en création</h4>
  138 + <button type="button" class="close" data-dismiss="modal">&times;</button>
  139 + </div>
  140 + <!-- Modal body -->
  141 + <div class="modal-body" id="network">
  142 + </div>
  143 + <!-- Modal footer -->
  144 + <div class="modal-footer">
  145 + <button type="button" class="btn btn-secondary" data-dismiss="modal">fermer</button>
  146 + </div>
128 147  
  148 + </div>
  149 + </div>
  150 + </div>
129 151  
130 152 <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Relancer une mise à jour</h1>
131 153 <div class="form-team">
... ...