TVALWEB

Framework Open Source para WEB by ANTONIO ALBEIRO VALENCIA
http://avcsistemas.com/foro/

Ejemplo uso de varias clases

http://avcsistemas.com/foro/viewtopic.php?t=5

Page 1 of 1

Ejemplo uso de varias clases

Posted: Mon Jan 06, 2025 8:45 pm
by administrador
Hola, en este ejemplo se usan varias clases de TVALWEB destacando que para el manejo de tablas se usa la clase TDataTable que es
el plugin https://datatables.net/

Code: Select all

<?php
include ( "config.php" );

// Librerias
include( TWEB_PATH . 'core.php' );
include( TWEB_PATH . 'core.modal.php' );

$oWeb = new TWeb( "TEST TMODAL" );
$oWeb->lAwesome = true; 
$oWeb->Activate();

$msg = "Test doble click";

$footer = Format2Html( './footer.html', [ "TVALWEB 2.0", "Albeiro Valencia" ] );

$oWnd = new TWindow( 'main', 5, 12, '98%', '95%' );
$oWnd->footer( $footer, 'my-footer' );

   $aData = [ [ "fecha" => "05/02/20222", "id" => 1, "nombre" => "RALPH DEL CASTILLO", "pais" => "PERU", "telefono" => "+56 000000"],
              [ "fecha" => "25/02/20222", "id" => 2, "nombre" => "ANTONIO TWEB", "pais" => "VZLA", "telefono" => "+56 000001"],
              [ "fecha" => "30/02/20222", "id" => 3, "nombre" => "OSCAR COSTA", "pais" => "COSTA", "telefono" => "+56 000002"] 
            ];   

   $cHtml = '<a class="add-row" href="javascript:AddRow()" title="Like">'.
            '<i class="fa fa-plus"></i>'.
            '</a>'.
            '<a class="del-row" href="javascript:DelRow()" title="Remove">'.
            '<i class="fa fa-trash"></i>'.
            '</a>';         

   $oGrid = new TDataTable( $oWnd, 'dtuser', 10, 5, '100%', '93%', $aData );
   $oGrid->AddCol( 'fecha'  ,  'Fecha' );
   $oGrid->AddCol( 'id'     ,  'Codigo' );
   $oGrid->AddCol( 'nombre',   'Nombre', null, AL_LEFT );
   $oGrid->AddCol( 'pais',  'Usuario', null, AL_LEFT );
   $oGrid->AddCol( 'telefono',  'Telefono', null, AL_LEFT );    
   $oGrid->AddColHtml('Html', $cHtml);
   $oGrid->AddColIcon('Icon', "fa fa-trash", "red", "TestIcon()", "Delete Row");
   $oGrid->AddColButton('Button', "Test", "btn-row", "TestBtn()", "Test de Button");
   $oGrid->Title("Gestión de Usuarios", "black", "white", "title");
   $oGrid->AddButton("bmsg", "Toast", "Notify()", "fa fa-home");
   $oGrid->AddButton("bnew", "DlgCustom", "AddUser()", "fas fa-user");
   $oGrid->AddButton("bedit", "DlgHtml", "Html()", "fas fa-code");
   $oGrid->AddButton("bdel", "DlgTable", "Table()", "fas fa-table");
   $oGrid->AddButton("bspin", "DlgSpinner", "Spinner()", "far fa-arrow-alt-circle-up");
   $oGrid->AddButton("bexit", "Salir", "Salir()", "fas fa-sign-out-alt");
   $oGrid->CheckBox( true );
   $oGrid->SetColorHeader( 'black', 'aqua' );
   $oGrid->HeaderRowSize( 28 );
   $oGrid->CellRowSize( 25 );
   $oGrid->FontSize( 16 );
   $oGrid->PageLength( 10 );
   $oGrid->Info( false );
   $oGrid->Paging( true );
   $oGrid->ScrollY( "420px" );
   $oGrid->Export( true, [ "copy", "excel", "pdf", "print", "csv" ] );
   $oGrid->Filter( true );
   $oGrid->DoubleClick( "JMsgInfo('".$msg."')");
   // $oGrid->SetFormater( "formaterTable(row, data, index)" );

   ModalUser();
   ModalTable();
   ModalHtml();
   ModalSpinner();
   
$oWnd->Activate();

$oWeb->End();

//-------------------------------------------------------------

