From 66a8b43cf6538f7711ea1d1c359b851be206c0e5 Mon Sep 17 00:00:00 2001 From: Antoine Duquenoy Date: Wed, 3 Oct 2018 22:59:07 +0200 Subject: [PATCH] Intégration du front au projet --- PFE06/src/main/java/com/PFE/ServerManager/MainController.java | 20 ++++++++++++++++++-- PFE06/src/main/java/com/PFE/ServerManager/Role.java | 2 +- PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java | 4 +++- PFE06/src/main/resources/application.properties | 4 ++-- PFE06/src/main/resources/data.sql | 2 +- PFE06/src/main/resources/static/css/home.css | 12 ++++++++++++ PFE06/src/main/resources/static/css/login.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ PFE06/src/main/resources/static/js/home.js | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ PFE06/src/main/resources/templates/home.html | 246 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------- PFE06/src/main/resources/templates/login.html | 70 ++++++++++++++++++++++++++++++++++++++++++++++------------------------ PFE06/src/main/resources/templates/registration.html | 1 + 11 files changed, 490 insertions(+), 52 deletions(-) create mode 100644 PFE06/src/main/resources/static/css/home.css create mode 100644 PFE06/src/main/resources/static/css/login.css create mode 100644 PFE06/src/main/resources/static/js/home.js diff --git a/PFE06/src/main/java/com/PFE/ServerManager/MainController.java b/PFE06/src/main/java/com/PFE/ServerManager/MainController.java index a3599ad..13163af 100644 --- a/PFE06/src/main/java/com/PFE/ServerManager/MainController.java +++ b/PFE06/src/main/java/com/PFE/ServerManager/MainController.java @@ -1,6 +1,7 @@ package com.PFE.ServerManager; import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.http.HttpStatus; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.servlet.ModelAndView; @@ -10,10 +11,15 @@ import java.util.HashSet; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.security.core.Authentication; +import org.springframework.web.multipart.MultipartFile; +import org.springframework.http.ResponseEntity; +import javax.jws.WebParam; import javax.persistence.SequenceGenerator; +import javax.servlet.annotation.MultipartConfig; @Controller +@MultipartConfig(fileSizeThreshold = 20971520) public class MainController { @Autowired @@ -42,8 +48,13 @@ public class MainController { } @GetMapping(path="/registration") - public String registration() { - return "registration";//fait le lien automatiquement avec le page html du même nom //return "redirect:/...."; + public ModelAndView registration() { + ModelAndView modelAndView = new ModelAndView(); + Authentication auth = SecurityContextHolder.getContext().getAuthentication(); + Customer customer = customerRepository.findByPseudo(auth.getName()); + modelAndView.addObject("customerName", customer.getPseudo()); + modelAndView.setViewName("registration"); + return modelAndView; } @GetMapping(path="/denied") @@ -75,6 +86,11 @@ public class MainController { return modelAndView; } + @PostMapping(path="/file") + public ResponseEntity addFile(@RequestParam("file") MultipartFile uploadedFile, @RequestParam String filename, @RequestParam String nodes) { + return new ResponseEntity<>(HttpStatus.OK); + } + @GetMapping(path="/login") public ModelAndView login() { ModelAndView modelAndView = new ModelAndView(); diff --git a/PFE06/src/main/java/com/PFE/ServerManager/Role.java b/PFE06/src/main/java/com/PFE/ServerManager/Role.java index 0dacb98..f14ac34 100644 --- a/PFE06/src/main/java/com/PFE/ServerManager/Role.java +++ b/PFE06/src/main/java/com/PFE/ServerManager/Role.java @@ -6,7 +6,7 @@ import javax.persistence.*; @Table(name = "role") public class Role { @Id - @Column(name = "role_id",columnDefinition = "serial") + @Column(name = "role_id", columnDefinition = "serial") @GeneratedValue(strategy = GenerationType.AUTO) // inutile d'utiliser les lignes ci-dessous à moins que l'utilisateur n'ajoute des roles par une page Web //@GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "role_seq_gen") diff --git a/PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java b/PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java index bea11a8..ebdfe92 100644 --- a/PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java +++ b/PFE06/src/main/java/com/PFE/ServerManager/SecurityConfig.java @@ -38,6 +38,7 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter { .antMatchers("/registration").hasAuthority("ADMIN") .antMatchers("/login").permitAll() .antMatchers("/denied").permitAll() + .antMatchers("/css/**", "/js/**").permitAll() .anyRequest().authenticated() .and() .formLogin() @@ -48,9 +49,10 @@ public class SecurityConfig extends WebSecurityConfigurerAdapter { .and() .logout() .logoutRequestMatcher(new AntPathRequestMatcher("/logout")) - .logoutSuccessUrl("/") + .logoutSuccessUrl("/login") .and() .exceptionHandling() .accessDeniedPage("/denied"); } + } \ No newline at end of file diff --git a/PFE06/src/main/resources/application.properties b/PFE06/src/main/resources/application.properties index 08b2821..8940957 100644 --- a/PFE06/src/main/resources/application.properties +++ b/PFE06/src/main/resources/application.properties @@ -8,9 +8,9 @@ spring.jpa.hibernate.ddl-auto=create #"update" met à jour la base données #Postgres config : -spring.datasource.url=jdbc:postgresql://localhost:5432/sql_only +spring.datasource.url=jdbc:postgresql://localhost:3306/sql_only spring.datasource.username=postgres -spring.datasource.password=idalurf123 +spring.datasource.password=admin # montre les communications JPA avec la BDD diff --git a/PFE06/src/main/resources/data.sql b/PFE06/src/main/resources/data.sql index e23b382..8afda4a 100644 --- a/PFE06/src/main/resources/data.sql +++ b/PFE06/src/main/resources/data.sql @@ -3,5 +3,5 @@ INSERT INTO "role" VALUES (1,'ADMIN'); INSERT INTO "role" VALUES (2,'USER'); INSERT INTO "customer" VALUES (1,1,'$2a$10$GflhaD2IYuErynuOlxS2W.Gp1kXksVdiSviYN/lDYCsuH.lVm6Ph2','admin'); /*pseudo : admin // password : admin // role : ADMIN*/ INSERT INTO "customer_role" VALUES (1,1); -INSERT INTO "customer" VALUES (2,1,'$2a$10$0Fnls/gTQS1zA6rj1ZlxfuyyKNpCBDA1tcCqQMroPDIj1fRyhgv/O','user'); /*pseudo : user // password : password // role : USER*/ +INSERT INTO "customer" VALUES (2,1,'$2a$10$0Fnls/gTQS1zA6rj1ZlxfuyyKNpCBDA1tcCqQMroPDIj1fRyhgv/O','user'); /*pseudo : user // password : user // role : USER*/ INSERT INTO "customer_role" VALUES (2,2); \ No newline at end of file diff --git a/PFE06/src/main/resources/static/css/home.css b/PFE06/src/main/resources/static/css/home.css new file mode 100644 index 0000000..f1a3ac6 --- /dev/null +++ b/PFE06/src/main/resources/static/css/home.css @@ -0,0 +1,12 @@ +body { background-color: #FFF; } + +.upload-drop-zone { + height: 200px; + border-width: 2px; + margin-bottom: 20px; + color: #ccc; + border-style: dashed; + border-color: #ccc; + line-height: 200px; + text-align: center +} diff --git a/PFE06/src/main/resources/static/css/login.css b/PFE06/src/main/resources/static/css/login.css new file mode 100644 index 0000000..e7ffb69 --- /dev/null +++ b/PFE06/src/main/resources/static/css/login.css @@ -0,0 +1,54 @@ +body { background-color: #E9EEF2; } + +.form-heading { color:#fff; font-size:23px; } + +.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0; } + +.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px; } + +.login-form .form-control { + background: #f7f7f7 none repeat scroll 0 0; + border: 1px solid #d4d4d4; + border-radius: 4px; + font-size: 14px; + height: 50px; + line-height: 50px; +} + +.main-div { + background: #ffffff none repeat scroll 0 0; + border-radius: 5px; + margin: 50px auto; + max-width: 38%; + padding: 50px 70px 70px 71px; +} + +.login-form .form-group { + margin-bottom:10px; +} + +.login-form { text-align:center;} + +.forgot a { + color: #777777; + font-size: 14px; + text-decoration: underline; +} +.login-form .btn.btn-primary { + background: #f0ad4e none repeat scroll 0 0; + border-color: #f0ad4e; + color: #ffffff; + font-size: 14px; + width: 100%; + height: 50px; + line-height: 50px; + padding: 0; +} + +.login-form .btn.btn-primary.reset { + background: #ff9900 none repeat scroll 0 0; +} + +.back { text-align: left; margin-top:10px; } + +.back a {color: #444444; font-size: 13px;text-decoration: none;} diff --git a/PFE06/src/main/resources/static/js/home.js b/PFE06/src/main/resources/static/js/home.js new file mode 100644 index 0000000..71121cd --- /dev/null +++ b/PFE06/src/main/resources/static/js/home.js @@ -0,0 +1,127 @@ +$(document).ready(function() { + +/********** 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"); + + 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 { + if(readyToSend) { + modalContent.innerHTML = "Veuillez choisir un ou plusieurs noeuds !"; + } + else { + modalContent.innerHTML = "Veuillez choisir un fichier !"; + } + modalTitle.innerHTML = "Attention"; + $("#warningFilesNumber").modal() + } + }) + +} ); diff --git a/PFE06/src/main/resources/templates/home.html b/PFE06/src/main/resources/templates/home.html index 15c4273..bf8d9b3 100644 --- a/PFE06/src/main/resources/templates/home.html +++ b/PFE06/src/main/resources/templates/home.html @@ -1,21 +1,225 @@ - - - - - - Page d'accueil - - - -
-
Enregistrer des utilisateurs
-
-
-
- -
- -

est connecté(e) !

- - - \ No newline at end of file + + + + + + + + + + + + + + + + Accueil + + + +
+ + + +
+ +

Choix des noeuds

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomIPArchitecture
NixonSystem ArchitectEdinburgh
WintersAccountantTokyo
CoxJunior Technical AuthorSan Francisco
KellySenior Javascript DeveloperEdinburgh
SatouAccountantTokyo
WilliamsonIntegration SpecialistNew York
ChandlerSales AssistantSan Francisco
DavidsonIntegration SpecialistTokyo
HurstJavascript DeveloperSan Francisco
FrostSoftware EngineerEdinburgh
GainesOffice ManagerLondon
FlynnSupport LeadEdinburgh
MarshallRegional DirectorSan Francisco
KennedySenior Marketing DesignerLondon
FitzpatrickRegional DirectorLondon
SilvaMarketing DesignerLondon
ByrdChief Financial Officer (CFO)New York
LittleSystems AdministratorNew York
GreerSoftware EngineerLondon
+ +

Uploader un fichier

+ +
+ +

Choix du fichier

+ + +
+ Clic ou dépose un fichier ici +
+ +
+ +
+ +
+ + + +
+ +
+ + + + + + + + + + + + + + diff --git a/PFE06/src/main/resources/templates/login.html b/PFE06/src/main/resources/templates/login.html index 8284378..6292385 100644 --- a/PFE06/src/main/resources/templates/login.html +++ b/PFE06/src/main/resources/templates/login.html @@ -1,30 +1,52 @@ - - Page de connexion - - - -
-
Se connecter :
-
-
- - + + + + + + + + + Connexion + + + +
+