Antoine Duquenoy / PFE_IMA5_2018_2019_P06

Commit f6a02b6cb0f887758c6ed38f6fc020a023c22a0e

Authored by Unknown
1 parent 85949b1a

Mise à jour front et sauvegarde d'une configuration 

La page "Paramétrer une mise à jour" est quasi-fonctionnelle. Une première section permet de retrouver les anciennes configurations et de les appliquer. La seconde partie permet de déployer un fichier (sans enregistrer) ou de créer une configuration.

Il faudra ajouter la liste des fichiers uploadées (par membre ?)
Showing 6 changed files with 199 additions and 145 deletions   Show diff stats
Inline Side-by-side
PFE06/src/main/java/com/PFE/ServerManager/MainController.java
  Show/Hide comments   View file @f6a02b6
... ... @@ -56,6 +56,7 @@ public class MainController {
56 56 Customer customer = customerRepository.findByEmail(auth.getName());
57 57 modelAndView.addObject("customerName", customer.getEmail().split("@")[0]);
58 58 modelAndView.addObject("customerRole", customer.getRole());
  59 + modelAndView.addObject("customerMaj", customer.getMaj());
59 60 modelAndView.setViewName("session");
60 61 return modelAndView;
61 62 }
... ... @@ -192,21 +193,20 @@ public class MainController {
192 193 return "test";
193 194 }
194 195  
195   - @PostMapping(path="/test")
196   - public ModelAndView addNewUser(@RequestParam String maj, @RequestParam String date, @RequestParam String set1, @RequestParam String set2){
197   - ModelAndView modelAndView = new ModelAndView();
198   - modelAndView.setViewName("test");
  196 + @PostMapping(path="/savemaj")
  197 + public String saveMaj(@RequestParam String name, @RequestParam String date, @RequestParam String nodes){
199 198 Authentication auth = SecurityContextHolder.getContext().getAuthentication();
200 199 Customer customer = customerRepository.findByEmail(auth.getName());
201 200 Maj maj_c = new Maj();
202   - maj_c.setMaj(maj);
  201 + maj_c.setMaj(name);
203 202 maj_c.setDate(date);
204   - String nodes=set1+';'+set2;
205 203 maj_c.setNodes(nodes);
206 204 maj_c.setMaj_id((int)(majRepository.count() + 1));
207 205 majRepository.save(maj_c); // ajouter la mise a jour dans la table
208   - customer.setMaj(new HashSet<Maj>(Arrays.asList(maj_c)));
  206 + HashSet<Maj> majs = new HashSet<Maj>(Arrays.asList(maj_c));
  207 + majs.addAll(customer.getMaj());
  208 + customer.setMaj(majs);
209 209 customerRepository.save(customer); // permet de rendre effective la jointure entre customer et maj
210   - return modelAndView;
  210 + return "redirect:/session";
211 211 }
212 212 }
213 213 \ No newline at end of file
... ...
PFE06/src/main/resources/static/js/session.js 0 → 100644
  Show/Hide comments   View file @f6a02b6