function ModalUser() {

   $oModal = new TModal( 'oModalU', 'AGENTES', null, null, MODAL_LARGE );

   $oLine = $oModal->InLineControls();
      $oLine->Input( 'Nombre', 'get1', TYPE_TEXT, null, null, null, true ); 
      $oLine->Input( 'Usuario', 'get2', TYPE_TEXT, null, null, null, true ); 

   $oLine = $oModal->InLineControls();
      $oLine->Input( 'Nueva Contraseña', 'get3', TYPE_TEXT );
      $oLine->Input( 'Repita Contraseña', 'get4', TYPE_TEXT );

   $oModal->AddInput( 'Direccion', 'get5', TYPE_TEXT );  

   $oLine = $oModal->InLineControls();
      $cHtml  = '<div class="left">';
      $cHtml .= ' <label>Telefono :</label>'; 
      $cHtml .= '</div>';
      $cHtml .= '<div class="right">';
      $cHtml .= ' <input type=text">';
      $cHtml .= '</div>';
      $cHtml .= '<div class="input-mobil">';
      $cHtml .= ' <label style="width: 168px;">Mobil :</label>'; 
      $cHtml .= ' <input type=text" style="width: 165px;">';
      $cHtml .= ' <i class="fab fa-whatsapp  whatsapp" ></i>';
      $cHtml .= ' <input type="checkbox">';
      $cHtml .= '</div>';
      $oLine->Html( $cHtml ); 

   $oLine = $oModal->InLineControls();
      $oLine->Input( 'Nif-Cif', 'get8', TYPE_TEXT );  
	   $oLine->Input( 'Cod Postal', 'get9', TYPE_TEXT );  

	$oModal->AddInput( 'Municipio', 'get10', TYPE_TEXT ); 
	$oModal->AddSelect( 'Ciudad', 'get11' );  
   $oModal->AddSelect( 'Pais', 'get12' );  

   $oLine = $oModal->InLineControls();
      $oLine->Input( 'E-Mail', 'get13', TYPE_TEXT ); 
      $oLine->Input( 'Cod Social', 'get14', TYPE_TEXT ); 

	$oModal->AddSelect( 'Departamento', 'get15', [], "fa fa-plus", "info()" ); 

   $oLine = $oModal->InLineControls();
      $oLine->Input( 'Fecha Alta', 'get16', TYPE_DATE ); 
      $oLine->Input( 'Fecha Baja', 'get17', TYPE_DATE ); 

   $oModal->AddTextArea( 'Notas', 'get18' );  

   $oModal->AddButton( 'bsave1', 'Aceptar', '', 'black', 'green', BTN_DEFAULT );
   $oModal->AddButton( 'bexit1', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );

   $oModal->Activate();

}

//-------------------------------------------------------------

function ModalTable() {

   $aData = [ [ "codigo" => 1, "nombre" => "JUAN PEREZ", "pais" => "PERU", "telefono" => "+56 000000"],
              [ "codigo" => 2, "nombre" => "LOCO MADURO", "pais" => "VZLA", "telefono" => "+56 000001"],
              [ "codigo" => 3, "nombre" => "PROFE CASTILLO", "pais" => "COSTA", "telefono" => "+56 000002"] 
            ];   

   $oModal = new TModal( 'oModalT', 'TABLA', null, null, MODAL_LARGE );

      $oTable = $oModal->AddTable( "Table01", $aData );
      $oTable->AddColumn( "codigo",    "Codigo", null, AL_LEFT);     
      $oTable->AddColumn( "nombre",    "Nombre", null, AL_LEFT);     
      $oTable->AddColumn( "pais",      "Pais", null, AL_LEFT);     
      $oTable->AddColumn( "telefono",  "Telefono", null, AL_LEFT);    
      $oTable->AddButton("01", "Nuevo", "AddRowModal()", "fa fa-plus");
      $oTable->AddButton("02", "Elimina", "DelRowModal()", "fa fa-minus");

   $oModal->AddButton( 'bexit2', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );
   $oModal->Activate();

}   

//-------------------------------------------------------------

function ModalHtml() {
   
   $Html  = '<div class="mhtml">';
   $Html .= '  <h1>TEST CON HTML</h1>';
   $Html .= '</div>';
   $Html .= '  <input id="name" class="myname" type="text" placeholder="Ingrese nombre"/>';

   $oModal = new TModal( 'oModalH', 'HTML', null, null, MODAL_LARGE );
   $oModal->AddHtml( $Html );
   $oModal->AddButton( 'bsave', 'Acepta', 'valida()', 'black', 'green', BTN_CANCEL );
   $oModal->AddButton( 'bexit', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );
   $oModal->Activate();
}

//-------------------------------------------------------------

function ModalSpinner() {
   $oModal = new TModal( 'oModalS', 'SPINNER & IMAGE', null, null, MODAL_LARGE );
   $oModal->AddImage("image", IMAGE_PATH."logo.png", AL_CENTER, '64px');
   $oModal->AddInput('RUC/DNI del cliente',    'codcli',    TYPE_TEXT, '', 'fas fa-search', 'Cliente()' );
	$oModal->AddInput('Nombre o Razón Social',  'nomcli',   TYPE_TEXT,     '', '');
	$oModal->AddInput('Correo electrónico',    'email',  TYPE_TEXT, '', '');
	$oModal->AddInput('Fecha requerida', 'fecreq', TYPE_DATE,  '', '');
	$oModal->AddInput('Dirección de entrega',   'dircli', TYPE_EMAIL,  '', '');
	$oModal->AddTextArea('Observaciones',   'observ',  TYPE_TEXT, '', '');
   $oModal->AddSpinner("spin", "Cantidad :" );
   $oModal->AddButton( 'bexit', 'Cancelar', '', 'white', '#767070', BTN_CANCEL );
   $oModal->Activate();
}

