Modulo Web Restaurant Realizado.

README.md

@@ -11,5 +11,7 @@ express-fileupload
 
 npm install -s //-s para guardar
 
-npm install -s mysql express-myconnection express,morgan telegraf nodemon ejs express-fileupload
+npm install -s mysql express-myconnection express morgan telegraf nodemon ejs express-fileupload axios
 
+
+use https://fontawesome.com/search buscar iconos

src/config.js

@@ -1,11 +1,10 @@
 const config = {
     db:{
-        //host: '192.168.20.150', 
-        host: '127.0.0.1', 
+        host: '192.168.20.150', 
         port: 3306,
         user: 'admin',
         pswd: 'Dx.1706%',
-        db_a: 'TELCOTRONICS',
+        db_a: 'zuba',
         //db_a: 'facturacion',
         debg: false,
         sock: '/'

src/controladores/controlador_Apps.js

@@ -17,8 +17,8 @@ controlador.user = (req, res) => {
         res.json(err);
         next(err);
       } else {
-        var Origen = { usuarios: rows };
-        res.json(Origen);
+        var usr = { usuarios: rows };
+        res.json(usr);
       }
     });
   });

src/controladores/controlador_Clientes.js

@@ -15,6 +15,7 @@ controlador.verClientesJsonApp = (req, res) => {
       res.json(client);
       //res.render('clientesV',{       data:rows      });
     });
+    //conn.end();
   });
 };
 

src/controladores/controlador_General.js