... ... @@ -0,0 +1,77 @@
  1 +$(document).ready(function() {
  2 +
  3 + /********** Tableau **********/
  4 +
  5 + var tableNodes = $('#nodes-table').DataTable( {
  6 + responsive: true,
  7 + select: {
  8 + style: 'multi'
  9 + }
  10 + } );
  11 +
  12 + var nodeSet = new Set();
  13 +
  14 + tableNodes.on('select', function (e, dt, type, indexes) {
  15 + var rowData = tableNodes.rows(indexes).data().toArray()[0];
  16 + nodeSet.add(rowData[0]);
  17 + } );
  18 +
  19 + tableNodes.on('deselect', function (e, dt, type, indexes) {
  20 + var rowData = tableNodes.rows(indexes).data().toArray()[0];
  21 + nodeSet.delete(rowData[0]);
  22 + } );
  23 +
  24 + document.getElementById("save_maj").addEventListener('click', function() {
  25 +
  26 + var form = document.createElement('form');
  27 + form.setAttribute('action', 'savemaj');
  28 + form.setAttribute('method', 'post');
  29 +
  30 + var modalContent = document.getElementById("modal-content");
  31 +
  32 + var majName = document.getElementById("majName").value;
  33 + var majDate = document.getElementById("majDate").value;
  34 +
  35 + if(nodeSet.size == 0) {
  36 + $("#warningFilesNumber").modal();
  37 + }
  38 +
  39 + else if(majName == "") {
  40 + modalContent.innerHTML = "Veuillez choisir un nom pour la mise à jour";
  41 + $("#warningFilesNumber").modal();
  42 + }
  43 +
  44 + else if(majDate == "") {
  45 + modalContent.innerHTML = "Veuillez choisir une date pour la mise à jour"
  46 + $("#warningFilesNumber").modal();
  47 + }
  48 +
  49 + else {
  50 + var nodes = Array.from(nodeSet);
  51 + console.log(nodes);
  52 +
  53 + var inputvar1 = document.createElement('input');
  54 + inputvar1.setAttribute('type', 'hidden');
  55 + inputvar1.setAttribute('name', 'name');
  56 + inputvar1.setAttribute('value', majName);
  57 + form.appendChild(inputvar1);
  58 +
  59 + var inputvar2 = document.createElement('input');
  60 + inputvar2.setAttribute('type', 'hidden');
  61 + inputvar2.setAttribute('name', 'date');
  62 + inputvar2.setAttribute('value', majDate);
  63 + form.appendChild(inputvar2);
  64 +
  65 + var inputvar3 = document.createElement('input');
  66 + inputvar3.setAttribute('type', 'hidden');
  67 + inputvar3.setAttribute('name', 'nodes');
  68 + inputvar3.setAttribute('value', nodes.join(";"));
  69 + form.appendChild(inputvar3);
  70 +
  71 + document.body.appendChild(form);
  72 + form.submit();
  73 + }
  74 +
  75 + });
  76 +
  77 +} );
... ...
PFE06/src/main/resources/templates/all.html
  Show/Hide comments   View file @f6a02b6
... ... @@ -14,45 +14,57 @@
14 14  
15 15 <div id="app">
16 16 <!-- NAV BAR -->
17   - <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
18   - <span class="navbar-brand"> ID : <span th:text="${customerName}" th:remove="tag">Documentations</span></span>
19   - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
20   - <span class="navbar-toggler-icon"></span>
21   - </button>
22   - <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
23   - <div class="navbar-nav">
24   - <a class="nav-item nav-link" th:href="@{/home}">Gestion des noeuds</a>
25   - <a class="nav-item nav-link" th:href="@{/logout}">Déconnexion</a>
26   - <li class="nav-item dropdown">
27   - <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
28   - <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
29   - <div th:switch="${customerRole}">
30   - <div th:case="'ADMIN'">
31   - <a class="dropdown-item" th:href="@{/registration}">Enregistrer des utilisateurs</a>
32   - <a class="dropdown-item active" th:href="@{/all}">Listes des utilisateurs</a></div>
33   - <div th:case="'USER'"></div>
  17 + <div id="app">
  18 + <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  19 + <span class="navbar-brand"> ID : <span th:text="${customerName}" th:remove="tag">Documentations</span></span>
  20 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  21 + <span class="navbar-toggler-icon"></span>
  22 + </button>
  23 + <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  24 + <div class="navbar-nav">
  25 + <a class="nav-item nav-link active" th:href="@{/home}">Gestion des noeuds <span class="sr-only">(current)</span></a>
  26 + <a class="nav-item nav-link" th:href="@{/logout}">Déconnexion</a>
  27 + <li class="nav-item dropdown">
  28 + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
  29 + <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  30 + <div th:switch="${customerRole}">
  31 + <div th:case="'ADMIN'">
  32 + <a class="dropdown-item" th:href="@{/registration}">Enregistrer des utilisateurs</a>
  33 + <a class="dropdown-item" th:href="@{/all}">Listes des utilisateurs</a>
  34 + <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
  35 + </div>
  36 + <div th:case="'USER'">
  37 + <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
  38 + </div>
  39 + </div>
  40 + <a class="dropdown-item" href="#">A ajouter...</a>
