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

refs #917 Fix client-main-view component and add restore-image component

develop-jenkins
Alvaro Puente Mella 2024-10-15 17:41:10 +02:00
parent 800b73db61
commit 98bd49eab2
12 changed files with 290 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ogWebconsole/src/app/app-routing.module.ts
View File

@ -23,6 +23,7 @@ import { TaskLogsComponent } from './components/commands/commands-task/task-logs
import { StatusComponent } from "./components/ogdhcp/og-dhcp-subnets/status/status.component"; import { StatusComponent } from "./components/ogdhcp/og-dhcp-subnets/status/status.component";
import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component'; import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component';
import { ImagesComponent } from './components/images/images.component'; import { ImagesComponent } from './components/images/images.component';
import { RestoreImageComponent } from './components/groups/components/client-main-view/restore-image/restore-image.component';
const routes: Routes = [ const routes: Routes = [
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' }, { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
{ {
@ -48,6 +49,7 @@ const routes: Routes = [
{ path: 'calendars', component: CalendarComponent }, { path: 'calendars', component: CalendarComponent },
{ path: 'client/:id', component: ClientMainViewComponent }, { path: 'client/:id', component: ClientMainViewComponent },
{ path: 'images', component: ImagesComponent }, { path: 'images', component: ImagesComponent },
{ path: 'restore-image', component: RestoreImageComponent}
], ],
}, },
{ {

2
ogWebconsole/src/app/app.module.ts
View File

@ -106,6 +106,7 @@ import { ClientMainViewComponent } from './components/groups/components/client-m
import { ImagesComponent } from './components/images/images.component'; import { ImagesComponent } from './components/images/images.component';
import { CreateImageComponent } from './components/images/create-image/create-image.component'; import { CreateImageComponent } from './components/images/create-image/create-image.component';
import { PartitionAssistantComponent } from './components/groups/components/client-main-view/partition-assistant/partition-assistant.component'; import { PartitionAssistantComponent } from './components/groups/components/client-main-view/partition-assistant/partition-assistant.component';
import { RestoreImageComponent } from './components/groups/components/client-main-view/restore-image/restore-image.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
@ -169,6 +170,7 @@ import { PartitionAssistantComponent } from './components/groups/components/clie
ImagesComponent, ImagesComponent,
CreateImageComponent, CreateImageComponent,
PartitionAssistantComponent, PartitionAssistantComponent,
RestoreImageComponent,
], ],
bootstrap: [AppComponent], bootstrap: [AppComponent],
imports: [BrowserModule, imports: [BrowserModule,

451
ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
View File

@ -1,202 +1,251 @@
.groupLists-container { .groupLists-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
height: auto; height: auto;
margin-bottom: 30px; margin-bottom: 30px;
} }
.search-container { .search-container {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
margin: 10px; margin: 10px;
} }
.search-container mat-form-field { .search-container mat-form-field {
width: 50%; width: 50%;
} }
.card { .card {
flex-grow: 1; flex-grow: 1;
margin: 10px; margin: 10px;
} }
.header-container { .header-container {
height: 100px; height: 100px;
} }
.unidad-card, .elements-card { .unidad-card, .elements-card {
flex: 1 1 45%; flex: 1 1 45%;
background-color: #fafafa; background-color: #fafafa;
height: 600px; height: 600px;
overflow-y: auto; overflow-y: auto;
} }
.element-content { .element-content {
overflow-y: auto; overflow-y: auto;
} }
.title { .title {
margin-left: 10px; margin-left: 10px;
} }
.details-card, .classroom-view { .details-card, .classroom-view {
flex: 1 1 25%; flex: 1 1 25%;
} }
mat-card-title { mat-card-title {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 10px; margin: 10px;
} }
.title-with-breadcrumb { .title-with-breadcrumb {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
mat-card-subtitle { mat-card-subtitle {
font-size: 0.875rem; font-size: 0.875rem;
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
} }
mat-card-subtitle a { mat-card-subtitle a {
cursor: pointer; cursor: pointer;
text-decoration: underline; text-decoration: underline;
color: #929292; color: #929292;
} }
mat-card-subtitle a:hover { mat-card-subtitle a:hover {
text-decoration: none; text-decoration: none;
} }
.groups-button-row { .groups-button-row {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
} }
button { button {
margin-left: 10px; margin-left: 10px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.item-content { .item-content {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.item-content mat-icon { .item-content mat-icon {
margin-right: 10px; margin-right: 10px;
} }
.clickable-item:hover { .clickable-item:hover {
cursor: pointer; cursor: pointer;
} }
.selected-item { .selected-item {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
.actions { .actions {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
align-self: center; align-self: center;
} }
.actions mat-icon { .actions mat-icon {
cursor: pointer; cursor: pointer;
margin-left: 16px; margin-left: 16px;
color: #757575; color: #757575;
} }
.actions mat-icon:hover { .actions mat-icon:hover {
color: #212121; color: #212121;
} }
.empty-list { .empty-list {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
} }
mat-spinner { mat-spinner {
margin: 0 auto; margin: 0 auto;
align-self: center; align-self: center;
} }
.container { .container {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
.classroomBtn-container {
display: flex; .classroomBtn-container {
justify-content: flex-end; display: flex;
width: 100%; justify-content: flex-end;
} width: 100%;
}
.container {
display: flex; .container {
flex-direction: column; display: flex;
} flex-direction: column;
}
.header {
display: flex; .header {
align-items: center; display: flex;
gap: 10px; align-items: center;
padding: 20px; gap: 10px;
} padding: 20px;
}
.header mat-form-field {
width: 300px; .header mat-form-field {
} width: 300px;
}
.main-content {
display: flex; .main-content {
} display: flex;
}
.filters {
padding: 20px; .filters {
display: flex; padding: 20px;
flex-direction: column; display: flex;
width: 300px; flex-direction: column;
} width: 300px;
}
.saved-filter {
display: flex; .saved-filter {
flex-direction: column; display: flex;
width: 300px; flex-direction: column;
margin-bottom: 10px; width: 300px;
padding: 10px; margin-bottom: 10px;
} padding: 10px;
}
.results {
width: 100%; .results {
} width: 100%;
}
.results-container {
display: grid; .results-container {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); display: grid;
gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin-bottom: 16px; gap: 16px;
} margin-bottom: 16px;
}
.result-card {
width: 100%; .result-card {
max-width: 250px; width: 100%;
height: 250px; /* Fijo para mantener la forma cuadrada */ max-width: 250px;
} height: 250px; /* Fijo para mantener la forma cuadrada */
background-color: #ffffff;
.paginator-container { border-radius: 10px;
display: flex; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
justify-content: center; transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 30px; padding: 15px;
} margin: 10px 0;
}
.divider {
margin: 20px 0; .result-card:hover {
} transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
mat-card { }
margin-bottom: 20px;
} .result-checkbox {
float: right;
margin: 0;
}
.result-title {
font-size: 1.2rem;
font-weight: 600;
color: #333;
}
.result-content {
padding-top: 10px;
color: #555;
}
.result-type {
font-size: 1rem;
font-weight: 500;
margin: 0;
}
.result-ip, .result-mac, .result-status {
font-size: 0.9rem;
margin: 5px 0;
}
.result-internal-units,
.result-clients {
font-size: 0.9rem;
color: #007bff; /* Color azul para destacar */
margin: 5px 0;
}
.paginator-container {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.divider {
margin: 20px 0;
}
mat-card {
margin-bottom: 20px;
margin-right: 20px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

24
ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
View File

@ -102,22 +102,24 @@
<mat-card class="result-card" (dblclick)="onDobleClick($event, result.uuid, result.type)"> <mat-card class="result-card" (dblclick)="onDobleClick($event, result.uuid, result.type)">
<mat-checkbox <mat-checkbox
[checked]="isSelected(result.name)" [checked]="isSelected(result.name)"
(change)="onCheckboxChange($event, result.name, result.uuid)"> (change)="onCheckboxChange($event, result.name, result.uuid)"
class="result-checkbox">
</mat-checkbox> </mat-checkbox>
<mat-card-title>{{ result.name }}</mat-card-title> <mat-card-title class="result-title">{{ result.name }}</mat-card-title>
<mat-card-content> <mat-card-content class="result-content">
<p>{{ result.type !== 'client' ? result.type : '' }}</p> <p class="result-type">{{ result.type !== 'client' ? result.type : '' }}</p>
<p>{{ result.type === 'client' ? result.ip : '' }}</p> <p class="result-ip" *ngIf="result.type === 'client'">{{ result.ip }}</p>
<p>{{ result.type === 'client' ? result.mac : '' }}</p> <p class="result-mac" *ngIf="result.type === 'client'">{{ result.mac }}</p>
<p>{{ result.type === 'client' ? result.status : '' }}</p> <p class="result-status" *ngIf="result.type === 'client'">{{ result.status }}</p>
<p *ngIf="result.type !== 'client'" i18n="@@internalUnits"> <p *ngIf="result.type !== 'client'" i18n="@@internalUnits" class="result-internal-units">
Unidades internas: {{ result.type !== 'client' ? result.children.length : 0 }} Unidades internas: {{ result.children.length }}
</p> </p>
<p *ngIf="result.type !== 'client'" i18n="@@clients"> <p *ngIf="result.type !== 'client'" i18n="@@clients" class="result-clients">
Clientes: {{ result.type !== 'client' ? result.clients.length : 0 }} Clientes: {{ result.clients.length }}
</p> </p>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</mat-grid-tile> </mat-grid-tile>
</mat-grid-list> </mat-grid-list>
<div class="paginator-container"> <div class="paginator-container">

3
ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
View File

@ -415,13 +415,10 @@ export class AdvancedSearchComponent {
onDobleClick(event: MouseEvent, data: any, type: string): void { onDobleClick(event: MouseEvent, data: any, type: string): void {
console.log('Doble click en:', data);
if (type === 'client') { if (type === 'client') {
this.router.navigate(['client', data]); this.router.navigate(['client', data]);
} }
else { else {
console.error('ADD VIEW FOR OU');
} }
} }

10
ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
View File

@ -1,8 +1,6 @@
<div class="client-info"> <div class="client-info">
<!-- Información General -->
<div class="info-section"> <div class="info-section">
<mat-tab-group dynamicHeight> <mat-tab-group dynamicHeight>
<mat-tab label="Datos generales"> <mat-tab label="Datos generales">
<div class="two-column-table"> <div class="two-column-table">
<div class="table-row" *ngFor="let clientData of generalData"> <div class="table-row" *ngFor="let clientData of generalData">
@ -11,7 +9,6 @@
</div> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="Propiedades de red"> <mat-tab label="Propiedades de red">
<div class="two-column-table"> <div class="two-column-table">
<div class="table-row" *ngFor="let clientData of networkData"> <div class="table-row" *ngFor="let clientData of networkData">
@ -20,7 +17,6 @@
</div> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="Propiedades del aula"> <mat-tab label="Propiedades del aula">
<div class="two-column-table"> <div class="two-column-table">
<div class="table-row" *ngFor="let clientData of classroomData"> <div class="table-row" *ngFor="let clientData of classroomData">
@ -29,11 +25,8 @@
</div> </div>
</div> </div>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</div> </div>
<!-- Uso del Espacio en Disco -->
<div class="info-section"> <div class="info-section">
<h2 *ngIf="isDiskUsageVisible">Disco</h2> <h2 *ngIf="isDiskUsageVisible">Disco</h2>
<div class="disk-usage" *ngIf="isDiskUsageVisible"> <div class="disk-usage" *ngIf="isDiskUsageVisible">
@ -66,3 +59,6 @@
<div class="assistants-container" *ngIf="isPartitionAssistantVisible"> <div class="assistants-container" *ngIf="isPartitionAssistantVisible">
<app-partition-assistant></app-partition-assistant> <app-partition-assistant></app-partition-assistant>
</div> </div>
<div class="assistants-container" *ngIf="isBootImageVisible">
<app-restore-image></app-restore-image>
</div>

3
ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts
View File

@ -84,10 +84,11 @@ export class ClientMainViewComponent implements OnInit {
togglePartitionAssistant() { togglePartitionAssistant() {
this.isPartitionAssistantVisible = !this.isPartitionAssistantVisible; this.isPartitionAssistantVisible = !this.isPartitionAssistantVisible;
this.isBootImageVisible = false;
} }
showBootImage() { showBootImage() {
this.isPartitionAssistantVisible = false; this.isPartitionAssistantVisible = false;
this.isBootImageVisible = !this.isBootImageVisible;
} }
} }

0
ogWebconsole/src/app/components/groups/components/client-main-view/restore-image/restore-image.component.css 100644
View File

1
ogWebconsole/src/app/components/groups/components/client-main-view/restore-image/restore-image.component.html 100644
View File

@ -0,0 +1 @@
<p>restore-image works!</p>

10
ogWebconsole/src/app/components/groups/components/client-main-view/restore-image/restore-image.component.ts 100644
View File

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-restore-image',
templateUrl: './restore-image.component.html',
styleUrl: './restore-image.component.css'
})
export class RestoreImageComponent {
}

16
ogWebconsole/src/app/components/groups/shared/classroom-view/classroom-view.component.html
View File

@ -1,21 +1,20 @@
<mat-dialog-content class="classroom"> <mat-dialog-content class="classroom">
<div *ngFor="let group of groupedClients" class="classroom-group"> <div *ngFor="let group of groupedClients" class="classroom-group">
<div class="misc-clients"> <div class="misc-clients">
<div class="classroom-board" cdkDrag cdkDragBoundary=".classroom" i18n="@@digital-board">Pizarra digital</div> <div class="classroom-board" cdkDrag cdkDragBoundary=".classroom">Pizarra digital</div>
<img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom" i18n-alt="@@projector-alt"/> <img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom"/>
</div> </div>
<div *ngFor="let row of group.clientRows" class="client-row"> <div *ngFor="let row of group.clientRows" class="client-row">
<div class="client-container" *ngFor="let client of row" <div class="client-container" *ngFor="let client of row" cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event, client)" cdkDragBoundary=".classroom">
cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event, client)" cdkDragBoundary=".classroom">
<div class="client-box" (dblclick)="handleClientClick(client)"> <div class="client-box" (dblclick)="handleClientClick(client)">
<mat-card appearance="outlined"> <mat-card appearance="outlined">
<div class="client-image-container"> <div class="client-image-container">
<img mat-card-image src="assets/images/client.png" alt="Client" class="client-image" i18n-alt="@@client-image-alt"/> <img mat-card-image src="assets/images/client.png" alt="Client" class="client-image"/>
<div class="client-info"> <div class="client-info">
<div class="client-name">{{ client.name }}</div> <div class="client-name">{{ client.name }}</div>
<!-- <div class="client-details"> <div class="client-details">
<span>{{ client.ip }}</span> <span>{{ client.ip }}</span>
</div> --> </div>
</div> </div>
</div> </div>
</mat-card> </mat-card>
@ -25,6 +24,5 @@
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
<button mat-flat-button class="saveDisposition-btn" color="primary" (click)="saveDisposition()" i18n="@@save-disposition-button">Guardar disposición</button> <button mat-raised-button color="primary" class="saveDisposition-btn" (click)="saveDisposition()">Guardar disposición</button>
</mat-dialog-actions> </mat-dialog-actions>

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

@ -48,7 +48,6 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
organizationalUnitName: ouName, organizationalUnitName: ouName,
clientRows: this.chunkArray(grouped[ouName], this.pcInTable) clientRows: this.chunkArray(grouped[ouName], this.pcInTable)
})); }));
console.log(this.groupedClients);
} }
initializeClientPositions(): void { initializeClientPositions(): void {
@ -91,7 +90,6 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
position: client.position position: client.position
}; };
this.http.patch(url, payload).subscribe(response => { this.http.patch(url, payload).subscribe(response => {
console.log('Cliente actualizado:', response);
this.openSnackBar(false, 'Plano actualizado!'); this.openSnackBar(false, 'Plano actualizado!');
}, error => { }, error => {
console.error('Error al actualizar cliente:', error); console.error('Error al actualizar cliente:', error);