Pop-up funcionando

src/app/app.component.ts

@@ -12,8 +12,8 @@ export class AppComponent {
 
 
   abrirPopupCrearPedido(): void {
   abrirPopupCrearPedido(): void {
     const dialogRef = this.dialog.open(CrearPedidoDialogComponent, {
     const dialogRef = this.dialog.open(CrearPedidoDialogComponent, {
-      width: '1200px', 
-      height: '800px', 
+      width: '1100px', 
+      height: '830px', 
     });
     });
 
 
     dialogRef.afterClosed().subscribe(result => {
     dialogRef.afterClosed().subscribe(result => {

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

-.map-container {
+/* Estilo general del contenedor de la ventana de diálogo */
+.dialog-container {
   display: flex;
   display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-  
-  .map-row {
-    display: flex;
-  }
-  
-  .map-block {
-    width: 50px; /* o el tamaño de tus cuadros */
-    height: 50px;
-    margin: 2px;
-    position: relative; /* para que el pseudo-elemento se posicione correctamente */
-  }
-  
-  .map-block:hover::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.2); /* Cambia el color y la opacidad para el efecto de resaltado */
-  }
-  
-  .highlighted {
-    border: 2px solid blue; /* O cualquier otro estilo para resaltar */
-  }
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 20px;
+  gap: 20px;
+  margin-top: 20px;
+}
 
 
-  /* Asegúrate de ajustar también los estilos de .punto-recogida y .punto-entrega */
-  .punto-recogida img, .punto-entrega img {
-    max-width: 100px; /* Cambiar a lo que sea adecuado para tu diseño */
-    max-height: 100px;
-    display: block; /* Para que se centre en el div si es más pequeño */
-    margin: auto;
-  }
-  .seleccion {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 20px;
-  }
+/* Estilo del área donde se muestra el mapa */
+.map-area {
+  width: 60%; /* Ajustar según necesidades */
+  margin-left: 70px;
+}
 
 
-  .puntos {
+.puntos {
   display: flex;
   display: flex;
   justify-content: space-between;
   justify-content: space-between;
   width: 100%;
   width: 100%;
   margin-bottom: 10px;
   margin-bottom: 10px;
-  }
+}
+/* Estilo para el título y los puntos de recogida y entrega */
+.titulo-dialogo {
+  font-size: 37px;
+  font-weight: bold;
+  margin-bottom: 30px; /* Espacio entre los elementos */
+}
 
 
-  .acciones {
-    width: 100%;
+/* Estilo del contenedor que incluye los puntos de recogida y entrega */
+.puntos-container {
   display: flex;
   display: flex;
-    justify-content: space-between;
-  }
+  flex-direction: column;
+  align-items: flex-start;
+  width: 35%; /* Ajustar según necesidades */
+  padding: 20px;
 
 
-  button {
+}
+
+/* Estilo para los botones */
+.dialog-button {
   padding: 10px 20px;
   padding: 10px 20px;
   cursor: pointer;
   cursor: pointer;
-    background-color: #007bff;
-    color: white;
   border: none;
   border: none;
   border-radius: 5px;
   border-radius: 5px;
-    margin: 0 5px; /* Asegura algo de espacio entre los botones */
-  }
+  margin-bottom: 10px; /* Espacio entre botones */
+  width: 100%; /* Ajustar para que ocupen todo el ancho */
+  box-sizing: border-box; /* Asegurarse de que el padding no afecte el ancho total */
+
+  font-size: 18px; /* Tamaño de fuente más grande para los botones */
+}
 
 
-  button:hover {
-    background-color: #0056b3; /* Un color más oscuro para el efecto hover */
-  }
+/* Estilo específico para el botón de cambiar puntos */
+.cambiar-puntos-button {
+  background-color: #ccc; /* Color gris para el fondo */
+  color: #0056b3; /* Color azul para el texto */
+  font-weight: bold; /* Negrita para el texto */}
 
 
-  button:disabled {
-    background-color: #ccc; /* Un color neutro para botones deshabilitados */
-  }
+/* Estilo específico para el botón de confirmar pedido */
+.confirmar-pedido-button {
+  background-color: #007bff; /* Color azul para el fondo */
+  color: white; /* Color blanco para el texto */
+  margin-top: 30px; /* Añadir un poco de espacio en la parte superior del botón */
+  padding: 20px;
+  font-size: 24px; /* Tamaño de fuente más grande para el botón */
+  font-weight: bold; /* Negrita para el texto */
+}
+
+/* Imágenes de los puntos de recogida y entrega */
+.punto-recogida img, .punto-entrega img {
+  max-width: 80px; /* Tamaño más pequeño de las imágenes */
+  max-height: 80px;
+  border: 1px solid #ddd; /* Borde para las imágenes */
+}
+.punto-recogida, .punto-entrega {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Centra horizontalmente */
+  justify-content: center; /* Centra verticalmente */
+  margin-bottom: 10px;
+}
 
 
+/* Estilos para los títulos de los puntos */
+.punto-recogida p, .punto-entrega p {
+  font-size: 20px; /* Tamaño de fuente más grande para los títulos */
+  font-weight: bold; /* Negrita para los títulos */
+  margin: 5px 0; /* Espacio alrededor de los títulos */
+}

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

-<h2>Crear nuevo pedido</h2>
+<div class="dialog-container">
   
   
-<div class="seleccion">
+  <!-- Contenedor de información y acciones -->
+  <div class="puntos-container">
+    <h2 class="titulo-dialogo">Crear nuevo pedido</h2>
+    
+    <!-- Puntos de recogida y entrega -->
     <div class="puntos">
     <div class="puntos">
       <div class="punto-recogida">
       <div class="punto-recogida">
-      <div>Punto de recogida: Casilla ({{ puntoDeRecogida?.row }}, {{ puntoDeRecogida?.col }})</div>
+        <p>Punto de recogida</p>
         <img *ngIf="puntoDeRecogida" [src]="getImagePath(puntoDeRecogida)" />
         <img *ngIf="puntoDeRecogida" [src]="getImagePath(puntoDeRecogida)" />
+        <p>Casilla ({{ puntoDeRecogida?.row }}, {{ puntoDeRecogida?.col }})</p>
       </div>
       </div>
       <div class="punto-entrega">
       <div class="punto-entrega">
-      <div>Punto de entrega: Casilla ({{ puntoDeEntrega?.row }}, {{ puntoDeEntrega?.col }})</div>
+        <p>Punto de entrega</p>
         <img *ngIf="puntoDeEntrega" [src]="getImagePath(puntoDeEntrega)" />
         <img *ngIf="puntoDeEntrega" [src]="getImagePath(puntoDeEntrega)" />
+        <p>Casilla ({{ puntoDeEntrega?.row }}, {{ puntoDeEntrega?.col }})</p>
       </div>
       </div>
     </div>
     </div>
     
     
+    <!-- Botones de acción -->
     <div class="acciones">
     <div class="acciones">
-    <button (click)="resetSelection()">Cambiar puntos</button>
-    <button (click)="confirmSelection()">Confirmar pedido</button>
+      <button class="dialog-button cambiar-puntos-button" (click)="resetSelection()">Cambiar puntos</button>
+      <button class="dialog-button confirmar-pedido-button" (click)="confirmSelection()" [disabled]="!puntoDeRecogida || !puntoDeEntrega">Confirmar pedido</button>
+    </div>
   </div>
   </div>
-</div>
 
 
-<app-mapa (blockSelected)="onBlockSelected($event)"></app-mapa>
+  <!-- Contenedor del mapa -->
+  <div class="map-area">
+    <app-mapa (blockSelected)="onBlockSelected($event)"></app-mapa>
+  </div>
+  
+</div>

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

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   styleUrls: ['./crear-pedido-dialog.component.css']
   styleUrls: ['./crear-pedido-dialog.component.css']
 })
 })
 export class CrearPedidoDialogComponent {
 export class CrearPedidoDialogComponent {
-  puntoDeRecogida: {id: string, row: number, col: number} | null = null;
+puntoDeRecogida: {id: string, row: number, col: number} | null = null;
 puntoDeEntrega: {id: string, row: number, col: number} | null = null;
 puntoDeEntrega: {id: string, row: number, col: number} | null = null;
 
 
 onBlockSelected(event: {id: string, row: number, col: number}): void {
 onBlockSelected(event: {id: string, row: number, col: number}): void {
@@ -15,22 +15,17 @@ onBlockSelected(event: {id: string, row: number, col: number}): void {
     // Actualiza los estilos de resaltado aquí si es necesario
     // Actualiza los estilos de resaltado aquí si es necesario
   } else if (!this.puntoDeEntrega && (this.puntoDeRecogida.row !== event.row || this.puntoDeRecogida.col !== event.col)) {
   } else if (!this.puntoDeEntrega && (this.puntoDeRecogida.row !== event.row || this.puntoDeRecogida.col !== event.col)) {
     this.puntoDeEntrega = event;
     this.puntoDeEntrega = event;
-    // Actualiza los estilos de resaltado aquí si es necesario
   }
   }
 }
 }
 
 
 // Actualiza getImagePath para trabajar con las coordenadas
 // Actualiza getImagePath para trabajar con las coordenadas
 getImagePath(block: {id: string, row: number, col: number}): string {
 getImagePath(block: {id: string, row: number, col: number}): string {
-  // Esta función debe devolver la ruta correcta para tus imágenes basadas en el ID
   return `assets/${block.id}.png`;
   return `assets/${block.id}.png`;
 }
 }
 
 
-  highlightedBlock: string | null = null; // Nuevo estado para el bloque resaltado
-
   resetSelection(): void {
   resetSelection(): void {
     this.puntoDeRecogida = null;
     this.puntoDeRecogida = null;
     this.puntoDeEntrega = null;
     this.puntoDeEntrega = null;
-    this.highlightedBlock = null; // Eliminar el resaltado
   }
   }
 
 
   confirmSelection(): void {
   confirmSelection(): void {
@@ -41,17 +36,4 @@ getImagePath(block: {id: string, row: number, col: number}): string {
       this.resetSelection(); // Resetear selección tras confirmar el pedido
       this.resetSelection(); // Resetear selección tras confirmar el pedido
     }
     }
   }
   }
-  /*
-  highlightBlock(blockId: string): void {
-    if (!this.puntoDeRecogida || (this.puntoDeRecogida && blockId !== this.puntoDeRecogida)) {
-      this.highlightedBlock = blockId;
-    }
-  }
-  
-  unhighlightBlock(blockId: string): void {
-    if (this.highlightedBlock === blockId) {
-      this.highlightedBlock = null;
-    }
-  }
-  */
 }
 }

