Colpsubsidios - Cola

colpsubsidios-cola.markdown

Colpsubsidios - Cola

A Pen by Yerlin Matu on CodePen.

License.

index.html

<header>
  <nav>
      <div class="container">
        <div class="row">
        <div class="column">
        <h3 class="logo">colsubsidios</h3>
        </div>
      </div>
      </div>
  </nav>
</header>
<main id="app">
  
</main>

script.babel

/*
  Escrito por : Yerlinson Maturana (Matu Creativo).
  Email: yerlinmatu@gmail.com
  Github: https://github.com/YerlinMatu
  Twitter: @yerlinmatu 
*/

// USUARIO
var Cliente = [];
class Usuario{
   constructor(nombre, apellidos, empresa, hijos, fecha){ 
      this.nombre = (nombre.length != 0) ? nombre.Capitalize() : "Anonimo ".concat(cont++);
      this.apellidos = apellidos.trim().Capitalize() || "Sin apellidos";
      this.empresa = empresa.trim().Capitalize() || "Ninguna";
      this.hijos = Math.abs(hijos) || 0;
      this.subsidio = Math.abs((+this.hijos*24.000 * 1000));
      this.fecha = fecha || new Date().toString().substring(0,10).concat('...');
   }
}

// Capitalizado : 
String.prototype.Capitalize = function(){
   return this.charAt(0).toUpperCase() + this.slice(1);
}

//  cont++
let cont = 1; 

function SendData(){
let n = $("#nombre").val(),
    a = $("#apellidos").val(),
    e = $("#empresa").val(),
    h = parseInt($("#hijos").val()),
    fecha = $("#fecha").val();
if((n !== '') && (a !== '') && (e !== '') && (h !== '')){
    var person = new Usuario(n,a,e,h, fecha);
    Cliente.push(person);
    console.log(Cliente);
    $Dom('formID').reset(); // Reseting.
    SucessMsg('Se registro correctamente', 'Ya se ingreso a la base de datos.', 2500)
} else {
    SucessMsg('Por favor ingrese los datos solicitados :(','Los campos están vacios', 2500)
  } 
     
} // Client send.

function $Dom($id){
   return document.getElementById($id);
}
const question = ["¿Cuál es su nombre?","¿Cuáles son sus apellidos?","Nombre de la empresa","Número de hijos", "Fecha de afiliación"];

