Usuarios

<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Usuarios</title>
<link rel="shortcut icon" href="img/cama_icon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>

</head>
<body style="background-image: url(img/fondo.jpg);">
<nav class="navbar navbar-expand-lg navbar-light w-100 img-fluid">
<a class="navbar-brand img-fluid " href="Inicio.html"><img
src="img/logotransparente.png" alt="logocama" width="250px" height="100px"
class="img-fluid"></a>
<div class="container-fluid w-75">
<div class="me-auto" style="display: flex; justify-content: center;
align-items: center;">
<a href="Inicio.html"><img src="img/inicio.png" alt="ini"
width="150px" height="50px"></a>
</div>
<div class="mf-auto img-fluid text-white">
<img src="img/user.png" alt="user" width="50px" height="50px">
Administrador
</div>
</div>
</nav>
<div class="container-fluid text-white">
<div class="row">
<div class="col-md-4 border border-3 rounded" style="background-color:
rgba(0, 0, 0, 0.521);">
<h4 class="text-center">REGISTRO DE USUARIO</h4>
<form class="was-validated" novalidate>
<div>
<label for="number">Tipo:</label>
<select class="form-select w-75" name="tipo_user" id="tipo_user"
required>
<option selected value="" disabled>Seleccione...</option>
<option value="1">Administrador</option>
<option value="2">Usuario</option>
</select>
</div>
<div class="form-group">
<label for="textfield">Contraseña:</label>
<input class="form-control w-75" type="text" id="contra"
name="contra" required>
</div>
<label for="textfield">Nombre:</label>
<input class="form-control w-75" type="text" id="nom" name="nom"
required>
</div>
<label for="textfield">Paterno:</label>
<input class="form-control w-75" type="text" id="ap" name="ap"
required>
</div>
<label for="textfield">Materno:</label>
<input class="form-control w-75" type="text" id="am" name="am"
required>
</div>
<label for="number">Carnet de identidad:</label>
<input type="number" name="ci" id="ci" min="1" class="form-
control w-75" required>
</div>
<label for="number">Edad:</label>
<input type="number" name="edad" id="edad" min="1"
class="form-control w-75" required>
</div>
<label for="number">Celular:</label>
<input class="form-control w-75" type="number" id="cel" min="1"
minlength="1" maxlength="13" required>
</div>
<div class="m-2">
<label for="textfield">Genero:</label>
<div class="form-check">
<input type="radio" class="form-check-input" name="genero"
value="1" id="g1" required>
<label class="form-check-label"
for="textfield">Masculino</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="genero"
value="2" id="g2" required>
<label class="form-check-label"
for="textfield">Femenino</label>
</div>
</div>
<div class="text-center mt-3">
<button type="submit" class="btn btn-secondary" id="registrar"
value="1">Registrar</button>   <button type="button"
class="btn btn-warning" id="limp" value="1">Limpiar</button><p></p>
</div>
</form>
</div>
<div class="col-md-8 border border-3 rounded" style="background-color:
rgba(0, 0, 0, 0.521);">
<div class="text-center">
<h4>USUARIOS REGISTRADOS</h4>
<table class="table table-bordered text-white" style="font-
size:13px ;" id="mostrar">
<thead>
<tr>
<th style="width:5%;">#</th>
<th style="width:10%;">Tipo</th>
<th style="width:10%;">Contraseña</th>
<th style="width:20%;">Nombre Completo</th>
<th style="width:10%;">Carnet De Identidad</th>
<th style="width:10%;">Edad</th>
<th style="width:5%;">Genero</th>
<th style="width:10%;">Celular</th>
<th style="width:20%;">Opciones</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="js/control_users.js"></script>
</body>
</html>
//clase Persona
class Persona{
#nom;
#ap;
#am;
#ci;
#sexo;
#edad;
constructor(nom,ap,am,ci,sexo,edad){
this.nom=nom;
this.ap=ap;
this.am=am;
this.ci=ci;
this.sexo=sexo;
this.edad=edad;
}
//Metodos Set y Get
setNombre(nom){
this.nom=nom;
}
setApaterno(ap){
this.ap=ap;
}
setAmaterno(am){
this.am=am;
}
setCi(ci){
this.ci=ci;
}
setSexo(sexo){
this.sexo=sexo;
}
setEdad(edad){
this.edad=edad;
}
getNombre(){
return this.nom;
}
getApaterno(){
return this.ap;
}
getAmaterno(){
return this.am;
}
getCi(){
return this.ci;
}
getSexo(){
return this.sexo;
}
getEdad(){
return this.edad;
}
mostrarSexo()
{
if(this.sexo==1)
return "M";
else
return "F";
}
mostrarTipoUser(tipo_user){
if(tipo_user==1){
return "Admin";
}else{
return "Usuario";
}
}
}
//Herencia clase Vendedor de la clase Persona
class Vendedor extends Persona{
#cel;
#contraseña;
#user_vendedor;

constructor(nom,ap,am,ci,sexo,edad,user_vendedor,contraseña,cel){
super(nom,ap,am,ci,sexo,edad);

this.user_vendedor=user_vendedor;
this.contraseña=contraseña;
this.cel=cel;
}
//Metodos Set y Get

setUserVendedor(user){
this.user_vendedor=user;
}
setContraseña(contra){
this.contraseña=contra;
}
setCelular(cel){
this.cel=cel;
}
getCelular(){
return this.cel;
}
getConstraseña(){
return this.contraseña;
}
getUserVendedor(){
return this.user_vendedor;
}

mostrarVendedor(){
let texto = "Nombre Completo :"+this.getNombre()+"
"+this.getApaterno()+" "+this.getAmaterno()+"<br>";
texto = texto+"Genero :"+this.getSexo()+" Edad :"+this.getEdad()+"
Tipo: "+this.getUserVendedor()+" Contraseña: "+this.getConstraseña()+" Cel:
"+this.getCelular();
return texto;
}
}
//Herencia clase Cliente de la clase Persona
class Cliente extends Persona{
#nit;
constructor(nom,ap,am,ci,sexo,edad,nit){
super(nom,ap,am,ci,sexo,edad);
this.nit=nit;
}
setNit(nit){
this.nit=nit;
}
getNit(){
return this.nit;
}
//Metodo para mostrar el cliente en texto (cadena)
mostrarCliente(){
let texto = "Nombre Completo :"+this.getNombre()+"
"+this.getApaterno()+" "+this.getAmaterno()+"<br>";
texto = texto+"Nit :"+this.getNit()+" Genero :"+this.getSexo()+"
Edad :"+this.getEdad();
return texto;
}
}
$(document).ready(function(){
let user;
let vecUsu;
let arrayUsu =[];
let indice;
function limpiar(){
$("[type='number']").val("");
$("[type='text']").val("");
$("#tipo_user").val("");
$("#proc").val("");
$("input[name=genero]").val(['']);
}
function rellenarTablaUsu(ta){
let texto="<tr id=r'"+ta+"'><td>"+(ta+1)+"</td>"+
"<td>"+arrayUsu[ta].mostrarTipoUser(arrayUsu[ta].getUserVendedor())
+"</td>"+
"<td>"+arrayUsu[ta].getConstraseña()+"</td>"+
"<td>"+arrayUsu[ta].getNombre()+" "+arrayUsu[ta].getApaterno()+"
"+arrayUsu[ta].getAmaterno()+"</td>"+
"<td>"+arrayUsu[ta].getCi()+"</td>"+
"<td>"+arrayUsu[ta].getEdad()+"</td>"+
"<td>"+arrayUsu[ta].mostrarSexo()+"</td>"+
"<td>"+arrayUsu[ta].getCelular()+"</td>"+
"<td><button type='button' class='class-button' style='border-
radius:10px' name='actu' id='"+ta+"' value='"+arrayUsu[ta].getCi()+"'><img
src='img/actualizar.jpg' width='35px' height='35px' alt='Eliminar
registro'></button><button type='button'style='border-radius:10px'
class='class-button' name='elimi' id='"+ta+"' value='"+arrayUsu[ta].getCi()
+"'> <img src='img/eliminar_transparente.png' class=' width='35px'
height='35px' alt='Eliminar registro'></button> </td><tr>";
return texto;
}

//Carga la tabla guardada en la base de datos
if (window.localStorage.getItem('control') !== undefined &&
window.localStorage.getItem('control')){
let vecUsu=JSON.parse(localStorage.getItem("control"));
//borra todos los tr de la tabla
$("#mostrar > tbody").empty();
//actualiza la tabla
for (let ta = 0; ta < vecUsu.length; ta++) {
user=new
Vendedor(vecUsu[ta].nom,vecUsu[ta].ap,vecUsu[ta].am,vecUsu[ta].ci,vecUsu[ta]
.sexo,vecUsu[ta].edad,vecUsu[ta].user_vendedor,vecUsu[ta].contraseña,vecUsu[
ta].cel);
arrayUsu.push(user);
$("#mostrar").append(rellenarTablaUsu(ta));
}

}

$("#registrar").on("click",function(){
let tipo= parseInt($("#tipo_user option:selected").val());
let contra=$("#contra").val();
let nom=$("#nom").val();
let ap=$("#ap").val();
let am=$("#am").val();
let nci=parseInt($("#ci").val());
let edad=parseInt($("#edad").val());
let cel=parseInt($("#cel").val());
let sexo=parseInt($("input:radio[name=genero]:checked").val());

if(nom!="" && ap!="" && am!="" && !isNaN(nci) && !isNaN(sexo) && !
isNaN(edad) && !isNaN(cel) && !isNaN(tipo)){

if (window.localStorage.getItem('control') !== undefined &&
window.localStorage.getItem('control')){
arrayUsu=JSON.parse(localStorage.getItem("control"));
}
//Instacia de la clase Vendedor a la Variable "user"
user = new Vendedor(nom,ap,am,nci,sexo,edad,tipo,contra,cel);

if($("#registrar").prop("value")==1){
indice= arrayUsu.findIndex(elemento=>{
return elemento.ci==nci;
});
if(indice==-1){

localStorage.setItem("control",JSON.stringify(arrayUsu));
let ta=arrayUsu.length -1;
limpiar();
}
else{
alert("El número de carnet no puede repetirse es
unico");
}
}
else{
let pos=indice;
vecUsu=JSON.parse(localStorage.getItem("control"));
vecUsu.splice(indice,1);
indice= vecUsu.findIndex(elemento=>{
return elemento.ci==nci;
});
if(indice==-1){
vecUsu.splice(pos,0,user);
arrayUsu.splice(0,arrayUsu.length);
user=new
ta].cel);
}

$("#registrar").text("Registrar");
$("#registrar").prop("value","1");
$("#limp").text("Limpiar");
$("#limp").prop("value","1");
limpiar();
}
else{
alert("El número de carnet no puede repetirse es
unico");
}
}
}
else{
alert("Debe llenar todos los datos para registrar la
informacion");
}
});
$('#mostrar').on("click",".class-button",function()
{
let vci;
vci=$(this).prop("value");
vecUsu=JSON.parse(localStorage.getItem("control"));
indice= vecUsu.findIndex(elemento=>{
return elemento.ci==vci;
});
//Para eliminar un registro
if ($(this).prop("name")=="elimi"){
// Elimina un elemento del vector encontrado
vecUsu.splice(indice,1);
arrayUsu.splice(0,arrayUsu.length);
user=new
ta].cel);
}

}
//este else nos ayuda cuando deseo actulizar datos
else
{
$("#nom").val(vecUsu[indice].nom);
$("#ap").val(vecUsu[indice].ap);
$("#am").val(vecUsu[indice].am);
$("#ci").val(vecUsu[indice].ci);
$("#edad").val(vecUsu[indice].edad);
$("#tipo_user").val(vecUsu[indice].user_vendedor);
$("#contra").val(vecUsu[indice].contraseña);
$("#cel").val(vecUsu[indice].cel);
$("input:radio[name=genero]").val([vecUsu[indice].sexo]);
$("#registrar").text("Actualizar");
$("#limp").text("Cancelar");
}

});
$("#limp").on("click",function(){
if ($("#limp").val()==1){
limpiar();
}else{
$("#registrar").text("Registrar");
$("#limp").text("Limpiar");
limpiar();
}

});
});
Productos
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registro Productos </title>
</head>
</div>
Administrador
</div>
</div>
</nav>
<div class="container border border-3 border-white rounded text-white"
style="background-color: rgba(0, 0, 0, 0.521);">
<h5 class="text-center">AGREGAR PRODUCTOS</h5>
<div class="row">
<div class="col-3">
<form >
<label for="textfield">Producto:</label>
<select class="form-select " name="produc" id="produc" required>
<option value="1">Cable Rigido</option>
<option value="2">Caja Metalica</option>
<option value="3">Medidor</option>
<option value="4">Interruptor</option>
<option value="5">Pararrayo</option>
<option value="6">Electroducto</option>
<option value="7">Varilla De Aterramiento</option>
<option value="8">Volanda</option>
<option value="9">Aislador Polimerico</option>
<option value="10">Conector De Varilla De
Aterramiento</option>
<option value="11">Soldadura Cadweld</option>
</select>
</div>
</form>
</div>
<div class="col-3">
<form >
<label for="textfield">Descripcion Del Producto:</label>
<div>
<input class="form-control" type="text" id="dproducto"
name="dproducto" required>
</div>
</form>
</div>
<div class="col-3">
<form >
<label for="textfield">Codigo:</label>
<div>
<input class="form-control text-uppercase " type="text" id="cod"
name="cod" required>
</div>
</form>
</div>
<div class="col-3 ">
<form >
<label for="textfield">Fecha:</label>
<input class="form-control" type="date" id="fecha" name="fecha"
required>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-4">
<form >
<label for="textfield">Unidad De Medida:</label>
<select class="form-select " name="um" id="um">
<option value="1">Metro</option>
<option value="2">Pieza</option>
</select>
</div>
</form>
</div>
<div class="col-4">
<form >
<label for="textfield">Cantidad:</label>
<input class="form-control" type="number" min="1" id="cant"
name="cant">
</div>
</form>
</div>
<div class="col-4">
<form >
<label for="textfield">Precio Por Unidad ($):</label>
<input class="form-control w-75" type="number" min="1" id="precio"
name="precio">
</div>
</form>
</div>
</div><br>
<form >
<button class="btn btn-secondary" id="agregar" type="submit"
value="1">Agregar +</button>
<button class="btn btn-warning" id="limpiar" type="button"
value="1">Limpiar</button>
</form>

