eliminacion de Items

src/public/css/restaurant_dashMesero.css

@@ -66,17 +66,19 @@
     padding-top: 5px;
     position: fixed;
     top: 55px;
+    width: inherit;
 }
 
 .dash_titulo a {
     display: none;
 }
-.dash_opciones{
+
+.dash_opciones {
     display: inline;
     align-items: baseline
 }
 
-#observacion{
+#observacion {
     width: 100%;
     color: #000;
 }
@@ -86,17 +88,24 @@
     opacity: 1; 
   }*/
 
- /* DETALLE DE items en orden*/
+/* DETALLE DE items en orden*/
-#renderTab_listaItems{
+#renderTab_listaItems {
     position: fixed;
     top: 150px;
     bottom: 100px;
-    width: 35%;
+    width: -moz-available;
-    overflow: scroll;
+    width: -webkit-fill-available;
+    overflow: auto scroll;
 }
+
+#renderTab_listaItems ::-webkit-scrollbar {
+    display: none;
+}
+
 /*********** DASH PANEL FOOTER ***********/
 .dash_panelDetalleTotales {
-    width: 100%;
+    width: -moz-available;
+    width: -webkit-fill-available;
     height: 80px;
     background: #2b3c47;
     padding: 7px;
@@ -106,7 +115,7 @@
 
     display: grid;
     grid-gap: 2px;
-    grid-template-columns: 15% 10% 10%;
+    grid-template-columns: 35% 40% 20%;
     padding: 10px;
 }
 
@@ -115,11 +124,13 @@
     padding-top: 18px;
     cursor: pointer;
     text-align: center;
-}
-.footer_btn:hover {
     background: rgba(10, 120, 240, .5);
 }
 
+.footer_btn:hover {
+    background: rgba(110, 180, 255, 0.5);
+}
+
 .footer_total {
     text-align: right;
 }
@@ -129,49 +140,54 @@
 }
 
 /****  RENDERIZADO DE ITEMS CONSULTADOS ****/
