SHARE
TWEET

VIEWALMACEN

a guest Oct 14th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* eslint-disable no-return-assign */
  2. /* eslint-disable no-unused-vars */
  3. /* eslint-disable indent */
  4. /**
  5.  * @file fichero view de la práctica 6.1
  6.  * Queremos introducir una mejora en el
  7.  * ejercicio 5.1.
  8.  *
  9.  * @author Jose Gracia Berenguer
  10.  * @link https://cipfpbatoi.github.io/materials/daw/dwc/01-js/06-eventos.html#escuchadores-de-eventos enunciado.
  11.  */
  12.  
  13.  
  14. /**
  15.  * Summary Añadir productos al almacén: deberemos pasarle el
  16.  * nombre del producto y su precio por unidad.
  17.  * Como código tomará automáticamente el siguiente
  18.  * al mayor del almacén (como si fuera un campo autonumérico).
  19.  * Llamado desde el index.html.
  20.  */
  21. function newProd() {
  22.     this.newProdAlmacen();
  23.     const tabla = document.getElementById('MiTabla');
  24.     const producto = almacen.products[almacen.products.length - 1];
  25.     tabla.innerHTML += this.createElementTable(producto);
  26.     setTimeout(() => {
  27.         this.deHighlightTr(document.getElementById(`trProducto${producto.id}`), 0);
  28.         this.actualizaImporteTotal();
  29.         this.deshabilitarDecrementarUnidades(almacen.products[almacen.products.length - 1]
  30.             .id);
  31.     }, 1000);
  32.     createEvents2(producto);
  33. }
  34.  
  35. function createEvents2(producto) {
  36.     document.getElementById(`removeTdBtn${producto.id}`).addEventListener('click', (event) => {
  37.         event.preventDefault();
  38.         console.log("hpña");
  39.         this.delProdTable(producto.id);
  40.     });
  41. }
  42.  
  43. /**
  44.  * Summary es llamada desde el index.html y crea una lista
  45.  * desordenada y lo pinta alfabéticamente o por número
  46.  * de unidades descendentes.
  47.  */
  48. function listProducts() {
  49.     const tipoOrden = document.getElementById('listadoAlmacenOpcion').value;
  50.     const lista = document.getElementById('listadoProductos');
  51.     lista.innerHTML = '';
  52.     if (tipoOrden === 'alfa') {
  53.         almacen.orderByName().forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
  54.     } else {
  55.         almacen.orderByUnits().forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
  56.     }
  57. }
  58.  
  59.  
  60. /**
  61.  * Summary es llamada desde el index.html y crea una lista
  62.  * desordenada y lo pinta alfabéticamente o por número
  63.  * de unidades descendentes y con un filtro de unidades
  64.  * con menos de X stock.
  65.  */
  66. function listUnderStock() {
  67.     const unidades = document.getElementById('uStockUnits');
  68.     const tipoOrden = document.getElementById('listadoUStockOpcion').value;
  69.     const lista = document.getElementById('listadoProductos');
  70.     lista.innerHTML = '';
  71.     if (tipoOrden === 'alfa') {
  72.         const arrayOrdenado = almacen.orderByName();
  73.         const uStock = almacen.underStockArray(unidades.value, arrayOrdenado);
  74.         uStock.forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
  75.     } else {
  76.         const arrayOrdenado = almacen.orderByUnits();
  77.         const uStock = almacen.underStock(unidades.value, arrayOrdenado).reverse();
  78.         uStock.forEach((element) => lista.innerHTML += `<li class='list-group-item'>${element}</li>`);
  79.     }
  80. }
  81.  
  82.  
  83. /**
  84.  * Summary se ejecuta cada vez que se llama a las funciones
  85.  * stockProd() o delProd(), y calcula el importe total
  86.  * de todos los productos y lo pinta debajo de la tabla.
  87.  */
  88. function actualizaImporteTotal() {
  89.     const importe = document.getElementById('importeTotal');
  90.     importe.innerHTML = `${almacen.totalImport()} €`;
  91. }
  92.  
  93.  
  94. /**
  95.  * Summary función que pinta en la tabla un producto.
  96.  * @param {object} producto producto a pintar.
  97.  */
  98. function createElementTable(producto) {
  99.     return `<tr id='trProducto${producto.id}' class='highlight'><td>${
  100.         producto.id}</td> <td>${producto.name}</td> <td>${
  101.         producto.units}</td> <td>${producto.price}</td> <td>${
  102.         producto.productImport().toFixed(2)
  103.         }</td> <td style="display:inline-flex">
  104.         <form style="border:none"><button id="removeTdBtn${
  105.        producto.id}" type="submit" class="btn btn-danger"><i class="material-icons">delete_forever</i></button>
  106.         </form>` +
  107.         `<form style="border:none"><button id="editTdBtn${
  108.        producto.id}" class="btn btn-info"><i class="material-icons">edit</i></button></form>
  109.     <form style="border:none"><button id="increment${
  110.            producto.id}" class="btn btn-dark increment"><i class="material-icons">arrow_upward</i></button></form>
  111.             <form style="border:none"><button id="decrement${
  112.                producto.id}" class="btn btn-dark decrement"><i class="material-icons">arrow_downward</i></button></form>
  113.                 </td></tr>`;
  114. }
  115.  
  116. /**
  117.  * Incrementa una unidad de un producto,
  118.  * llamado desde los botones de la tabla.
  119.  * @param {number} id del producto a incrementar.
  120.  */
  121. function incrementOneUnit(id) {
  122.     almacen.changeProductUnits(id, 1);
  123.     document.getElementById(`trProducto${id}`).innerHTML = createElementTable(almacen.findProduct(id));
  124.     setTimeout(() => {
  125.         deHighlightTr(document.getElementById(`increment${id}`), 1000);
  126.         actualizaImporteTotal();
  127.         habilitarDecrementarUnidades(id);
  128.     }, 0);
  129.     createEvent();
  130. }
  131.  
  132. /**
  133.  * Decrementa una unidad de un producto,
  134.  * llamado desde los botones de la tabla.
  135.  * @param {number} id del producto a incrementar.
  136.  */
  137. function decrementOneUnit(id) {
  138.     almacen.changeProductUnits(id, -1);
  139.     document.getElementById(`trProducto${id}`).innerHTML = createElementTable(almacen.findProduct(id));
  140.     setTimeout(() => {
  141.         deHighlightTr(document.getElementById(`decrement${id}`), 1000);
  142.         actualizaImporteTotal();
  143.         if (almacen.findProduct(id) !== undefined && almacen.findProduct(id).units === 0) {
  144.             deshabilitarDecrementarUnidades(id);
  145.         }
  146.     }, 0);
  147.     createEvent();
  148. }
  149.  
  150.  
  151. /**
  152.  * Función que añade un sombreado rojo al añadir o al modificar un
  153.  * producto (elemento) durante X tiempo (time).
  154.  *
  155.  * @param {object} elemento elemento a hacer highlight.
  156.  * @param {number} time milisegundos que va a estar highlighteado.
  157.  */
  158. function deHighlightTr(elemento, time) {
  159.     if (elemento.classList.contains('highlight')) {
  160.         setTimeout(() => {
  161.             elemento.classList.remove('highlight');
  162.             return true;
  163.         }, time);
  164.     } else {
  165.         setTimeout(() => {
  166.             elemento.classList.add('highlight');
  167.         }, 0);
  168.         setTimeout(() => {
  169.             elemento.classList.remove('highlight');
  170.             return true;
  171.         }, time);
  172.     }
  173. }
  174.  
  175. /**
  176.  * Deshabilita (añade la clase 'disabled')
  177.  * a una td que contenga la id del producto recibida.
  178.  * @param {number} id id del producto.
  179.  */
  180. function deshabilitarDecrementarUnidades(id) {
  181.     document.getElementById(`decrement${id}`).classList.add('disabled');
  182. }
  183.  
  184. /**
  185.  * Habilita (quita la clase 'disabled')
  186.  * a una td que contenga la id del producto recibida.
  187.  * @param {number} id id del producto.
  188.  */
  189. function habilitarDecrementarUnidades(id) {
  190.     document.getElementById(`decrement${id}`).classList.remove('disabled');
  191. }
  192.  
  193. /**
  194.  * Elimina visualmente una td de la tabla
  195.  * que contaenga la id del producto recibido.
  196.  * @param {number} id id del producto.
  197.  */
  198. function removeFromTableTr(id) {
  199.     document.getElementById(`trProducto${id}`).parentNode.removeChild(document.getElementById(`trProducto${id}`));
  200. }
  201.  
  202.  
  203. /**
  204.  * Summary se prepara el formulario de añadir
  205.  * elementos para que se puedan editar elementos
  206.  * se añaden y eliminan clases y se cambian nombres,
  207.  */
  208. function changeProdTable(id) {
  209.     const producto = almacen.findProduct(id);
  210.     document.getElementById('addProductsMain').classList.remove('hidden');
  211.     document.getElementById('newUdsForm').classList.remove('hidden');
  212.     document.getElementById('idHidden').classList.remove('hidden');
  213.     document.getElementById('idHiddenName').classList.remove('hidden');
  214.     document.getElementById('idHidden').value = producto.id;
  215.     document.getElementById('new-name').value = producto.name;
  216.     document.getElementById('newUnits').value = producto.units;
  217.     document.getElementById('new-price').value = producto.price;
  218.     document.getElementById('addProdBtn').innerHTML = 'Modificar';
  219.     document.getElementById('new-name').focus();
  220. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top