</div><br>
</div><br>
<div class="container-fluid border border-3 border-white text-white
rounded" style="background-color: rgba(0, 0, 0, 0.521);">
<h5 class="text-center">INVENTARIO</h5>
<div class="form-outline mb-4">
<label class="form-label">Buscar:</label>
<input type="search" class="form-control w-25" id="buscador" aria-
label="Buscar" placeholder="Buscar Producto">
</div>
<table class="table table-bordered text-white text-center"
id="tablaProductos" style="font-size: 14px;">
<thead>
<tr>
<th style="width:10%;">Nombre</th>
<th style="width:10%;">Codigo</th>
<th style="width:20%;">Descripcion</th>
<th style="width:10%;">P/U</th>
<th style="width:5%;">U/M</th>
<th style="width:10%;">Cantidad</th>
<th style="width:10%;">Fecha De Ingreso</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="js/control_productos.js"></script>
</body>
</html>
//Clase Producto
class Producto{
#nom;
#descripcion;
#cate;
#precio;
constructor(nom,codigo,descripcion,precio,um){
this.nom=nom;
this.descripcion=descripcion;
this.precio=precio;
this.um=um;
this.codigo=codigo;
}
//Metodos Set y Get
setNombre(nom){
this.nom=nom;
}
setPrecio(precio){
this.precio=precio;
}
setDescripcion(descrip){
this.descripcion=descrip;
}
setUnidadMedida(um){
this.um=um;
}
setCodigo(codigo){
this.codigo=codigo;
}
getDescripcion(){
return this.descripcion;
}
getUnidadMedida(){
return this.um;
}
getNombre(){
return this.nom;
}
getCodigo(){
return this.codigo;
}
getPrecio(){
return this.precio;
}
//Metodo para mostrar el producto en texto (cadena)
mostrarDetalleProducto(){
let texto =" Nombre: "+this.mostrarNombreDeProducto()+"<br>";
texto=texto+"Descripcion: "+this.getDescripcion()+"<br>";
texto=texto+"Codigo: "+this.getCodigo()+"<br>";
texto= texto+"Precio Por Unidad: "+this.getPrecio()+"<br>";
texto= texto+"Unidad De Medida: "+this.mostrarUnidadDeMedida();
return texto;
}
mostrarUnidadDeMedida(){
if(this.um == 1){
return "Metro"
}else{
return "Pieza"
}
}
mostrarNombreDeProducto(){
switch (this.nom) {
case 1:
return "Cable Rigido";
break;
case 2:
return "Caja Metalica";
break;
case 3:
return "Medidor";
break;
case 4:
return "Interruptor";
break;
case 5:
return "Pararrayo";
break;
case 6:
return "Electroducto";
break;
case 7:
return "Varilla De Aterramiento";
break;
case 8:
return "Volanda";
break;
case 9:
return "Aislador Polimerico";
break;
case 10:
return "Conector De Varilla De Aterramiento";
break;
case 11:
return "Soldadura Cadweld";
break;

}
}
}
class Inventario{
constructor(cantidad,producto,fingreso){
this.cantidad=cantidad;
this.producto=producto;
this.fingreso=fingreso;
// this.arrayProductos=[];
}
setCantidad(cant){
this.cant=cant;
}
setProducto(produc){
this.producto=produc;
}
setFechaIngreso(fingreso){
this.fingreso=fingreso;
}
getFechaIngreso(){
return this.fingreso;
}
getCantidad(){
return this.cantidad;
}
getProducto(){
return this.producto;
}
// agregarProductos(producto){
// this.arrayProductos.push(producto);
// }
}
$(document).ready(function(){
let producto;
let inventario;
let vecPro;
let arrayPro=[];
let indice;
function limpiar(){
$("[type='number']").val("");
$("[type='text']").val("");
$("[type='date']").val("");
$("#produc").val("");
$("#um").val("");
}
function rellenarTablaPro(ta){
let texto="<tr id=r'"+ta+"'><td>"+(ta+1)+"</td>"+
"<td>"+arrayPro[ta].getProducto().mostrarNombreDeProducto()+"</td>"+
"<td>"+arrayPro[ta].getProducto().getCodigo()+"</td>"+
"<td>"+arrayPro[ta].getProducto().getDescripcion()+"</td>"+
"<td>"+arrayPro[ta].getProducto().getPrecio()+"</td>"+
"<td>"+arrayPro[ta].getProducto().getUnidadMedida()+"</td>"+
"<td>"+arrayPro[ta].getCantidad()+"</td>"+
"<td>"+arrayPro[ta].getFechaIngreso()+"</td>"+
"<td><button type='button' class='class-button' style='border-
radius:10px' name='actu' id='"+ta+"'
value='"+arrayPro[ta].getProducto().getCodigo()+"'><img
src='img/actualizar.jpg' width='35px' height='35px' alt='Eliminar
registro'></button><button type='button'style='border-radius:10px'
class='class-button' name='elimi' id='"+ta+"'
value='"+arrayPro[ta].getProducto().getCodigo()+"'> <img
src='img/eliminar_transparente.png' class=' width='35px' height='35px'
alt='Eliminar registro'></button> </td><tr>";
return texto;
}
//Carga la tabla guardada en la base de datos
if (window.localStorage.getItem('producto') !== undefined &&
window.localStorage.getItem('producto')){
let vecPro=JSON.parse(localStorage.getItem("producto"));
$("#tablaProductos > tbody").empty();
for (let ta = 0; ta < vecPro.length; ta++){
producto=new
Producto(vecPro[ta].producto.nom,vecPro[ta].producto.codigo,vecPro[ta].produ
cto.descripcion,vecPro[ta].producto.precio,vecPro[ta].producto.um);
inventario=new
Inventario(vecPro[ta].cantidad,producto,vecPro[ta].fingreso);
arrayPro.push(inventario);
$("#tablaProductos").append(rellenarTablaPro(ta));
}
}
$("#agregar").on("click",function(){
let nom_pro=parseInt($("#produc").val());
let dpro=$("#dproducto").val();
let fecha=$("#fecha").val();
let codigo=$("#cod").val();
let um=parseInt($("#um").val());
let cant=parseInt($("#cant").val());
let precio=parseInt($("#precio").val());
if(!isNaN(nom_pro) && dpro!="" && fecha!="" && !isNaN(um) && !

isNaN(cant) && !isNaN(precio) && codigo!=""){
if(window.localStorage.getItem('producto') !== undefined &&
window.localStorage.getItem('producto')){
arrayPro=JSON.parse(localStorage.getItem("producto"));
}
producto=new Producto(nom_pro,codigo,dpro,precio,um);
inventario=new Inventario(cant,producto,fecha);
if($("#agregar").prop("value")==1){
indice = arrayPro.findIndex(elemento =>{
return elemento.producto.codigo==codigo;
})

if(indice==-1){

localStorage.setItem("producto",JSON.stringify(arrayPro));
let ta = arrayPro.length -1;
limpiar();
}else{
alert("Error");
}
}else{
let pos=indice;
vecPro=JSON.parse(localStorage.getItem("producto"));
vecPro.splice(indice,1);
indice=vecPro.findIndex(elemento =>{
return elemento.producto.codigo==codigo;
})
if(indice==-1){
vecPro.splice(pos,0,inventario);

arrayPro.splice(0,arrayPro.length);
$("tablaProductos > tbody").empty();
for (let ta = 0; ta < vecPro.length; ta++) {
producto=new
inventario=new
Inventario(vecPro[ta].cantidad,producto,vecPro[ta].fingreso)
}

$("#agregar").text("Agregar");
$("#agregar").prop("value","1");
$("#limpiar").text("Limpiar");
$("#limpiar").prop("value","1");
limpiar();
}else{
alert("El Codigo No Puede Repetirse");
}
}
}else{
alert("Debe Llenar Todos Los Datos");
}
});
$("#tablaProductos").on("click",".class-button",function(){
let vco;
vco = $(this).prop("value");
vecPro=JSON.parse(localStorage.getItem("producto"));
indice=vecPro.findIndex(elemento =>{
return elemento.producto.codigo==vco;
});
if($(this).prop("name")=="elimi"){
//Elinima un Elemento del Vector Encontrado
vecPro.splice(indice,1);
arrayPro.splice(0,arrayPro.length);
//Borra Todos los Tr de la Tabla
$("#tablaProductos > tbody").empty();
//Actualiza la Tabla
for (let ta = 0; ta < vecPro.length; ta++) {
producto=new
inventario=new
Inventario(vecPro[ta].cantidad,producto,vecPro[ta].fingreso);
}
}else{
$("#produc").val(vecPro[indice].producto.nom);
$("#um").val(vecPro[indice].producto.nom);
$("#dproducto").val(vecPro[indice].producto.descripcion);
$("#cod").val(vecPro[indice].producto.codigo);
$("#fecha").val(vecPro[indice].fingreso);
$("#cant").val(vecPro[indice].cantidad);
$("#precio").val(vecPro[indice].producto.precio);
$("#agregar").text("Actualizar");
$("#limpiar").text("Cancelar");
$("#agregar").prop("value","2");
}
});
$("#limpiar").on("click",function(){
if ($("#limpiar").val()==1){
limpiar();
}else{
$("#agregar").text("Agregar");
$("#Agregar").prop("value","1");
$("#limpiar").text("Limpiar");
$("#limpiar").prop("value","1");
limpiar();
}

});
});
Realizer venta html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Realizar Venta</title>
<script src="js/funcionalidad.js"></script>

