PEDIDOS EN MODULO RESTAURANTE DEL

src/public/css/restaurant.css

@@ -162,6 +162,7 @@ body {
     position: absolute;
     left: 15px;
     top: 4px;
+    color: #999;
 }
 .user{
     position: relative;
@@ -358,6 +359,19 @@ body {
 }
 
 /**** MODO RESPONSIVO *****/
+@media(max-width:1400px){
+    .detalles .card_table {
+        position: relative;
+        padding: 20px;
+        padding-top: 10px;
+        display: grid;
+        min-width: auto; 
+        background: #1F497D;
+    }
+    .card_table{
+        min-width: none;
+    }
+}
 @media(max-width:992px){
     .navigation{
         left: -250px;

src/public/css/restaurant_form.css

@@ -0,0 +1,112 @@
+/********* TABLAS *********/
+.panel_header{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.panel_header .h2{
+    font-weight: 600;
+}
+.panel_header input{
+    position: relative;
+    padding: 5px;
+    background: rgba(10, 10, 10, 0.45);
+    text-decoration: none;
+    border-radius: 6px;
+}
+
+.panel_table table{
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+    overflow: auto;
+}
+.panel_table table thead td{
+    font-weight: 600;
+    background:rgba(10, 10, 10, 0.2)
+}
+.panel_table table tr{
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.panel_table table tr:last-child{
+    border-bottom: none;
+}
+.panel_table table tr:hover{
+    background: rgba(76, 144, 247, 0.5);
+    color:rgba(10, 10, 10, 0.45);
+    cursor: pointer;
+}
+.panel_table table tr td{
+    padding: 9px 5px;
+}
+.panel_table table tr td:nth-child(2),.panel_table table tr td:nth-child(2){
+    text-align: center;
+    padding-right: 20px;
+}
+.panel_table table tr td:nth-child(3),.panel_table table tr td:nth-child(3){
+    text-align: left;
+    padding-right: 20px;
+}
+.panel_table table tr td:nth-child(5),.panel_table table tr td:nth-child(5){
+    text-align: right;
+    padding-right: 20px;
+}
+.panel_table table tr td:last-child,.panel_table table tr td:last-child{
+    text-align: center;
+}
+
+/********* ESTADOS *********/
+.estado {
+    position: relative;
+    padding: 2px 2px;
+    border-radius: 3px;
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: 1px;
+}
+.ACTIVO{
+    margin: auto;
+    background: #00A65A;
+    color: white;
+}
+.pendiente{
+    margin: auto;
+    background: #F39C12;
+    color: white;
+}
+.PROCESANDO{
+    margin: auto;
+    background: #F39C12;
+    color: white;
+}
+.FACTURADO{
+    margin: auto;
+    background: #3C8DBC;
+    color: white;
+}
+.error{
+    margin: auto;
+    background: #DF5645;
+    color: white;
+}
+
+@media(max-width:768px){
+    .panel_table table{
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 10px;
+        overflow: auto;
+        font-size: 9px;
+    }
+    .estado{
+        font-size: 10px;
+        padding: auto;
+    }
+    .panel_table table tr td {
+        padding: 4px 2px;
+    }
+    .panel_header .h2{
+        font-size: 0.5em;
+    }
+}

src/public/js/app_restaurant.js

@@ -0,0 +1,93 @@
+async function ver_usuarios(){
+    let user = await get_json("/usuarios");
+    console.log(user);
+}
+
+async function mostrar_form(form_aRender){
+    console.log(form_aRender);
+    switch(form_aRender){
+        case 'clientes': 
+            let cli = await get_html("/verClientesJsonApp");
+            await console.log(cli);
+            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);
+            await render(tabla);
+            //await console.log(pedidos.ConsultaPedidos);
+            break;
+        case 'usuarios': 
+            let user = await get_json("/users");
+            console.log(user);
+            break;
+        case 'dashboard': 
+            let dash = await get_html("/dash_board");
+            console.log(dash);
+            break;
+    }
+}
+
+async function get_json(url) {
+    var data;
+    await fetch(url, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+        },
+    })
+    .then(res => res.json())
+    .then(res => {
+        data = res;
+        return res;
+    })
+    .catch(err => console.log('Solicitud fallida', err)); // Capturar errores;
+    return data;
+}
+async function get_html(url) {
+    await fetch(url, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+        },
+    })
+    .then(res => {
+        console.log(res);
+        render(res);
+        //return res;
+    })
+    .catch(
+        err => console.log('Solicitud fallida', err)
+    ); // Capturar errores;
+}
+
+async function render(dat_html) {
+    let contenedor = document.getElementById('contenido');
+    contenedor.innerHTML = dat_html;
+}
+
+async function generaTab_html(json,heder_tab){
+    var tab = `
+    <div class="panel_table">
+     <div class="panel_header">
+        <h2>Ordenes 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;
+}