34 41 </div>
35   - <a class="dropdown-item" href="#">A ajouter...</a>
36   - </div>
37   - </li>
38   - <a class="nav-item nav-link disabled" href="#">Documentations</a>
  42 + </li>
  43 + <a class="nav-item nav-link disabled" href="#">Documentations</a>
  44 + </div>
39 45 </div>
40   - </div>
41   - </nav>
  46 + </nav>
42 47  
43 48 <!-- TABLE PART -->
44   - <table class="table">
45   - <tr>
46   - <th scope="col">Pseudo</th>
47   - <th scope="col">Role</th>
48   - <th scope="col">Id</th>
49   - </tr>
50   - <tr th:each="prod : ${list}">
51   - <td th:text="${prod.getEmail()}">pseudo</td>
52   - <td th:text="${prod.getRole()}">role</td>
53   - <td th:text="${prod.customer_id}">id</td>
54   - </tr>
55   - </table>
  49 +
  50 + <div class="container">
  51 +
  52 + <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Liste des utilisateurs</h1>
  53 +
  54 + <table class="table table-striped table-bordered">
  55 + <tr>
  56 + <th scope="col">Email</th>
  57 + <th scope="col">Role</th>
  58 + <th scope="col">ID</th>
  59 + </tr>
  60 + <tr th:each="prod : ${list}">
  61 + <td th:text="${prod.getEmail()}">Email</td>
  62 + <td th:text="${prod.getRole()}">Role</td>
  63 + <td th:text="${prod.customer_id}">ID</td>
  64 + </tr>
  65 + </table>
  66 + </div>
  67 +
56 68 </div>
57 69  
58 70 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
... ...
PFE06/src/main/resources/templates/home.html
  Show/Hide comments   View file @f6a02b6
... ... @@ -34,7 +34,6 @@
34 34 <a class="dropdown-item" th:href="@{/registration}">Enregistrer des utilisateurs</a>
35 35 <a class="dropdown-item" th:href="@{/all}">Listes des utilisateurs</a>
36 36 <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
37   - <a class="dropdown-item" th:href="@{/test}">test maj</a>
38 37 </div>
39 38 <div th:case="'USER'">
40 39 <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
... ...
PFE06/src/main/resources/templates/registration.html
  Show/Hide comments   View file @f6a02b6
... ... @@ -10,6 +10,8 @@
10 10 </head>
11 11 <body>
12 12  
  13 +<div id="app">
  14 +
13 15 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
14 16 <span class="navbar-brand"> ID : <span th:text="${customerName}" th:remove="tag">Documentations</span></span>
15 17 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
... ... @@ -17,17 +19,20 @@
17 19 </button>
18 20 <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
19 21 <div class="navbar-nav">
20   - <!--<a class="nav-item nav-link active" th:href="@{/registration}">Enregistrer des utilisateurs <span class="sr-only">(current)</span></a>-->
21   - <a class="nav-item nav-link" th:href="@{/home}">Gestion des noeuds</a>
  22 + <a class="nav-item nav-link active" th:href="@{/home}">Gestion des noeuds <span class="sr-only">(current)</span></a>
22 23 <a class="nav-item nav-link" th:href="@{/logout}">Déconnexion</a>
23 24 <li class="nav-item dropdown">
24 25 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
25 26 <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
26 27 <div th:switch="${customerRole}">
27 28 <div th:case="'ADMIN'">
28   - <a class="dropdown-item active" th:href="@{/registration}">Enregistrer des utilisateurs</a>
29   - <a class="dropdown-item" th:href="@{/all}">Listes des utilisateurs</a></div>
30   - <div th:case="'USER'"></div>
  29 + <a class="dropdown-item" th:href="@{/registration}">Enregistrer des utilisateurs</a>
  30 + <a class="dropdown-item" th:href="@{/all}">Listes des utilisateurs</a>
  31 + <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
  32 + </div>
  33 + <div th:case="'USER'">
  34 + <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
  35 + </div>
31 36 </div>
32 37 <a class="dropdown-item" href="#">A ajouter...</a>
33 38 </div>
... ...
PFE06/src/main/resources/templates/session.html
  Show/Hide comments   View file @f6a02b6