src/app/mapa/mapa.component.css

@@ -20,7 +20,6 @@
   .map-block {
   .map-block {
     width: 100px; /* Ajusta este valor según tus necesidades */
     width: 100px; /* Ajusta este valor según tus necesidades */
     height: 100px; /* Ajusta este valor según tus necesidades */
     height: 100px; /* Ajusta este valor según tus necesidades */
-    margin: 3px;
     position: relative; /* para que el pseudo-elemento se posicione correctamente */
     position: relative; /* para que el pseudo-elemento se posicione correctamente */
     cursor: pointer; /* Cambia el cursor para indicar que el bloque es clickeable */
     cursor: pointer; /* Cambia el cursor para indicar que el bloque es clickeable */
     border: 3px solid transparent; /* Añade un borde transparente para mantener el tamaño constante */
     border: 3px solid transparent; /* Añade un borde transparente para mantener el tamaño constante */
@@ -31,11 +30,3 @@
     border-color: grey; /* Borde gris al pasar el ratón */
     border-color: grey; /* Borde gris al pasar el ratón */
   }
   }
   
   
-  /* Estilos para cuando un bloque está seleccionado como punto de recogida o entrega */
-  .selected-pickup {
-    border: 4px solid red; /* Borde rojo para punto de recogida */
-  }
-  
-  .selected-delivery {
-    border: 4px solid orange; /* Borde naranja para punto de entrega */
-  }
\ No newline at end of file