</head>
</div>
Administrador
</div>
</div>
</nav>
<div class="container-fluid">
<h3 class="text-center text-white">ORDEN DE VENTA</h3>
<div class="row">
<div class="col-md-6 text-white">
<div class="container border border-3 border-white rounded"
<h5 class="text-center">SELECCION DE PRODUCTOS</h5>
<div class="row">
<div class="col-3">
<form>
<select class="form-select " name="produ" id="produ">
</select>
</div>
</form>
</div>
<div class="col-6">
<form>
<label for="textfield">Descripcion:</label>
<div>
<input class="form-control" type="text" id="descri"
name="descri">
</div>
</form>
</div>
<form class="w-75 mx-auto">
<label for="textfield">Total:</label>
<input class="form-control" type="text" id="total"
name="total" readonly>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-6">
<form>
<label for="textfield">U/M:</label>
<select class="form-select " name="u/m" id="u/m">
</select>
</div>
</form>
</div>
<div class="col-6">
<form >
<input class="form-control" type="number" id="canti"
name="canti" min="1">
</div>
</form>
</div>
</div><br>
<form>
<button class="btn btn-secondary" id="agregar"
type="submit">Agregar +</button>
<button class="btn btn-warning" id="agregar"
type="button">Limpiar</button>
</form>
</div><br>
</div><br>
<div class="container border border-3 rounded" style="background-
color: rgba(0, 0, 0, 0.521);">
<h5 class="text-center">DATOS DEL CLIENTE O EMPRESA</h5>
<div class="row">
<div class="col-6">
<label for="textfield">Nombre Completo o Empresa:</label>
<input class="form-control" type="text" id="nom_cliente"
required>
</div>
</div>
<div class="col-3">
<label for="textfield">Nit:</label>
<div>
<input class="form-control" type="number" id="nit" min="1"
required>
</div><br>
</div>
<div class="col-3">
<input class="form-control" type="date" id="fecha" required>
</div>
<div class=" text-center">
<form>
<button class="btn btn-secondary" id="rventa" type="submit"
value="1">Realizar Venta</button>
<button class="btn btn-secondary" id="rprofor" type="submit"
value="2">Realizar Proforma</button>
<button class="btn btn-warning" id="limpi" type="button"
</form>
</div>
</div><br>
</div>
</div>
<div class="col-md-6 text-white border border-3 rounded"
<h5 class="text-center">PRODUCTOS AGREGADOS</h5>
id="tabla" style="font-size: 13px;">
<thead>
<tr>
<th style="width:10%;">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Realizer venta
<!DOCTYPE html>
<html lang="en">
<head>
<title>Realizar Venta</title>

