Hola ¿Qué tal? Buenas noches, espero que se encuentren bien.
Tengo una duda acerca de Listas Enlazadas Simples.
¿Cómo puedo hacer para que en una página HTML (trabajador.html) a través del registro de un coche se clickea un boton y esa información de registro se vaya a otra pagina HTML (admin.html) y se imprima dicha información en pantalla?
Adjunto el código, gracias por la ayuda.
Main.js
//Lista enlazada
class Node {
constructor(dato, siguiente = null) {
this.dato = dato;
this.siguiente = siguiente;
}
}
// crea/obtiene/remover nodos de la listas enlazasas
class ListaEnlazada {
constructor() {
this.head = null;
this.tamano = 0;
}
// insertar el primer nodo
insertarPrimero(dato) {
this.head = new Node(dato, this.head);
this.tamano++;
}
// insertar el ultimo nodo
insertarUltimo(dato) {
let node = new Node(dato);
let actual;
// si esta vacion hacerlo la cabecera
if (!this.head) {
this.head = node;
} else {
actual = this.head;
while (actual.siguiente) {
actual = actual.siguiente;
}
actual.siguiente = node;
}
this.tamano++;
}
// insertar un indice
insertarEn(dato, indice) {
// si el indice esta fuera de rango
if (indice > 0 && indice > this.tamano) {
return;
}
// si es el primer indice
if (indice === 0) {
this.insertarPrimero(dato);
return;
}
const node = new Node(dato);
let actual, anterior;
// hacer la cabeza el nodo actual
actual = this.head;
let contador = 0;
while (contador < indice) {
anterior = actual; // bid abntes de indice
contador++;
actual = actual.siguiente; // Nodo despues del indice
}
node.siguiente = actual;
anterior.siguiente = node;
this.tamano++;
}
// obtene run indice
obtenerEn(indice) {
let actual = this.head;
let contador = 0;
while (actual) {
if (contador == indice) {
//console.log(actual.dato);
return actual.dato;
}
contador++;
actual = actual.siguiente;
}
return null;
}
// remover el indice
removerEn(indice) {
if (indice > 0 && indice > this.tamano) {
return;
}
let actual = this.head;
let anterior;
let contador = 0;
// remover el primer
if (indice === 0) {
this.head = actual.siguiente;
} else {
while (contador < indice) {
contador++;
anterior = actual;
actual = actual.siguiente;
}
anterior.siguiente = actual.siguiente;
}
this.tamano--;
}
// limpiar lista
limpiarLista() {
this.head = null;
this.tamano = 0;
}
// imprmir los datos de la lista
printListdato() {
let actual = this.head;
while (actual) {
console.log(actual.dato);
actual = actual.siguiente;
}
}
}
// Declara aquí las clases
class Automovil {
constructor(id, marca, modelo, placas, descripcion) {
this.id = id;
this.marca = marca;
this.modelo = modelo;
this.placas = placas;
this.descripcion = descripcion;
}
}
class Empleado {
constructor(usuario, password) {
this.usuario = usuario;
this.password = password;
}
accederSistema(usuario, password) {
this.bandera = false;
if (usuario === this.usuario && password === this.password) {
this.bandera = true;
}
return this.bandera;
}
}
class Servicio {
constructor(nombre, costo) {
this.nombre = nombre;
this.costo = costo;
}
editarPropiedades(nombre, costo) {
this.nombre = nombre;
this.costo = costo;
}
}
// Logica del Programa
const administrador = new Empleado('Administrador','admin1');
const trabajador = new Empleado('Trabajador', 'trabaja1');
function obtenerDOM(id) {
let valor = document.getElementById(id).value;
return valor;
}
//Login
function entrar(){
let usuario = obtenerDOM('usuario');
let password = obtenerDOM('password');
//Validar las credenciales de acceso
let accesoAdmin = administrador.accederSistema(usuario,password);
let accesoTrabaja = trabajador.accederSistema(usuario,password);
if (accesoAdmin) {
//Acceso correcto para el admin
window.location = "admin.html"
} else if (accesoTrabaja) {
//Si no es admin, acceso correcto para el trabajador
window.location = "trabajador.html"
} else {
}
}
// Logica para el administrador
const listaServicios = new ListaEnlazada();
//Cargar servicios
const servicio0 = new Servicio('Cambio de aceite', 750);
listaServicios.insertarUltimo(servicio0);
const servicio1 = new Servicio('Revisión y ajuste del sistema de frenos', 1500);
listaServicios.insertarUltimo(servicio1);
const servicio2 = new Servicio('Rotación de neumaticos', 300);
listaServicios.insertarUltimo(servicio2);
const servicio3 = new Servicio('Alineación y balanceo', 600);
listaServicios.insertarUltimo(servicio3);
const servicio4 = new Servicio('Mantenimiento del sistema de enfriamiento', 1000);
listaServicios.insertarUltimo(servicio4);
const servicio5 = new Servicio('Cambio de correas', 500);
listaServicios.insertarUltimo(servicio5);
const servicio6 = new Servicio('Mantenimiento del sistema de indiección de combustible', 1000);
listaServicios.insertarUltimo(servicio6);
const servicio7 = new Servicio('Cambio de baterías', 200);
listaServicios.insertarUltimo(servicio7);
const servicio8 = new Servicio('Mantenimiento del sistema de suspencion', 1100);
listaServicios.insertarUltimo(servicio8);
const servicio9 = new Servicio('Remplazo de fluidos', 500);
listaServicios.insertarUltimo(servicio9);
//Opcion de cargar nuevo servicio
function nuevoServicio() {
//Hacer que aparesca estos campos
let nombre = obtenerDOM('nombreServicio');
let costo = parseFloat(obtenerDOM('costoServicio'));
const servicio = new Servicio(nombre,costo);
listaServicios.insertarUltimo(servicio);
//Actualizar la tabla de servicios
}
//Opcion editar servicios
function editarServicio() {
//seleccionar un servicio
//buscarlo en la lista
//editar sus propiedades
let nombre = obtenerDOM('nombreServicio');
let costo = parseFloat(obtenerDOM('costoServicio'));
//listaServicios.Obteneren(indice).editarPropiedades(nombre,costo);
//Actualizar la tabla de servicios
}
function verServicios() {
//mostrar tabla de servicios
}
function verServiciosContratados() {
//sumar costos
}
Trabajador.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trabajador de Taller Mecánico</title>
</head>
<body>
<h1>Datos del coche</h1>
<p>
<label for="marca">Marca del coche: </label>
<select name="" id="marca">
<option value="">Chevrolet</option>
<option value="">Ford</option>
<option value="">Toyota</option>
<option value="">Nissan</option>
<option value="">Volkswagen</option>
<option value="">Honda</option>
<option value="">Mercedes-Benz</option>
<option value="">BMW</option>
<option value="">Audi</option>
<option value="">Hyundai</option>
<option value="">Fiat</option>
<option value="">Peugeot</option>
<option value="">Renault</option>
<option value="">Mitsubishi</option>
<option value="">Subaru</option>
<option value="">Kia</option>
<option value="">Volvo</option>
<option value="">Land Rover</option>
<option value="">Jeep</option>
<option value="">RAM</option>
<option value="">Dodge</option>
<option value="">GMC</option>
</select>
</p>
<p>
<label for="modelo">Modelo del coche: </label>
<input type="text" id="modelo">
</p>
<p>
<label for="placas">Número de Placas: </label>
<input type="text" id="placas" maxlength="7" >
</p>
<p>
<label for="descripcion">Descripción del problema: </label>
<input type="text">
</p>
<label for="servicios">Servicios por realizar: </label>
<br>
<br> Cambio de aceite $750 <input type="checkbox" name="" id="">
<br>
<br> Revision y ajuste del sistema de frenos $1,500 <input type="checkbox" name="" id="">
<br>
<br> Rotación de neumáticos $300 <input type="checkbox" name="" id="">
<br>
<br> Alineación y balanceo $600 <input type="checkbox" name="" id="">
<br>
<br> Mantenimiento del sistema de enfriamento $1000 <input type="checkbox" name="" id="">
<br>
<br> Cambio de correas $500 <input type="checkbox" name="" id="">
<br>
<br> Mantenimieto del sistema de indiección de combustible $1,000 <input type="checkbox" name="" id="">
<br>
<br> Cambio de baterías $200 <input type="checkbox" name="" id="">
<br>
<br> Mantenimiento del sistema de suspención $1,100 <input type="checkbox" name="" id="">
<br>
<br> Remplazo de fluidos $500 <input type="checkbox" name="" id="">
<p>
<label for="servicioExt">Servicio extra: </label>
<br>
Tipo de servicio: <input type="text" id="servicioExt">
<br>
Precio: <input type="number" id="precioExtr">
</p>
</body>
</html>
admin.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
<link rel="stylesheet" href="admin.css">
<title>Administrador</title>
<script src="main.js"></script>
</head>
<body>
<header>
<h1>Bienvenido Administrador</h1>
</header>
<main>
<div class="tablas">
<section class="vista-tablas">
<h2>Servicios disponibles</h2>
<div class="rectangulo">
<table class="tabla">
<tr>
<th>Nombre del servicio</th>
<th>Costo MXN</th>
</tr>
<tr>
<td>gola</td>
<td>Costo MXN</td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
<tr>
<td>gola</td>
<td></td>
</tr>
</table>
</div>
</section>
<section class="vista-tablas">
<h2>Servicios del dia</h2>
<div class="rectangulo">
<table class="tabla">
<tr>
<th id="nombre">Nombre del servicio</th>
<th id="costo">Costo MXN</th>
<th>ID</th>
<th>Horario</th>
</tr>
<tr>
<td>hola</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</section>
</div>
<div class="botones">
<section class="btns-servDispo">
<div class="btn-izquierda">
<button class="btnNegros">Agreagar Servicio</button>
</div>
<div class="btn-derecha">
<button class="btnBlancos" id="editarServicio">Editar Servicio</button>
<button class="btnBlancos">Eliminar Servicio</button>
</div>
</section>
<section class="btns-serDia">
<div class="btn-izquierda">
<button class="btnBlancos" id="moverArriba">Mover Arriba</button>
<button class="btnBlancos">Mover Abajo</button>
</div>
<div class="btn-derecha">
<button class="btnBlancos" id="cancelarServicio">Cancelar Servicio</button>
<button class="btnNegros">Cambiar horario</button>
</div>
</section>
</div>
<div class="formularios">
<section class="form1">
<form action="">
<label for="nombreServicio">Nombre del servicio: </label>
<input type="text" id="nombreServicio" placeholder="Cambio de aceite">
<label for="costoServicio">Costo del servicio: </label>
<input type="number" id="costoServicio" placeholder="00.00">
<input type="button" value="Guardar" class="btnNegros">
</form>
</section>
<section class="form2">
<form action="">
<label for="nombreServicio">Ingrese el horario: </label>
<input type="time" id="horario">
<input type="button" value="Guardar" class="btnNegros">
</form>
</section>
</div>
</main>
<footer>
<button class="btnBlancos" id="volver">Volver</button>
</footer>
</html>
Necesito ayuda ya que soy inexperto en este tema