Modulo Web Restaurant Realizado.
This commit is contained in:
60
src/public/css/botones.css
Normal file
60
src/public/css/botones.css
Normal file
@@ -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;
|
||||
}
|
||||
|
||||
190
src/public/css/dash_mesero.css
Normal file
190
src/public/css/dash_mesero.css
Normal file
@@ -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%;
|
||||
}
|
||||
}
|
||||
@@ -172,4 +172,4 @@ _:-ms-input-placeholder, :root .demo-graph {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
@@ -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 *********/
|
||||
|
||||
|
||||
@@ -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">
|
||||
|
||||
220
src/public/js/app_restaurant_tabGen.js
Normal file
220
src/public/js/app_restaurant_tabGen.js
Normal file
@@ -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';
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user