Antoine Duquenoy / PFE_IMA5_2018_2019_P06

Commit eba991aee6e296201f1834222eca8914c740c293

Authored by Antoine Duquenoy
1 parent d0a03db7

Front-end : page de login et page d'accueil 

* Page de login composée d'un simple formulaire avec 'pseudo' et 'mot de passe'
* Page d’accueil avec header, tableau de noeuds (DataTables) et drop-zone pour les fichiers
Showing 6 changed files with 351 additions and 0 deletions   Show diff stats
Inline Side-by-side
Front/css/home.css 0 → 100644
  Show/Hide comments   View file @eba991a
... ... @@ -0,0 +1,12 @@
  1 +body { background-color: #FFF; }
  2 +
  3 +.upload-drop-zone {
  4 + height: 200px;
  5 + border-width: 2px;
  6 + margin-bottom: 20px;
  7 + color: #ccc;
  8 + border-style: dashed;
  9 + border-color: #ccc;
  10 + line-height: 200px;
  11 + text-align: center
  12 +}
... ...
Front/css/login.css 0 → 100644
  Show/Hide comments   View file @eba991a
... ... @@ -0,0 +1,54 @@
  1 +body { background-color: #E9EEF2; }
  2 +
  3 +.form-heading { color:#fff; font-size:23px; }
  4 +
  5 +.panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0; }
  6 +
  7 +.panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px; }
  8 +
  9 +.login-form .form-control {
  10 + background: #f7f7f7 none repeat scroll 0 0;
  11 + border: 1px solid #d4d4d4;
  12 + border-radius: 4px;
  13 + font-size: 14px;
  14 + height: 50px;
  15 + line-height: 50px;
  16 +}
  17 +
  18 +.main-div {
  19 + background: #ffffff none repeat scroll 0 0;
  20 + border-radius: 5px;
  21 + margin: 50px auto;
  22 + max-width: 38%;
  23 + padding: 50px 70px 70px 71px;
  24 +}
  25 +
  26 +.login-form .form-group {
  27 + margin-bottom:10px;
  28 +}
  29 +
  30 +.login-form { text-align:center;}
  31 +
  32 +.forgot a {
  33 + color: #777777;
  34 + font-size: 14px;
  35 + text-decoration: underline;
  36 +}
  37 +.login-form .btn.btn-primary {
  38 + background: #f0ad4e none repeat scroll 0 0;
  39 + border-color: #f0ad4e;
  40 + color: #ffffff;
  41 + font-size: 14px;
  42 + width: 100%;
  43 + height: 50px;
  44 + line-height: 50px;
  45 + padding: 0;
  46 +}
  47 +
  48 +.login-form .btn.btn-primary.reset {
  49 + background: #ff9900 none repeat scroll 0 0;
  50 +}
  51 +
  52 +.back { text-align: left; margin-top:10px; }
  53 +
  54 +.back a {color: #444444; font-size: 13px;text-decoration: none;}
... ...
Front/index.html 0 → 100644
  Show/Hide comments   View file @eba991a
... ... @@ -0,0 +1,177 @@
  1 +<!doctype html>
  2 +<html lang="en">
  3 + <head>
  4 + <!-- Required meta tags -->
  5 + <meta charset="utf-8">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7 +
  8 + <!-- Bootstrap CSS -->
  9 + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  10 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  11 + <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
  12 + <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css">
  13 + <link rel="stylesheet" href="css/home.css">
  14 +
  15 + <title>Accueil</title>
  16 + </head>
  17 + <body>
  18 +
  19 + <div id="app">
  20 +
  21 + <nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end" style="padding:15px; margin-bottom:50px;">
  22 + <a class="navbar-brand" href="#"><i class="fa fa-home" style="margin-right:10px;"></i>Gestion des noeuds</a>
  23 + <button class="btn btn-danger ml-auto mr-2"><i class="fa fa-sign-out-alt" style="margin-right:7px;"></i>Déconnexion</button>
  24 + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
  25 + <span class="navbar-toggler-icon"></span>
  26 + </button>
  27 + <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
  28 + <ul class="navbar-nav text-right">
  29 + <li class="nav-item active">
  30 + <a class="nav-link" href="#"><i class="fa fa-cog" style="margin-right:7px;"></i>Paramètres</a>
  31 + </li>
  32 + </ul>
  33 + </div>
  34 + </nav>
  35 +
  36 + <div class="container" style="padding-bottom: 50px;">
  37 +
  38 + <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Choix des noeuds</h1>
  39 +
  40 + <table id="nodes-table" class="table table-striped table-bordered dt-responsive nowrap">
  41 + <thead>
  42 + <tr>
  43 + <th>Nom</th>
  44 + <th>IP</th>
  45 + <th>Architecture</th>
  46 + </tr>
  47 + </thead>
  48 + <tbody>
  49 + <tr>
  50 + <td>Nixon</td>
  51 + <td>System Architect</td>
  52 + <td>Edinburgh</td>
  53 + </tr>
  54 + <tr>
  55 + <td>Winters</td>
  56 + <td>Accountant</td>
  57 + <td>Tokyo</td>
  58 + </tr>
  59 + <tr>
  60 + <td>Cox</td>
  61 + <td>Junior Technical Author</td>
  62 + <td>San Francisco</td>
  63 + </tr>
  64 + <tr>
  65 + <td>Kelly</td>
  66 + <td>Senior Javascript Developer</td>
  67 + <td>Edinburgh</td>
  68 + </tr>
  69 + <tr>
  70 + <td>Satou</td>
  71 + <td>Accountant</td>
  72 + <td>Tokyo</td>
  73 + </tr>
  74 + <tr>
  75 + <td>Williamson</td>
  76 + <td>Integration Specialist</td>
  77 + <td>New York</td>
  78 + </tr>
  79 + <tr>
  80 + <td>Chandler</td>
  81 + <td>Sales Assistant</td>
  82 + <td>San Francisco</td>
  83 + </tr>
  84 + <tr>
  85 + <td>Davidson</td>
  86 + <td>Integration Specialist</td>
  87 + <td>Tokyo</td>
  88 + </tr>
  89 + <tr>
  90 + <td>Hurst</td>
  91 + <td>Javascript Developer</td>
  92 + <td>San Francisco</td>
  93 + </tr>
  94 + <tr>
  95 + <td>Frost</td>
  96 + <td>Software Engineer</td>
  97 + <td>Edinburgh</td>
  98 + </tr>
  99 + <tr>
  100 + <td>Gaines</td>
  101 + <td>Office Manager</td>
  102 + <td>London</td>
  103 + </tr>
  104 + <tr>
  105 + <td>Flynn</td>
  106 + <td>Support Lead</td>
  107 + <td>Edinburgh</td>
  108 + </tr>
  109 + <tr>
  110 + <td>Marshall</td>
  111 + <td>Regional Director</td>
  112 + <td>San Francisco</td>
  113 + </tr>
  114 + <tr>
  115 + <td>Kennedy</td>
  116 + <td>Senior Marketing Designer</td>
  117 + <td>London</td>
  118 + </tr>
  119 + <tr>
  120 + <td>Fitzpatrick</td>
  121 + <td>Regional Director</td>
  122 + <td>London</td>
  123 + </tr>
  124 + <tr>
  125 + <td>Silva</td>
  126 + <td>Marketing Designer</td>
  127 + <td>London</td>
  128 + </tr>
  129 + <tr>
  130 + <td>Byrd</td>
  131 + <td>Chief Financial Officer (CFO)</td>
  132 + <td>New York</td>
  133 + </tr>
  134 + <tr>
  135 + <td>Little</td>
  136 + <td>Systems Administrator</td>
  137 + <td>New York</td>
  138 + </tr>
  139 + <tr>
  140 + <td>Greer</td>
  141 + <td>Software Engineer</td>
  142 + <td>London</td>
  143 + </tr>
  144 +
  145 + </tbody>
  146 + </table>
  147 +
  148 + <h1 style="margin-bottom:50px; margin-top:50px; border-bottom:1px solid #CCC; padding-bottom:20px;">Uploader un fichier</h1>
  149 +
  150 + <div class="panel panel-default">
  151 +
  152 + <h4>Choix du fichier</h4>
  153 +
  154 + <div class="upload-drop-zone" id="drop-zone">
  155 + Clic ou dépose un fichier ici
  156 + </div>
  157 +
  158 + <div class="progress">
  159 + <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
  160 + </div>
  161 +
  162 + </div>
  163 + </div>
  164 +
  165 + </div>
  166 +
  167 + </div>
  168 +
  169 + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  170 + <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  171 + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  172 + <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" charset="utf-8"></script>
  173 + <script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js" charset="utf-8"></script>
  174 + <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js" charset="utf-8"></script>
  175 + <script src="js/home.js"></script>
  176 + </body>
  177 +</html>
... ...
Front/js/home.js 0 → 100644
  Show/Hide comments   View file @eba991a
... ... @@ -0,0 +1,21 @@
  1 +var tableNodes;
  2 +
  3 +$(document).ready(function() {
  4 +
  5 + tableNodes = $('#nodes-table').DataTable( {
  6 + select: {
  7 + style: 'multi'
  8 + }
  9 + } );
  10 +
  11 + tableNodes.on( 'select', function (e, dt, type, indexes) {
  12 + var rowData = tableNodes.rows( indexes ).data().toArray();
  13 + console.log(JSON.stringify(rowData));
  14 + } );
  15 +
  16 + tableNodes.on( 'deselect', function (e, dt, type, indexes) {
  17 + var rowData = tableNodes.rows(indexes).data().toArray();
  18 + console.log(JSON.stringify(rowData));
  19 + } );
  20 +
  21 +} );
... ...
Front/js/login.js 0 → 100644
  Show/Hide comments   View file @eba991a
... ... @@ -0,0 +1,33 @@
  1 +
  2 +
  3 +new Vue({
  4 +
  5 + el: '#app',
  6 +
  7 + data: {
  8 + wrong: false,
  9 + user: {
  10 + login: "",
  11 + password: "",
  12 + }
  13 + },
  14 +
  15 + computed: {
  16 +
  17 + },
  18 +
  19 + methods: {
  20 + login: function () {
  21 + if(this.user.login == "test") {
  22 + this.wrong = true;
  23 + window.setTimeout(() =>
  24 + {
  25 + this.wrong = false
  26 + console.log("reset")
  27 + }
  28 + , 4000)
  29 + }
  30 + }
  31 + }
  32 +
  33 +})
... ...
Front/login.html 0 → 100644
  Show/Hide comments   View file @eba991a
... ... @@ -0,0 +1,54 @@
  1 +<!doctype html>
  2 +<html lang="en">
  3 + <head>
  4 + <!-- Required meta tags -->
  5 + <meta charset="utf-8">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7 +
  8 + <!-- Bootstrap CSS -->
  9 + <link rel="stylesheet" href="css/login.css">
  10 + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  11 +
  12 + <title>Connexion</title>
  13 + </head>
  14 + <body>
  15 +
  16 + <div id="app">
  17 + <div class="login-form">
  18 + <div class="main-div">
  19 + <div class="panel">
  20 + <h2>Formulaire de connexion</h2>
  21 + <p>Merci d'entrer votre login et mot de passe</p>
  22 + </div>
  23 +
  24 + <div v-if="wrong" class="alert alert-danger" role="alert">
  25 + Login ou mot de passe incorrect
  26 + </div>
  27 +
  28 + <form id="Login">
  29 +
  30 + <div class="form-group">
  31 + <input type="email" v-model="user.login" class="form-control" id="inputEmail" placeholder="Login">
  32 + </div>
  33 +
  34 + <div class="form-group">
  35 + <input type="password" v-model="user.password" class="form-control" id="inputPassword" placeholder="Password">
  36 + </div>
  37 +
  38 + <button @click.prevent="login" type="submit" class="btn btn-primary">Login</button>
  39 +
  40 + </form>
  41 + </div>
  42 + </div>
  43 + </div>
  44 +
  45 + <!-- Optional JavaScript -->
  46 + <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  47 +
  48 + <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  49 + <script src="js/login.js"></script>
  50 + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  51 + <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>
  52 + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  53 + </body>
  54 +</html>
... ...