src/app/mapa/mapa.component.html

@@ -2,8 +2,6 @@
   <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
   <div *ngFor="let row of mapMatrix; let rowIndex = index" class="map-row">
     <div *ngFor="let blockId of row; let colIndex = index" class="map-block"
     <div *ngFor="let blockId of row; let colIndex = index" class="map-block"
      (click)="onBlockClick(blockId, rowIndex, colIndex)"
      (click)="onBlockClick(blockId, rowIndex, colIndex)"
-     (mouseover)="onBlockMouseOver(blockId)"
-     (mouseleave)="onBlockMouseLeave(blockId)"
      [class.selected-pickup]="selectedPickupId === blockId"
      [class.selected-pickup]="selectedPickupId === blockId"
      [class.selected-delivery]="selectedDeliveryId === blockId">
      [class.selected-delivery]="selectedDeliveryId === blockId">
   <img [src]="'assets/' + getBlockImagePath(blockId)" [alt]="'Bloque ' + blockId">
   <img [src]="'assets/' + getBlockImagePath(blockId)" [alt]="'Bloque ' + blockId">

src/app/mapa/mapa.component.ts

@@ -14,7 +14,13 @@ export class MapaComponent implements OnInit {
   mapStr: string = "0202000105030705000200041109060110031000000200080101100110000106010701";
   mapStr: string = "0202000105030705000200041109060110031000000200080101100110000106010701";
   rows: number = 7;
   rows: number = 7;
   cols: number = 5;
   cols: number = 5;
+// Listado de bloques no seleccionables
+notSelectableBlocks: string[] = ['00', '07', '08', '09', '10', '11'];
 
 
+// Método para determinar si un bloque es seleccionable
+isBlockSelectable(blockId: string): boolean {
+  return !this.notSelectableBlocks.includes(blockId);
+}
   constructor(private MapaService: MapaService) {}
   constructor(private MapaService: MapaService) {}
 
 
   ngOnInit(): void {
   ngOnInit(): void {
@@ -25,25 +31,22 @@ export class MapaComponent implements OnInit {
     return this.MapaService.getBlockImage(id);
     return this.MapaService.getBlockImage(id);
   }
   }
     
     
-  @Output() blockHovered = new EventEmitter<string>();
-  @Output() blockUnhovered = new EventEmitter<string>();
   // Añade nuevas propiedades para manejar los bordes
   // Añade nuevas propiedades para manejar los bordes
   selectedPickupId: string | null = null;
   selectedPickupId: string | null = null;
   selectedDeliveryId: string | null = null;
   selectedDeliveryId: string | null = null;
 
 
-  onBlockMouseOver(blockId: string): void {
-    // Esta función será llamada cuando el mouse pase por encima de un bloque
-    this.blockHovered.emit(blockId);
-  }
-
-  onBlockMouseLeave(blockId: string): void {
-    // Esta función será llamada cuando el mouse deje de pasar por encima de un bloque
-    this.blockUnhovered.emit(blockId);
-  }
+  @Output() invalidBlockClicked = new EventEmitter<void>();
 
 
   onBlockClick(blockId: string, row: number, col: number): void {
   onBlockClick(blockId: string, row: number, col: number): void {
+    if (this.isBlockSelectable(blockId)) {
+    
     // Emitir también la fila y la columna
     // Emitir también la fila y la columna
     this.blockSelected.emit({id: blockId, row, col});
     this.blockSelected.emit({id: blockId, row, col});
+    }else{ 
+    this.invalidBlockClicked.emit();
+          alert('Este bloque no es válido para selección.');
+
+    }
   }
   }
 }
 }
 
 

src/app/servicio-pedido.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ServicioPedidoService } from './servicio-pedido.service';
+
+describe('ServicioPedidoService', () => {
+  let service: ServicioPedidoService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ServicioPedidoService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/servicio-pedido.service.ts

+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { Pedido } from './pedido.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServicioPedidoService {
+  private pedidosSource = new BehaviorSubject<Pedido[]>([]);
+  pedidos$ = this.pedidosSource.asObservable();
+
+  agregarPedido(pedido: Pedido): void {
+    const pedidosActuales = this.pedidosSource.getValue();
+    this.pedidosSource.next([...pedidosActuales, pedido]);
+  }
+}
\ No newline at end of file