eliminacion de Items

2023-03-27 01:10:54 -05:00
parent f9b5b716da
commit d9d7eb83cb
4 changed files with 290 additions and 54 deletions
--- a/src/public/css/restaurant_dashMesero.css
+++ b/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*/
-#renderTab_listaItems{
+/* DETALLE DE items en orden*/
+#renderTab_listaItems {
    position: fixed;
    top: 150px;
    bottom: 100px;
-    width: 35%;
-    overflow: scroll;
+    width: -moz-available;
+    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; 
-}
-.bt_nueva{
+
+#btnMenu_salir {
    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;
+      }
 }
--- a/src/public/js/app_restaurant_detallePed.js
+++ b/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();
+}
--- a/src/public/js/app_restaurant_tabGen.js
+++ b/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>
--- a/src/views/app_restaurant.ejs
+++ b/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