New dinamic modal & subnet operations
parent
4b2bc5684a
commit
a2829beff9
|
|
@ -41,7 +41,7 @@ import { CreateOrganizationalUnitComponent } from './components/groups/organizat
|
||||||
import { MatStepperModule } from '@angular/material/stepper';
|
import { MatStepperModule } from '@angular/material/stepper';
|
||||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||||
import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component';
|
import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component';
|
||||||
import { DeleteModalComponent } from './components/groups/delete-modal/delete-modal.component';
|
import { DeleteModalComponent } from './shared/delete_modal/delete-modal/delete-modal.component';
|
||||||
import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
|
import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
|
||||||
import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component';
|
import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component';
|
||||||
import { ClassroomViewComponent } from './components/groups/classroom-view/classroom-view.component';
|
import { ClassroomViewComponent } from './components/groups/classroom-view/classroom-view.component';
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ import { DeleteUserModalComponent } from './delete-user-modal/delete-user-modal.
|
||||||
import { MatDialog } from '@angular/material/dialog';
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
import { AddUserModalComponent } from './add-user-modal/add-user-modal.component';
|
import { AddUserModalComponent } from './add-user-modal/add-user-modal.component';
|
||||||
import { EditUserModalComponent } from './edit-user-modal/edit-user-modal.component';
|
import { EditUserModalComponent } from './edit-user-modal/edit-user-modal.component';
|
||||||
|
import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { ToastrService } from 'ngx-toastr';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-users',
|
selector: 'app-users',
|
||||||
|
|
@ -37,7 +40,9 @@ export class UsersComponent implements OnInit {
|
||||||
];
|
];
|
||||||
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
|
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
|
||||||
|
|
||||||
constructor(private userService: UserService, public dialog: MatDialog) {}
|
constructor(private userService: UserService, public dialog: MatDialog,
|
||||||
|
private http: HttpClient,
|
||||||
|
private toastService: ToastrService) {}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.loadUsers();
|
this.loadUsers();
|
||||||
|
|
@ -69,15 +74,30 @@ export class UsersComponent implements OnInit {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteUser(user: any) {
|
deleteUser(user: any): void {
|
||||||
const dialogRef = this.dialog.open(DeleteUserModalComponent, {
|
const dialogRef = this.dialog.open(DeleteModalComponent, {
|
||||||
data: user,
|
width: '300px',
|
||||||
|
data: { name: user.name }
|
||||||
});
|
});
|
||||||
|
|
||||||
dialogRef.afterClosed().subscribe(result => {
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
if (result) {
|
if (result) {
|
||||||
this.loadUsers();
|
const apiUrl = `http://127.0.0.1:8080/users/${user.uuid}`;
|
||||||
|
|
||||||
|
this.http.delete(apiUrl).subscribe({
|
||||||
|
next: () => {
|
||||||
|
console.log('User deleted successfully');
|
||||||
|
this.toastService.success('User deleted successfully');
|
||||||
|
this.loadUsers();
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error deleting user:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log('User deletion cancelled');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import { DataService } from './data.service';
|
||||||
import { ClientCollection, UnidadOrganizativa } from './model';
|
import { ClientCollection, UnidadOrganizativa } from './model';
|
||||||
import { MatDialog } from '@angular/material/dialog';
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
|
import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
|
||||||
import { DeleteModalComponent } from './delete-modal/delete-modal.component';
|
import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||||
import { CreateClientComponent } from './clients/create-client/create-client.component';
|
import { CreateClientComponent } from './clients/create-client/create-client.component';
|
||||||
import { EditOrganizationalUnitComponent } from './organizational-units/edit-organizational-unit/edit-organizational-unit.component';
|
import { EditOrganizationalUnitComponent } from './organizational-units/edit-organizational-unit/edit-organizational-unit.component';
|
||||||
import { EditClientComponent } from './clients/edit-client/edit-client.component';
|
import { EditClientComponent } from './clients/edit-client/edit-client.component';
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ import {PageEvent} from "@angular/material/paginator";
|
||||||
import {ToastrService} from "ngx-toastr";
|
import {ToastrService} from "ngx-toastr";
|
||||||
import { DatePipe } from "@angular/common";
|
import { DatePipe } from "@angular/common";
|
||||||
import { DeleteImageComponent } from './delete-image/delete-image/delete-image.component';
|
import { DeleteImageComponent } from './delete-image/delete-image/delete-image.component';
|
||||||
|
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-images',
|
selector: 'app-images',
|
||||||
|
|
@ -152,7 +153,7 @@ export class ImagesComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
deleteImage(image: any): void {
|
deleteImage(image: any): void {
|
||||||
const dialogRef = this.dialog.open(DeleteImageComponent, {
|
const dialogRef = this.dialog.open(DeleteModalComponent, {
|
||||||
width: '300px',
|
width: '300px',
|
||||||
data: { name: image.name }
|
data: { name: image.name }
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<h2 mat-dialog-title>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)="addNetworkConfig()" cdkFocusInitial>Añadir</button>
|
||||||
|
</mat-dialog-actions>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { CreateSubnetComponent } from './create-subnet.component';
|
||||||
|
|
||||||
|
describe('CreateSubnetComponent', () => {
|
||||||
|
let component: CreateSubnetComponent;
|
||||||
|
let fixture: ComponentFixture<CreateSubnetComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [CreateSubnetComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(CreateSubnetComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { Component, Inject, OnInit } from '@angular/core';
|
||||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import { ToastrService } from 'ngx-toastr';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-create-subnet',
|
||||||
|
templateUrl: './create-subnet.component.html',
|
||||||
|
styleUrls: ['./create-subnet.component.css']
|
||||||
|
})
|
||||||
|
export class CreateSubnetComponent implements OnInit {
|
||||||
|
name: string = '';
|
||||||
|
netmask: string = '';
|
||||||
|
ipAddress: string = '';
|
||||||
|
nextServer: string = '';
|
||||||
|
bootFileName: string = '';
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private toastService: ToastrService,
|
||||||
|
private http: HttpClient,
|
||||||
|
public dialogRef: MatDialogRef<CreateSubnetComponent>,
|
||||||
|
@Inject(MAT_DIALOG_DATA) public data: any
|
||||||
|
) { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onNoClick(): void {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
addNetworkConfig(): void {
|
||||||
|
const payload = {
|
||||||
|
name: this.name,
|
||||||
|
netmask: this.netmask,
|
||||||
|
ipAddress: this.ipAddress,
|
||||||
|
nextServer: this.nextServer,
|
||||||
|
bootFileName: this.bootFileName
|
||||||
|
};
|
||||||
|
|
||||||
|
this.http.post('http://127.0.0.1:8080/subnets', payload)
|
||||||
|
.subscribe({
|
||||||
|
next: (response) => {
|
||||||
|
console.log('Success:', response);
|
||||||
|
this.toastService.success('Configuración de red añadida exitosamente');
|
||||||
|
this.dialogRef.close();
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
this.toastService.error('Error al añadir la configuración de red');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
.header-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 100px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.images-button-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists-container {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imagesLists-container {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.unidad-card {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
border-bottom: 1px solid rgba(122, 122, 122, 0.555);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container h4 {
|
||||||
|
margin: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-icon-button {
|
||||||
|
margin-left: 16px;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-menu {
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-name{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-elevation-z8 {
|
||||||
|
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginator-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: end;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-headers-align .mat-expansion-panel-header-description {
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-button-row {
|
||||||
|
display: table-cell;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-button-row .mat-mdc-button-base {
|
||||||
|
margin: 8px 8px 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<mat-accordion class="example-headers-align">
|
||||||
|
<mat-expansion-panel hideToggle>
|
||||||
|
<mat-expansion-panel-header>
|
||||||
|
<mat-panel-title> Información de Subnets </mat-panel-title>
|
||||||
|
<mat-panel-description>
|
||||||
|
<mat-icon [style.color]="getIcon().color">{{ getIcon().name }}</mat-icon>
|
||||||
|
</mat-panel-description>
|
||||||
|
</mat-expansion-panel-header>
|
||||||
|
<p *ngIf="alertMessage">Subnets sincronizadas: {{ alertMessage }}</p>
|
||||||
|
<p *ngIf="alertMessage">Número de subnets en base de datos: {{ length }}</p>
|
||||||
|
|
||||||
|
<div class="example-button-row">
|
||||||
|
<button mat-flat-button color="primary" (click)="syncSubnets()"> Sincronizar Subnets</button>
|
||||||
|
</div>
|
||||||
|
</mat-expansion-panel>
|
||||||
|
</mat-accordion>
|
||||||
|
|
||||||
|
<div class="header-container">
|
||||||
|
<h2 class="title" i18n="@@subnetsTitle">Administrar Subnets</h2>
|
||||||
|
<div class="subnets-button-row">
|
||||||
|
<button mat-flat-button color="primary" (click)="addSubnet()">Añadir Subnet</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<mat-divider class="divider"></mat-divider>
|
||||||
|
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||||
|
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
|
||||||
|
<td mat-cell *matCellDef="let subnet">
|
||||||
|
|
||||||
|
<!-- Mostrar otros campos normalmente -->
|
||||||
|
<ng-container *ngIf="column.columnDef === 'name'">
|
||||||
|
{{ subnet.name }}
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.columnDef === 'netmask'">
|
||||||
|
{{ subnet.netmask }}
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.columnDef === 'ipAddress'">
|
||||||
|
{{ subnet.ipAddress }}
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.columnDef === 'nextServer'">
|
||||||
|
{{ subnet.nextServer }}
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="column.columnDef === 'bootFileName'">
|
||||||
|
{{ subnet.bootFileName }}
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container matColumnDef="actions">
|
||||||
|
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions">Acciones</th>
|
||||||
|
<td mat-cell *matCellDef="let subnet">
|
||||||
|
<button mat-icon-button color="primary" (click)="editSubnet(subnet)" i18n="@@editSubnet"> <mat-icon>edit</mat-icon></button>
|
||||||
|
<button mat-icon-button color="warn" (click)="deleteSubnet(subnet)"><mat-icon>delete</mat-icon></button>
|
||||||
|
<!-- <button mat-icon-button [matMenuTriggerFor]="menu">
|
||||||
|
<mat-icon>menu</mat-icon>
|
||||||
|
</button>
|
||||||
|
<mat-menu #menu="matMenu">
|
||||||
|
<button mat-menu-item (click)="deleteSubnet(subnet)">Eliminar</button>
|
||||||
|
</mat-menu> -->
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
</table>
|
||||||
|
<div class="paginator-container">
|
||||||
|
<mat-paginator [length]="length"
|
||||||
|
[pageSize]="itemsPerPage"
|
||||||
|
[pageIndex]="page"
|
||||||
|
[pageSizeOptions]="pageSizeOptions"
|
||||||
|
(page)="onPageChange($event)">
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { OgDhcpSubnetsComponent } from './og-dhcp-subnets.component';
|
||||||
|
|
||||||
|
describe('OgDhcpSubnetsComponent', () => {
|
||||||
|
let component: OgDhcpSubnetsComponent;
|
||||||
|
let fixture: ComponentFixture<OgDhcpSubnetsComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [OgDhcpSubnetsComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(OgDhcpSubnetsComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
|
import { CreateSubnetComponent } from './create-subnet/create-subnet/create-subnet.component';
|
||||||
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||||
|
import { ToastrService } from 'ngx-toastr';
|
||||||
|
|
||||||
|
export interface Subnet {
|
||||||
|
'@id': string;
|
||||||
|
'@type': string;
|
||||||
|
name: string;
|
||||||
|
netmask: string;
|
||||||
|
ipAddress: string;
|
||||||
|
nextServer: string;
|
||||||
|
bootFileName: string;
|
||||||
|
createdAt: string;
|
||||||
|
createdBy: string;
|
||||||
|
uuid: string;
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-og-dhcp-subnets',
|
||||||
|
templateUrl: './og-dhcp-subnets.component.html',
|
||||||
|
styleUrls: ['./og-dhcp-subnets.component.css']
|
||||||
|
})
|
||||||
|
export class OgDhcpSubnetsComponent {
|
||||||
|
|
||||||
|
displayedColumns: string[] = ['name', 'netmask', 'ipAddress', 'nextServer', 'bootFileName', 'actions'];
|
||||||
|
dataSource = new MatTableDataSource<Subnet>([]);
|
||||||
|
length = 0;
|
||||||
|
itemsPerPage: number = 10;
|
||||||
|
page = 0;
|
||||||
|
pageSizeOptions: number[] = [5, 10, 20];
|
||||||
|
alertMessage: string | null = null;
|
||||||
|
|
||||||
|
@ViewChild(MatPaginator) paginator: MatPaginator | undefined;
|
||||||
|
|
||||||
|
columns = [
|
||||||
|
{ columnDef: 'name', header: 'Name', cell: (subnet: Subnet) => subnet.name },
|
||||||
|
{ columnDef: 'netmask', header: 'Netmask', cell: (subnet: Subnet) => subnet.netmask },
|
||||||
|
{ columnDef: 'ipAddress', header: 'IP Address', cell: (subnet: Subnet) => subnet.ipAddress },
|
||||||
|
{ columnDef: 'nextServer', header: 'Next Server', cell: (subnet: Subnet) => subnet.nextServer },
|
||||||
|
{ columnDef: 'bootFileName', header: 'Boot File Name', cell: (subnet: Subnet) => subnet.bootFileName },
|
||||||
|
];
|
||||||
|
|
||||||
|
constructor(public dialog: MatDialog, private http: HttpClient, private toastService: ToastrService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.loadSubnets();
|
||||||
|
}
|
||||||
|
|
||||||
|
loadSubnets() {
|
||||||
|
this.http.get<any>(`http://127.0.0.1:8080/subnets?page=1&itemsPerPage=${this.itemsPerPage}`).subscribe({
|
||||||
|
next: (response) => {
|
||||||
|
this.dataSource.data = response['hydra:member'];
|
||||||
|
this.length = response['hydra:totalItems'];
|
||||||
|
},
|
||||||
|
error: error => {
|
||||||
|
console.error('Error al cargar plantillas PXE:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.paginator) {
|
||||||
|
this.dataSource.paginator = this.paginator;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
syncSubnets() {
|
||||||
|
console.log('Sincronizando subnets...');
|
||||||
|
}
|
||||||
|
|
||||||
|
addSubnet() {
|
||||||
|
console.log('Añadiendo nueva subnet...');
|
||||||
|
const dialogRef = this.dialog.open(CreateSubnetComponent, {
|
||||||
|
width: '400px'
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
console.log('The dialog was closed');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
editSubnet(subnet: Subnet) {
|
||||||
|
console.log('Editando subnet:', subnet);
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteSubnet(subnet: Subnet): void {
|
||||||
|
console.log(subnet);
|
||||||
|
const dialogRef = this.dialog.open(DeleteModalComponent, {
|
||||||
|
width: '300px',
|
||||||
|
data: { name: subnet.name }
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
if (result) {
|
||||||
|
const apiUrl = `http://127.0.0.1:8080${subnet['@id']}`;
|
||||||
|
|
||||||
|
this.http.delete(apiUrl).subscribe({
|
||||||
|
next: () => {
|
||||||
|
console.log('Subnet deleted successfully');
|
||||||
|
this.dataSource.data = this.dataSource.data.filter(s => s !== subnet);
|
||||||
|
this.length = this.dataSource.data.length;
|
||||||
|
this.toastService.success('Subnet deleted successfully');
|
||||||
|
},
|
||||||
|
error: (error) => {
|
||||||
|
console.error('Error deleting subnet:', error);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.log('Subnet deletion cancelled');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onPageChange(event: any) {
|
||||||
|
this.page = event.pageIndex;
|
||||||
|
this.itemsPerPage = event.pageSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
getIcon() {
|
||||||
|
return { name: 'info', color: 'blue' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<p>ogdhcp works!</p>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { OgdhcpComponent } from './ogdhcp.component';
|
||||||
|
|
||||||
|
describe('OgdhcpComponent', () => {
|
||||||
|
let component: OgdhcpComponent;
|
||||||
|
let fixture: ComponentFixture<OgdhcpComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [OgdhcpComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(OgdhcpComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-ogdhcp',
|
||||||
|
templateUrl: './ogdhcp.component.html',
|
||||||
|
styleUrl: './ogdhcp.component.css'
|
||||||
|
})
|
||||||
|
export class OgdhcpComponent {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
mat-dialog-content {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #555; /* Color de texto más suave */
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-dialog-actions {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end; /* Alineación a la derecha */
|
||||||
|
}
|
||||||
|
|
||||||
|
button[mat-button] {
|
||||||
|
margin-left: 8px; /* Espacio entre los botones */
|
||||||
|
}
|
||||||
|
|
||||||
|
button[mat-button]:first-child {
|
||||||
|
color: #757575; /* Color para el botón de cancelar */
|
||||||
|
}
|
||||||
|
|
||||||
|
button[mat-raised-button] {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #000; /* Color de texto más fuerte para el nombre del elemento */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
<h1 mat-dialog-title i18n="@@deleteDialogTitle">Eliminar</h1>
|
||||||
|
<div mat-dialog-content>
|
||||||
|
<p i18n="@@deleteConfirmationMessage">
|
||||||
|
¿Estás seguro que deseas eliminar <strong>{{ data.name }}</strong>?
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div mat-dialog-actions align="end">
|
||||||
|
<button mat-button (click)="onNoClick()" i18n="@@cancelButton">Cancelar</button>
|
||||||
|
<button mat-raised-button color="warn" (click)="onYesClick()" i18n="@@confirmButton">Eliminar</button>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { DeleteModalComponent } from './delete-modal.component';
|
||||||
|
|
||||||
|
describe('DeleteModalComponent', () => {
|
||||||
|
let component: DeleteModalComponent;
|
||||||
|
let fixture: ComponentFixture<DeleteModalComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
declarations: [DeleteModalComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(DeleteModalComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { Component, Inject } from '@angular/core';
|
||||||
|
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-delete-modal',
|
||||||
|
templateUrl: './delete-modal.component.html',
|
||||||
|
styleUrl: './delete-modal.component.css'
|
||||||
|
})
|
||||||
|
export class DeleteModalComponent {
|
||||||
|
constructor(
|
||||||
|
public dialogRef: MatDialogRef<DeleteModalComponent>,
|
||||||
|
@Inject(MAT_DIALOG_DATA) public data: { name: string }
|
||||||
|
) {}
|
||||||
|
|
||||||
|
onNoClick(): void {
|
||||||
|
this.dialogRef.close(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
onYesClick(): void {
|
||||||
|
this.dialogRef.close(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
|
||||||
{
|
{
|
||||||
"compileOnSave": false,
|
"compileOnSave": false,
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue