Aplicación funcionando perfecta

src/app/app.component.css

@@ -4,7 +4,7 @@
     padding: 20px 20px;
     border: none;
     border-radius: 8px;
-    font-size: 20px;
+    font-size: 28px;
     width: 60%; /* Para que tome todo el ancho del contenedor */
     text-transform: uppercase;
     color: white;

src/app/cola-pedidos/cola-pedidos.component.css

+h2{
+  font-size: 25px;
+}
 .cola-pedidos {
     border: 1px solid #ccc;
     border-radius: 8px;
@@ -7,10 +10,31 @@
   }
   
   .pedido {
-    font-size: 19px;
-    border: 1px solid #aaa;
-    border-radius: 5px;
-    margin-bottom: 8px;
-    padding: 20px;
-    background-color: #eaeaea;
-  }  
\ No newline at end of file
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border: 1px solid #ccc;
+    margin-bottom: 10px;
+    background-color: #f9f9f9;
+    font-size: 20px;
+  }
+  
+  /* Estilos para el contenido del pedido */
+  .pedido-info {
+    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
+  }
+  
+  /* Estilos para el botón de eliminar */
+  .eliminar-pedido-btn {
+    padding: 5px 10px;
+    background-color: #ff4444; /* Rojo para el botón de eliminar */
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    white-space: nowrap; /* Evita que el texto del botón se envuelva */
+    font-size: 20px;
+    margin-right: 20px;
+  }
+  
\ No newline at end of file

src/app/cola-pedidos/cola-pedidos.component.html

 <div class="cola-pedidos">
     <h2>Cola de pedidos</h2>
     <div *ngFor="let pedido of pedidos" class="pedido">
-      <p>Pedido {{ pedido.id }}</p>
-      <p>Punto de recogida: Casilla ({{ pedido.puntoDeRecogida.row }}, {{ pedido.puntoDeRecogida.col }})</p>
-      <p>Punto de entrega: Casilla ({{ pedido.puntoDeEntrega.row }}, {{ pedido.puntoDeEntrega.col }})</p>
+      <div class="pedido-info">
+        <p><strong>Pedido {{ pedido.id }}</strong></p>
+        <p>Punto de recogida: Casilla ({{ pedido.puntoDeRecogida.row }}, {{ pedido.puntoDeRecogida.col }})</p>
+        <p>Punto de entrega: Casilla ({{ pedido.puntoDeEntrega.row }}, {{ pedido.puntoDeEntrega.col }})</p>
+      </div>
+      <button (click)="eliminarPedido(pedido.id)" class="eliminar-pedido-btn">Eliminar</button>    
     </div>
 </div>
\ No newline at end of file

src/app/cola-pedidos/cola-pedidos.component.ts

@@ -17,4 +17,7 @@ export class ColaPedidosComponent implements OnInit {
       this.pedidos = pedidosActualizados;
     });
   }
+  eliminarPedido(id: string): void {
+    this.pedidoService.eliminarPedido(id);
+  }
 }
\ No newline at end of file

src/app/crear-pedido-dialog/crear-pedido-dialog.component.css

@@ -65,6 +65,13 @@
   font-size: 24px; /* Tamaño de fuente más grande para el botón */
   font-weight: bold; /* Negrita para el texto */
 }
