crear un sistema de almacén en forma de tabla: . No. de parte, descripción, No. de parte, cantidad, sistema: (cougar, MI17-V5) Ubicación (Almacén 1, Almacén 2, Almacén de lubricantes, cuarto frio), estante, botón de búsqueda en la parte superior derecha, editar el componente, eliminar, despachar por cantidades con reporte de retiro y a quien lo retiro y quien lo despacho, historial de despacho por componente y que genere una alerta cuando el inventario del componente llegue a 0 y resalte la celda completa del componente de color rojo, con acceso mediante registro de usuario y cerrar sesión en la parte superior derecha y en la parte superior izquierda una imagen del GAP No.4 y un filtro que me agrupe los sistemas
Aquí te presento un ejemplo de cómo podrías implementar el sistema de almacén en forma de tabla utilizando HTML, CSS y JavaScript:
**index.html**
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema de Almacén</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="gap.png" alt="GAP No.4" style="float: left; margin: 10px;">
<button id="cerrar-sesion">Cerrar Sesión</button>
<input type="text" id="filtro" placeholder="Buscar...">
<button id="boton-buscar">Buscar</button>
</header>
<main>
<table id="tabla-almacen">
<thead>
<tr>
<th>No. de Parte</th>
<th>Descripción</th>
<th>Cantidad</th>
<th>Sistema</th>
<th>Ubicación</th>
<th>Estante</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="cuerpo-tabla">
<!-- Cuerpo de la tabla se llenará con JavaScript -->
</tbody>
</table>
</main>
<script src="script.js"></script>
</body>
</html>
```
**styles.css**
```css
body {
font-family: Arial, sans-serif;
}
header {
background-color: #f0f0f0;
padding: 10px;
border-bottom: 1px solid #ccc;
}
header img {
width: 50px;
height: 50px;
}
#cerrar-sesion {
float: right;
margin: 10px;
}
#filtro {
width: 200px;
height: 30px;
padding: 10px;
font-size: 16px;
}
#boton-buscar {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#boton-buscar:hover {
background-color: #3e8e41;
}
#tabla-almacen {
border-collapse: collapse;
width: 100%;
}
#tabla-almacen th, #tabla-almacen td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
#tabla-almacen th {
background-color: #f0f0f0;
}
#cuerpo-tabla tr:hover {
background-color: #f9f9f9;
}
.alerta {
background-color: #ff0000;
color: #fff;
padding: 10px;
border: 1px solid #ff0000;
}
```
**script.js**
```javascript
// Variables
let usuarios = [
{ nombre: "Juan", password: "1234" },
{ nombre: "Pedro", password: "5678" }
];
let almacen = [
{ noParte: "MI17-V5", descripcion: "Componente 1", cantidad: 10, sistema: "Cougar", ubicacion: "Almacén 1", estante: "Estante 1" },
{ noParte: "MI17-V6", descripcion: "Componente 2", cantidad: 20, sistema: "Cougar", ubicacion: "Almacén 2", estante: "Estante 2" },
{ noParte: "MI17-V7", descripcion: "Componente 3", cantidad: 30, sistema: "Cougar", ubicacion: "Almacén 3", estante: "Estante 3" }
];
let usuarioActual = null;
// Funciones
function iniciarSesion(nombre, password) {
for (let i = 0; i < usuarios.length; i++) {
if (usuarios[i].nombre === nombre && usuarios[i].password === password) {
usuarioActual = usuarios[i];
return true;
}
}
return false;
}
function cerrarSesion() {
usuarioActual = null;
}
function buscarComponente(filtro) {
let resultado = [];
for (let i = 0; i < almacen.length; i++) {
if (almacen[i].noParte.includes(filtro) || almacen[i].descripcion.includes(filtro)) {
resultado.push(almacen[i]);
}
}
return resultado;
}
function agregarComponente() {
let noParte = prompt("Ingrese el número de parte:");
let descripcion = prompt("Ingrese la descripción:");
let cantidad = parseInt(prompt("Ingrese la cantidad:"));
let sistema = prompt("Ingrese el sistema:");
let ubicacion = prompt("Ingrese la ubicación:");
let estante = prompt("Ingrese el estante:");
almacen.push({ noParte, descripcion, cantidad, sistema, ubicacion, estante });
actualizarTabla();
}
function editarComponente(index) {
let noParte = prompt("Ingrese el nuevo número de parte (dejar vacío para mantener el actual):");
let descripcion = prompt("Ingrese la nueva descripción (dejar vacío para mantener la actual):");
let cantidad = parseInt(prompt("Ingrese la nueva cantidad (dejar vacío para mantener la actual):"));
let sistema = prompt("Ingrese el nuevo sistema (dejar vacío para mantener el actual):");
let ubicacion = prompt("Ingrese la nueva ubicación (dejar vacío para mantener la actual):");
let estante = prompt("Ingrese el nuevo estante (dejar vacío para mantener el actual):");
almacen[index].noParte = noParte || almacen[index].noParte;
almacen[index].descripcion = descripcion || almacen[index].descripcion;
almacen[index].cantidad = cantidad || almacen[index].cantidad;
almacen[index].sistema = sistema || almacen[index].sistema;
almacen[index].ubicacion = ubicacion || almacen[index].ubicacion;
almacen[index].estante = estante || almacen[index].estante;
actualizarTabla();
}
function eliminarComponente(index) {
almacen.splice(index, 1);
actualizarTabla();
}
function despacharComponente(index) {
let cantidad = parseInt(prompt("Ingrese la cantidad a despachar:"));
if (cantidad > almacen[index].cantidad) {
alert("No hay suficiente cantidad para despachar.");
return;
}
almacen[index].cantidad -= cantidad;
let despachador = prompt("Ingrese el nombre del despachador:");
let reporte = `Componente ${almacen[index].noParte} despachado a ${despachador} en cantidad de ${cantidad}.`;
alert(reporte);
actualizarTabla();
}
function actualizarTabla() {
let cuerpoTabla = document.getElementById("cuerpo-tabla");
cuerpoTabla.innerHTML = "";
for (let i = 0; i < almacen.length; i++) {
let fila = document.createElement("tr");
let noParte = document.createElement("td");
noParte.textContent = almacen[i].noParte;
fila.appendChild(noParte);
let descripcion = document.createElement("td");
descripcion.textContent = almacen[i].descripcion;
fila.appendChild(descripcion);
let cantidad = document.createElement("td");
cantidad.textContent = almacen[i].cantidad;
fila.appendChild(cantidad);
let sistema = document.createElement("td");
sistema.textContent = almacen[i].sistema;
fila.appendChild(sistema);
let ubicacion = document.createElement("td");
ubicacion.textContent = almacen[i].ubicacion;
fila.appendChild(ubicacion);
let estante = document.createElement("td");
estante.textContent = almacen[i].estante;
fila.appendChild(estante);
let acciones = document.createElement("td");
let editar = document.createElement("button");
editar.textContent = "Editar";
editar.onclick = function() { editarComponente(i); };
acciones.appendChild(editar);
let eliminar = document.createElement("button");
eliminar.textContent = "Eliminar";
eliminar.onclick = function() { eliminarComponente(i); };
acciones.appendChild(eliminar);
let despachar = document.createElement("button");
despachar.textContent = "Despachar";
despachar.onclick = function() { despacharComponente(i); };
acciones.appendChild(despachar);
fila.appendChild(acciones);
if (almacen[i].cantidad === 0) {
fila.classList.add("alerta");
}
cuerpoTabla.appendChild(fila);
}
}
// Eventos
document.getElementById("cerrar-sesion").addEventListener("click", cerrarSesion);
document.getElementById("filtro").addEventListener("input", function() {
let filtro = this.value;
let resultado = buscarComponente(filtro);
let cuerpoTabla = document.getElementById("cuerpo-tabla");
cuerpoTabla.innerHTML = "";
for (let i = 0; i < resultado.length; i++) {
let fila = document.createElement("tr");
let noParte = document.createElement("td");
noParte.textContent = resultado[i].noParte;
fila.appendChild(noParte);
let descripcion = document.createElement("td");
descripcion.textContent = resultado[i].descripcion;
fila.appendChild(descripcion);
let cantidad = document.createElement("td");
cantidad.textContent = resultado[i].cantidad;
fila.appendChild(cantidad);
let sistema = document.createElement("td");
sistema.textContent = resultado[i].sistema;
fila.appendChild(sistema);
let ubicacion = document.createElement("td");
ubicacion.textContent = resultado[i].ubicacion;
fila.appendChild(ubicacion);
let estante = document.createElement("td");
estante.textContent = resultado[i].estante;
fila.appendChild(estante);
let acciones = document.createElement("td");
let editar = document.createElement("button");
editar.textContent = "Editar";
editar.onclick = function() { editarComponente(resultado.indexOf(resultado[i])); };
acciones.appendChild(editar);
let eliminar = document.createElement("button");
eliminar.textContent = "Eliminar";
eliminar.onclick = function() { eliminarComponente(resultado.indexOf(resultado[i])); };
acciones.appendChild(eliminar);
let despachar = document.createElement("button");
despachar.textContent = "Despachar";
despachar.onclick = function() { despacharComponente(resultado.indexOf(resultado[i])); };
acciones.appendChild(despachar);
fila.appendChild(acciones);
if (resultado[i].cantidad === 0) {
fila.classList.add("alerta");
}
cuerpoTabla.appendChild(fila);
}
});
document.getElementById("boton-buscar").addEventListener("click", function() {
let filtro = document.getElementById("filtro").value;
let resultado = buscarComponente(filtro);
let cuerpoTabla = document.getElementById("cuerpo-tabla");
cuerpoTabla.innerHTML = "";
for (let i = 0; i < resultado.length; i++) {
let fila = document.createElement("tr");
let noParte = document.createElement("td");
noParte.textContent = resultado[i].noParte;
fila.appendChild(noParte);
let descripcion = document.createElement("td");
descripcion.textContent = resultado[i].descripcion;
fila.appendChild(descripcion);
let cantidad = document.createElement("td");
cantidad.textContent = resultado[i].cantidad;
fila.appendChild(cantidad);
let sistema = document.createElement("td");
sistema.textContent = resultado[i].sistema;
fila.appendChild(sistema);
let ubicacion = document.createElement("td");
ubicacion.textContent = resultado[i].ubicacion;
fila.appendChild(ubicacion);
let estante = document.createElement("td");
estante.textContent = resultado[i].estante;
fila.appendChild(estante);
let acciones = document.createElement("td");
let editar = document.createElement("button");
editar.textContent = "Editar";
editar.onclick = function() { editarComponente(resultado.indexOf(resultado[i])); };
acciones.appendChild(editar);
let eliminar = document.createElement("button");
eliminar.textContent = "Eliminar";
eliminar.onclick = function() { eliminarComponente(resultado.indexOf(resultado[i])); };
acciones.appendChild(eliminar);
let despachar = document.createElement("button");
despachar.textContent = "Despachar";
despachar.onclick = function() { despacharComponente(resultado.indexOf(resultado[i])); };
acciones.appendChild(despachar);
fila.appendChild(acciones);
if (resultado[i].cantidad === 0) {
fila.classList.add("alerta");
}
cuerpoTabla.appendChild(fila);
}
});
document.getElementById("boton-buscar").addEventListener("click", function() {
actualizarTabla();
});
```
**Nota:** Este es un ejemplo básico y no incluye validaciones de seguridad ni errores. Debes adaptarlo a tus necesidades y agregar las funcionalidades que requieras.
**Nota 2:** El código utiliza la API de JavaScript para interactuar con el DOM y crear la tabla. Si no estás familiarizado con la API de JavaScript, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella.
**Nota 3:** El código utiliza la función `prompt()` para solicitar al usuario que ingrese información. Si no estás familiarizado con esta función, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella.
**Nota 4:** El código utiliza la función `alert()` para mostrar mensajes de alerta al usuario. Si no estás familiarizado con esta función, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella.
**Nota 5:** El código utiliza la función `confirm()` para solicitar al usuario que confirme una acción. Si no estás familiarizado con esta función, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella.
**Nota 6:** El código utiliza la función `prompt()` para solicitar al usuario que ingrese un