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

Subnets new stepper modal

oggui/ogdhcp
Alvaro Puente Mella 2024-09-04 10:44:31 +02:00
parent 6be00b2e22
commit f590ff51dc
28 changed files with 218 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ogWebconsole/.vscode/launch.json vendored
View File

@ -7,7 +7,7 @@
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
"url": "http://127.0.0.1:8001/"
},
{
"name": "ng test",

2
ogWebconsole/src/app/components/admin/roles/roles/roles.component.ts
View File

@ -64,7 +64,7 @@ export class RolesComponent implements OnInit {
dialogRef.afterClosed().subscribe(result => {
if (result) {
const apiUrl = `http://127.0.0.1:8080/user-groups/${role.uuid}`;
const apiUrl = `http://127.0.0.1:8081/user-groups/${role.uuid}`;
this.http.delete(apiUrl).subscribe({
next: () => {

2
ogWebconsole/src/app/components/admin/roles/roles/roles.service.ts
View File

@ -12,7 +12,7 @@ interface Role {
providedIn: 'root'
})
export class RoleService {
private apiUrl = 'http://127.0.0.1:8080';
private apiUrl = 'http://127.0.0.1:8081';
constructor(private http: HttpClient) {}

2
ogWebconsole/src/app/components/admin/users/users/users.component.ts
View File

@ -81,7 +81,7 @@ export class UsersComponent implements OnInit {
dialogRef.afterClosed().subscribe(result => {
if (result) {
const apiUrl = `http://127.0.0.1:8080/users/${user.uuid}`;
const apiUrl = `http://127.0.0.1:8081/users/${user.uuid}`;
this.http.delete(apiUrl).subscribe({
next: () => {

2
ogWebconsole/src/app/components/admin/users/users/users.service.ts
View File

@ -26,7 +26,7 @@ interface UserGroup {
providedIn: 'root'
})
export class UserService {
private apiUrl = 'http://127.0.0.1:8080';
private apiUrl = 'http://127.0.0.1:8081';
constructor(private http: HttpClient) {}

2
ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts
View File

@ -85,7 +85,7 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
this.groupedClients.forEach(group => {
group.clientRows.forEach(row => {
row.forEach(client => {
const url = `http://127.0.0.1:8080/clients/${client.uuid}`;
const url = `http://127.0.0.1:8081/clients/${client.uuid}`;
const payload = {
name: client.name,
position: client.position

6
ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts
View File

@ -71,7 +71,7 @@ export class CreateClientComponent implements OnInit {
loadParentUnits() {
this.loading = true;
const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
const url = 'http://127.0.0.1:8081/organizational-units?page=1&itemsPerPage=10000';
this.http.get<any>(url).subscribe(
response => {
@ -87,7 +87,7 @@ export class CreateClientComponent implements OnInit {
loadOgLives() {
const url = 'http://127.0.0.1:8080/og-lives?page=1&itemsPerPage=30';
const url = 'http://127.0.0.1:8081/og-lives?page=1&itemsPerPage=30';
this.http.get<any>(url).subscribe(
response => {
this.ogLives = response['hydra:member'];
@ -104,7 +104,7 @@ export class CreateClientComponent implements OnInit {
const formData = this.clientForm.value;
formData.ogLive = formData.ogLive;
console.log('Form data:', formData );
this.http.post('http://127.0.0.1:8080/clients', formData).subscribe(
this.http.post('http://127.0.0.1:8081/clients', formData).subscribe(
response => {
this.dialogRef.close(response);
this.openSnackBar(false, 'Cliente creado exitosamente');

10
ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts
View File

@ -60,7 +60,7 @@ export class EditClientComponent {
}
loadParentUnits() {
const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
const url = 'http://127.0.0.1:8081/organizational-units?page=1&itemsPerPage=10000';
this.http.get<any>(url).subscribe(
response => {
@ -84,7 +84,7 @@ export class EditClientComponent {
}
loadOgLives(): void {
const url = 'http://127.0.0.1:8080/og-lives?page=1&itemsPerPage=10000';
const url = 'http://127.0.0.1:8081/og-lives?page=1&itemsPerPage=10000';
this.http.get<any>(url).subscribe(
response => {
@ -98,7 +98,7 @@ export class EditClientComponent {
loadData(uuid: string) {
this.loading = true;
const url = `http://127.0.0.1:8080/clients/${uuid}`;
const url = `http://127.0.0.1:8081/clients/${uuid}`;
this.http.get<any>(url).subscribe(
data => {
@ -129,7 +129,7 @@ export class EditClientComponent {
if (this.isEditMode) {
// Edit mode: Send PUT request to update the unit
const putUrl = `http://127.0.0.1:8080/clients/${this.data.uuid}`;
const putUrl = `http://127.0.0.1:8081/clients/${this.data.uuid}`;
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.patch<any>(putUrl, formData, { headers }).subscribe(
@ -146,7 +146,7 @@ export class EditClientComponent {
);
} else {
// Create mode: Send POST request to create a new unit
const postUrl = 'http://127.0.0.1:8080/clients';
const postUrl = 'http://127.0.0.1:8081/clients';
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.post<any>(postUrl, formData, { headers }).subscribe(

16
ogWebconsole/src/app/components/groups/data.service.ts
View File

@ -9,8 +9,8 @@ import { UnidadOrganizativa } from './model';
})
export class DataService {
private apiUrl = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=1000';
private clientsUrl = 'http://127.0.0.1:8080/clients?page=1&itemsPerPage=1000';
private apiUrl = 'http://127.0.0.1:8001/organizational-units?page=1&itemsPerPage=1000';
private clientsUrl = 'http://127.0.0.1:8001/clients?page=1&itemsPerPage=1000';
constructor(private http: HttpClient) {}
@ -68,7 +68,7 @@ export class DataService {
}
getHardwareProfiles(): Observable<any[]> {
const url = 'http://127.0.0.1:8080/hardware-profiles';
const url = 'http://127.0.0.1:8001/hardware-profiles';
return this.http.get<any>(url).pipe(
map(response => {
if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
@ -86,8 +86,8 @@ export class DataService {
deleteElement(uuid: string, type: string): Observable<void> {
const url = type === 'client'
? `http://127.0.0.1:8080/clients/${uuid}`
: `http://127.0.0.1:8080/organizational-units/${uuid}`;
? `http://127.0.0.1:8001/clients/${uuid}`
: `http://127.0.0.1:8001/organizational-units/${uuid}`;
return this.http.delete<void>(url).pipe(
catchError(error => {
console.error('Error deleting element', error);
@ -97,7 +97,7 @@ export class DataService {
}
changeParent(uuid: string): Observable<void> {
const url = `http://127.0.0.1:8080/organizational-units/${uuid}/change-parent`;
const url = `http://127.0.0.1:8001/organizational-units/${uuid}/change-parent`;
// @ts-ignore
return this.http.post<void>(url).pipe(
catchError(error => {
@ -141,7 +141,7 @@ export class DataService {
}
getFilters(): Observable<any> {
return this.http.get<any>('http://127.0.0.1:8080/views?page=1&itemsPerPage=30').pipe(
return this.http.get<any>('http://127.0.0.1:8001/views?page=1&itemsPerPage=30').pipe(
map(response => {
if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
return response['hydra:member'];
@ -157,7 +157,7 @@ export class DataService {
}
getFilter(id: string): Observable<any> {
return this.http.get<any>('http://127.0.0.1:8080/views/' + id).pipe(
return this.http.get<any>('http://127.0.0.1:8001/views/' + id).pipe(
map(response => {

4
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -341,7 +341,7 @@ export class GroupsComponent implements OnInit {
}
};
this.http.post('http://127.0.0.1:8080/views', filters).subscribe(response => {
this.http.post('http://127.0.0.1:8081/views', filters).subscribe(response => {
console.log('Response from server:', response);
this.toastService.success('Se ha guardado el filtro correctamente');
}, error => {
@ -353,7 +353,7 @@ export class GroupsComponent implements OnInit {
}
loadSelectedFilter(savedFilter: any) {
const url = 'http://127.0.0.1:8080/views/' + savedFilter[1];
const url = 'http://127.0.0.1:8081/views/' + savedFilter[1];
console.log('llamando a:', url);
this.dataService.getFilter(savedFilter[1]).subscribe(response => {

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

@ -75,6 +75,15 @@
<mat-step [stepControl]="networkSettingsFormGroup">
<form [formGroup]="networkSettingsFormGroup">
<ng-template matStepLabel i18n="@@networkSettingsStepLabel">Configuración de Red</ng-template>
<mat-form-field class="form-field">
<mat-label i18n="@@nextServerLabel">NextServer</mat-label>
<input matInput formControlName="nextServer">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label i18n="@@bootFileNameLabel">bootFileName</mat-label>
<input matInput formControlName="bootFileName">
</mat-form-field>
<mat-form-field class="form-field">
<mat-label i18n="@@proxyUrlLabel">Url servidor Proxy</mat-label>
<input matInput formControlName="proxy">

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

@ -42,7 +42,7 @@ export class CreateOrganizationalUnitComponent implements OnInit {
private http: HttpClient,
private toastService: ToastrService,
private dataService: DataService,
@Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.generalFormGroup = this._formBuilder.group({
name: ['', Validators.required],
@ -54,6 +54,8 @@ export class CreateOrganizationalUnitComponent implements OnInit {
comments: [''],
});
this.networkSettingsFormGroup = this._formBuilder.group({
nextServer: [''],
bootFileName: [''],
proxy: [''],
dns: [''],
netmask: [''],
@ -65,8 +67,8 @@ export class CreateOrganizationalUnitComponent implements OnInit {
mcastSpeed: [0, Validators.min(0)],
mcastPort: [0, Validators.min(0)],
mcastMode: [''],
menu: [null],
hardwareProfile: [null],
menu: [''],
hardwareProfile: [''],
validation: [false]
});
this.classroomInfoFormGroup = this._formBuilder.group({
@ -83,7 +85,7 @@ export class CreateOrganizationalUnitComponent implements OnInit {
}
loadParentUnits() {
const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
const url = 'http://127.0.0.1:8001/organizational-units?page=1&itemsPerPage=10000';
this.http.get<any>(url).subscribe(
response => {
@ -126,21 +128,13 @@ export class CreateOrganizationalUnitComponent implements OnInit {
const formData: any = {
...generalFormValues,
...classroomInfoFormValues,
comments: additionalInfoFormValues.comments,
networkSettings: { ...networkSettingsFormValues }
};
if (this.generalFormGroup.value.type === 'classroom') {
formData.location = classroomInfoFormValues.location;
formData.projector = classroomInfoFormValues.projector;
formData.board = classroomInfoFormValues.board;
if (classroomInfoFormValues.capacity !== undefined) {
formData.capacity = classroomInfoFormValues.capacity;
}
}
console.log('POST data:', formData);
const postUrl = 'http://127.0.0.1:8080/organizational-units';
const postUrl = 'http://127.0.0.1:8001/organizational-units';
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.post<any>(postUrl, formData, { headers }).subscribe(

8
ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts
View File

@ -88,7 +88,7 @@ export class EditOrganizationalUnitComponent implements OnInit {
}
loadParentUnits() {
const url = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=10000';
const url = 'http://127.0.0.1:8081/organizational-units?page=1&itemsPerPage=10000';
this.http.get<any>(url).subscribe(
response => {
@ -112,7 +112,7 @@ export class EditOrganizationalUnitComponent implements OnInit {
}
loadData(uuid: string) {
const url = `http://127.0.0.1:8080/organizational-units/${uuid}`;
const url = `http://127.0.0.1:8081/organizational-units/${uuid}`;
this.http.get<any>(url).subscribe(
data => {
@ -172,7 +172,7 @@ export class EditOrganizationalUnitComponent implements OnInit {
if (this.isEditMode) {
// Edit mode: Send PUT request to update the unit
const putUrl = `http://127.0.0.1:8080/organizational-units/${this.data.uuid}`;
const putUrl = `http://127.0.0.1:8081/organizational-units/${this.data.uuid}`;
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.put<any>(putUrl, formData, { headers }).subscribe(
@ -187,7 +187,7 @@ export class EditOrganizationalUnitComponent implements OnInit {
);
} else {
// Create mode: Send POST request to create a new unit
const postUrl = 'http://127.0.0.1:8080/organizational-units';
const postUrl = 'http://127.0.0.1:8081/organizational-units';
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.post<any>(postUrl, formData, { headers }).subscribe(

2
ogWebconsole/src/app/components/login/login.component.ts
View File

@ -43,7 +43,7 @@ export class LoginComponent {
return;
}
this.http.post('http://127.0.0.1:8080/auth/login', this.loginObj).subscribe({
this.http.post('http://127.0.0.1:8001/auth/login', this.loginObj).subscribe({
next: (res: any) => {
if (res.token) {
localStorage.setItem('loginToken', res.token);

6
ogWebconsole/src/app/components/ogboot/images/create-image/create-image/create-image.component.ts
View File

@ -33,7 +33,7 @@ export class CreateImageComponent implements OnInit {
}
fetchDownloads(): void {
this.http.get('http://127.0.0.1:8080/og-lives/server/get-isos?page=1&itemsPerPage=30')
this.http.get('http://127.0.0.1:8081/og-lives/server/get-isos?page=1&itemsPerPage=30')
.subscribe({
next: (response: any) => {
this.downloads = response.data.downloads;
@ -56,7 +56,7 @@ export class CreateImageComponent implements OnInit {
};
if (this.isEditMode && this.imageId) {
this.http.patch(`http://127.0.0.1:8080/og-lives/${this.imageId}`, payload)
this.http.patch(`http://127.0.0.1:8081/og-lives/${this.imageId}`, payload)
.subscribe({
next: (response) => {
this.toastService.success('Image updated successfully');
@ -68,7 +68,7 @@ export class CreateImageComponent implements OnInit {
}
});
} else {
this.http.post('http://127.0.0.1:8080/og-lives', payload)
this.http.post('http://127.0.0.1:8081/og-lives', payload)
.subscribe({
next: (response) => {
this.toastService.success('Image created successfully');

2
ogWebconsole/src/app/components/ogboot/images/data.service.ts
View File

@ -7,7 +7,7 @@ import { catchError, map } from 'rxjs/operators';
providedIn: 'root'
})
export class DataService {
private apiUrl = 'http://127.0.0.1:8080/og-lives?page=1&itemsPerPage=1000';
private apiUrl = 'http://127.0.0.1:8081/og-lives?page=1&itemsPerPage=1000';
constructor(private http: HttpClient) {}

2
ogWebconsole/src/app/components/ogboot/images/images.component.ts
View File

@ -62,7 +62,7 @@ export class ImagesComponent implements OnInit {
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
private apiUrl = 'http://127.0.0.1:8080/og-lives';
private apiUrl = 'http://127.0.0.1:8081/og-lives';
constructor(
public dialog: MatDialog,

2
ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.ts
View File

@ -30,7 +30,7 @@ export class OgbootStatusComponent implements OnInit {
}
loadStatus(): void {
this.http.get<any>('http://127.0.0.1:8080/og-boot/status').subscribe(data => {
this.http.get<any>('http://127.0.0.1:8081/og-boot/status').subscribe(data => {
this.diskUsage = data.disk_usage;
this.servicesStatus = data.services_status;
this.installedOglives = data.installed_oglives;

6
ogWebconsole/src/app/components/ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts
View File

@ -39,7 +39,7 @@ export class CreatePxeBootFileComponent implements OnInit {
}
loadPxeTemplates(): void {
this.http.get('http://127.0.0.1:8080/pxe-templates?page=1&itemsPerPage=30')
this.http.get('http://127.0.0.1:8081/pxe-templates?page=1&itemsPerPage=30')
.subscribe((response: any) => {
this.pxeTemplates = response['hydra:member'];
}, error => {
@ -60,7 +60,7 @@ export class CreatePxeBootFileComponent implements OnInit {
if (this.isEditMode && this.data.bootFile) {
// Edit mode: Actualizar boot file existente
this.http.put(`http://127.0.0.1:8080/pxe-boot-files/${this.data.bootFile.uuid}`, payload)
this.http.put(`http://127.0.0.1:8081/pxe-boot-files/${this.data.bootFile.uuid}`, payload)
.subscribe({
next: response => {
this.toastService.success('PXE actualizado con éxito');
@ -72,7 +72,7 @@ export class CreatePxeBootFileComponent implements OnInit {
});
} else {
// Create mode: Crear nuevo boot file
this.http.post('http://127.0.0.1:8080/pxe-boot-files', payload)
this.http.post('http://127.0.0.1:8081/pxe-boot-files', payload)
.subscribe({
next: response => {
this.toastService.success('PXE asignado con éxito');

2
ogWebconsole/src/app/components/ogboot/pxe-boot-files/data.service.ts
View File

@ -8,7 +8,7 @@ import { DataService as TemplateDataService } from './../pxe/data.service';
providedIn: 'root'
})
export class DataService {
private apiUrl = 'http://127.0.0.1:8080/pxe-boot-files?page=1&itemsPerPage=1000';
private apiUrl = 'http://127.0.0.1:8081/pxe-boot-files?page=1&itemsPerPage=1000';
constructor(
private http: HttpClient,

2
ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.ts
View File

@ -51,7 +51,7 @@ export class PxeBootFilesComponent {
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
private apiUrl = 'http://127.0.0.1:8080/pxe-boot-files';
private apiUrl = 'http://127.0.0.1:8081/pxe-boot-files';
constructor(
public dialog: MatDialog,

4
ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.ts
View File

@ -46,7 +46,7 @@ export class CreatePxeTemplateComponent implements OnInit {
templateContent: formValues.templateContent
};
this.http.post<any>('http://127.0.0.1:8080/pxe-templates', payload).subscribe({
this.http.post<any>('http://127.0.0.1:8081/pxe-templates', payload).subscribe({
next: data => {
console.log('Plantilla PXE creada:', data);
this.toastService.success('Plantilla PXE creada exitosamente');
@ -67,7 +67,7 @@ export class CreatePxeTemplateComponent implements OnInit {
templateContent: formValues.templateContent
};
this.http.patch<any>(`http://127.0.0.1:8080/pxe-templates/${this.data.uuid}`, payload).subscribe({
this.http.patch<any>(`http://127.0.0.1:8081/pxe-templates/${this.data.uuid}`, payload).subscribe({
next: data => {
console.log('Plantilla PXE actualizada:', data);
this.toastService.success('Plantilla PXE actualizada exitosamente');

2
ogWebconsole/src/app/components/ogboot/pxe/data.service.ts
View File

@ -8,7 +8,7 @@ import { catchError, map } from 'rxjs/operators';
providedIn: 'root'
})
export class DataService {
private apiUrl = 'http://127.0.0.1:8080/pxe-templates?page=1&itemsPerPage=1000';
private apiUrl = 'http://127.0.0.1:8081/pxe-templates?page=1&itemsPerPage=1000';
constructor(private http: HttpClient) {}

2
ogWebconsole/src/app/components/ogboot/pxe/pxe.component.ts
View File

@ -53,7 +53,7 @@ export class PxeComponent {
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
private apiUrl = 'http://127.0.0.1:8080/pxe-templates';
private apiUrl = 'http://127.0.0.1:8081/pxe-templates';
constructor(
public dialog: MatDialog,

6
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.css
View File

@ -1,4 +1,8 @@
.full-width {
width: 100%;
}
form{
padding: 20px;
}

95
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.html
View File

@ -1,27 +1,70 @@
<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} configuración de red</h2>
<mat-dialog-content>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre</mat-label>
<input matInput [(ngModel)]="name" placeholder="Nombre de la subred">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Netmask</mat-label>
<input matInput [(ngModel)]="netmask" placeholder="Netmask">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Dirección IP</mat-label>
<input matInput [(ngModel)]="ipAddress" placeholder="Dirección IP">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Next Server</mat-label>
<input matInput [(ngModel)]="nextServer" placeholder="Next Server">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Boot File Name</mat-label>
<input matInput [(ngModel)]="bootFileName" placeholder="Boot File Name">
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">Cancelar</button>
<button mat-button (click)="submitForm()" cdkFocusInitial>{{ isEditMode ? 'Guardar' : 'Añadir' }}</button>
</mat-dialog-actions>
<mat-horizontal-stepper [linear]="true" #stepper>
<!-- Paso 1: Selección de Aulas -->
<mat-step [stepControl]="aulasForm">
<form [formGroup]="aulasForm">
<ng-template matStepLabel>Seleccionar Aulas</ng-template>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Seleccionar Aulas</mat-label>
<mat-select formControlName="selectedAulas" (selectionChange)="onAulasSelectionChange($event)" multiple>
<mat-option *ngFor="let aula of aulas" [value]="aula">{{ aula.name }}</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-button matStepperNext>Continuar</button>
</div>
</form>
</mat-step>
<!-- Paso 2: Configuración de Subnet -->
<mat-step [stepControl]="subnetForm">
<form [formGroup]="subnetForm">
<ng-template matStepLabel>Configurar Subnet</ng-template>
<!-- Lista de Aulas Seleccionadas -->
<div>
<h3>Aulas Seleccionadas:</h3>
<ul *ngIf="selectedAulas.length > 0">
<li *ngFor="let aula of selectedAulas">{{ aula.name }}</li>
</ul>
</div>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre</mat-label>
<input matInput formControlName="name" placeholder="Nombre de la subred">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Next Server</mat-label>
<mat-select formControlName="nextServer">
<mat-option *ngFor="let server of nextServerOptions" [value]="server">{{ server }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Boot File Name</mat-label>
<mat-select formControlName="bootFileName">
<mat-option *ngFor="let bootFile of bootFileNameOptions" [value]="bootFile">{{ bootFile }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Netmask</mat-label>
<input matInput formControlName="netmask" placeholder="Netmask">
</mat-form-field>
<mat-form-field appearance="fill" class="full-width">
<mat-label>Dirección IP</mat-label>
<input matInput formControlName="ipAddress" placeholder="Dirección IP">
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Regresar</button>
<button mat-button (click)="submitForm()">Guardar</button>
</div>
</form>
</mat-step>
</mat-horizontal-stepper>

100
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet/create-subnet.component.ts
View File

@ -1,6 +1,6 @@
// create-subnet.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
@ -10,46 +10,103 @@ import { ToastrService } from 'ngx-toastr';
styleUrls: ['./create-subnet.component.css']
})
export class CreateSubnetComponent implements OnInit {
name: string = '';
netmask: string = '';
ipAddress: string = '';
nextServer: string = '';
bootFileName: string = '';
isEditMode: boolean = false;
aulasForm: FormGroup;
subnetForm: FormGroup;
aulas: any[] = []; // Lista de aulas
selectedAulas: any[] = []; // Aulas seleccionadas
nextServerOptions: string[] = []; // Opciones de Next Server
bootFileNameOptions: string[] = []; // Opciones de Boot File Name
isEditMode: boolean = false;
constructor(
private fb: FormBuilder, // FormBuilder para manejar los formularios
private toastService: ToastrService,
private http: HttpClient,
public dialogRef: MatDialogRef<CreateSubnetComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) { }
) {
// Inicializar los formularios
this.aulasForm = this.fb.group({
selectedAulas: [[], Validators.required]
});
this.subnetForm = this.fb.group({
name: ['', Validators.required],
netmask: ['', Validators.required],
ipAddress: ['', Validators.required],
nextServer: ['', Validators.required],
bootFileName: ['', Validators.required]
});
}
ngOnInit(): void {
this.loadAulas(); // Cargar las aulas al iniciar el componente
if (this.data && this.data.subnet) {
this.isEditMode = true;
this.name = this.data.subnet.name;
this.netmask = this.data.subnet.netmask;
this.ipAddress = this.data.subnet.ipAddress;
this.nextServer = this.data.subnet.nextServer;
this.bootFileName = this.data.subnet.bootFileName;
this.subnetForm.patchValue({
name: this.data.subnet.name,
netmask: this.data.subnet.netmask,
ipAddress: this.data.subnet.ipAddress,
nextServer: this.data.subnet.nextServer,
bootFileName: this.data.subnet.bootFileName
});
this.selectedAulas = this.data.subnet.selectedAulas || [];
this.updateServerAndBootFileOptions();
}
}
loadAulas(): void {
this.http.get<any>('http://127.0.0.1:8001/organizational-units?page=1&itemsPerPage=30')
.subscribe(response => {
this.aulas = response['hydra:member'];
}, error => {
console.error('Error loading aulas:', error);
this.toastService.error('Error al cargar las aulas');
});
}
onAulasSelectionChange(event: any): void {
this.selectedAulas = event.value;
this.updateServerAndBootFileOptions();
}
updateServerAndBootFileOptions(): void {
// Vaciar las opciones previas
this.nextServerOptions = [];
this.bootFileNameOptions = [];
// Agregar las opciones de "nextServer" y "bootFileName" basadas en las aulas seleccionadas
this.selectedAulas.forEach(aula => {
if (aula.networkSettings) {
if (aula.networkSettings.nextServer && !this.nextServerOptions.includes(aula.networkSettings.nextServer)) {
this.nextServerOptions.push(aula.networkSettings.nextServer);
}
if (aula.networkSettings.bootFileName && !this.bootFileNameOptions.includes(aula.networkSettings.bootFileName)) {
this.bootFileNameOptions.push(aula.networkSettings.bootFileName);
}
}
});
}
onNoClick(): void {
this.dialogRef.close();
}
submitForm(): void {
if (this.aulasForm.invalid || this.subnetForm.invalid) {
this.toastService.error('Por favor, complete los formularios.');
return;
}
const payload = {
name: this.name,
netmask: this.netmask,
ipAddress: this.ipAddress,
nextServer: this.nextServer,
bootFileName: this.bootFileName
...this.subnetForm.value,
/* selectedAulas: this.selectedAulas.map(aula => aula.uuid) */// Enviar solo los UUID de las aulas seleccionadas
};
if (this.isEditMode) {
this.http.patch(`http://127.0.0.1:8080/subnets/${this.data.subnet.uuid}`, payload)
this.http.patch(`http://127.0.0.1:8001/subnets/${this.data.subnet.uuid}`, payload)
.subscribe({
next: (response) => {
console.log('Success:', response);
@ -62,7 +119,8 @@ export class CreateSubnetComponent implements OnInit {
}
});
} else {
this.http.post('http://127.0.0.1:8080/subnets', payload)
this.http.post('http://127.0.0.1:8001/subnets', payload)
.subscribe({
next: (response) => {
console.log('Success:', response);
@ -73,7 +131,7 @@ export class CreateSubnetComponent implements OnInit {
console.error('Error:', error);
this.toastService.error('Error al añadir la configuración de red');
}
});
});
}
}
}

6
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts
View File

@ -53,7 +53,7 @@ export class OgDhcpSubnetsComponent {
}
loadSubnets() {
this.http.get<any>(`http://127.0.0.1:8080/subnets?page=1&itemsPerPage=${this.itemsPerPage}`).subscribe({
this.http.get<any>(`http://127.0.0.1:8001/subnets?page=1&itemsPerPage=${this.itemsPerPage}`).subscribe({
next: (response) => {
this.dataSource.data = response['hydra:member'];
this.length = response['hydra:totalItems'];
@ -80,6 +80,7 @@ export class OgDhcpSubnetsComponent {
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.loadSubnets()
});
}
@ -92,6 +93,7 @@ export class OgDhcpSubnetsComponent {
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.loadSubnets()
});
}
@ -104,7 +106,7 @@ export class OgDhcpSubnetsComponent {
dialogRef.afterClosed().subscribe(result => {
if (result) {
const apiUrl = `http://127.0.0.1:8080${subnet['@id']}`;
const apiUrl = `http://127.0.0.1:8081${subnet['@id']}`;
this.http.delete(apiUrl).subscribe({
next: () => {