@@ -27,7 +27,7 @@ controlador.app_login = (req, res) => {
 controlador.auth = (req, res) => {
   console.log(req.body);
   var pwd = stringTo_md5(req.body.password);
-  req.getConnection((err, conn) => {
+  req.getConnection((error, conn,next) => {
     conn.query(`SELECT * FROM usuarios WHERE n_sesion = ? and clave=?`, [req.body.usuario, pwd], (err, rows) => {
       if (err) {
         //res.json(err);
@@ -46,6 +46,7 @@ controlador.auth = (req, res) => {
         }
       }
     });
+    //conn.end();
   });
 
   //res.render('');

src/controladores/controlador_Items.js

@@ -218,4 +218,27 @@ controlador.cierresCaja = (req, res) => {
   });
 };
 
+//********* CONSULTA CATEGORIA DE ITEMS ****************//
+controlador.cat_json = (req, res) => {
+  req.getConnection((err, conn) => {
+    try {
+      conn.query('SELECT * FROM product_categorias', (err, rows) => {//se obtiene error o consulta filas(rows)
+        //conn.query('SELECT * FROM clientes LIMIT 62668,15', (err, rows) => {//se obtiene error o consulta filas(rows)
+        if (err) {
+          res.json(err);
+          next(err);
+        }
+        //console.log(rows);
+        //var test = {"Items":[{"idt_prdcto":"1","codigo_prdcto":"CODIGOTEST","detalle_prdcto":"ITEM GENERADO","describe_prdcto":"DESCRIPCION DE ITEMS"}]};
+        var itemsD = { Categorias: rows };
+        res.json(itemsD);
+        //res.render('clientesV',{       data:rows      });
+      });
+    } catch (err) {
+      res.json(err);
+      next(err);
+    }
+    //conn.end();
+  });
+}
 module.exports = controlador;

src/public/css/botones.css

@@ -0,0 +1,60 @@
+.buble_add{
+    width: 50px;
+    height: 50px;
+    background: #0791ec;
+    bottom: 10px;
+    border-radius: 50%;
+    padding-top: 7px;
+    padding-left: 17px;
+    z-index: 100;
+    position: fixed;
+    right: 30px;
+    bottom: 20px;
+}
+
+.bt_float{
+    background: #0791ec;
+    font-size: 24px;
+    text-align: center;
+    border-radius: 50%;
+}
+
+
+.tooltip {
+    padding: 18px 32px;
+    background: rgba(255, 255, 255, 0.8);
+    width: 220px;
+    border-radius: 5px;
+    text-align: center;
+    filter: drop-shadow(0 3px 5px #ccc);
+    line-height: 1.5;
+    display: none;
+    bottom: 80px;
+    right: 30px;
+
+    z-index: 100;
+    position: fixed;
+    color: #000000;
+    font-weight: bold;
+  }
+  
+  .tooltip:after {
+    content: "";
+    position: absolute;
+    bottom: -9px;
+    left: 85%;
+    margin-left: -9px;
+    width: 18px;
+    height: 18px;
+    background: rgba(255, 255, 255, 0.6);
+    transform: rotate(45deg);
+  }
+  
+  .tooltip-trigger:hover + .tooltip {
+    display: block;
+  }
+
+  #observacion{
+    margin-top: 5px;
+  }
+

src/public/css/dash_mesero.css

@@ -0,0 +1,190 @@
+.dash_container {
+    position: relative;
+    width: 100%;
+    display: grid;
+    grid-gap: 2px;
+    grid-template-columns: 2fr 2fr;
+}
+
+.dash_panelCategoria {
+    position: relative;
+    width: 100%;
+    padding: 5px;
+    display: grid;
+    background: #2b3c47;
+    /*grid-gap: 10px;
+    grid-template-columns: 1fr 12fr;*/
+}
+
+.dash_panelDetalle {
+    position: relative;
+    width: 100%;
+    padding: 5px;
+    display: grid;
+    background: #2b3c47;
+    /*grid-gap: 10px;
+    grid-template-columns: 1fr 12fr;*/
+}
+
+.dash_grupoCardBox {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 6px;
+}
+
+.dash_info_grupoCardBox {
+    width: 100%;
+    margin: 10px;
+}
+
+.dash_info_grupoCardBox a {
+    display: none;
+}
+
+.dash_grupoCardBox .card_cat {
+    position: relative;
+    background: #1f497d;
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
+
+.cardBoxDash .card_cat .card_nombre {
+    color: #999;
+}
+
+.cardBoxDash .card_cat .iconBox {
+    font-size: 16px;
+    color: rgb(154, 223, 255);
+}
+
+.dash_titulo {
+    padding-top: 5px;
+}
+
+.dash_titulo a {
+    display: none;
+}
+
+.dash_titulo input {
+    width: 100%;
+    color: #000;
+}
+
+/*.dash_titulo input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ 
+    color: #000;
+    opacity: 1; 
+  }*/
+/*********** DASH PANEL FOOTER ***********/
+.dash_panelDetalleTotales {
+    width: 100%;
+    height: 80px;
+    background: #2b3c47;
+    padding: 7px;
+    z-index: 100;
+    position: fixed;
+    bottom: 2px;
+
+    display: grid;
+    grid-gap: 2px;
+    grid-template-columns: 15% 10% 10%;
+    padding: 10px;
+}
+
+.footer_btn {
+    margin-bottom: 10px;
+    padding-top: 18px;
+    cursor: pointer;
+}
+.footer_btn:hover {
+    background: rgba(10, 120, 240, .5);
+}
+
+.footer_total {
+    text-align: right;
+}
+
+.footer_valores {
+    text-align: right;
+}
+/*
+.dash_panelCategoria .dash_info_grupoCardBox a:hover + #ver_cat{
+    display: none;
+}
+.dash_panelCategoria .dash_info_grupoCardBox a:hover + #ver_detalle{
+    display: block;
+}
+.dash_panelDetalle .dash_titulo a:hover + #ver_detalle{
+    display: none;
+}
+.dash_panelDetalle .dash_titulo a:hover + #ver_cat{
+    display: block;
+}
+*/
+@media(max-width:992px) {
+    .dash_panelDetalle .dash_titulo a {
+        display: block;
+        display: inline-block;
+        position: absolute;
+        right: 1px;
+    }
+
+
+    .dash_panelCategoria .dash_info_grupoCardBox a {
+        display: block;
+        display: inline-block;
+        position: absolute;
+        right: 1px;
+    }
+
+    .dash_info_grupoCardBox {
+        display: inline-block;
+    }
+
+    .dash_panelDetalle {
+        position: absolute;
+        right: 1px;
+        display: none;
+    }
+
+    .dash_container {
+        position: relative;
+        width: 100%;
+        display: grid;
+        grid-gap: 2px;
+        grid-template-columns: auto;
+    }
+
+    .dash_panelDetalleTotales {
+        display: grid;
+        grid-gap: 2px;
+        grid-template-columns: 15% 70% 10%;
+    }
+
+}
+
+@media(max-width:768px) {
+    .dash_grupoCardBox {
+        position: relative;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 6px;
+    }
+
+    .dash_grupoCardBox .card_cat {
+        position: relative;
+        background: #1f497d;
+        padding: 3px;
+        display: flex;
+        justify-content: space-between;
+        cursor: pointer;
+        font-size: 11px;
+    }
+    .dash_panelDetalleTotales {
+        display: grid;
+        grid-gap: 2px;
+        grid-template-columns: 23% 40% 15%;
+    }
+}

src/public/css/restaurant.css

@@ -212,6 +212,14 @@ body {
     font-size: 2.5em;
     color: rgb(154, 223, 255);
 }
+.cardBox .card_cat{
+    position: relative;
+    background: #1f497d;
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+}
 
 /********* TABLAS *********/
 

src/public/js/app_restaurant.js

@@ -3,28 +3,45 @@ async function ver_usuarios(){
     console.log(user);
 }
 
-async function mostrar_form(form_aRender){
-    console.log(form_aRender);
-    switch(form_aRender){
+async function mostrar_form(nombre_form_aRender){
+    console.log(nombre_form_aRender);
+    switch(nombre_form_aRender){
         case 'clientes': 
-            let cli = await get_html("/verClientesJsonApp");
-            await console.log(cli);
+            let cli = await get_json("/verClientesJsonApp");
+            var tabla = await generaTab_clientes(cli.Clientes);
+            await render(tabla);
             break;
         case 'pedidos': 
             let pedidos = await get_json("/consultaPedidos?origen=%");
             var thead = "<td>ID</td><td>Nombre</td><td>Fecha</td><td>Origen</td><td>Valor</td><td>Estado</td>";
-            let tabla = await generaTab_html(pedidos.ConsultaPedidos,thead);
+            var tabla = await generaTab_pedidos(pedidos.ConsultaPedidos,thead);
             await render(tabla);
             //await console.log(pedidos.ConsultaPedidos);
             break;
         case 'usuarios': 
             let user = await get_json("/users");
-            console.log(user);
+            var tabla = await generaTab_usuarios(user.usuarios);
+            await render(tabla);
             break;
         case 'dashboard': 
             let dash = await get_html("/dash_board");
             console.log(dash);
             break;
+        case 'mesas': 
+            let origen = await get_json("/origen_pedidos");
+            var card = await generaCard_mesas(origen.origen_pedidos);
+            await render(card);
+            break;
+        case 'menu': 
+            let menu = await get_json("/dash_board");
+            var card = await generaCard_platosMenu(menu.usuarios);
+            await render(card);
+            break;
+        case 'dashboard_mesero': 
+            let item_cat = await get_json("/categorias_json");
+            var card = await dashboard_mesero(item_cat.Categorias);
+            await render(card);
+            break;
     }
 }
 
@@ -66,31 +83,7 @@ async function render(dat_html) {
     contenedor.innerHTML = dat_html;
 }
 
-async function generaTab_html(json,heder_tab){
-    var tab = `
-    <div class="panel_table">
-     <div class="panel_header">
-        <h2>Pedidos Recientes</h2>
-        <input type="date" id="select_fecha" name="filtro_fecha">
-    </div>
-    <table><thead><tr>${heder_tab}</tr></thead><tbody>`;
-    for (let key in json) {
-        let valor = json[key].PedUsoPrdct_valor;
-        let fecha = json[key].PedUsoPrdct_reg;
-        let fila = `<tr>
-                    <td>${json[key].PedUsoPrdct_id}</td>
-                    <td>${json[key].client_nombre}</td>
-                    <td>${fecha.substr(0, 10)}</td>
-                    <td>${json[key].PedUsoPrdct_origen}</td>
-                    <td> ${valor.toFixed(2)}</td>
-                    <td><span class="estado ${json[key].PedUsoPrdct_estado}">${json[key].PedUsoPrdct_estado}</span></td>
-                </tr>`;
-        tab = tab+fila;
-    }
-    tab = tab+"</tbody></table></div>";
-    //console.log(json);
-    return tab;
-}
+
 async function generaCardUser(json,heder_tab){
     var tab = `
     <div class="panel_table">

src/public/js/app_restaurant_tabGen.js

@@ -0,0 +1,220 @@
+let num_mesa,mesa_nom;
+
+async function generaTab_pedidos(json, heder_tab) {
+    var tab = `
+    <div class="panel_table">
+     <div class="panel_header">
+        <h2>Pedidos Recientes</h2>
+        <input type="date" id="select_fecha" name="filtro_fecha">
+    </div>
+    <table><thead><tr>${heder_tab}</tr></thead><tbody>`;
+    for (let key in json) {
+        let valor = json[key].PedUsoPrdct_valor;
+        let fecha = json[key].PedUsoPrdct_reg;
+        let fila = `<tr>
+                    <td>${json[key].PedUsoPrdct_id}</td>
+                    <td>${json[key].client_nombre}</td>
+                    <td>${fecha.substr(0, 10)}</td>
+                    <td>${json[key].PedUsoPrdct_origen}</td>
+                    <td> ${valor.toFixed(2)}</td>
+                    <td><span class="estado ${json[key].PedUsoPrdct_estado}">${json[key].PedUsoPrdct_estado}</span></td>
+                </tr>`;
+        tab = tab + fila;
+    }
+    tab = tab + "</tbody></table></div>" + bt_add("add_pedido", "Nuevo Pedido");
+    //console.log(json);
+    return tab;
+}
+
+async function generaTab_clientes(json) {
+    var thead = "<td>ID Cliente</td><td>Nombre</td><td>email</td><td>Telefono</td><td>Direccion</td>";
+    var tab = `
+    <div class="panel_table">
+     <div class="panel_header">
+        <h2>Clientes</h2>
+        <input type="date" id="select_fecha" name="filtro_fecha">
+    </div>
+    <table><thead><tr>${thead}</tr></thead><tbody>`;
+    for (let key in json) {
+        let fila = `<tr>
+                    <td>${json[key].client_rucCed}</td>
+                    <td>${json[key].client_nombre}</td>
+                    <td>${json[key].client_email}</td>
+                    <td>${json[key].client_celular}</td>
+                    <td>${json[key].client_direccion}</td>
+                </tr>`;
+        tab = tab + fila;
+    }
+    tab = tab + "</tbody></table></div>";
+    //console.log(json);
+    return tab;
+}
+async function generaTab_usuarios(json) {
+    var std = "ACTIVO";
+    var thead = "<td>COD</td><td>Usuario</td><td>Nombre</td><td>ROL</td><td>Estado</td>";
+    var tab = `
+    <div class="panel_table">
+     <div class="panel_header">
+        <h2>Usuarios</h2>
+        <input type="date" id="select_fecha" name="filtro_fecha">
+    </div>
+    <table><thead><tr>${thead}</tr></thead><tbody>`;
+    for (let key in json) {
+        let fila = `<tr>
+                    <td>${json[key].cod_usr}</td>
+                    <td>${json[key].n_sesion}</td>
+                    <td>${json[key].nombre}</td>
+                    <td>${json[key].rol}</td>
+                    <td><span class="estado ${std}">${std}</span></td>
+                </tr>`;
+        tab = tab + fila;
+    }
+    tab = tab + "</tbody></table></div>";
+    //console.log(json);
+    return tab;
+}
+async function generaCard_mesas(json) {
+    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>
+    </div>
+    <table><thead><tr>${thead}</tr></thead><tbody>`;
+    for (let key in json) {
+        console.log(json[key].Estado);
+        if (json[key].Estado == 1) {
+            std = "LIBRE";
+            td = '<td><span class="estado ACTIVO">LIBRE</span></td>';
+        } else if (json[key].Estado == 0) {
+            std = "OCUPADA";
+            td = '<td><span class="estado ERROR">OCUPADA</span></td>';
+        }
+        let fila = `<tr onclick="comprovar_mesa('${json[key].id}','${json[key].Nombre}','${std}')">
+                    <td>${json[key].id}</td>
+                    <td>${json[key].Nombre}</td>
+                    <td>${json[key].Observacion}</td>
+                    ${td}
+                </tr>`;
+        tab = tab + fila;
+    }
+    tab = tab + "</tbody></table></div>" + bt_add("generar_menu", "Nueva Mesa/Orige");
+    //console.log(json);
+    return tab;
+}
+function comprovar_mesa(id,nombre,std){
+    num_mesa = id;
+    mesa_nom = nombre;
+    if(std=='LIBRE'){
+        mostrar_form('dashboard_mesero');
+    }else if(std=='OCUPADA'){
+        alert("Mesa Ocupada");
+    }
+    
+}
+async function generaCard_platosMenu(json) {
+    var std = "ACTIVO";
+    var thead = "<td>COD</td><td>Usuario</td><td>Nombre</td><td>ROL</td><td>Estado</td>";
+    var tab = `
+    <div class="panel_table">
+     <div class="panel_header">
+        <h2>Usuarios</h2>
+        <input type="date" id="select_fecha" name="filtro_fecha">
+    </div>
+    
+    <table><thead><tr>${thead}</tr></thead><tbody>`;
+    for (let key in json) {
+        let fila = `<tr>
+                    <td>${json[key].cod_usr}</td>
+                    <td>${json[key].n_sesion}</td>
+                    <td>${json[key].nombre}</td>
+                    <td>${json[key].rol}</td>
+                    <td><span class="estado ${std}">${std}</span></td>
+                </tr>`;
+        tab = tab + fila;
+    }
+    tab = tab + "</tbody></table></div>";
+    //console.log(json);
+    return tab;
+}
+
+async function dashboard_mesero(json_cat) {
+    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">
+            Categoria Items <a href="#" onclick="verDetalle(true)"><i class="fa fa-eye" aria-hidden="true"> Ver Detalle</i></a>
+        </div>
+        <div class="dash_grupoCardBox">`;
+    console.log("menu creado");
+    for (let key in json_cat) {
+        let fila = `<div class="card_cat">
+                        <div class="">
+                            <div>${json_cat[key].nom_categoria}</div>
+                        </div>
+                        <div class="iconBox">
+                            <i class="fa fa-cutlery" aria-hidden="true"></i>
+                        </div>
+                    </div>`;
+        card_cat = card_cat + fila;
+    }
+    var panel_pedido = `
+    <div class="dash_panelDetalle" id="ver_detalle">
+        <div class="dash_titulo">
+            <span>Mesa: ${mesa_nom}</span><span> Pedidos N#</span>
+            <a href="#" onclick="verDetalle(false)"><i class="fa fa-eye" aria-hidden="true">Agregar Items</i></a>
+            <input type="text" placeholder="Observaciones" id="observacion">
+        </div>
+        <div class="">
+            <label for="patio">Patio</label>
+            <input type="radio" id="patio" name="fav_language" value="patio" checked>
+            <label for="Llevar"> Llevar</label>
+            <input type="radio" id="Llevar" name="fav_language" value="Llevar">
+        </div>
+        <div class="card_table">
+            <table><thead><tr>${thead}</tr></thead><tbody></tbody></table>
+        </div>
+        <div class="dash_panelDetalleTotales">
+            <div class="footer_btn btn">Guardar</div>
+            <div class="footer_total">
+                <div><span>SubTotal:</span></div>
+                <div><span>I.V.A:</span></div>
+                <div><span>TOTAL:</span></div>
+            </div>
+            <div class="footer_valores">
+                <div>0.00</div>
+                <div>0.00</div>
+                <div>0.00</div>
+            </div>
+        </div>
+    </div>`;
+    return `<div class="dash_container">${card_cat}</div></div>${panel_pedido}</div>`;
+}
+
+//funcion para crear boton tipo burbuja flotante
+function bt_add(accion, msg) {
+    var toltip = `<div class="tooltip">Crear un ${msg}</div>`;
+    var btn = `<div class="buble_add tooltip-trigger"><a class="bt_float" href="#" onclick="ir_a('${accion}')"><span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span></a></div>`;
+    return btn + toltip;
+}
+function ir_a(ruta) {
+    switch (ruta) {
+        case "generar_menu": genera_menu();
+            break;
+        case "generar_menu":
+            break;
+    }
+    console.log(ruta);
+}
+function verDetalle(std){
+    console.log(std);
+    if(std){
+        document.getElementById('ver_cat').style.display='none';
+        document.getElementById('ver_detalle').style.display='block';
+        console.log(std);
+    }else{
+        document.getElementById('ver_cat').style.display='block';
+        document.getElementById('ver_detalle').style.display='none';
+    }
+    
+}

src/rutas/rt_items.js

@@ -22,6 +22,8 @@ rutas.post('/addItems/', controladorItems.guardarItems);//ver productos en modo
 rutas.get('/cierresCaja/', controladorItems.cierresCaja);//ver productos en modo json/get
 
 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
 
 //APP_SIGMA consultas
 rutas.get('/consultaItemsPrecios/', controladorItems.app_consultaItemsPrecios);//ver productos en modo json/post

src/views/app_restaurant.ejs

@@ -11,6 +11,8 @@
         integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
     <link rel="stylesheet" href="../css/restaurant.css">
     <link rel="stylesheet" href="../css/restaurant_form.css">
+    <link rel="stylesheet" href="../css/botones.css">
+    <link rel="stylesheet" href="../css/dash_mesero.css">
     <link rel="icon" sizes="64x64" href="../img/favicon_restaurant/favicon.ico">
 
 </head>
@@ -56,14 +58,14 @@
                     </a>
                 </li>
                 <li>
-                    <a href="#" onclick="mostrar_form('usuarios')">
+                    <a href="#" onclick="mostrar_form('mesas')">
                         <span class="icon"><i class="fa fa-cutlery" aria-hidden="true"></i></span>
                         <span class="title">Mesas</span>
                     </a>
                 </li>
 
                 <li>
-                    <a href="#" onclick="mostrar_form('usuarios')">
+                    <a href="#" onclick="mostrar_form('menu')">
                         <span class="icon"><i class="fa fa-coffee" aria-hidden="true"></i></span>
                         <span class="title">Menu</span>
                     </a>
@@ -127,6 +129,7 @@
         
     </Script>
     <script src="../js/app_restaurant.js"></script>
+    <script src="../js/app_restaurant_tabGen.js"></script>
 </body>
 
 </html>