app_restaurant:

creacion de pedidos y envio
creacion de toping
Creacion y filtros pos envios de pedidos
Creacion de ventanas emergentes de control post contuinidad.

src/public/css/restaurant_dashMesero.css

@@ -78,10 +78,8 @@
     align-items: baseline
 }
 
-#observacion {
-    width: 100%;
-    color: #000;
-}
+
+
 
 /*.dash_titulo input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ 
     color: #000;
@@ -268,7 +266,7 @@
 #dialog {
     background: rgb(21, 54, 89);
     border-radius: 20px;
-    box-shadow: 20px 20px 20px rgba(0,0,0,.8);
+    box-shadow: 20px 20px 20px rgba(0, 0, 0, .8);
 }
 
 #dialog button {
@@ -284,16 +282,17 @@
     left: 40%;
     top: 50%;
 }
+
 /****** SELECT TOPING *******/
 
-.select_topping {
+/*.select_topping {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-  }
-  
-  .select_topping select {
+}*/
+
+.select_topping select {
     background-color: #0563af;
     padding: 12px;
     width: 500px;
@@ -303,9 +302,10 @@
     -webkit-appearance: button;
     appearance: button;
     outline: none;
-  }
-  
-  .select_topping::before {
+}
+
+
+.select_topping::before {
     content: "\f13a";
     font-family: FontAwesome;
     position: absolute;
@@ -319,16 +319,50 @@
     color: rgba(255, 255, 255, 0.5);
     background-color: rgba(255, 255, 255, 0.1);
     pointer-events: none;
-  }
-  
-  .select_topping:hover::before {
+}
+
+.select_topping:hover::before {
     color: rgba(255, 255, 255, 0.6);
     background-color: rgba(255, 255, 255, 0.2);
-  }
-  
-  .select_topping select option {
+}
+
+.select_topping select option {
     padding: 30px;
-  }
+}
+/** Cuadro texto obciones toping **/
+.topping_container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+
+
+.texto_obsv {
+    width: 500px;
+    display: flex;
+    flex-direction: column;
+}
+
+.texto_obsv label {
+    font-size: 16px;
+    margin-bottom: 6px;
+}
+
+.texto_obsv input[type="text"] {
+    padding: 8px;
+    font-size: 18px;
+    border: none;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    outline: none;
+    width: 100%;
+    color: #000;
+}
+
 
 @media(max-width:1700px) {
     .content_itemsRender {
@@ -344,6 +378,7 @@
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 5px;
     }
+
     #dialog button {
         cursor: pointer;
         width: 250px;
@@ -410,24 +445,31 @@
         right: 25%;
         top: 50%;
     }
+
     #dialog button {
         cursor: pointer;
         width: 120px;
         margin: 10px;
         font-weight: bold;
     }
-    .bt_group{
+
+    .bt_group {
         display: grid;
         grid-template-columns: 2fr 1fr;
     }
-    #dialog h2{
+
+    #dialog h2 {
         font-size: 22px;
         text-align: center;
     }
-    .select_topping select{
+
+    .select_topping select {
         font: size 16px;
         width: 360px;
     }
+    .texto_obsv {
+        width: 360px;
+    }
 }
 
 @media(max-width:768px) {
@@ -509,24 +551,30 @@
         right: 10%;
         top: 50%;
     }
-    
+
     #dialog button {
         cursor: pointer;
         width: 90px;
         margin: 10px;
         font-weight: bold;
     }
-    .bt_group{
+
+    .bt_group {
         display: grid;
         grid-template-columns: 2fr 1fr;
     }
-    #dialog h2{
+
+    #dialog h2 {
         font-size: 18px;
         text-align: center;
     }
+
     /*     SELECT TOPING     */
     .select_topping select {
         font-size: 15px;
         width: 280px;
-      }
+    }
+    .texto_obsv {
+        width: 280px;
+    }
 }

src/public/js/app_restaurant_detallePed.js

@@ -1,9 +1,13 @@
+var clienteId = 9999999999;
+var usuario = "MOVIL_APP";
+var iva_valor = 0.15;
+
 var lista_items = [];
 var obj_item = {};