+.cambiar-puntos-button:hover {
+  background-color: #a09f9f; /* Color azul más oscuro para el efecto hover */
+}
+.confirmar-pedido-button:hover {
+  background-color: #0056b3; /* Color azul más oscuro para el efecto hover */
+}
+
 
 /* Imágenes de los puntos de recogida y entrega */
 .punto-recogida img, .punto-entrega img {

src/app/estado-pedido/estado-pedido.component.css

@@ -22,6 +22,8 @@
   }
   .estado {
     margin-bottom: 15px;
+    font-size: 25px;
+    font-weight: bold;
 
   }
   .puntosRecogida {

src/app/estado-pedido/estado-pedido.component.html

-    <div class="estado-pedido">
-        <div class="estado">
-          Estado: <span [ngClass]="{'pedido-en-curso': pedidoEnCurso, 'sin-pedido': !pedidoEnCurso}">Pedido {{ pedidoEnCurso ? 'en curso' : 'no está en curso' }}</span>
-          <div class="indicador" [ngClass]="{'verde': pedidoEnCurso, 'rojo': !pedidoEnCurso}"></div>
-        </div>
+<div class="estado-pedido">
+  <div class="estado">
+    Estado: <span [ngClass]="{'pedido-en-curso': pedidoEnCurso, 'sin-pedido': !pedidoEnCurso}">Pedido {{ pedidoEnCurso ? 'en curso' : 'no en curso' }}</span>
+    <div class="indicador" [ngClass]="{'verde': pedidoEnCurso, 'rojo': !pedidoEnCurso}"></div>
+  </div>
+
+  <div *ngIf="pedidoEnCurso">
+    Punto de recogida: {{ puntoDeRecogida }}
+    <div class="puntosRecogida">
 
-    <div *ngIf="pedidoEnCurso">
-      Punto de recogida: Casilla {{ puntoDeRecogida }}<br>
-      <div class="puntosRecogida">
-      Punto de entrega: Casilla {{ puntoDeEntrega }}
-        </div>
-    </div>
+    Punto de entrega: {{ puntoDeEntrega }}
   </div>
-  
\ No newline at end of file
+</div>

src/app/estado-pedido/estado-pedido.component.ts

 import { Component, OnInit } from '@angular/core';
+import { ServicioPedidoService } from '../servicio-pedido.service';  // Asegúrate de que la ruta es correcta
 
 @Component({
   selector: 'app-estado-pedido',
@@ -6,16 +7,24 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./estado-pedido.component.css']
 })
 export class EstadoPedidoComponent implements OnInit {
-  pedidoEnCurso: boolean = true;
+  pedidoEnCurso: boolean = false;
   puntoDeRecogida: string = '';
   puntoDeEntrega: string = '';
 
-  constructor() { }
+  constructor(private pedidoService: ServicioPedidoService) { }
 
   ngOnInit(): void {
-    // Aquí es donde se establecería el estado inicial del pedido
-    // Por defecto, no hay pedidos, por lo que `pedidoEnCurso` es falso
-    // Si hay un pedido activo, se deberían establecer los puntos de recogida y entrega y cambiar `pedidoEnCurso` a verdadero
+    this.pedidoService.pedidos$.subscribe(pedidos => {
+      if (pedidos.length > 0) {
+        const pedidoEnCurso = pedidos[0]; // Siempre considera el primer pedido como el "en curso"
+        this.puntoDeRecogida = `Casilla (${pedidoEnCurso.puntoDeRecogida.row}, ${pedidoEnCurso.puntoDeRecogida.col})`;
+        this.puntoDeEntrega = `Casilla (${pedidoEnCurso.puntoDeEntrega.row}, ${pedidoEnCurso.puntoDeEntrega.col})`;
+        this.pedidoEnCurso = true;
+      } else {
+        this.pedidoEnCurso = false;
+        this.puntoDeRecogida = '';
+        this.puntoDeEntrega = '';
+      }
+    });
   }
-
 }

src/app/mapa/mapa.component.css

@@ -27,6 +27,6 @@
   }
   
   .map-block:hover {
-    border-color: grey; /* Borde gris al pasar el ratón */
+    border-color: rgb(0, 0, 0); /* Borde gris al pasar el ratón */
   }
   

src/app/mapa/mapa.component.ts

@@ -44,7 +44,7 @@ isBlockSelectable(blockId: string): boolean {
     this.blockSelected.emit({id: blockId, row, col});
     }else{ 
     this.invalidBlockClicked.emit();
-          alert('Este bloque no es válido para selección.');
+          alert('Esta casilla no es válida para selección.');
 
     }
   }

src/app/servicio-pedido.service.ts

@@ -6,17 +6,34 @@ import { Pedido } from './pedido.model';
   providedIn: 'root'
 })
 export class ServicioPedidoService {
- private pedidosSubject = new BehaviorSubject<Pedido[]>([]);
+  private pedidosSubject = new BehaviorSubject<Pedido[]>([]);
   pedidos$ = this.pedidosSubject.asObservable();
-
   private ultimoId = 0;
 
   constructor() {}
 
   agregarPedido(pedido: Pedido): void {
-    this.ultimoId++; // Incrementa el ID
+    this.ultimoId++;
     const nuevoPedido = { ...pedido, id: this.ultimoId.toString() };
     const pedidosActuales = this.pedidosSubject.value;
     this.pedidosSubject.next([...pedidosActuales, nuevoPedido]);
   }
-}
\ No newline at end of file
+
+  obtenerPedidoEnCurso(): Pedido | null {
+    const pedidosActuales = this.pedidosSubject.value;
+    return pedidosActuales.length > 0 ? pedidosActuales[0] : null;  // Retorna el primer pedido de la cola
+  }
+
+  finalizarPedidoEnCurso(): void {
+    const pedidosActuales = this.pedidosSubject.value;
+    if (pedidosActuales.length > 0) {
+      pedidosActuales.shift();  // Elimina el primer elemento de la cola
+      this.pedidosSubject.next([...pedidosActuales]);
+    }
+  }
+  eliminarPedido(id: string): void {
+    const pedidosActuales = this.pedidosSubject.value;
+    const pedidosActualizados = pedidosActuales.filter(pedido => pedido.id !== id);
+    this.pedidosSubject.next(pedidosActualizados);
+  }
+}