Backend - Configuration du réseau

* Quelques modifications front sur la page /registration * La page /update a été mise à jour et contient maintenant la nouvelle méthode pour modifier le réseau * La configuration est envoyée en JSON * Le tableau des noeuds fait maintenant la distinction avec les capteurs

Backend - Configuration du réseau
* Quelques modifications front sur la page /registration * La page /update a été mise à jour et contient maintenant la nouvelle méthode pour modifier le réseau * La configuration est envoyée en JSON * Le tableau des noeuds fait maintenant la distinction avec les capteurs
Antoine Duquenoy
1 parent 51db1937
Showing 17 changed files with 248 additions and 235 deletions Show diff stats
PFE06/pom.xml
PFE06/src/main/java/com/PFE/ServerManager/ConfigNodes.java
PFE06/src/main/java/com/PFE/ServerManager/MainController.java
PFE06/src/main/java/com/PFE/ServerManager/Node.java
PFE06/src/main/java/com/PFE/ServerManager/NodeYAML.java -> PFE06/src/main/java/com/PFE/ServerManager/NodeJSON.java
PFE06/src/main/java/com/PFE/ServerManager/NodesJSON.java
PFE06/src/main/java/com/PFE/ServerManager/Sensor.java
PFE06/src/main/java/com/PFE/ServerManager/SensorJSON.java
PFE06/src/main/resources/static/js/nodes.js
PFE06/src/main/resources/static/js/update.js
PFE06/src/main/resources/templates/all.html
PFE06/src/main/resources/templates/nodesconf.html
PFE06/src/main/resources/templates/registration.html
PFE06/src/main/resources/templates/update.html
PFE06/toflash/pfe_admin_maj.yaml
PFE06/toflash/pfe_coucou.yaml
PFE06/toflash/pfe_test.yml
@@ -35,6 +35,10 @@
             <version>1.21</version>
         </dependency>
         <dependency>
+            <groupId>com.fasterxml.jackson.core</groupId>
+            <artifactId>jackson-databind</artifactId>
+        </dependency>
+        <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-web</artifactId>
         </dependency>
@@ -1,16 +0,0 @@
-package com.PFE.ServerManager;
-
-import java.util.List;
-
-public class ConfigNodes {
-
-    private List<NodeYAML> nodes;
-
-    public List<NodeYAML> getNodes() {
-        return nodes;
-    }
-
-    public void setNodes(List<NodeYAML> nodes) {
-        this.nodes = nodes;
-    }
-}
 package com.PFE.ServerManager;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.data.repository.query.Param;
+import org.springframework.http.HttpEntity;
 import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
@@ -19,6 +19,7 @@ import org.yaml.snakeyaml.Yaml;
 import org.yaml.snakeyaml.constructor.Constructor;
 import javax.servlet.annotation.MultipartConfig;
+import com.fasterxml.jackson.databind.ObjectMapper;
 @Controller
 @MultipartConfig(fileSizeThreshold = 20971520) //à changer, taille max des fichiers
@@ -198,35 +199,40 @@ public class MainController {
         }
     }
-    @RequestMapping(value = "/config", method = RequestMethod.POST)
+    @RequestMapping(value = "/updatenodes", method = RequestMethod.POST)
     @ResponseStatus(value = HttpStatus.OK)
