Nueva Clase TModal !!!

Mensaje por **administrador** » Dom Nov 29, 2020 5:01 pm

Control TModal - Nuevo !!!

Este control se usa para crear los dialogos modales de Bootstrap, son 100% responisives.

Código: Seleccionar todo

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

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

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

$msg = "Test doble click";

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

   $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("btable", "BSTable", "BSTable()", "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)" );

   $aParams = [ "id" => 1, "user" => "ALBEIRO VALENCIA", "autor" => "TVALWEB" ];
   
   $oWnd->footer( "Footer", $aParams );

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

$oWeb->End();

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

function Footer( $aParams ) {
   $oFooter = new TFooter();
   $oFooter->addText( "USUARIO : ".$aParams["id"].", ".$aParams["user"], "text-footer" );
   $oFooter->addText( $aParams["autor"], "text-footer" );
   $oFooter->addIcon( null, "testIcon()", "", '#e7eeef', 'black' );
   $oFooter->Activate();
}

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

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( $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 BSTable() {
   location.href = "test_bstable.php";
}

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 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>

Link del Test del ejemplo : TEST

Oscar Maldonado · Mensaje por **Oscar Maldonado** » Vie Dic 11, 2020 2:51 pm

Estimado Antonio.

Al mirar el ejemplo de edición en mi celular tiene problemas con el control tcombobox

Saludos

Oscar

Mensaje por **administrador** » Mié Dic 30, 2020 1:05 am

Hola Oscar,

Con la nueva version de TWeb Plus, ya esta corregido el bug con el control combobox.

Mensaje por **administrador** » Vie Ene 08, 2021 12:35 am

Agregada la parte javascript a TModal.

var oCtrl = new TControl();
var oModal = oCtrl.GetControl( <control> ); <-- se pide el control creado en TModal

oModal.set( <control>, <valor> ); <-- se asigna un valor a un control Input o Select
oModal.get( <control> ); <-- se pide el valor de un control Input o Select
oModal.enabled( <control> ); <--- modo habilitado del control
oModal.disabled( <control> ); <-- modo deshabilitado del control
oModal.focus( <control> ); <-- asigna el foco a un control
oModal.onvalid( <control>, <function> ); <-- asigna una funcion a el input o select cuando pesiona 'enter' o 'tab'
oModal.btnfunction( <control>, <function>); <-- asigna una nueva function a un boton
oModal.show( <titulo> ); <-- se le asigna un titulo y se activa el dialogo modal
oModal.hide(); <-- oculta el dialogo modal

Mensaje por **administrador** » Sab Ene 23, 2021 12:10 am

Se agrego la DATA nWidth a la clase para asiganar el ancho del dialogo,
el valor maximo asignado es 900 (pixles).

$oModal->nWidth = <integer>

Mensaje por **Cesar_SCS** » Sab Ene 23, 2021 7:06 pm

Registro de usuarios usando la class tModal

saludos.

Mensaje por **administrador** » Mar Ene 26, 2021 6:26 am

Agregados los parametros a el header (titulo) para color de texto y fondo para el codigo javascript.

oModal.show( <title>, <clrTxt>, <clrBack> );

Imagen

Mensaje por **Cesar_SCS** » Mar Ene 26, 2021 6:22 pm

que bonito se ve la tModal
felicidades amigo Valencia !!

Oscar Maldonado · Mensaje por **Oscar Maldonado** » Vie Ene 29, 2021 8:39 pm

Antonio, César.

Felicitaciones está quedando muy bien y profesional Tweb+, es posible poder configurar que el texto de Say para este caso creo que se llama Label pueda ir en la parte superior del get , es decir tener las dos opciones.

Saludos,

Oscar

Mensaje por **situcr** » Dom Ene 31, 2021 2:24 pm

Estimado Maldonado
Si se puede pero ocupa mucho espacio y los controles se reducen en la pantalla.
Había que hacer un scroll y puede perder la originalidad de la clase.

Regards

TVALWEB - Framework for PHP

Nueva Clase TModal !!!

Nueva Clase TModal !!!

Re: TModal - Nuevo

Re: TModal - Nuevo

Re: TModal - Nuevo

Re: Nueva Clase TModal !!!

Re: Nueva Clase TModal !!!

Re: Nueva Clase TModal !!!

Re: Nueva Clase TModal !!!

Re: Nueva Clase TModal !!!

Re: Nueva Clase TModal !!!