opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Crear clasroom info en el stepper

pull/4/head
Alvaro Puente Mella 2024-07-05 10:55:53 +02:00
parent c2795eda48
commit a477e3fca8
3 changed files with 71 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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>

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

@ -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();
}