-.content_itemsRender{
+.content_itemsRender {
     position: relative;
     width: 100%;
     padding: 5px;
     display: grid;
-    grid-template-columns: repeat(4,1fr);
+    grid-template-columns: repeat(4, 1fr);
     grid-gap: 5px;
 }
-.content_itemsRender .card{
+
+.content_itemsRender .card {
     position: relative;
     background: #1f497d;
     padding: 14px;
     justify-content: space-between;
     cursor: pointer;
-    
+
 }
-.content_itemsRender .card .card_head{
+
+.content_itemsRender .card .card_head {
     font-size: 14px;
     text-align: center;
 }
-.content_itemsRender .card .card_body{
+
+.content_itemsRender .card .card_body {
     display: flex;
-    
+
 }
-.content_itemsRender .card .card_body .card_numeros{
+
+.content_itemsRender .card .card_body .card_numeros {
     font-size: 36px;
     width: 130px;
 }
 
-.content_itemsRender .card .card_body img{
+.content_itemsRender .card .card_body img {
     width: 64px;
     height: 64px;
     border-radius: 50%;
     overflow: hidden;
     margin-left: 5px;
 }
-.content_itemsRender .card .card_footer{
+
+.content_itemsRender .card .card_footer {
     font-size: 8px;
 }
 
 
 /****  menu emergente debajo del avatar  ****/
-.menu_avatar{
+.menu_avatar {
     display: none;
     width: 180px;
     height: 150px;
@@ -183,27 +199,33 @@
     transition: 0.5s;
     box-shadow: 10px 10px 10px rgb(0, 0, 0);
 }
-.menu_avatar ul li{
+
+.menu_avatar ul li {
     position: relative;
     width: 100%;
     list-style: none;
     text-align: left;
     border-radius: 10px;
 }
-.menu_avatar ul li:hover{
+
+.menu_avatar ul li:hover {
     background: #2c5f77;
 }
-.menu_Avatar{
+
+.menu_Avatar {
     height: 30px;
-   cursor: pointer; 
+    cursor: pointer;
 }
-#btnMenu_salir{
+
-   margin-top: 10px; 
+#btnMenu_salir {
-}
-.bt_nueva{
     margin-top: 10px;
 }
-.menu_Avatar .icon{
+
+.bt_nueva {
+    margin-top: 10px;
+}
+
+.menu_Avatar .icon {
     margin: 5px 11px 10px 15px;
     font-size: 20px;
 }
@@ -223,23 +245,115 @@
     display: block;
 }
 */
-.label_textMovil{
+.label_textMovil {
     display: block;
 }
-.label_text{
+
-    padding : 5px;
+.label_text {
+    padding: 5px;
     display: inline-flex;
     height: 30px;
 }
 
+/******* CUADOR DE DIALOGOS ********/
+
+#eliminar {
+    background: rgb(10, 121, 240);
+}
+
+#agregar {
+    background: rgb(10, 121, 240);
+}
+
+#dialog {
+    background: rgb(21, 54, 89);
+    border-radius: 20px;
+    box-shadow: 20px 20px 20px rgba(0,0,0,.8);
+}
+
+#dialog button {
+    cursor: pointer;
+    width: 300px;
+    margin: 10px;
+    font-weight: bold;
+}
+
+.centrar {
+    padding: 10px;
+    position: fixed;
+    left: 40%;
+    top: 50%;
+}
+/****** SELECT TOPING *******/
+
+.select_topping {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  
+  .select_topping select {
+    background-color: #0563af;
+    padding: 12px;
+    width: 500px;
+    border: none;
+    font-size: 20px;
+    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
+    -webkit-appearance: button;
+    appearance: button;
+    outline: none;
+  }
+  
+  .select_topping::before {
+    content: "\f13a";
+    font-family: FontAwesome;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20%;
+    height: 100%;
+    text-align: center;
+    font-size: 28px;
+    line-height: 45px;
+    color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.1);
+    pointer-events: none;
+  }
+  
+  .select_topping:hover::before {
+    color: rgba(255, 255, 255, 0.6);
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  
+  .select_topping select option {
+    padding: 30px;
+  }
+
 @media(max-width:1700px) {
     .content_itemsRender {
         display: grid;
-        grid-template-columns: repeat(3,1fr);
+        grid-template-columns: repeat(3, 1fr);
         grid-gap: 5px;
-      }
+    }
 }
+
+@media(max-width:1200px) {
+    .content_itemsRender {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 5px;
+    }
+    #dialog button {
+        cursor: pointer;
+        width: 250px;
+        margin: 10px;
+        font-weight: bold;
+    }
+}
+
 @media(max-width:992px) {
+
     /**** ORDEN ****/
     .dash_container {
         position: relative;
@@ -270,7 +384,7 @@
     }
 
     /**** RENDER LISTA ITEMS ****/
-    #renderTab_listaItems{
+    #renderTab_listaItems {
         width: 100%;
     }
 
@@ -280,7 +394,7 @@
         display: none;
     }
 
-    
+
 
     .dash_panelDetalleTotales {
         display: grid;
@@ -288,12 +402,39 @@
         grid-template-columns: 15% 60% 10%;
     }
 
+    /******** cuadro de dialogos ********/
+    .centrar {
+        padding: 10px;
+        position: fixed;
+        left: 25%;
+        right: 25%;
+        top: 50%;
+    }
+    #dialog button {
+        cursor: pointer;
+        width: 120px;
+        margin: 10px;
+        font-weight: bold;
+    }
+    .bt_group{
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+    }
+    #dialog h2{
+        font-size: 22px;
+        text-align: center;
+    }
+    .select_topping select{
+        font: size 16px;
+        width: 360px;
+    }
 }
 
 @media(max-width:768px) {
-    .label_textTab{
+    .label_textTab {
         display: none;
     }
+
     .dash_grupoCardBox {
         position: relative;
         display: grid;
@@ -310,43 +451,82 @@
         cursor: pointer;
         font-size: 11px;
     }
+
     .dash_panelDetalleTotales {
         display: grid;
         grid-gap: 2px;
         grid-template-columns: 23% 40% 15%;
     }
+
     /*RENDER ITEMS X CAT*/
-    .content_itemsRender{
+    .content_itemsRender {
         position: relative;
         display: grid;
-        grid-template-columns: repeat(2,1fr);
+        grid-template-columns: repeat(2, 1fr);
     }
-    .content_itemsRender .card{
+
+    .content_itemsRender .card {
         padding: 5px;
     }
-    .content_itemsRender .card .card_head{
+
+    .content_itemsRender .card .card_head {
         font-size: 12px;
     }
-    .content_itemsRender .card .card_body .card_numeros{
+
+    .content_itemsRender .card .card_body .card_numeros {
         font-size: 22px;
         width: 48px;
     }
-    .content_itemsRender .card .card_body img{
+
+    .content_itemsRender .card .card_body img {
         width: 64px;
         height: 64px;
         border-radius: 50%;
         overflow: hidden;
         margin-left: 10px;
     }
+
     /**** RENDER TABLES ****/
-    #renderTab_listaItems{
+    #renderTab_listaItems {
         width: 100%;
     }
 
-    .label_textMovil{
+    .label_textMovil {
         display: none;
     }
-    .label_text{
+
+    .label_text {
         height: 20px;
+        width: 36px;
+        padding-left: 15px;
     }
+
+    /******** cuadro de dialogos ********/
+    .centrar {
+        padding: 10px;
+        position: fixed;
+        left: 10%;
+        right: 10%;
+        top: 50%;
+    }
+    
+    #dialog button {
+        cursor: pointer;
+        width: 90px;
+        margin: 10px;
+        font-weight: bold;
+    }
+    .bt_group{
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+    }
+    #dialog h2{
+        font-size: 18px;
+        text-align: center;
+    }
+    /*     SELECT TOPING     */
+    .select_topping select {
+        font-size: 15px;
+        width: 280px;
+      }
 }

src/public/js/app_restaurant_detallePed.js

@@ -76,9 +76,47 @@ function verificaExiste(cod,items) {
     });
     return est;
 }
-function add_toping(cod){
+
-    alert("add Toping Item: "+cod);
+
-}
 function eliminaItem(cod){
-    alert("Eliminar Item: "+cod);
+    var contHtml = `<h2>Desea Eliminar El Item</h2>
-}
+    <p>Se eliminara el item: ${cod}  de la Lista</p>
+    <div class="bt_group">
+    <button class="btn" onClick="elimina_itemLista('${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 elimina_itemLista(codItems){
+    var pos;
+    lista_items.forEach(element => {
+        if (element.codigo === codItems) {
+            pos = lista_items.indexOf(element);//posicion del vector
+            console.log("va eliminar el elemento: " + pos);
+        }
+    });
+    lista_items.splice(pos, 1);
+    render_tabla_items(lista_items);
+    window.dialog.close();
+}
+
+
+function add_toping(cod){
+    var contHtml = `<h2>Selecione un Toping para el Item: ${cod}</h2>
+    <br><br>
+    <div class="select_topping">
+        <select>
+            <option>Termino Crudo</option>
+            <option>Termino Medio</option>
+            <option>Termino Casi Cocido</option>
+        </select>
+    </div><br><br>
+    <div class="bt_group">
+        <button class="btn" onClick="">Aceptar</button>
+        <button class="btn" onclick="window.dialog.close();">Cancelar</button>
+    </div>`;
+    var mesg = document.getElementById("dialog");
+    mesg.innerHTML = contHtml;
+    window.dialog.showModal();
+}

src/public/js/app_restaurant_tabGen.js

@@ -79,7 +79,7 @@ async function generaCard_mesas(json) {
     var tab = `
     <div class="panel_table">
      <div class="panel_header">
-        <h2>Selecionar Origen para crear el Pedido</h2>
+        <h2>Seleccionar Origen para crear el Pedido</h2>
     </div>
     <table><thead><tr>${thead}</tr></thead><tbody>`;
     for (let key in json) {
@@ -248,7 +248,7 @@ async function CargaItems(gp_items) {
                                 <div class="card_nombre">${json[key].nombre}</div>
                             </div>
                             <div class="card_body">
-                                <div class="card_numeros">$ ${json[key].precio}</div>
+                                <div class="card_numeros">$ ${Number(json[key].precio).toFixed(2)}</div>
                                 <div class="card_iconBox">
                                     <img src="data:image/png;base64,${json[key].img}" alt="${json[key].nombre}" />
                                 </div>

src/views/app_restaurant.ejs

@@ -134,6 +134,24 @@
             </li>
         </ul>
     </div>
+    <dialog id="eliminar" class="centrar">
+        <h2>Este es el título de mi ventana modal</h2>
+        <p>Este es un texto de ejemplo dentro de una ventana modal</p>
+        <button class="btn">Guardar</button>
+        <button class="btn" onclick="window.eliminar.close();">Cerrar</button>
+    </dialog>
+    <dialog id="agregar" class="centrar">
+        <h2>Este es el título de mi ventana modal</h2>
+        <p>Este es un texto de ejemplo dentro de una ventana modal</p>
+        <div class="bt_group">
+            <button class="btn">Guardar</button>
+            <button class="btn" onclick="window.agregar.close();">Cerrar</button>
+        </div>
+    </dialog>
+
+    <dialog id="dialog" class="centrar">
+        
+    </dialog>
     <Script>
         function toggleMenu() {
             let toggle = document.querySelector('.toggle'); //selecionamos el boton menu