Crear clasroom info en el stepper

ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.css

@@ -36,3 +36,7 @@ button {
 .mat-slide-toggle {
   margin-top: 20px;
 }
+
+mat-slide-toggle{
+  margin-left: 10px;
+}

ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html

@@ -32,7 +32,32 @@
       </form>
     </mat-step>
 
-    <!-- Step 2: Información Adicional -->
+    <!-- Step 2: Classroom Info -->
+    <mat-step *ngIf="generalFormGroup.value.type === 'classroom'" [stepControl]="classroomInfoFormGroup">
+      <form [formGroup]="classroomInfoFormGroup">
+        <ng-template matStepLabel>Información del Aula</ng-template>
+        <mat-form-field class="form-field">
+          <mat-label>Ubicación</mat-label>
+          <input matInput formControlName="location">
+        </mat-form-field>
+        <mat-slide-toggle formControlName="projector">Proyector</mat-slide-toggle>
+        <mat-slide-toggle formControlName="board">Pizarra</mat-slide-toggle>
+        <mat-form-field class="form-field">
+          <mat-label>Aforo</mat-label>
+          <input matInput formControlName="capacity" type="number">
+        </mat-form-field>
+        <mat-form-field class="form-field">
+          <mat-label>Foto (URL) (string de prueba)</mat-label>
+          <input matInput formControlName="photo">
+        </mat-form-field>
+        <div>
+          <button mat-button matStepperPrevious>Atrás</button>
+          <button mat-button matStepperNext>Siguiente</button>
+        </div>
+      </form>
+    </mat-step>
+
+    <!-- Step 3: Información Adicional -->
     <mat-step [stepControl]="additionalInfoFormGroup">
       <form [formGroup]="additionalInfoFormGroup">
         <ng-template matStepLabel>Información Adicional</ng-template>
@@ -47,7 +72,7 @@
       </form>
     </mat-step>
 
-    <!-- Step 3: Configuración de Red -->
+    <!-- Step 4: Configuración de Red -->
     <mat-step [stepControl]="networkSettingsFormGroup">
       <form [formGroup]="networkSettingsFormGroup">
         <ng-template matStepLabel>Configuración de Red</ng-template>

ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts

@@ -13,15 +13,16 @@ export class CreateOrganizationalUnitComponent implements OnInit {
   generalFormGroup: FormGroup;
   additionalInfoFormGroup: FormGroup;
   networkSettingsFormGroup: FormGroup;
+  classroomInfoFormGroup: FormGroup; 
   types: string[] = ['organizational-unit', 'classrooms-group', 'classroom', 'clients-group'];
-  parentUnits: any[] = []; // Array to store parent units fetched from API
+  parentUnits: any[] = []; 
 
-  @Output() unitAdded = new EventEmitter(); // Event emitter to notify parent component about unit addition
+  @Output() unitAdded = new EventEmitter(); 
 
   constructor(
     private _formBuilder: FormBuilder,
     private dialogRef: MatDialogRef<CreateOrganizationalUnitComponent>,
-    private http: HttpClient // Inject HttpClient for HTTP requests
+    private http: HttpClient 
   ) {
     this.generalFormGroup = this._formBuilder.group({
       name: ['', Validators.required],
@@ -48,10 +49,17 @@ export class CreateOrganizationalUnitComponent implements OnInit {
       hardwareProfile: ['', Validators.pattern('https?://.+')],
       validation: [false]
     });
+    this.classroomInfoFormGroup = this._formBuilder.group({
+      location: [''],
+      projector: [false],
+      board: [false],
+      capacity: [0, Validators.min(0)],
+      photo: ['', Validators.pattern('https?://.+')] 
+    });
   }
 
   ngOnInit() {
-    this.loadParentUnits(); // Load parent units when component initializes
+    this.loadParentUnits(); 
   }
 
   loadParentUnits() {
@@ -68,18 +76,41 @@ export class CreateOrganizationalUnitComponent implements OnInit {
   }
 
   onSubmit() {
-    if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) {
+    if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid && (this.generalFormGroup.value.type !== 'classroom' || this.classroomInfoFormGroup.valid)) {
       const parentValue = this.generalFormGroup.value.parent;
 
-      const formData = {
+      const formData: any = {
         name: this.generalFormGroup.value.name,
         parent: parentValue || null,
         description: this.generalFormGroup.value.description,
         comments: this.additionalInfoFormGroup.value.comments,
-        type: this.generalFormGroup.value.type
+        type: this.generalFormGroup.value.type,
+        networkSettings: {
+          proxy: this.networkSettingsFormGroup.value.proxy,
+          dns: this.networkSettingsFormGroup.value.dns,
+          netmask: this.networkSettingsFormGroup.value.netmask,
+          router: this.networkSettingsFormGroup.value.router,
+          ntp: this.networkSettingsFormGroup.value.ntp,
+          p2pMode: this.networkSettingsFormGroup.value.p2pMode,
+          p2pTime: this.networkSettingsFormGroup.value.p2pTime,
+          mcastIp: this.networkSettingsFormGroup.value.mcastIp,
+          mcastSpeed: this.networkSettingsFormGroup.value.mcastSpeed,
+          mcastPort: this.networkSettingsFormGroup.value.mcastPort,
+          mcastMode: this.networkSettingsFormGroup.value.mcastMode,
+          menu: this.networkSettingsFormGroup.value.menu,
+          hardwareProfile: this.networkSettingsFormGroup.value.hardwareProfile,
+          validation: this.networkSettingsFormGroup.value.validation
+        }
       };
 
-      // Realizar la solicitud POST
+      if (this.generalFormGroup.value.type === 'classroom') {
+        formData.location = this.classroomInfoFormGroup.value.location;
+        formData.projector = this.classroomInfoFormGroup.value.projector;
+        formData.board = this.classroomInfoFormGroup.value.board;
+        formData.capacity = this.classroomInfoFormGroup.value.capacity;
+        formData.photo = this.classroomInfoFormGroup.value.photo; 
+      }
+
       console.log('POST data:', formData);
       const postUrl = 'http://127.0.0.1:8080/organizational-units';
       const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
@@ -87,19 +118,16 @@ export class CreateOrganizationalUnitComponent implements OnInit {
       this.http.post<any>(postUrl, formData, { headers }).subscribe(
         response => {
           console.log('POST successful:', response);
-          // Emitir evento para notificar que se ha añadido una nueva unidad
           this.unitAdded.emit();
-          this.dialogRef.close(); // Cerrar el diálogo después de añadir
+          this.dialogRef.close(); 
         },
         error => {
           console.error('Error al realizar POST:', error);
-          // Manejar el error según sea necesario
         }
       );
     }
   }
 
-
   onNoClick(): void {
     this.dialogRef.close();
   }