?>

<script>

var oGrid;
var oModalU;
var oModalT;   
var oModalH;
var oModalS;

var aData = [ 
      { "codigo" : 1, "nombre" : "JUAN PEREZ", "pais" : "PERU", "telefono" : "+56 000000" },
      { "codigo" : 2, "nombre" : "LOCO MADURO", "pais" : "VZLA", "telefono" : "+56 000001" },
      { "codigo" : 3, "nombre" : "PROFE CASTILLO", "pais" : "COSTA", "telefono" : "+56 000002" } 
   ];

$(function() {
   let oCtrl = new TControl();
   oGrid    = oCtrl.GetControl("dtuser");
   oModalU  = new TModal("oModalU");
   oModalT  = new TModal("oModalT");
   oModalH  = new TModal("oModalH");
   oModalS  = new TModal("oModalS"); 
   console.log(oModalS.version());
});

function AddUser() {
   var aCiudad = [ ["Acarigua"], 
                   ["Araure"], 
                   ["Barquisimeto"], 
                   ["Caracas"], 
                   ["Valencia"], 
                   ["Maracay"], 
                   ["Cucuta"], 
                   ["Medellin"], 
                   ["Cali"], 
                   ["San Cristobal"] ];

   var aPais = [ ["Argentina"], 
                 ["Alemania"], 
                 ["Brasil"], 
                 ["Bermudas"], 
                 ["Canada"], 
                 ["Costa Rica"], 
                 ["Colombia"], 
                 ["Peru"], 
                 ["Chile"], 
                 ["Venezuela"] ];
   oModalU.setlistbox("get11", aCiudad);              
   oModalU.setlistbox("get12", aPais);
   oModalU.focus("get1");
   oModalU.show();
}

function Html() {
   oModalH.show();
}

function Table() {
   oModalT.show();
}

function AddRowModal() {
   var aRow = { codigo : 7, nombre : "OSCAR CHACON", pais : "MIAMI", telefono : "+56 000000" };
   oModalT.addTableRow( aRow );
}

function DelRowModal() {
   oModalT.delTableRow();
}

function Spinner() {
   oModalS.setimage("image", "./images/twitter-64.png");
   oModalS.show();
}

function info() {
   JMsgInfo("Click Table Modal");
}

function valida() {
   JMsgInfo( oModalH.get("name"));
}

function input() {
   JMsgInfo("Click en input");
}

function Cliente() {
   JMsgInfo("Click en Cliente");
}

function Notify() {
   MsgNotify("Seleccione un Registro", "error");
}

function testIcon() {
   JMsgInfo("TVALWEB Ver. 2.0, The Power of the web!!!");
}

function AddRow() {
   oGrid.InsertRow({ id : 10, nombre : "LEONEL MESSI", pais : "ARGENTINA", telefono : "+56 00000096" });
}

function DelRow() {
   oGrid.DeleteRow();
}

function TestIcon() {
   JMsgInfo('Elimina Row');
}

function TestBtn() {
   JMsgInfo("Test Button Column");
}

function Salir() {
   location.href = './test_login.php'; 
}

</script>

<style>

   .mhtml {
      background-color: aquamarine;
      color: black;
   }

   .myname {
      color: blue;
   }

   .input-mobil {
      float: right;
      margin-left: 10px;
   }

   @media (max-width : 640px) {
      .input-mobil label {
         margin-left: -8px !important;   
      }
      .input-mobil input {
         margin-left: -8px !important;
      } 
      .whatsapp {
         margin-right: 8px;
      }  
   }   

   .text-footer {
      color: #0b369b;
      font-size: 13px;
      font-weight: bold;
      font-family: verdana;
   }

   .add-row {
      color: green;
   }

   .del-row {
      margin-left: 10px;
      color: red;
   }

   .btn-row {
      width: 60px;
      height: 25px;
      background-color: #6ea220 !important;
      border-color: #a7bda4 !important;
      color: white !important;
   }

</style>
Archivo footer.html, aqui se puede ver como se pasan parametros desde PHP a HTML cosn solo agregar los parametros {1} / {2}

Code: Select all

<div class="container myfooter">
  <div class="row">
    <div class="col-8" style="display: block;text-align: center;"">
      <p class="text-footer">{%1}</p>
      <p class="text-footer">{%2}</p>
    </div>
  </div>  
</div>
LINK DE PRUEBA
All times are UTC-04:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited