Skip to content

D
daaexample
Commit 9ef1c405 authored by Administrator's avatar Administrator
1 Browse files
Options

Improves application appearance 

The application appearance has been improved applying Bootstrap formats.
parent 587a343e
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 57 deletions
src/main/java/es/uvigo/esei/daa/LoginFilter.java
View file @ 9ef1c405
...@@ -35,7 +35,7 @@ public class LoginFilter implements Filter { ...@@ -35,7 +35,7 @@ public class LoginFilter implements Filter {
private static final String LOGOUT_PATH = "/logout"; private static final String LOGOUT_PATH = "/logout";
private static final String REST_PATH = "/rest"; private static final String REST_PATH = "/rest";
private static final String[] PUBLIC_PATHS = new String[] { private static final String[] PUBLIC_PATHS = new String[] {
"/index.html" // Add the paths that can be publicly accessed (e.g. /js, /css...) "/index.html", "/js", "/css" // Add the paths that can be publicly accessed (e.g. /images...)
}; };
@Override @Override
......
src/main/webapp/css/login.css 0 → 100644
View file @ 9ef1c405
html, body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: red;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
#login {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#password {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
\ No newline at end of file
src/main/webapp/index.html
View file @ 9ef1c405
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DAA Example - Login</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body> <title>DAA Example - Login</title>
<form action="main.html" method="POST">
<div> <link rel="stylesheet" href="css/login.css">
Login: <input name="login" type="text" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</div> </head>
<div> <body class="text-center">
Password: <input name="password" type="password" /> <form class="form-singin" action="main.html" method="POST">
</div> <h1 class="h1 mb-3 font-weight-normal">DAA Example</h1>
<div>
<input type="submit" value="Login" /> <label for="login" class="sr-only">Login</label>
</div> <input id="login" name="login" type="text" class="form-control" placeholder="Login" required autofocus />
</form>
</body> <label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" class="form-control" placeholder="Password" required />
<button type="submit" class="btn btn-lg btn-primary btn-block mt-3">Login</button>
</form>
</body>
</html> </html>
\ No newline at end of file
src/main/webapp/js/view/people.js
View file @ 9ef1c405
...@@ -124,12 +124,11 @@ var PeopleView = (function() { ...@@ -124,12 +124,11 @@ var PeopleView = (function() {
var insertPeopleList = function(parent) { var insertPeopleList = function(parent) {
parent.append( parent.append(
'<table id="' + listId + '">\ '<table id="' + listId + '" class="table">\
<tr>\ <tr class="row">\
<th>Nombre</th>\ <th class="col-sm-4">Nombre</th>\
<th>Apellido</th>\ <th class="col-sm-5">Apellido</th>\
<th></th>\ <th class="col-sm-3">&nbsp;</th>\
<th></th>\
</tr>\ </tr>\
</table>' </table>'
); );
...@@ -137,25 +136,31 @@ var PeopleView = (function() { ...@@ -137,25 +136,31 @@ var PeopleView = (function() {
var insertPeopleForm = function(parent) { var insertPeopleForm = function(parent) {
parent.append( parent.append(
'<form id="' + formId + '">\ '<form id="' + formId + '" class="mb-5 mb-10">\
<input name="id" type="hidden" value=""/>\ <input name="id" type="hidden" value=""/>\
<input name="name" type="text" value="" />\ <div class="row">\
<input name="surname" type="text" value=""/>\ <div class="col-sm-4">\
<input id="btnSubmit" type="submit" value="Create"/>\ <input name="name" type="text" value="" placeholder="Nombre" class="form-control" required/>\
<input id="btnClear" type="reset" value="Limpiar"/>\ </div>\
<div class="col-sm-5">\
<input name="surname" type="text" value="" placeholder="Apellido" class="form-control" required/>\
</div>\
<div class="col-sm-3">\
<input id="btnSubmit" type="submit" value="Crear" class="btn btn-primary" />\
<input id="btnClear" type="reset" value="Limpiar" class="btn" />\
</div>\
</div>\
</form>' </form>'
); );
}; };
var createPersonRow = function(person) { var createPersonRow = function(person) {
return '<tr id="person-'+ person.id +'">\ return '<tr id="person-'+ person.id +'" class="row">\
<td class="name">' + person.name + '</td>\ <td class="name col-sm-4">' + person.name + '</td>\
<td class="surname">' + person.surname + '</td>\ <td class="surname col-sm-5">' + person.surname + '</td>\
<td>\ <td class="col-sm-3">\
<a class="edit" href="#">Edit</a>\ <a class="edit btn btn-primary" href="#">Editar</a>\
</td>\ <a class="delete btn btn-warning" href="#">Eliminar</a>\
<td>\
<a class="delete" href="#">Delete</a>\
</td>\ </td>\
</tr>'; </tr>';
}; };
......
src/main/webapp/main.html
View file @ 9ef1c405
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DAA Example</title>
</head> <title>DAA Example</title>
<body>
<div id="people-container"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>People</h1> </head>
<a id="#logout" href="logout">Logout</a> <body>
</div> <header>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>DAA Example</strong>
</a>
<a id="#logout" href="logout" class="btn btn-dark" role="button">Logout</a>
</div>
</div>
</header>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <div class="container">
<script type="text/javascript" src="js/dao/people.js"></script> <div id="people-container">
<script type="text/javascript" src="js/view/people.js"></script> <h1 class="display-5 mt-3 mb-3">People</h1>
<script type="text/javascript"> </div>
$(document).ready(function() { </div>
var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
view.init(); <script type="text/javascript" src="js/dao/people.js"></script>
}); <script type="text/javascript" src="js/view/people.js"></script>
</script> <script type="text/javascript">
</body> $(document).ready(function() {
var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
view.init();
});
</script>
</body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment