diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index c460a6e..a079e76 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -126,6 +126,7 @@ import { CreateMenuComponent } from './components/menus/create-menu/create-menu. import { CreateMultipleClientComponent } from './components/groups/shared/clients/create-multiple-client/create-multiple-client.component'; import { ExportImageComponent } from './components/images/export-image/export-image.component'; import {ImportImageComponent} from "./components/repositories/import-image/import-image.component"; +import { LoadingComponent } from './shared/loading/loading.component'; export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './locale/', '.json'); } @@ -210,6 +211,7 @@ export function HttpLoaderFactory(http: HttpClient) { CreateMultipleClientComponent, ExportImageComponent, ImportImageComponent, + LoadingComponent, ], bootstrap: [AppComponent], imports: [BrowserModule, diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html index 8f02096..634a3bd 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html @@ -1,3 +1,5 @@ + +

diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts index 08d95b1..a5d1706 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts @@ -21,6 +21,7 @@ export class CreateClientImageComponent { selectedPartition: any = null; name: string = ''; client: any = null; + loading: boolean = false; dataSource = new MatTableDataSource(); columns = [ { @@ -99,6 +100,8 @@ export class CreateClientImageComponent { } save(): void { + this.loading = true; + const payload = { client: `/clients/${this.clientId}`, name: this.name, @@ -111,10 +114,12 @@ export class CreateClientImageComponent { .subscribe({ next: (response) => { this.toastService.success('Petición de creación de imagen enviada'); + this.loading = false; this.router.navigate(['/images']); }, error: (error) => { this.toastService.error(error.error['hydra:description']); + this.loading = false; } } ); diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html index d7582a9..9abcb98 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html @@ -1,3 +1,5 @@ + +

diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts index aec624a..30be7b3 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts @@ -34,6 +34,7 @@ export class DeployImageComponent { name: string = ''; client: any = null; clientData: any = []; + loading: boolean = false; protected p2pModeOptions = [ { name: 'Leecher', value: 'leecher' }, @@ -150,6 +151,8 @@ export class DeployImageComponent { } save(): void { + this.loading = true; + if (!this.selectedImage) { this.toastService.error('Debe seleccionar una imagen'); return; @@ -188,6 +191,7 @@ export class DeployImageComponent { .subscribe({ next: (response) => { this.toastService.success('Petición de despliegue enviada correctamente'); + this.loading = false; this.router.navigate(['/commands-logs']); }, error: (error) => { @@ -201,6 +205,7 @@ export class DeployImageComponent { "extendedTimeOut": 0, "tapToDismiss": false }); + this.loading = false; } } ); diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html index c254e55..7c09394 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html @@ -1,3 +1,5 @@ + +

diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts index 308658d..94c85da 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts @@ -40,6 +40,7 @@ export class PartitionAssistantComponent { data: any = {}; disks: { diskNumber: number; totalDiskSize: number; partitions: Partition[]; chartData: any[]; used: number; percentage: number }[] = []; clientData: any = []; + loading: boolean = false; private apiUrl: string = this.baseUrl + '/partitions'; @@ -258,6 +259,8 @@ export class PartitionAssistantComponent { return; } + this.loading = true; + const totalPartitionSize = this.selectedDisk.partitions.reduce((sum: any, partition: { size: any; }) => sum + partition.size, 0); if (totalPartitionSize > this.selectedDisk.totalDiskSize) { @@ -295,10 +298,12 @@ export class PartitionAssistantComponent { this.http.post(this.apiUrl, bulkPayload).subscribe( (response) => { this.toastService.success('Particiones creadas exitosamente para el disco seleccionado.'); + this.loading = false; this.router.navigate(['/commands-logs']); }, (error) => { console.error('Error al crear las particiones:', error); + this.loading = false; this.toastService.error('Error al crear las particiones.'); } ); diff --git a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css index 31b6b4c..c60e4f2 100644 --- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css +++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css @@ -4,15 +4,16 @@ .container { width: 100vw; - height: calc(100vh - 10vh); + height: calc(100vh - 10vh); } .sidebar { - width: 250px; + width: 250px; + z-index: auto !important; } .content { margin: 0px 10px 10px 10px; padding: 0px 10px 10px 10px; - box-sizing: border-box; -} \ No newline at end of file + box-sizing: border-box; +} diff --git a/ogWebconsole/src/app/shared/loading/loading.component.css b/ogWebconsole/src/app/shared/loading/loading.component.css new file mode 100644 index 0000000..04b222d --- /dev/null +++ b/ogWebconsole/src/app/shared/loading/loading.component.css @@ -0,0 +1,12 @@ +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 99999; +} diff --git a/ogWebconsole/src/app/shared/loading/loading.component.html b/ogWebconsole/src/app/shared/loading/loading.component.html new file mode 100644 index 0000000..2ecad58 --- /dev/null +++ b/ogWebconsole/src/app/shared/loading/loading.component.html @@ -0,0 +1,3 @@ +
+ +
diff --git a/ogWebconsole/src/app/shared/loading/loading.component.spec.ts b/ogWebconsole/src/app/shared/loading/loading.component.spec.ts new file mode 100644 index 0000000..0356eca --- /dev/null +++ b/ogWebconsole/src/app/shared/loading/loading.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoadingComponent } from './loading.component'; + +describe('LoadingComponent', () => { + let component: LoadingComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [LoadingComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoadingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/shared/loading/loading.component.ts b/ogWebconsole/src/app/shared/loading/loading.component.ts new file mode 100644 index 0000000..49bd8da --- /dev/null +++ b/ogWebconsole/src/app/shared/loading/loading.component.ts @@ -0,0 +1,10 @@ +import {Component, Input} from '@angular/core'; + +@Component({ + selector: 'app-loading', + templateUrl: './loading.component.html', + styleUrl: './loading.component.css' +}) +export class LoadingComponent { + @Input() isLoading: boolean = false; +}