pablinux/APP-SIGMA-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

render de items en pedidos

Browse Source
This commit is contained in:
PABLINUX
2023-03-23 03:48:00 -05:00
parent 639e1c6bd8
commit 4858c12a4c
6 changed files with 189 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/public/css/dash_mesero.css
View File

@@ -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;
}
}

19
src/public/js/app_restaurant.js
View File

@@ -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');

115
src/public/js/app_restaurant_tabGen.js
View File

@@ -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,15 +103,15 @@ 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");
}
}
async function generaCard_platosMenu(json) {
var std = "ACTIVO";
@@ -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">
<div class="">
<div>${json_cat[key].nom_categoria}</div>
</div>
let fila = `<div class="card_cat btn" onClick="CargaItems('${json_cat[key].nom_categoria}')">
<div>${json_cat[key].nom_categoria}</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>
<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">Servir</label>
<input type="radio" id="Servir" name="fav_language" value="Servir" checked>
<label for="Llevar"> | Llevar</label>
<input type="radio" id="Llevar" name="fav_language" value="Llevar">
<label for="Domicilio"> | Domicilio</label>
<input type="radio" id="Domicilio" name="fav_language" value="Domicilio">
<div class="">
<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="dash_opciones">
<label for="patio">Servir</label>
<input type="radio" id="Servir" name="fav_language" value="Servir" checked>
<label for="Llevar"> | Llevar</label>
<input type="radio" id="Llevar" name="fav_language" value="Llevar">
<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){
document.getElementById('ver_cat').style.display='none';
document.getElementById('ver_detalle').style.display='block';
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';
} else {
document.getElementById('ver_cat').style.display = 'block';
document.getElementById('ver_detalle').style.display = 'none';
}
}
var bt_avatar = document.getElementById('user_avatar');
bt_avatar.addEventListener('click',function(){
var menu = document.getElementById('menu_userAvatar');// = 'block';
if(menu.style.display == 'block'){
menu.style.display='none';
}else if(menu.style.display == 'none'){
menu.style.display='block';
}else{
menu.style.display='block';
bt_avatar.addEventListener('click', function () {
var menu = document.getElementById('menu_userAvatar');// = 'block';
if (menu.style.display == 'block') {
menu.style.display = 'none';
} else if (menu.style.display == 'none') {
menu.style.display = 'block';
} else {
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");
});