Skip to content

Commit 99909b8

Browse files
gerardpuiglgerardpuigl
committed
Boostrap, CSS, Modal & DataTables
1 parent 2dd6994 commit 99909b8

File tree

3 files changed

+164
-63
lines changed

3 files changed

+164
-63
lines changed

‎src/main/resources/static/index.css

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,47 @@
11
body::after {
22
content: "";
3-
background: url(/Users/gerardpuig/eclipse-workspace/ITAcademy_Exercicis/M13-HTTP-Service/src/main/resources/static/background.jpeg);
4-
opacity: 0.5;
3+
background: url(background.jpeg);
4+
opacity: 0.6;
55
top: 0;
66
left: 0;
77
bottom: 0;
88
right: 0;
99
position: absolute;
1010
z-index: -1;
11-
}
11+
}
12+
13+
.main-section{
14+
margin:auto;
15+
margin-top: 10%;
16+
background-color:rgb(244, 244, 244);
17+
border-radius: 5px;
18+
}
19+
20+
.Header{
21+
display: flex;
22+
padding: 1%;
23+
color: white;
24+
background-color:rgb(61, 94, 143);
25+
border-top-left-radius: 5px;
26+
border-top-right-radius: 5px;
27+
}
28+
29+
.headertitle{
30+
margin: 0 auto;
31+
color: white;
32+
margin-top: 4px;
33+
}
34+
35+
.table-header{
36+
display: flex;
37+
padding: 1%;
38+
padding-left:5%;
39+
background-color:rgb(89, 94, 104);
40+
border-top-left-radius: 5px;
41+
border-top-right-radius: 5px;
42+
43+
}
44+
45+
.tableBody{
46+
padding: 2%;
47+
}

‎src/main/resources/static/index.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ function updateTable() {
1313
"<td>" + employee.job + "</td>" +
1414
"<td>" + employee.salary + "</td>" +
1515
"<td>" +
16-
"<button type='button'onclick='editEmployee(" + employee.id + ")'>Modificar</button>" +
17-
"<button type='button' onclick='deleteEmployee(" + employee.id + ")'>Eliminar</button>" +
16+
"<button type='button' class='btn btn-light' data-toggle='modal' data-target='#modal' onclick='editEmployee(" + employee.id + ")'>Modificar</button>" +
17+
"<button type='button' class='btn btn-danger' onclick='deleteEmployee(" + employee.id + ")'>Eliminar</button>" +
1818
"</td>"
1919
});
2020
$('#employeeTable > tbody').append(table_data);
@@ -53,14 +53,16 @@ function sendEmployee() {
5353
}),
5454
success: function (data, textStatus, jQxhr) {
5555
updateTable();
56+
$('#modal').modal('hide');
5657
},
5758
error: function (xhr, textStatus, errorThrown) {
5859
console.log(textStatus);
5960
}
6061
});
6162
}
6263
$('#EmployeeForm').trigger('reset');
63-
$('#action').val('Afegir')
64+
$('#action').val('Afegir');
65+
$('#formType').html('Afegir nou');
6466
};
6567

6668
//Delete employee
@@ -87,8 +89,17 @@ function editEmployee(id) {
8789
$('#job').val(getJobCode(data.job));
8890
});
8991
$('#action').val('Actualitzar');
92+
$('#formType').html('Actualizar');
9093
};
9194

