Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // Esta es una variable global, que nos indica si estamos creando o editando una cancha.
- var EsNuevaCancha = true;
- $(document).ready(function () {
- getCanchas();
- // Cuando hacemos click en el botón nueva cancha, mostramos el modal con el formulario.
- $("#nueva-cancha-btn").click(function () {
- EsNuevaCancha = true;
- $("#cancha-modal").show();
- });
- // Cuando hacemos click en el botón Guardar del modal, si es una nueva cancha, llamamos al crear, y sino, al guardar.
- $("#guardar-cancha-btn").click(function () {
- if (EsNuevaCancha) {
- crearCancha();
- } else {
- guardarCancha();
- }
- });
- });
- function getCanchas() {
- $.ajax({
- url: "/api/",
- success: function (canchas) {
- // result = [{"nombre":"cuarta amarilla","direccion":"av calchaqui 3240","id":1},{"nombre":"la roca","direccion":"av irigoyen 23","id":3},{"nombre":"complejo SOS","direccion":"av calchaqui 3460","id":5},{"nombre":"sol de bosques","direccion":"ruta nacional 2 km 56","id":9},{"nombre":"stadio","direccion":"av san martin 3360","id":18},{"nombre":"planeta futbol","direccion":"miguel cane 330","id":24},{"nombre":"Cancha 5","direccion":"Francia 2622","id":25}];
- canchas.forEach(function (cancha) {
- // row = {"nombre":"cuarta amarilla","direccion":"av calchaqui 3240","id":1};
- agregarFila(cancha);
- });
- }
- });
- }
- function agregarFila(cancha) {
- // esta función, recibe la row, es decir, {"nombre":"cuarta amarilla","direccion":"av calchaqui 3240","id":1}
- var fila = getFilaDeCancha(cancha);
- $("#tabla-canchas").append(fila);
- }
- function getFilaDeCancha(cancha) {
- // lo importante acá, es que el id de cada fila, va a ser el id de la cancha. Así la podemos manipular después.
- return "<tr id='t-" + cancha.id + "'>" +
- "<td class='cancha-id'>" + cancha.id + "</td>" +
- "<td class='cancha-nombre'>" + cancha.nombre + "</td>" +
- "<td class='cancha-direccion'>" + cancha.direccion + "</td>" +
- "</tr>";
- }
- function templateBotonesDeAccion(id) {
- return "<td>" +
- "<span class='glyphicon glyphicon-trash' onclick=borrarCancha(" + id + ")></span>" +
- "<span class='glyphicon glyphicon-pencil' onclick=editarCancha(" + id + ")></span>" +
- "</td>";
- }
- function editarCancha(id) {
- // Seteamos esta variable en false, para saber que estamos editando una cancha al guardar.
- EsNuevaCancha = false;
- // Primero obtenemos la fila que queremos editar por el id.
- var fila = $("#" + id);
- // Dentro de la fila, buscamos por el nombre de la cancha, por la clase, y agarramos el texto.
- var nombre = fila.find(".cancha-nombre").text();
- var direccion = fila.find(".cancha-direccion").text();
- $("#nombre").val(nombre);
- $("#direccion").val(nombre);
- $("#cancha-modal").modal("show");
- }
- function guardarCancha() {
- // armamos un objeto con los valores requeridos por la api, levantando los valores de los inputs del modal.
- var cancha = {
- nombre: $("#nombre").val(),
- direccion: $("#direccion").val(),
- id: $("#id").val()
- };
- $.ajax({
- url: "/api/cancha",
- type: "PUT",
- data: cancha,
- success: function (resultado) {
- limpiarFormulario();
- // Llamamos a getCanchas para que nos refresque el listado de canchas (podrías hacerte el pija y actualizar la fila así no hace un request)
- getCanchas();
- // cerramos el modal
- $("#canchas-modal").modal("hide");
- }
- });
- }
- function limpiarFormulario() {
- // limpiamos cada input del formulario
- $("#nombre").val("");
- $("#direccion").val("");
- $("#id").val("");
- }
- function crearCancha() {
- // armamos un objeto con los valores requeridos por la api, levantando los valores de los inputs del modal.
- var cancha = {
- nombre: $("#nombre").val(),
- direccion: $("#direccion").val()
- };
- $.ajax({
- url: "/api/cancha",
- type: "POST",
- data: cancha,
- success: function (resultado) {
- // se supone que el resultado, debería ser el id de la cancha creada.
- cancha.id = resultado;
- // agregamos la cancha que recién creamos
- agregarFila(cancha);
- limpiarFormulario();
- // cerramos el modal
- $("#canchas-modal").modal("hide");
- }
- });
- }
- function borrarCancha(id) {
- // es una llamada ajax pedorra.
- $.ajax({
- url: "/api/cancha/" + id,
- type: "DELETE",
- success: function (result) {
- // Si la llamada fue exitosa, borro la fila entera con el método remove.
- $("#t-" + id).remove();
- }
- });
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement