render de items en pedidos

src/controladores/controlador_Items.js

@@ -241,4 +241,22 @@ controlador.cat_json = (req, res) => {
     //conn.end();
   });
 }
+controlador.item_xCat = (req, res) => {
+  const catg = req.params;
+  console.log(catg);
+  req.getConnection((err, conn) => {
+    conn.query('select * from ver_inventario_precios_app where categoria = ? and grupo_precio = ?', [catg.cat,catg.gpp], (err, rows) => {
+      rows.map(
+        dat => {
+          dat.img = blob_a_b64(dat.img);
+        }
+      )
+      res.json(rows);
+      console.log(err);
+      //res.render('clientesV',{    data:rows     });
+    });
+  });
+};
+
+
 module.exports = controlador;

src/public/css/dash_mesero.css

@@ -53,6 +53,7 @@
 
 .cardBoxDash .card_cat .card_nombre {
     color: #999;
+    margin-bottom: 5px;
 }
 
 .cardBoxDash .card_cat .iconBox {
@@ -67,8 +68,12 @@
 .dash_titulo a {
     display: none;
 }
+.dash_opciones{
+    display: inline;
+    align-items: baseline
+}
 
-.dash_titulo input {
+#observacion{
     width: 100%;
     color: #000;
 }
@@ -137,7 +142,7 @@
     height: 30px;
    cursor: pointer; 
 }
-.bt_salir{
+#btnMenu_salir{
    margin-top: 10px; 
 }
 .bt_nueva{
@@ -147,6 +152,47 @@
     margin: 5px 11px 10px 15px;
     font-size: 20px;
 }
+/****  RENDERIZADO DE ITEMS  ****/
+.content_itemsRender{
+    position: relative;
+    width: 100%;
+    padding: 5px;
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    grid-gap: 5px;
+}
+.content_itemsRender .card{
+    position: relative;
+    background: #1f497d;
+    padding: 14px;
+    justify-content: space-between;
+    cursor: pointer;
+    
+}
+.content_itemsRender .card .card_head{
+    font-size: 14px;
+    text-align: center;
+}
+.content_itemsRender .card .card_body{
+    display: flex;
+    
+}
+.content_itemsRender .card .card_body .card_numeros{
+    font-size: 36px;
+    width: 110px;
+}
+
+.content_itemsRender .card .card_body img{
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-left: 10px;
+}
+.content_itemsRender .card .card_footer{
+    font-size: 8px;
+}
+
 
 /*
 
@@ -227,4 +273,27 @@
         grid-gap: 2px;
         grid-template-columns: 23% 40% 15%;
     }
+    /*RENDER ITEMS X CAT*/
+    .content_itemsRender{
+        position: relative;
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+    }
+    .content_itemsRender .card{
+        padding: 5px;
+    }
+    .content_itemsRender .card .card_head{
+        font-size: 12px;
+    }
+    .content_itemsRender .card .card_body .card_numeros{
+        font-size: 22px;
+        width: 48px;
+    }
+    .content_itemsRender .card .card_body img{
+        width: 64px;
+        height: 64px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin-left: 10px;
+    }
 }

src/public/js/app_restaurant.js

@@ -44,7 +44,7 @@ async function mostrar_form(nombre_form_aRender){
             break;
     }
 }
-
+//metodos de consultas asincronas 
 async function get_json(url) {
     var data;
     await fetch(url, {
@@ -77,6 +77,23 @@ async function get_html(url) {
         err => console.log('Solicitud fallida', err)
     ); // Capturar errores;
 }
+async function post_json(url,params) {
+    var data;
+    await fetch(url, {
+        method: 'POST',
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body:JSON.stringify(params),
+    })
+    .then(res => res.json())
+    .then(res => {
+        data = res;
+        return res;
+    })
+    .catch(err => console.log('Solicitud fallida', err)); // Capturar errores;
+    return data;
+}
 
 async function render(dat_html) {
     let contenedor = document.getElementById('contenido');

src/public/js/app_restaurant_tabGen.js

@@ -1,4 +1,4 @@
-let num_mesa,mesa_nom;
+let num_mesa, mesa_nom;
 
 async function generaTab_pedidos(json, heder_tab) {
     var tab = `
@@ -74,12 +74,12 @@ async function generaTab_usuarios(json) {
     return tab;
 }
 async function generaCard_mesas(json) {
-    var td,std;
+    var td, std;
     var thead = "<td>ID</td><td>MESAS</td><td>OBSERVACION</td><td>Estado</td>";
     var tab = `
     <div class="panel_table">
      <div class="panel_header">
-        <h2>Usuarios</h2>
+        <h2>Selecionar Origen para crear el Pedido</h2>
     </div>
     <table><thead><tr>${thead}</tr></thead><tbody>`;
     for (let key in json) {
@@ -103,12 +103,12 @@ async function generaCard_mesas(json) {
     //console.log(json);
     return tab;
 }
-function comprovar_mesa(id,nombre,std){
+function comprovar_mesa(id, nombre, std) {
     num_mesa = id;
     mesa_nom = nombre;
-    if(std=='LIBRE'){
+    if (std == 'LIBRE') {
         mostrar_form('dashboard_mesero');
-    }else if(std=='OCUPADA'){
+    } else if (std == 'OCUPADA') {
         alert("Mesa Ocupada");
     }
 
@@ -140,6 +140,7 @@ async function generaCard_platosMenu(json) {
 }
 
 async function dashboard_mesero(json_cat) {
+    var render_items = '<div id="container_items" class="content_itemsRender"></div>';
     var thead = "<td>Cantidad</td><td>Articulo</td><td>Precio + IVA</td>";
     var card_cat = `<div class="dash_panelCategoria" id="ver_cat">
         <div class="dash_info_grupoCardBox">
@@ -148,10 +149,8 @@ async function dashboard_mesero(json_cat) {
         <div class="dash_grupoCardBox">`;
     console.log("menu creado");
     for (let key in json_cat) {
-        let fila = `<div class="card_cat">
+        let fila = `<div class="card_cat btn" onClick="CargaItems('${json_cat[key].nom_categoria}')">
-                        <div class="">
+                        <div>${json_cat[key].nom_categoria}</div>
-                            <div>${json_cat[key].nom_categoria}</div>
-                        </div>
                         <div class="iconBox">
                             <i class="fa fa-cutlery" aria-hidden="true"></i>
                         </div>
@@ -161,18 +160,21 @@ async function dashboard_mesero(json_cat) {
     var panel_pedido = `
     <div class="dash_panelDetalle" id="ver_detalle">
         <div class="dash_titulo">
-            <span>Mesa: ${mesa_nom}</span><span> Pedidos N#</span>
+            <div class="">
-            <a href="#" onclick="verDetalle(false)"><i class="fa fa-eye" aria-hidden="true">Agregar Items</i></a>
+                <span>Mesa: ${mesa_nom}</span><span> Pedidos N#</span>
-            <input type="text" placeholder="Observaciones" id="observacion">
+                <a href="#" onclick="verDetalle(false)"><i class="fa fa-eye" aria-hidden="true">Agregar Items</i></a>
-        </div>
+                <input type="text" placeholder="Observaciones" id="observacion">
-        <div class="">
+            </div>
-            <label for="patio">Servir</label>
+            <div class="dash_opciones">
-            <input type="radio" id="Servir" name="fav_language" value="Servir" checked>
+                <label for="patio">Servir</label>
-            <label for="Llevar"> | Llevar</label>
+                <input type="radio" id="Servir" name="fav_language" value="Servir" checked>
-            <input type="radio" id="Llevar" name="fav_language" value="Llevar">
+                <label for="Llevar"> | Llevar</label>
-            <label for="Domicilio"> | Domicilio</label>
+                <input type="radio" id="Llevar" name="fav_language" value="Llevar">
-            <input type="radio" id="Domicilio" name="fav_language" value="Domicilio">
+                <label for="Domicilio"> | Domicilio</label>
+                <input type="radio" id="Domicilio" name="fav_language" value="Domicilio">
+            </div>
         </div>
+        
         <div class="card_table">
             <table><thead><tr>${thead}</tr></thead><tbody></tbody></table>
         </div>
@@ -190,7 +192,9 @@ async function dashboard_mesero(json_cat) {
             </div>
         </div>
     </div>`;
-    return `<div class="dash_container">${card_cat}</div></div>${panel_pedido}</div>`;
+    return `<div class="dash_container">${card_cat}</div>
+    <div class="dash_info_grupoCardBox">Menu Disponible</div>
+    ${render_items}</div>${panel_pedido}</div>`;
 }
 
 //funcion para crear boton tipo burbuja flotante
@@ -203,31 +207,62 @@ function ir_a(ruta) {
     switch (ruta) {
         case "generar_menu": genera_menu();
             break;
-        case "generar_menu":
+            case "add_pedido": mostrar_form('mesas');
             break;
     }
     console.log(ruta);
 }
-function verDetalle(std){
+function verDetalle(std) {
     console.log(std);
-    if(std){
+    if (std) {
-        document.getElementById('ver_cat').style.display='none';
+        document.getElementById('ver_cat').style.display = 'none';
-        document.getElementById('ver_detalle').style.display='block';
+        document.getElementById('ver_detalle').style.display = 'block';
         console.log(std);
-    }else{
+    } else {
-        document.getElementById('ver_cat').style.display='block';
+        document.getElementById('ver_cat').style.display = 'block';
-        document.getElementById('ver_detalle').style.display='none';
+        document.getElementById('ver_detalle').style.display = 'none';
     }
 
 }
 var bt_avatar = document.getElementById('user_avatar');
-bt_avatar.addEventListener('click',function(){
+bt_avatar.addEventListener('click', function () {
-    var menu  = document.getElementById('menu_userAvatar');// = 'block';
+    var menu = document.getElementById('menu_userAvatar');// = 'block';
-    if(menu.style.display == 'block'){
+    if (menu.style.display == 'block') {
-        menu.style.display='none';
+        menu.style.display = 'none';
-    }else if(menu.style.display == 'none'){
+    } else if (menu.style.display == 'none') {
-        menu.style.display='block';
+        menu.style.display = 'block';
-    }else{
+    } else {
-        menu.style.display='block';
+        menu.style.display = 'block';
     }
 });
+async function CargaItems(gp_items) {
+    var card="";
+    let json = await get_json("/item_xCat/" + gp_items+"&PUBLICO");
+    console.log(json);
+    for (let key in json) {
+        let fila = `
+                        <div class="card">
+                            <div class="card_head">
+                                <div class="card_nombre">${json[key].nombre}</div>
+                            </div>
+                            <div class="card_body">
+                                <div class="card_numeros">$ ${json[key].precio}</div>
+                                <div class="card_iconBox">
+                                    <img src="data:image/png;base64,${json[key].img}" alt="${json[key].nombre}" />
+                                </div>
+                            </div>
+                            <div class="card_footer">
+                                <div>${json[key].codigo}</div>
+                                <div>${json[key].descripcion}</div>
+                            </div>
+                        </div>
+                    `;
+        card = card + fila;
+    }
+    let contenedor = document.getElementById('container_items');
+    contenedor.innerHTML = card;
+}
+var bt_salir = document.getElementById('btnMenu_salir');
+bt_salir.addEventListener('click', function (e) {
+    console.log("Salir");
+});

src/rutas/rt_items.js

@@ -24,6 +24,7 @@ rutas.get('/cierresCaja/', controladorItems.cierresCaja);//ver productos en modo
 rutas.post('/json', controladorItems.json);//ver menu en modo json
 //APP_SIGMA consultas categorias
 rutas.get('/categorias_json', controladorItems.cat_json);//ver categorias items en modo json
+rutas.get('/item_xCat/:cat&:gpp', controladorItems.item_xCat);//ver productos x categoria en modo json/post
 
 //APP_SIGMA consultas
 rutas.get('/consultaItemsPrecios/', controladorItems.app_consultaItemsPrecios);//ver productos en modo json/post

src/views/app_restaurant.ejs

@@ -109,27 +109,27 @@
     <div class="menu_avatar" id="menu_userAvatar">
         <ul>
             <li>
-                <div class="menu_Avatar bt_nueva">
+                <div class="menu_Avatar bt_nueva" onclick="mostrar_form('mesas')">
                     <span class="icon"><i class="fa fa-plus"></i></span>
-                    <span class="title"> Nueva Orden</span>
+                    <span class="title">Nueva Orden</span>
                 </div>
             </li>
             <li>
                 <div class="menu_Avatar">
                     <span class="icon"><i class="fa fa-cog" aria-hidden="true"></i></span>
-                    <span class="title"> Configuracion</span>
+                    <span class="title">Configuracion</span>
                 </div>
             </li>
             <li>
                 <div class="menu_Avatar">
                     <span class="icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                    <span class="title"> Contraseña</span>
+                    <span class="title">Contraseña</span>
                 </div>
             </li>
             <li>
-                <div class="menu_Avatar bt_salir">
+                <div class="menu_Avatar" id="btnMenu_salir">
                     <span class="icon"><i class="fa fa-sign-out" aria-hidden="true"></i></span>
-                    <span class="title"> Cerrar Sesion</span>
+                    <span class="title">Cerrar Sesion</span>
                 </div>
             </li>
         </ul>