... ... @@ -17,6 +17,7 @@
17 17  
18 18 <body>
19 19 <div id="app">
  20 +
20 21 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
21 22 <span class="navbar-brand"> ID : <span th:text="${customerName}" th:remove="tag">Documentations</span></span>
22 23 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
... ... @@ -24,7 +25,7 @@
24 25 </button>
25 26 <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
26 27 <div class="navbar-nav">
27   - <a class="nav-item nav-link active" th:href="@{/home}">Création d'une mise à jour <span class="sr-only">(current)</span></a>
  28 + <a class="nav-item nav-link active" th:href="@{/home}">Gestion des noeuds <span class="sr-only">(current)</span></a>
28 29 <a class="nav-item nav-link" th:href="@{/logout}">Déconnexion</a>
29 30 <li class="nav-item dropdown">
30 31 <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Options</a>
... ... @@ -33,10 +34,10 @@
33 34 <div th:case="'ADMIN'">
34 35 <a class="dropdown-item" th:href="@{/registration}">Enregistrer des utilisateurs</a>
35 36 <a class="dropdown-item" th:href="@{/all}">Listes des utilisateurs</a>
36   - <a class="dropdown-item" th:href="@{/home}">Ajouter un novueau fichier au serveur</a>
  37 + <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
37 38 </div>
38 39 <div th:case="'USER'">
39   - <a class="dropdown-item" th:href="@{/home}">Ajouter un novueau fichier au serveur</a>
  40 + <a class="dropdown-item" th:href="@{/session}">Paramétrer une mise à jour</a>
40 41 </div>
41 42 </div>
42 43 <a class="dropdown-item" href="#">A ajouter...</a>
... ... @@ -48,7 +49,20 @@
48 49 </nav>
49 50  
50 51 <div class="container" style="padding-bottom: 50px;">
51   - <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Choix des noeuds</h1>
  52 +
  53 + <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Relancer une mise à jour</h1>
  54 +
  55 + <div class="form-group">
  56 +
  57 + <select multiple class="form-control">
  58 + <option value="">--</option>
  59 + <option th:each="maj : ${customerMaj}" th:value="${maj.getMaj_id()}" th:utext="${maj.getMaj()}"/>
  60 + </select>
  61 +
  62 + <button id="start_maj" type="submit" class="btn btn-primary" style="margin-top:20px;">Lancer la mise à jour</button>
  63 + </div>
  64 +
  65 + <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Créer une mise à jour</h1>
52 66 <table id="nodes-table" class="table table-striped table-bordered dt-responsive nowrap">
53 67 <thead>
54 68 <tr>
... ... @@ -59,112 +73,59 @@
59 73 </thead>
60 74 <tbody>
61 75 <tr>
62   - <td>Nixon</td>
63   - <td>System Architect</td>
64   - <td>Edinburgh</td>
65   - </tr>
66   - <tr>
67   - <td>Winters</td>
68   - <td>Accountant</td>
69   - <td>Tokyo</td>
70   - </tr>
71   - <tr>
72   - <td>Cox</td>
73   - <td>Junior Technical Author</td>
74   - <td>San Francisco</td>
  76 + <td>AT-001</td>
  77 + <td>85.10.201.246</td>
  78 + <td>ARM</td>
75 79 </tr>
76 80 <tr>
77   - <td>Kelly</td>
78   - <td>Senior Javascript Developer</td>
79   - <td>Edinburgh</td>
  81 + <td>AT-002</td>
  82 + <td>85.10.201.245</td>
  83 + <td>ARM</td>
80 84 </tr>
81 85 <tr>
82   - <td>Satou</td>
83   - <td>Accountant</td>
84   - <td>Tokyo</td>
  86 + <td>AT-003</td>
  87 + <td>85.10.201.244</td>
  88 + <td>ARM</td>