-    public void submitConfig(@RequestParam MultipartFile file) {
+    public void submitConfig(HttpEntity<String> httpEntity) {
-        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
-        Customer customer = customerRepository.findByEmail(auth.getName());
-        InputStream inputStream = null;
+        nodeRepository.deleteAll();
+        String json = httpEntity.getBody();
+        ObjectMapper objectMapper = new ObjectMapper();
+        NodeJSON[] nodes = null;
         try {
-            inputStream = file.getInputStream();
-        }
-        catch (IOException e) {
+            nodes = objectMapper.readValue(json, NodeJSON[].class);
+        } catch (IOException e) {
             e.printStackTrace();
         }
-        nodeRepository.deleteAll();
-        Yaml yaml = new Yaml(new Constructor(ConfigNodes.class));
-        ConfigNodes conf = yaml.load(inputStream);
-
-        Iterator<NodeYAML> iter = conf.getNodes().iterator();
-        while (iter.hasNext()) {
-            NodeYAML element = iter.next();
+        for (NodeJSON n : nodes) {
             Node node = new Node();
-            node.setName(element.getName());
-            node.setArch(element.getArch());
-            node.setIp(element.getIp());
+            node.setName(n.getName());
+            node.setArch(n.getArch());
+            node.setIp(n.getIp());
+            List<SensorJSON> sensors = n.getSensors();
+            Set<Sensor> sensorsReal = new HashSet<Sensor>();
+            for(SensorJSON s : sensors)
+            {
+                Sensor ss = new Sensor();
+                ss.setName(s.getName());
+                sensorsReal.add(ss);
+            }
+            node.setSensors(sensorsReal);
             nodeRepository.save(node);
         }
+
     }
+
     @GetMapping(path="/login")
     public ModelAndView login() {
         ModelAndView modelAndView = new ModelAndView();
@@ -290,7 +296,7 @@ public class MainController {
         Yaml yaml = new Yaml();
         FileWriter writer = null;
         try {
-            writer = new FileWriter("toflash/" + customer.getEmail().split("@")[0] + "_" + update_c.getUpdate() + ".yaml");
+            writer = new FileWriter("toflash/" + customer.getEmail().split("@")[0] + "_" + update_c.getUpdate() + ".yml");
         } catch (IOException e) {
             e.printStackTrace();
         }
@@ -313,21 +319,11 @@ public class MainController {
         Yaml yaml = new Yaml();
         FileWriter writer = null;
         try {
-            writer = new FileWriter("toflash/" + customer.getEmail().split("@")[0] + "_" + update.getUpdate() + ".yaml");
+            writer = new FileWriter("toflash/" + customer.getEmail().split("@")[0] + "_" + update.getUpdate() + ".yml");
         } catch (IOException e) {
             e.printStackTrace();
         }
         yaml.dump(data, writer);
     }
-    @GetMapping(value="/nodesconf")
-    public ModelAndView nodesconf() {
-        ModelAndView modelAndView = new ModelAndView();
-        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
-        Customer customer = customerRepository.findByEmail(auth.getName());
-        modelAndView.addObject("customerName", customer.getEmail().split("@")[0]);
-        modelAndView.addObject("customerRole", customer.getRole());
-        modelAndView.setViewName("nodesconf");
-        return modelAndView;
-    }
 }
 \ No newline at end of file
 package com.PFE.ServerManager;
 import javax.persistence.*;
+import java.util.Set;
 @Entity
 @Table(name = "node")
@@ -19,6 +20,14 @@ public class Node {
     @Column(name = "arch")
     private String arch;
+    @ManyToMany(cascade = CascadeType.ALL)
+    @JoinTable(name = "nodes_sensor", joinColumns = @JoinColumn(name = "node_id"), inverseJoinColumns = @JoinColumn(name = "sensorId"))
+    private Set<Sensor> sensors;
+
+    public void setSensors(Set<Sensor> sensors) {
+        this.sensors = sensors;
+    }
+
     public void setNode_id(Integer node_id) {
         this.node_id = node_id;
     }
@@ -51,4 +60,8 @@ public class Node {
         return arch;
     }
+    public Set<Sensor> getSensors() {
+        return sensors;
+    }
+
 }
 package com.PFE.ServerManager;
-public class NodeYAML {
+import java.util.List;
+
+public class NodeJSON {
     private String name;
     private String ip;
     private String arch;
+    private List<SensorJSON> sensors;
     public void setName(String name) {
         this.name = name;
@@ -18,6 +21,8 @@ public class NodeYAML {
         this.arch = arch;
     }
+    public void setSensors(List<SensorJSON> sensors) { this.sensors = sensors; }
+
     public String getName() {
         return name;
     }
@@ -30,4 +35,6 @@ public class NodeYAML {
         return arch;
     }
+    public List<SensorJSON> getSensors() { return sensors; }
+
 }
@@ -0,0 +1,12 @@
+package com.PFE.ServerManager;
+
+import java.util.List;
+
+public class NodesJSON {
+    private List<NodeJSON> nodes;
+
+    public void setNodes(List<NodeJSON> nodes) { this.nodes = nodes; }
+
+    public List<NodeJSON> getNodes() { return nodes; }
+
+}
@@ -0,0 +1,23 @@
+package com.PFE.ServerManager;
+
+import javax.persistence.*;
+
+@Entity
+@Table(name = "sensor")
+public class Sensor {
+    @Id
+    @Column(name = "sensorId", columnDefinition = "serial")
+    @GeneratedValue(strategy = GenerationType.AUTO)
+    private Integer sensorId;
+
+    @Column(name = "name")
+    private String name;
+
+    public void setSensorId(Integer sensorId) { this.sensorId = sensorId; }
+    public Integer getSensorId() { return sensorId; }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+    public String getName() { return name; }
+}
@@ -0,0 +1,14 @@
+package com.PFE.ServerManager;
+
+
+public class SensorJSON {
+    private String name;
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getName() {
+        return name;
+    }
+}
@@ -74,7 +74,18 @@ function clearAll() {
 allDone.addEventListener('click', function() {
     if(nodes.length !== 0) {
-        console.log(JSON.stringify(nodes));
+        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);
     }
 })
@@ -37,6 +37,13 @@ $(document).ready(function() {
     /********** Configuration file ***********/
+
+
+
+
+
+
+    /*
     var configName = document.getElementById("config_name");
     var configSend = document.getElementById("config_send");
     var file = document.getElementById("configInputFile");
@@ -81,6 +88,8 @@ $(document).ready(function() {
         })
     }
+*/
+
     /********** Tableau **********/
       var tableNodes = $('#nodes-table').DataTable( {
@@ -94,12 +103,15 @@ $(document).ready(function() {
       tableNodes.on('select', function (e, dt, type, indexes) {
         var rowData = tableNodes.rows(indexes).data().toArray()[0];
-        nodeSet.add(rowData[0]);
+        console.log(rowData);
+        nodeSet.add(rowData[0] + "@" + rowData[3]);
+        console.log(nodeSet);
       } );
       tableNodes.on('deselect', function (e, dt, type, indexes) {
         var rowData = tableNodes.rows(indexes).data().toArray()[0];
-        nodeSet.delete(rowData[0]);
+        nodeSet.delete(rowData[0] + "@" + rowData[3]);
+          console.log(nodeSet);
       } );
       var sendInfoMaj = function(action) {
@@ -63,7 +63,7 @@
                 <th scope="col">Nom</th>
                 <th scope="col">ID</th>
                 <th scope="col">Utilisateurs</th>
-                <th scope="col">Mises à jours</th>
+                <th scope="col">Mises à jour</th>
             </tr>
             <tr th:each="prod : ${team}">
                 <td th:text="${prod.getTeam()}">Team</td>
@@ -1,129 +0,0 @@
-<!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="stylesheet" th:href="@{/css/all.css}">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-    <title>Configuration des noeuds</title>
-</head>
-<body>
-<!-- NAV BAR -->
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container">
-        <a th:href="@{/home}"><span class="navbar-brand"><img style="max-width:32px;" src="/pfelogo.png"></span></a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-            <div class="navbar-nav mr-auto">
-                <a class="nav-item nav-link" th:href="@{/upload}">Uploader un fichier</a>
-                <div th:remove="tag" th:switch="${customerRole}">
-                    <div th:remove="tag" th:case="'ADMIN'">
-                        <a class="nav-item nav-link" th:href="@{/registration}">Enregistrer des utilisateurs</a>
-                        <a class="nav-item nav-link" th:href="@{/all}">Liste des utilisateurs</a>
-                        <a class="nav-item nav-link" th:href="@{/update}">Paramétrer une mise à jour</a>
-                    </div>
-                    <div th:remove="tag" th:case="'USER'">
-                        <a class="nav-item nav-link" th:href="@{/update}">Paramétrer une mise à jour</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="collapse navbar-collapse ml-3" id="navbarNavAltMarkup2" >
-            <div class="navbar-nav ml-auto">
-                <a class="nav-item nav-link btn btn-danger active" th:href="@{/logout}">Déconnexion</a>
-            </div>
-        </div>
-    </div>
-</nav>
-
-
-<!-- TABLE PART -->
-<div class="container">
-    <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Configuration des noeuds</h1>
-
-    <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span class="input-group-text">Nom</span>
-        </div>
-        <input id="nodeName" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
-    </div>
-
-    <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span class="input-group-text">IP</span>
-        </div>
-        <input id="nodeIP" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
-    </div>
-
-    <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span class="input-group-text">Architecture</span>
-        </div>
-        <input id="nodeArch" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
-    </div>
-
-    <h3>Capteurs</h3><br/>
-
-    <div class="input-group mb-3">
-        <div class="input-group-prepend">
-            <span class="input-group-text">Nom</span>
-        </div>
-        <input id="sensorName" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
-    </div>
-
-    <button id="addSensor" type="button" class="btn btn-primary" style="margin-bottom:50px;">Ajouter un capteur</button>
-
-    <table id="sensorsTable" class="table" style="margin-bottom:50px;">
-    </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="delNode" type="button" class="btn btn-danger" style="margin-bottom:50px;">Supprimer ce noeud</button>
-
-    <div class="container">
-        <div class="row">
-            <div class="col-sm" style="text-align:left;">
-                <button id="prevNode" type="button" class="btn btn-secondary"><</button>
-            </div>
-            <div class="col-sm" style="text-align:center;">
-                <button id="allDone" type="button" class="btn btn-primary btn-lg btn-block">Terminer</button>
-            </div>
-            <div class="col-sm" style="text-align:right">
-                <button id="nextNode" type="button" class="btn btn-secondary">></button>
-            </div>
-        </div>
-    </div>
-
-
-</div>
-
-
-<div class="modal fade" id="warningConf" 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">
-                Certains champs sont vides !
-            </div>
-            <div class="modal-footer">
-                <button id="modal-button" type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-<script th:src="@{/js/nodes.js}"></script>
-</body>
-</html>
@@ -4,11 +4,10 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=0.8, shrink-to-fit=no">
-    <link rel="stylesheet" th:href="@{/css/registration.css}">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <title>Enregistrement de nouveaux utilisateurs</title>
 </head>
-<body>
+
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
         <div class="container">
             <a th:href="@{/home}"><span class="navbar-brand"><img style="max-width:32px;" src="/pfelogo.png"></span></a>
@@ -39,11 +38,21 @@
     </nav>
     <div class="container">
+
+        <div th:if="${succeed == 1}">
+            <div class="alert alert-success" style="margin-top:50px" role="alert">
+                <span th:utext="${message + ' a été ajouté'}"></span>
+            </div>
+        </div>
+
+        <div th:if="${succeed == -1}">
+            <div class="alert alert-danger" style="margin-top:50px" role="alert">
+                <span th:utext="${message + ' existe déjà'}"></span>
+            </div>
+        </div>
+
         <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Formulaire d'ajout d'un utilisateur</h1>
-        <p>Merci d'entrer le login et le mot de passe du nouvel utilisateur</p>
-    </div>
-    <div class="login-form">
-        <div class="main-div">
+        <div class="login-form">
             <form id="Login" th:action="@{/addUser}" method="POST">
                 <div class="form-team">
                     <input type="email" class="form-control" id="username" placeholder="Entrer l'email" name="email" minlength="6" required>
@@ -70,35 +79,16 @@
                 <button @click.prevent="registration" type="submit" class="btn btn-primary">Ajouter</button>
             </form>
         </div>
-    </div>
-    <div style="max-width:38%; margin:50px auto; padding:10px 70px 10px 71px">
-        <div th:if="${succeed == 1}">
-            <div class="alert alert-success" role="alert">
-                <span th:utext="${message + ' a été ajouté'}"></span>
-            </div>
-        </div>
-
-        <div th:if="${succeed == -1}">
-            <div class="alert alert-danger" role="alert">
-                <span th:utext="${message + ' existe déjà'}"></span>
-            </div>
-        </div>
-    </div>
-    <div class="container">
         <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Formulaire d'ajout d'un groupe de travail</h1>
-        <p>Merci d'entrer le nom du nouveau groupe</p>
-    </div>
-    <div class="login-form">
-        <div class="main-div">
-                <form id="addTeam" th:action="@{/addTeam}" method="POST">
-                    <div class="form-team">
-                        <input type="text" class="form-control" id="teamName" placeholder="Entrer le nom du groupe" name="teamName" required>
-                    </div>
-                    <br/>
-                    <button @click.prevent="registration" type="submit" class="btn btn-primary">Ajouter</button>
-                </form>
-            </div>
+        <div class="login-form">
+            <form id="addTeam" th:action="@{/addTeam}" method="POST">
+                <div class="form-team">
+                    <input type="text" class="form-control" id="teamName" placeholder="Entrer le nom du groupe" name="teamName" required>
+                </div>
+                <br/>
+                <button @click.prevent="registration" type="submit" class="btn btn-primary">Ajouter</button>
+            </form>
         </div>
     </div>
@@ -45,6 +45,8 @@
     <div class="container" style="padding-bottom: 50px;">
+        <!--
+
         <div th:remove="tag" th:if="${customerRole} == 'ADMIN'">
             <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Changer la configuration réseau</h1>
             <div class="input-team mb-3">
@@ -74,6 +76,57 @@ nodes:
             </div>
         </div>
+        -->
+
+        <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Paramétrer le réseau</h1>
+
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Nom</span>
+            </div>
+            <input id="nodeName" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+        </div>
+
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">IP</span>
+            </div>
+            <input id="nodeIP" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+        </div>
+
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Architecture</span>
+            </div>
+            <input id="nodeArch" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+        </div>
+
+        <h3>Capteurs</h3><br/>
+
+        <div class="input-group mb-3">
+            <div class="input-group-prepend">
+                <span class="input-group-text">Nom</span>
+            </div>
+            <input id="sensorName" type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
+        </div>
+
+        <button id="addSensor" type="button" class="btn btn-primary" style="margin-bottom:50px;">Ajouter un capteur</button>
+
+        <table id="sensorsTable" class="table" style="margin-bottom:50px;">
+        </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="delNode" type="button" class="btn btn-danger" style="margin-bottom:50px;">Supprimer ce noeud</button>
+
+        <br/>
+
+        <button id="prevNode" type="button" class="btn btn-secondary"><</button>
+        <button id="allDone" type="button" class="btn btn-primary">Terminer</button>
+        <button id="nextNode" type="button" class="btn btn-secondary">></button>
+
+
+
         <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">
             <select multiple id="maj_name" class="form-control">
@@ -90,22 +143,28 @@ nodes:
                 <th>Nom</th>
                 <th>IP</th>
                 <th>Architecture</th>
+                <th>Capteur</th>
             </tr>
             </thead>
             <tbody>
-            <tr th:each="node : ${nodes}">
-                <td th:text="${node.getName()}">name</td>
-                <td th:text="${node.getIp()}">ip</td>
-                <td th:text="${node.getArch()}">arch</td>
-            </tr>
+            <div th:each="node : ${nodes}">
+                <tr th:each="sensor : ${node.getSensors()}">
+                    <td th:text="${node.getName()}">name</td>
+                    <td th:text="${node.getIp()}">ip</td>
+                    <td th:text="${node.getArch()}">arch</td>
+                    <td th:text="${sensor.getName()}">sensor</td>
+                </tr>
+            </div>
             </tbody>
         </table>
         <div class="form-team">
             <input type="text" class="form-control" id="majName" placeholder="Nom de la update" name="update" style="margin-top:20px;">
         </div>
+        <br/>
         <div class="form-team">
             <input type="date" class="form-control" id="majDate" placeholder="Date de la mise à jour" name="date">
         </div>
+        <br/>
         <select multiple class="form-control" style="margin-bottom:20px;" id="file_choice">
             <option value="--">--</option>
             <option th:each="file : ${customerFiles}" th:value="${file}" th:utext="${file}"/>
@@ -133,13 +192,34 @@ nodes:
         </div>
     </div>
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" charset="utf-8"></script>
-<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" charset="utf-8"></script>
-<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
-<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" charset="utf-8"></script>
-<script th:src="@{/js/update.js}"></script>
+    <div class="modal fade" id="warningConf" 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">
+                    Certains champs sont vides !
+                </div>
+                <div class="modal-footer">
+                    <button id="modal-button" type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
+                </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>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" charset="utf-8"></script>
+    <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" charset="utf-8"></script>
+    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
+    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" charset="utf-8"></script>
+    <script th:src="@{/js/update.js}"></script>
+    <script th:src="@{/js/nodes.js}"></script>
+
 </body>
 </html>
@@ -1,4 +0,0 @@
-date: '2222-02-22'
-file: pfelogo.png
-nodes: [AT-001, ATTTT-008]
-name: admin_maj
@@ -1,4 +0,0 @@
-date: '0022-02-22'
-file: pfelogo.png
-nodes: [AT-001, AT-002, AT-003, ATTTT-008]
-name: coucou
@@ -0,0 +1,4 @@
+date: '1212-12-12'
+file: pfelogo.png
+nodes: [nom1@c2, nom2@aaaaaaaaaaaaaaaaaaaaaaa, nom2@aa]
+name: test