</head>
</div>
Administrador
</div>
</div>
</nav>
<div class="container-fluid">
<h3 class="text-center text-white">ORDEN DE VENTA</h3>
<div class="row">
<div class="col-md-6 text-white">
<div class="container border border-3 border-white rounded"
<h5 class="text-center">SELECCION DE PRODUCTOS</h5>
<div class="row">
<div class="col-3">
<form>
<select class="form-select " name="produ" id="produ">
</select>
</div>
</form>
</div>
<div class="col-6">
<form>
<label for="textfield">Descripcion:</label>
<div>
<input class="form-control" type="text" id="descri"
name="descri">
</div>
</form>
</div>
<form class="w-75 mx-auto">
<label for="textfield">Total:</label>
<input class="form-control" type="text" id="total"
name="total" readonly>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-6">
<form>
<label for="textfield">U/M:</label>
<select class="form-select " name="u/m" id="u/m">
</select>
</div>
</form>
</div>
<div class="col-6">
<form >
<input class="form-control" type="number" id="canti"
name="canti" min="1">
</div>
</form>
</div>
</div><br>
<form>
<button class="btn btn-secondary" id="agregar"
type="submit">Agregar +</button>
<button class="btn btn-warning" id="agregar"
type="button">Limpiar</button>
</form>
</div><br>
</div><br>
<div class="container border border-3 rounded" style="background-
color: rgba(0, 0, 0, 0.521);">
<h5 class="text-center">DATOS DEL CLIENTE O EMPRESA</h5>
<div class="row">
<div class="col-6">
<label for="textfield">Nombre Completo o Empresa:</label>
<input class="form-control" type="text" id="nom_cliente"
required>
</div>
</div>
<div class="col-3">
<label for="textfield">Nit:</label>
<div>
<input class="form-control" type="number" id="nit" min="1"
required>
</div><br>
</div>
<div class="col-3">
<input class="form-control" type="date" id="fecha" required>
</div>
<div class=" text-center">
<form>
<button class="btn btn-secondary" id="rventa" type="submit"
value="1">Realizar Venta</button>
<button class="btn btn-secondary" id="rprofor" type="submit"
value="2">Realizar Proforma</button>
<button class="btn btn-warning" id="limpi" type="button"
</form>
</div>
</div><br>
</div>
</div>
<div class="col-md-6 text-white border border-3 rounded"
<h5 class="text-center">PRODUCTOS AGREGADOS</h5>
id="tabla" style="font-size: 13px;">
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Registro clients
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registro Clientes</title>