85 89 </tr>
86 90 <tr>
87   - <td>Williamson</td>
88   - <td>Integration Specialist</td>
89   - <td>New York</td>
90   - </tr>
91   - <tr>
92   - <td>Chandler</td>
93   - <td>Sales Assistant</td>
94   - <td>San Francisco</td>
95   - </tr>
96   - <tr>
97   - <td>Davidson</td>
98   - <td>Integration Specialist</td>
99   - <td>Tokyo</td>
100   - </tr>
101   - <tr>
102   - <td>Hurst</td>
103   - <td>Javascript Developer</td>
104   - <td>San Francisco</td>
105   - </tr>
106   - <tr>
107   - <td>Frost</td>
108   - <td>Software Engineer</td>
109   - <td>Edinburgh</td>
110   - </tr>
111   - <tr>
112   - <td>Gaines</td>
113   - <td>Office Manager</td>
114   - <td>London</td>
115   - </tr>
116   - <tr>
117   - <td>Flynn</td>
118   - <td>Support Lead</td>
119   - <td>Edinburgh</td>
120   - </tr>
121   - <tr>
122   - <td>Marshall</td>
123   - <td>Regional Director</td>
124   - <td>San Francisco</td>
125   - </tr>
126   - <tr>
127   - <td>Kennedy</td>
128   - <td>Senior Marketing Designer</td>
129   - <td>London</td>
130   - </tr>
131   - <tr>
132   - <td>Fitzpatrick</td>
133   - <td>Regional Director</td>
134   - <td>London</td>
135   - </tr>
136   - <tr>
137   - <td>Silva</td>
138   - <td>Marketing Designer</td>
139   - <td>London</td>
140   - </tr>
141   - <tr>
142   - <td>Byrd</td>
143   - <td>Chief Financial Officer (CFO)</td>
144   - <td>New York</td>
145   - </tr>
146   - <tr>
147   - <td>Little</td>
148   - <td>Systems Administrator</td>
149   - <td>New York</td>
150   - </tr>
151   - <tr>
152   - <td>Greer</td>
153   - <td>Software Engineer</td>
154   - <td>London</td>
  91 + <td>ST-002</td>
  92 + <td>85.10.201.243</td>
  93 + <td>ARM</td>
155 94 </tr>
156 95 </tbody>
157 96 </table>
158 97 <div class="form-group">
159   - <input type="email" class="form-control" id="maj" placeholder="Nom de la maj" name="maj">
  98 + <input type="text" class="form-control" id="majName" placeholder="Nom de la maj" name="maj">
160 99 </div>
161 100 <div class="form-group">
162   - <input type="password" class="form-control" id="date" placeholder="date de la mise à jour" name="date">
  101 + <input type="date" class="form-control" id="majDate" placeholder="Date de la mise à jour" name="date">
163 102 </div>
164 103 <!-- Ajouter une liste qui montre les differents fichiers disponibles -->
165   - <button id="save_maj" type="submit" class="btn btn-primary">sauvegarder la mise à jour</button>
166   - <button id="run_maj" type="submit" class="btn btn-primary">lancer la mise à jour</button>
  104 + <button id="save_maj" type="submit" class="btn btn-primary">Sauvegarder la mise à jour</button>
  105 + <button id="run_maj" type="submit" class="btn btn-primary">Lancer la mise à jour</button>
  106 +
167 107 </div>
  108 +
  109 + <div class="modal fade" id="warningFilesNumber" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  110 + <div class="modal-dialog modal-dialog-centered" role="document">
  111 + <div class="modal-content">
  112 + <div class="modal-header">
  113 + <h5 class="modal-title" id="modal-title">Attention</h5>
  114 + <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  115 + <span aria-hidden="true">&times;</span>
  116 + </button>
  117 + </div>
  118 + <div id="modal-content" class="modal-body">
  119 + Veuillez choisir un ou plusieurs noeuds dans le tableau
  120 + </div>
  121 + <div class="modal-footer">
  122 + <button id="modal-button" type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
  123 + </div>
  124 + </div>
  125 + </div>
  126 + </div>
  127 +
  128 +
168 129 </div>
169 130  
170 131 </div>
... ... @@ -175,6 +136,6 @@
175 136 <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" charset="utf-8"></script>
176 137 <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
177 138 <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js" charset="utf-8"></script>
178   -<script th:src="@{/js/home.js}"></script>
  139 +<script th:src="@{/js/session.js}"></script>
179 140 </body>
180 141 </html>
... ...