95+
//Set Form in New Employee Mode
96+
function newEmployee(){
97+
$('#EmployeeForm').trigger('reset');
98+
$('#action').val('Afegir');
99+
$('#formType').html('Afegir nou');
100+
}
101+
102+
92103
//Take the enum codes for Employee Jobs.
93104
function getJobCode(job) {
94105
if (job == 'Director de projectes') {

‎src/main/resources/templates/index.html

Lines changed: 111 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,133 @@
11
<!DOCTYPE html>
2-
<html lang="es" xmlns:th="http://www.thymeleaf.org">
2+
<html>
33

44
<head>
55
<meta charset="UTF-8">
66
<title>Spring - Crud Empleats</title>
77

8-
<!--Libreria Jquery carcada des de CDN-->
9-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
8+
<!-- JQUERY -->
9+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
10+
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
11+
12+
<!-- BOOTSTRAP -->
13+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
14+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
15+
16+
<link rel="stylesheet" type="text/css"
17+
href="index.css">
18+
</link>
19+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
20+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
21+
crossorigin="anonymous"></script>
1022

1123
<!-- Data table -->
12-
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
13-
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
14-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
15-
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
16-
<script type="text/javascript">
17-
$(document).ready(function () {
18-
//Asegurate que el id que le diste a la tabla sea igual al texto despues del simbolo #
19-
$('#employeeTable').DataTable();
20-
});
24+
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
25+
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
26+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
27+
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
28+
29+
<!-- Convertir table en Data table -->
30+
<script type="text/javascript">
31+
$(document).ready(function () {
32+
//Asegurate que el id que le diste a la tabla sea igual al texto despues del simbolo #
33+
$('#employeeTable').DataTable();
34+
});
2135
</script>
2236
</head>
2337

2438
<body>
25-
<div class="container"></div>
26-
<div>
27-
<H4>Empleats</H4><button type="submit">Nou Empleat</button>
28-
</div>
29-
<div>
30-
<table id="employeeTable" border="1">
31-
<thead>
32-
<tr>
33-
<th>#</th>
34-
<th>Nom</th>
35-
<th>Càrreg</th>
36-
<th>Salari</th>
37-
<th>Accions</th>
38-
</tr>
39-
</thead>
40-
<tbody></tbody>
41-
</table>
42-
</div>
43-
<div class="container"></div>
44-
<div>
45-
<H4>Crear Empleat</H4>
46-
</div>
47-
<div>
48-
<div class="container">
49-
<div></div>
50-
<form id="EmployeeForm">
51-
<div>
52-
<input type="text" id="idEmployee" hidden="true">
39+
<div class="container">
40+
<div class="main-section">
41+
<div class="col-sm-12">
42+
<div class="row Header">
43+
<div class="col-sm-10">
44+
<H4 class="headertitle">CRUD Empleats</H4>
45+
<h6>Exercici realitzat utilitzant: Spring Api Rest, Javascript, jquery i Bootstrap.</h6>
46+
</div>
47+
<div class="col-sm-2 my-auto">
48+
<button type="button" class="btn btn-light add" data-toggle="modal" data-target="#modal" onclick="newEmplyee();">
49+
Nou Empleat</button>
50+
</div>
5351
</div>
54-
<div>
55-
Nom: <input type="text" id="name">
52+
<div class="col-sm-12 tableBody">
53+
<table id="employeeTable" class="table table-bordered table-hover table-striped">
54+
<thead>
55+
<tr>
56+
<th style="width:5%">#</th>
57+
<th style="width:25%">Nom</th>
58+
<th style="width:25%">Càrreg</th>
59+
<th style="width:25%">Salari</th>
60+
<th style="width:20%">Accions</th>
61+
</tr>
62+
</thead>
63+
<tbody>
64+
<td> id </td>
65+
<td> employee.name </td>
66+
<td> employee.job </td>
67+
<td> employee.salary </td>
68+
<td>
69+
<button type='button' class="btn btn-light" data-toggle="modal" data-target="#modal" onclick='editEmployee(" + employee.id + ")'>Modificar</button>
70+
<button type='button' class="btn btn-danger" onclick='deleteEmployee(" + employee.id + ")'>Eliminar</button>
71+
</td>
72+
</tbody>
73+
</table>
5674
</div>
57-
<div>
58-
Càrreg:
59-
<select id="job">
60-
<option value="Default">Escull un càrreg</option>
61-
<option value="Director_Projectes">Director de projectes</option>
62-
<option value="Programador_Senior">Programador Senior</option>
63-
<option value="Programador_Mid">Programador Mid-Level</option>
64-
<option value="Programador_Junior">Programador Junior</option>
65-
<option value="Administratiu">Administratiu</option>
66-
</select>
75+
</div>
76+
</div>
77+
</div>
78+
79+
<!-- Modal -->
80+
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="#modaltitle" aria-hidden="true">
81+
<div class="modal-dialog modal-dialog-centered" role="document">
82+
<div class="modal-content">
83+
<div class="modal-header Header">
84+
<h5 class="modal-title" id="modaltitle"><span id=formType>Afegir nou</span> empleat
85+
</h5>
86+
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
87+
<span aria-hidden="true">&times;</span>
88+
</button>
89+
</div>
90+
<div class="modal-body">
91+
<form id="EmployeeForm">
92+
<div>
93+
<input type="text" id="idEmployee" hidden="true">
94+
</div>
95+
<div class="input-group mt-3 mb-3">
96+
<div class="input-group-prepend w-25">
97+
<span class="input-group-text w-100">Nom</span>
98+
</div>
99+
<input class="form-control" type="text" id="name" placeholder="Indrodueix el nom de l'empleat.">
100+
</div>
101+
102+
<div>
103+
<input type="text" id="idEmployee" hidden="true">
104+
</div>
105+
<div class="input-group mb-3">
106+
<div class="input-group-prepend w-25">
107+
<span class="input-group-text w-100" >Càrreg</span>
108+
</div>
109+
<select class="form-control" id="job">
110+
<option value="Default">Escull un càrreg</option>
111+
<option value="Director_Projectes">Director de projectes</option>
112+
<option value="Programador_Senior">Programador Senior</option>
113+
<option value="Programador_Mid">Programador Mid-Level</option>
114+
<option value="Programador_Junior">Programador Junior</option>
115+
<option value="Administratiu">Administratiu</option>
116+
</select>
117+
</div>
118+
</form>
67119
</div>
68-
<div>
69-
<br><br>
70-
<input type="submit" value="Afegir" id="action" onclick="sendEmployee();">
71-
<button type="reset">Cancel·lar</button>
120+
<div class="modal-footer">
121+
<button type="reset" class="btn btn-secondary cancel">Cancel·lar</button>
122+
<input type="submit" class="btn btn-info save" value="Afegir" id="action"
123+
onclick="sendEmployee();">
72124
</div>
73-
</form>
125+
</div>
74126
</div>
75127
</div>
128+
76129
<script type="text/javascript" src="index.js"></script>
130+
77131
</body>
78132

79133
</html>

0 commit comments

Comments
 (0)