<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bolsa de horas</title>
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 ">
<form>
<h3 class="mt-5 ">Datos del pedido</h3>
<div class="mb-3 mt-3">
<label for="cliente" class="form-label">Cliente:</label>
<input type="text" class="form-control" id="cliente" placeholder="Introduzca el nombre del cliente" name="cliente">
</div>
<div class="mb-3">
<label for="horas" class="form-label">Horas:</label>
<input type="number" class="form-control" id="horas" placeholder="Introduzca las horas" name="horas">
</div>
<div class="btn-group mb-3">
<button type="button" class="btn btn-primary tipoEmpleado">Junior</button>
<button type="button" class="btn btn-primary tipoEmpleado">Senior</button>
<button type="button" class="btn btn-primary tipoEmpleado">Master</button>
</div>
<div>
<button id="addPedido" type="button" class="btn btn-success ">Añadir</button>
</div>
</form>
</div>
<div class="col-md-8 ">
<h1 class="mt-3 display-3 ">Bolsa de horas</h1>
<table class="table table-striped ">
<thead>
<tr>
<th>Nombre cliente</th>
<th>Horas contratadas</th>
<th>Horas restantes</th>
<th>Tipo empleado</th>
<th>Importe</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="tabla">
</tbody>
</table>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
let estado = {} // Para guardar todos los componentes que me hacen falta
window.onload = function () {
// Guardo todos los accesos a los elementos html que necesito
// Me olvido del html para el resto del código
estado.tabla=document.getElementById("tabla");
estado.cliente=document.getElementById("cliente");
estado.horas=document.getElementById("horas");
estado.addPedido=document.getElementById("addPedido");
estado.tipoEmpleado=document.getElementsByClassName("tipoEmpleado");
estado.tipoSeleccionado=""
estado.precios={"Junior":30,"Senior":60,"Master":80}
asociarEventos("tipoEmpleado",clickEmpleado);
estado.pedidos=[]
estado.addPedido.addEventListener("click",addPedido);
iniciar();
}
function iniciar() {
// Rcupero los datos del storage esto se hace solo una vez
getStorageData();
pintarPedidos();
}
function addPedido(){
// Recuperar los datos del formulario
let horas=Number(estado.horas.value);
let precio=estado.precios[estado.tipoSeleccionado] || 30;
let pedido={
nombre:estado.cliente.value,
horas:horas,
tipoEmpleado:estado.tipoSeleccionado, // TODO: a ver que hago con esto
restantes:horas,
importe:horas*precio
}
// Añadir al pedido el objeto
estado.pedidos.push(pedido);
// volver a pintar los datos
pintarPedidos();
}
function consumir(){
let idpedido=this.dataset.idpedido;
estado.pedidos[idpedido].restantes--;
if (estado.pedidos[idpedido].restantes<=0){
estado.pedidos.splice(idpedido,1);
}
pintarPedidos();
}
function clickEmpleado(){
for (let boton of estado.tipoEmpleado){
boton.classList.remove("active");
}
this.classList.add("active");
estado.tipoSeleccionado=this.innerHTML
}
// Una capa intermedia entre la función pura y nuestro programa
// Con el fin de que todo sea más escalable
function pintarPedidos() {
setStorageData();
pintarDatos(estado.pedidos, estado.tabla)
}
function pintarDatos(pedidos, destino) {
lista = "";
let totalHoras=0;
let totalImporte=0;
let i=0;
for (let pedido of pedidos) {
lista += `<tr>
<td>${pedido.nombre}</td>
<td>${pedido.horas}</td>
<td>${pedido.restantes}</td>
<td>${pedido.tipoEmpleado}</td>
<td>${pedido.importe}</td>
<td>
<button data-idpedido="${i}" type="button" class="btn btn-danger btn-sm consumir">
Consumir
</button>
</td></tr>`;
i++
totalHoras+=pedido.restantes;
totalImporte+=pedido.importe
}
lista += pedidos.length>0?`<tr><td></td><td>Horas</td>
<td>${totalHoras}</td><td>Importe</td><td>${totalImporte}</td></tr>`:"";
destino.innerHTML = lista;
asociarEventos("consumir",consumir)
}
// Funciones de localStorage
function getStorageData(){
let pedidos=localStorage.getItem("pedidos") || "[]";
pedidos=JSON.parse(pedidos);
estado.pedidos=pedidos
}
function setStorageData(){
localStorage.setItem("pedidos",JSON.stringify(estado.pedidos))
}
function asociarEventos(clase,funcion){
for (let boton of document.getElementsByClassName(clase)) {
boton.addEventListener("click",funcion);
}
}