let DELETEPERSON = () => {
    let user_despachado = Cliente.shift();
    user_despachado = user_despachado.nombre;
    ViewTabla();
    SucessMsg(`El cliente ${user_despachado} se eliminó exitosamente`,'Puede seguir registrando')
}
// Data:Date
const date = {
        dateFormat: "dd-mm-yy",
        firstDay: 1,
        dayNamesMin: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"],
        dayNamesShort: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
        monthNames: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio",
                    "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
        monthNamesShort: ["Ene", "Feb", "Mar", "Abr", "May", "Jun","Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]
}
// FORMULARIO.
let FormRegistro = React.createClass({
    render:()=>{
    $( ()=> {
      $( "#fecha" ).datepicker(date);
    } );
       return (
         <div className="Formulario">
           <h2>
             <i className="fa fa-address-card-o" aria-hidden="true"></i> Registro 
           </h2>
           <form id="formID">
            <label for="nombre">Nombre</label>
            <input type="text" placeholder={question[0]} id="nombre" required/>
            <label for="apellidos">Apellidos</label>
            <input type="text" placeholder={question[1]} id="apellidos" required/>
             <label for="empresa">Empresa</label>
            <input type="text" placeholder={question[2]} id="empresa" required/>
            <label for="hijos">Nº hijos</label>
          <input type="number" min="1" max="10" placeholder={question[3]} id="hijos" readonly="readonly" required="required"/>
          <label for="fecha">Fecha</label>
          <input id="fecha" type="text" placeholder={question[4]} required/>
             <button className="btn" type="button" onClick={ SendData }>
               <i className="fa fa fa-plus" aria-hidden="true"></i> Registrar</button>
             <button className="btn" type="button" onClick={ ViewTabla }>
               <i className="fa fa fa fa-database" aria-hidden="true"></i> Ver registrados</button>
          </form>
         </div>
       )
    }
});

//  DATAGRIV:
class DataGriv extends React.Component {
  constructor(props){
     super(props);
     this.state = {
        User:Cliente
     }
  }
render(){
 var data = this.state.User.map((Cliente, i)=>{
      return (
        <tr key={i}>
          <th>{ Cliente.nombre }</th>
          <th>{ Cliente.apellidos }</th>
          <th>{ Cliente.empresa }</th>
          <th>{ Cliente.hijos }</th>
          <th>{ Cliente.subsidio }</th>
          <th>{ Cliente.fecha }</th>
        </tr>)
        })
return(
  <div className="Formulario Griv">
    <h2><i className="fa fa-database" aria-hidden="true"></i> Datos en Cola </h2>
    <label for="search"><i className="fa fa-search" aria-hidden="true"></i> Buscador</label>
  <input id="search" onChange={ this.searchHandled } type="search" placeholder="Buscar por nombre..."/>
<div class="container" >
<strong><i className="fa fa-user" aria-hidden="true"></i> Clientes en Total  : { data.length }</strong>
  <table id="table">
  <thead>
    <tr>
      <th>
      <strong>
        <i className="fa fa-user" aria-hidden="true"> </i>
          Nombres
      </strong>
      </th>
      <th>
        <strong>
          <i className="fa fa-users" aria-hidden="true"> </i>
            Apellidos
        </strong>
      </th>
      <th>
        <strong>
          <i className="fa fa-suitcase" aria-hidden="true"> </i>
            Empresa
        </strong>
      </th>
      <th>
        <strong>
        <i className="fa fa-child" aria-hidden="true"> </i> 
            Nº Hijos
        </strong>
      </th>
      <th>
        <strong>
       <i className="fa fa-money" aria-hidden="true"> </i> 
          Subsidio
        </strong>
      </th>
      <th>
        <strong>
        <i className="fa fa-calendar" aria-hidden="true"> </i> 
          Fecha 
        </strong></th>
    </tr>
  </thead>
  <tbody>
     { data }
  </tbody>
</table>
  </div>
<PadButton />
</div>
      ) // end render.
    }
};

var PadButton = React.createClass({
    render:()=>{
      return (
        <div className="container">
          <div className="row">
            
            <div className="colum">
              <button className="btn" onClick={ DELETEPERSON }>
                <i className="fa fa fa fa-trash" aria-hidden="true"></i> Eliminar en cola</button>
                <button className="btn" onClick={ ViewRegistro }>
                <i className="fa fa fa fa-plus" aria-hidden="true"></i> Registrar</button>
            </div>
          </div>
        </div>
      )
    }
})
/* RENDERS URLS */
GlobalRenderID(<FormRegistro/>, 'app');

function ViewTabla(){
  return GlobalRenderID(<DataGriv/>, 'app');
}

function ViewRegistro(){
  return GlobalRenderID(<FormRegistro/>, 'app');
}
// Renderizador Global.
function GlobalRenderID($ComponentTag, $element){
  return ReactDOM.render($ComponentTag,
  document.getElementById($element));
}

function SucessMsg(title, msg, time, btnBool){
  swal({
  title: title,
  text: msg,
  timer: time || 1600,
  showConfirmButton: btnBool || false
});
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-sweetalert/1.0.1/sweetalert.min.js"></script>

style.scss

// COLORES :
$marron:#490a3d;
$vinotinto:#bd1550;
$naranja:#e97f02;
$poyito:#f8ca00;
$blanco:#fff;
$griss:#c9d6de;
$gris:#52616a;
// MEDIDAS
$ancho:100%;
$alto:200px;
*::selection{
   background-color:$gris;
}
@mixin FondoColor($color){
   background-color:$color;
}

%Degradado {   
 background-color: #dbdbdb; 
 background-image: linear-gradient(to bottom, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), radial-gradient(at 50% 0%, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.50) 50%); 
 background-blend-mode: soft-light,screen;
}
// BODY 
html, body {
  @extend %Degradado;
}
// HEADER
header, nav {
   text-transform:Capitalize;
   width:$ancho;
   height:($alto / 3.5);
   margin-bottom:20px;
   overflow-y:hidden;
   @include FondoColor($marron);
   .logo{ 
     color:$blanco;
     line-height:($alto / 4);
     text-align:center;
     }
}

// FORMULARIO 
.Formulario {
   width:80%;
   margin:0 auto;
   text-align:center;
   outline-color:$marron !important;
   margin-top:0px;
  // title style.
  h2 {
     margin-bottom:4px;
   //  text-transform:Capitalize;
     text-decoration-style:solid !important;
  }
   // label Style.
  label {
     float:left;
  } 
   // Input text Style.
input[type="text"], input[type="number"], input[type="search"],input[type="date"]{
    @include FondoColor($blanco);
    transition:.5s;
    &:focus{  
    border-color:none;
    border:solid 2.2px $marron;
    border-color:$marron;
    outline-color:$marron;
    }
    input[type="date"]{
       width:100%;
       height:3.8rem;
       padding:.6rem 1.0rem;
       border-radius:.4rem;
       border: 0.1rem solid #d1d1d1;
    }
  }
   // Button Style.
   input[type="button"], .btn, button{
     margin-left:5px;
     margin-right:5px;
      @include FondoColor($marron);
      border-color:$marron;
      transition: 0.5s;
      &:hover{ @include FondoColor($gris);
      border-color:$gris };
      &:active{ @include FondoColor($vinotinto);
      border-color:$vinotinto; transition: 0.5s
     }
  }
}

// GrivData 
.Griv{
 position:relative;
 width:85%;
 .container {
 overflow:scroll;
 overflow-x:visible;
 overflow-y:visible;
  }
 th,tr, thead, td {
   border:solid $marron 2px;
   padding:-30px;
   text-align:center;
   @include FondoColor($blanco);
   strong {
    color:$marron;
    text-transform:uppercase;
  }
  td{ text-transform:Capitalize}
  }
} // end Griv.
.naranja{
   color:$naranja;
}
.fa-trash { font-size:18px; line-height:20px / 2}

tablet i {
   color:black;
} 

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet" />