<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>CRUD - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div class="row">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<!-- FORM -->
<div class="col-md-4">
<form class="form-horizontal" id="form-edit-client">
<fieldset>
<!-- Form Name -->
<legend>Agregar Nueva Categoria</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-1 control-label" for="categoria-name">
Nombre</label>
<div class="col-md-12">
<input id="categoria-name" name="categoria-name" type="text" placeholder="nombre de tu categoria" class="form-control input-md">
</div>
</div>
</fieldset>
</form>
<div class="form-group">
<label class="col-md-4 control-label" for="btn-save"></label>
<div class="col-md-4" id="saveupdate">
<button id="btn-save" name="btn-save" class="btn btn-success" onclick="addCategoria()">Guardar categoria</button>
</div>
</div>
</div>
<div class="col-md-8">
<legend>List of clients</legend>
<table class="table table-bordered table-condensed table-hover">
<thead>
<tr>
<td>Name</td>
<th>Email</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="form-list-client-body">
</tbody>
</table>
</div>
<!-- LIST -->
<div class=col-md-12>
</div>
<br>
<!-- view -->
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>
var form = document.getElementById("form");
var inputIdStudent = document.getElementById("idStudent");
var inputFirstname = document.getElementById("categoria-name");
var labelFirstname = document.getElementById("categoria-name");
var inputLastname = document.getElementById("lastname");
var labelLastname = document.getElementById("labelLastname");
var btnCreateStudent = document.getElementById("createStudent");
var btnDeleteStudent = document.getElementById("deleteStudent");
var btnEditStudent = document.getElementById("editStudent");
var btnCancel = document.getElementById("cancelEdit");
var listStudents = document.getElementById("listStudents");
var json = document.getElementById("json");
var searchWord = document.getElementById("search");
function Student(id,firstname,lastname){
this.id = id;
this.firstname = firstname;
this.lastname = lastname;
}
Student.prototype = {
setId : function (value){
this.id = value;
},
getId : function(){
return this.id;
},
setFirstname : function (value){
this.firstname = value;
},
getFirstname : function(){
return this.firstname;
},
setLastname : function (value){
this.lastmame = value;
},
getLastname : function(){
return this.lastname;
}
}
function ControllerStudent(){
this.listStudents = [];
this.id = 0;
}
ControllerStudent.prototype = {
create : function(firstname,lastname){
var student = new Student(this.id,firstname,lastname);
this.listStudents.push(student);
this.id += 1;
return student;
},
search : function(id){
var student = null;
for (x=0;x<this.listStudents.length;x++)
{
if (this.listStudents[x].getId()==id)
{
student = this.listStudents[x];
}
}
return student;
},
delete : function(student){
elementList = document.querySelectorAll("tr");
var idStudent = student.getId();
for (x=0;x<elementList.length;x++){
if (elementList[x].getAttribute("id") == idStudent )
{
this.listStudents.splice(x,1);
listStudents.removeChild(elementList[x]);
}
}
},
update : function(student){
var oldStudent = this.search(student.getId());
for (x=0;x<this.listStudents.length;x++)
{
if (this.listStudents[x].id == oldStudent.getId())
{
this.listStudents[x] = student;
}
}
},
listAll : function(){
return listStudents;
},
showAll : function(){
var contoller = this;
for (x=0;x<this.listStudents.length;x++){
var ul = document.createElement("ul");
ul.setAttribute("id",this.listStudents[x].getId());
var liId = document.createElement("li");
liId.innerHTML = this.listStudents[x].getId();
var liFirstname = document.createElement("li");
liFirstname.innerHTML = this.listStudents[x].getFirstname();
var liLastname = document.createElement("li");
liLastname.innerHTML = this.listStudents[x].getLastname();
ul.appendChild(liId);
ul.appendChild(liFirstname);
ul.appendChild(liLastname);
listStudents.appendChild(ul);
ul.onclick = function(){
var id = this.getAttribute("id");
var student = contoller.search(id);
inputIdStudent.value = student.getId();
inputFirstname.value = student.getFirstname();
inputLastname.value = student.getLastname();
btnCancel.style.display = "block";
btnEditStudent.style.display = "block";
btnDeleteStudent.style.display = "block";
btnCreateStudent.style.display = "none";
}
}
},
show : function(newStudent){
var contoller = this;
elementList = document.querySelectorAll("tr");
var idStudent = newStudent.getId();
var tr = document.createElement("tr");
tr.setAttribute("id",newStudent.getId());
var liId = document.createElement("td");
liId.innerHTML = newStudent.getId();
var liFirstname = document.createElement("td");
liFirstname.innerHTML = newStudent.getFirstname();
var liLastname = document.createElement("td");
liLastname.innerHTML = newStudent.getLastname();
var action = document.createElement("td");
var editing = document.createElement("span");
editing.setAttribute("class","label label-info");
editing.innerHTML = "Editing";
action.appendChild(editing);
editing.style.visibility = "hidden";
editing.setAttribute("id","edit"+newStudent.getId());
tr.appendChild(liId);
tr.appendChild(liFirstname);
tr.appendChild(liLastname);
tr.appendChild(action);
var find = false;
for (x=0;x<elementList.length;x++){
if (elementList[x].getAttribute("id") == idStudent )
{
listStudents.replaceChild(tr,elementList[x]);
var find = true;
}
}
if (!find) listStudents.appendChild(tr);
tr.onclick = function(){
editing = document.getElementById("edit"+inputIdStudent.value);
if (editing!=null) editing.style.visibility = "hidden";
var id = this.getAttribute("id");
var student = contoller.search(id);
inputIdStudent.value = student.getId();
inputFirstname.value = student.getFirstname();
inputLastname.value = student.getLastname();
btnCancel.style.display = "block";
btnEditStudent.style.display = "block";
btnDeleteStudent.style.display = "block";
btnCreateStudent.style.display = "none";
btnCreateStudent.style.display = "none";
editing = document.getElementById("edit"+id);
editing.style.visibility = "visible";
}
}
}
var controllerStudent = new ControllerStudent();
btnCreateStudent.onclick = function(event){
event.preventDefault();
if (inputFirstname.value!="" && inputLastname.value!="")
{
var newStudent = controllerStudent.create(inputFirstname.value,inputLastname.value);
controllerStudent.show(newStudent);
inputFirstname.value = "";
inputLastname.value = "";
json.innerHTML = JSON.stringify(newStudent);
}
else{
}
}
form.onsubmit = function(event){
event.preventDefault();
}
btnEditStudent.onclick = function(event){
event.preventDefault();
var student = new Student(inputIdStudent.value,inputFirstname.value,inputLastname.value);
controllerStudent.update(student);
controllerStudent.show(student);
json.innerHTML = JSON.stringify(student);
}
btnCancel.onclick = function(event){
event.preventDefault();
btnCancel.style.display = "none";
btnEditStudent.style.display = "none";
btnDeleteStudent.style.display = "none";
btnCreateStudent.style.display = "block";
inputFirstname.value = "";
inputLastname.value = "";
editing = document.getElementById("edit"+inputIdStudent.value);
editing.style.visibility = "hidden";
}
btnDeleteStudent.onclick = function(event){
event.preventDefault();
var student = new Student(inputIdStudent.value,inputFirstname.value,inputLastname.value);
controllerStudent.delete(student);
btnCancel.style.display = "none";
btnEditStudent.style.display = "none";
btnDeleteStudent.style.display = "none";
btnCreateStudent.style.display = "block";
inputFirstname.value = "";
inputLastname.value = "";
}
searchWord.onkeyup = function(){
var searchw = this.value;
var students = controllerStudent.listStudents;
for (x=0;x<students.length;x++){
var lengthWord = searchw.length;
var tr = document.getElementById(students[x].getId());
if (searchw != (students[x].getFirstname()).substring(0,lengthWord))
{
tr.style.display = "none";
}
else
{
tr.style.display = "table-row";
}
}
}