-function add_itemDetelle(codigo){
+function add_itemDetelle(codigo) {
     for (let key in json) {
-        if(json[key].codigo==codigo){
-            json[key].cantidad=1;
+        if (json[key].codigo == codigo) {
+            json[key].cantidad = 1;
             obj_item = json[key];
             lista_items.push(obj_item);
         }
@@ -12,7 +16,7 @@ function add_itemDetelle(codigo){
     console.log(lista_items);
 }
 
-function render_tabla_items(lista_items){
+function render_tabla_items(lista_items) {
     var render = document.getElementById('renderTab_listaItems');
     var std = "ACTIVO";
     var thead = "<td>COD</td><td>Cant</td><td>Detalle</td><td>Precio</td><td>Accion</td>";
@@ -49,23 +53,23 @@ function calc_detallePedido(lista_items) {
     let subtotal = document.getElementById("subtotal");
     let iva = document.getElementById("iva");
     let total = document.getElementById("total");
-    var ventas12=0;venta0=0;vSubtotal=0, vIva=0,vTotal=0;
+    var ventas12 = 0; venta0 = 0; vSubtotal = 0, vIva = 0, vTotal = 0;
     for (let key in lista_items) {
-        if(lista_items[key].tiene_iva==1){
-            ventas12 = lista_items[key].precio+ventas12;
-        }else{
-            venta0 = lista_items[key].precio+venta0;
+        if (lista_items[key].tiene_iva == 1) {
+            ventas12 = lista_items[key].precio + ventas12;
+        } else {
+            venta0 = lista_items[key].precio + venta0;
         }
     }
 
-    vIva = ventas12*0.12;
-    vSubtotal=venta0+ventas12;
-    vTotal=vIva+vSubtotal;
+    vIva = ventas12 * iva_valor;
+    vSubtotal = venta0 + ventas12;
+    vTotal = vIva + vSubtotal;
     subtotal.innerText = Number(vSubtotal).toFixed(2);
     iva.innerText = Number(vIva).toFixed(2);
     total.innerText = Number(vTotal).toFixed(2);
 }
-function verificaExiste(cod,items) {
+function verificaExiste(cod, items) {
     var est = false;
     items.forEach(element => {
         if (element.codigo === cod) {
@@ -78,7 +82,7 @@ function verificaExiste(cod,items) {
 }
 
 
-function eliminaItem(cod){
+function eliminaItem(cod) {
     var contHtml = `<h2>Desea Eliminar El Item</h2>
     <p>Se eliminara el item: ${cod}  de la Lista</p>
     <div class="bt_group">
@@ -88,7 +92,7 @@ function eliminaItem(cod){
     mesg.innerHTML = contHtml;
     window.dialog.showModal();
 }
-function elimina_itemLista(codItems){
+function elimina_itemLista(codItems) {
     var pos;
     lista_items.forEach(element => {
         if (element.codigo === codItems) {
@@ -102,35 +106,132 @@ function elimina_itemLista(codItems){
 }
 
 
-function add_toping(cod){
-    var contHtml = `<h2>Selecione un Toping para el Item: ${cod}</h2>
-    <br><br>
-    <div class="select_topping">
-        <select>
-            <option value="1">Termino Crudo</option>
-            <option value="2">Termino Medio</option>
-            <option value="3">Termino Casi Cocido</option>
-        </select>
-    </div><br><br>
-    <div class="bt_group">
-        <button class="btn" onClick="add_topingLista('${cod}')">Aceptar</button>
-        <button class="btn" onclick="window.dialog.close();">Cancelar</button>
-    </div>`;
+function add_toping(cod) {
+    var contHtml = `<h2>Seleccione un Toping para el Item: ${cod}</h2>
+                    <div class="topping_container">
+                        <div class="select_topping">
+                            <select>
+                                <option value="Término Crudo">Término Crudo</option>
+                                <option value="Término Medio">Término Medio</option>
+                                <option value="Término Casi Cocido">Término Casi Cocido</option>
+                            </select>
+                        </div>
+                        <div class="texto_obsv">
+                            <label for="obs_${cod}">Observaciones:</label>
+                            <input type="text" id="obs_${cod}" name="observaciones" placeholder="Escribe una observación...">
+                        </div>
+                    </div>
+
+                    <div class="bt_group">
+                        <button class="btn" onClick="add_topingLista('${cod}')">Aceptar</button>
+                        <button class="btn" onclick="window.dialog.close();">Cancelar</button>
+                    </div>`;
     var mesg = document.getElementById("dialog");
     mesg.innerHTML = contHtml;
     window.dialog.showModal();
 }
-function add_topingLista(codItems){
+function add_topingLista(codItems) {
     var sel = document.querySelector(".select_topping select");
+    var obs = document.getElementById("obs_" + codItems).value;
+    var topin_obs = sel.value + (obs ? " * " + obs : "");
     var pos;
     lista_items.forEach(element => {
         if (element.codigo === codItems) {
             pos = lista_items.indexOf(element);//posicion del vector
-            element.toping = sel.value;
-            console.log("Agregando Tp: " + sel.value);
+            element.toping = topin_obs;
+            console.log("Agregando Tp: " + topin_obs);
         }
     });
     //lista_items.splice(pos, 1);
     render_tabla_items(lista_items);
     window.dialog.close();
 }
+
+/***** Add Cliente *****/
+function pop_addCliente(id_cliente, nombre_cliente) {
+    var contHtml = `<h2>Desea Agregar Cliente</h2>
+    <p>Se agregara el cliente: ${nombre_cliente}  a la Mesa: ${mesa_nom}</p>
+    <div class="bt_group">
+    <button class="btn" onClick="add_clientePed('${id_cliente}')">Aceptar</button>
+    <button class="btn" onclick="window.dialog.close();">Cancelar</button></div>`;
+    var mesg = document.getElementById("dialog");
+    mesg.innerHTML = contHtml;
+    window.dialog.showModal();
+}
+function add_clientePed(id_cliente) {
+    clienteId = id_cliente;
+    console.log("Agregando Cliente: " + id_cliente);
+    window.dialog.close();
+}
+
+/***** enviar pedido *****/
+function pop_enviarPedido() {
+    if (lista_items.length == 0 || lista_items == undefined || lista_items == null || mesa_nom == undefined || mesa_nom == null) {
+        var contHtml = `<h2>Pedido Vacio</h2>
+        <p>No se puede enviar pedidos vacios</p>
+        <div class="bt_group">
+        <button class="btn" onclick="window.dialog.close();">Cerrar</button></div>`;
+    } else {
+        var contHtml = `<h2>Desea Enviar El Pedido</h2>
+        <p>Se enviara el pedido a la cocina</p>
+        <div class="bt_group">
+        <button class="btn" onClick="enviar_pedidoLista()">Aceptar</button>
+        <button class="btn" onclick="window.dialog.close();">Cancelar</button></div>`;
+    }
+    var mesg = document.getElementById("dialog");
+    mesg.innerHTML = contHtml;
+    window.dialog.showModal();
+}
+function enviar_pedidoLista() {
+    const itemCart = [];
+    for (let key in lista_items) {
+        obj_item = {
+            cod: lista_items[key].codigo,
+            nombre: lista_items[key].nombre,
+            cant: lista_items[key].cantidad,
+            precio: lista_items[key].precio,
+            descuento: "0", // valor fijo
+            gp_precio: lista_items[key].grupo_precio,
+            topings: "Agregado un toping de prueba",
+        }
+        itemCart.push(obj_item);
+    }
+    console.log(itemCart);
+    var json_pedido = {
+        "clienteId": clienteId,
+        "user": usuario,
+        "estado": "ACTIVO",
+        "valor": document.getElementById("total").innerText,
+        "iva": document.getElementById("iva").innerText,
+        "plataforma": "WEB-MOVIL",
+        "items": itemCart,
+        "origen": mesa_nom,
+    };
+    console.log(json_pedido);
+    var dat = { "orden_pedidos": JSON.stringify(json_pedido) };
+    //enviar json al servidor post
+    fetch('/recepcionPedidos_post', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(dat)
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Success:', data);
+            window.dialog.close();
+            var contHtml = `<h2>Pedido Enviado</h2>
+                            <p>${data.message}</p>
+                            <div class="bt_group">
+                            <button class="btn" onclick="window.dialog.close();">Cerrar</button></div>`;
+            var mesg = document.getElementById("dialog");
+            mesg.innerHTML = contHtml;
+            lista_items = [];
+            window.dialog.showModal();
+            mostrar_form('mesas')
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
+}

src/public/js/app_restaurant_tabGen.js

@@ -36,7 +36,7 @@ async function generaTab_clientes(json) {
     </div>
     <table><thead><tr>${thead}</tr></thead><tbody>`;
     for (let key in json) {
-        let fila = `<tr>
+        let fila = `<tr onclick="pop_addCliente('${json[key].client_rucCed}', '${json[key].client_nombre}')">
                     <td>${json[key].client_rucCed}</td>
                     <td>${json[key].client_nombre}</td>
                     <td>${json[key].client_email}</td>
@@ -179,7 +179,7 @@ async function dashboard_mesero(json_cat) {
             <table><thead><tr>${thead}</tr></thead><tbody></tbody></table>
         </div>
         <div class="dash_panelDetalleTotales">
-            <div class="footer_btn btn">Guardar</div>
+            <div class="footer_btn btn" onClick="pop_enviarPedido()">Guardar</div>
             <div class="footer_total">
                 <div><span>SubTotal:</span></div>
                 <div><span>I.V.A:</span></div>