</head>
</div>
Administrador
</div>
</div>
</nav>
<h5 class="text-center">CLIENTES REGISTRADOS</h5>
<label class="form-label" for="datatable-search-input">Buscar:</label>
<input type="search" class="form-control w-25" id="datatable-search-
input" aria-label="Buscar" placeholder="Buscar Producto">
</div>
id="tabla">
<thead>
<tr>
<th style="width:30%;">Nombre Completo</th>
<th style="width:15%;">Telefono</th>
<th style="width:20%;">Correo</th>
<th style="width:20%;">NIT</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
Registro venta
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registro de Venta</title>

</head>
</div>
Administrador
</div>
</div>
</nav>
<h4 class="text-center">REGISTRO VENTAS</h4>
<label class="form-label" for="datatable-search-input">Buscar:</label>
<input type="search" class="form-control w-25" id="datatable-search-
input" aria-label="Buscar" placeholder="Buscar Producto">
</div>
id="tablaVenta" style="font-size: 13px;">
<thead>
<tr>
<th style="width:25%;">Cliente</th>
<th style="width:20%;">Productos</th>
<th style="width:20%;">NIT</th>
<th style="width:10%;">Fecha De Ventas</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>

Usuarios

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Usuarios

Uploaded by

Copyright:

Available Formats

<!

if(!isNaN(nom_pro) && dpro!="" && fecha!="" && !isNaN(um) && !

Realizer venta html

You might also like