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

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 { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.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 = [
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' },
{
@ -48,6 +49,7 @@ const routes: Routes = [
{ path: 'calendars', component: CalendarComponent },
{ path: 'client/:id', component: ClientMainViewComponent },
{ path: 'images', component: ImagesComponent },
{ path: 'restore-image', component: RestoreImageComponent}
],
},
{

View File

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

View File

@ -128,6 +128,7 @@
display: flex;
justify-content: flex-end;
}
.classroomBtn-container {
display: flex;
justify-content: flex-end;
@ -184,6 +185,51 @@
width: 100%;
max-width: 250px;
height: 250px; /* Fijo para mantener la forma cuadrada */
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 15px;
margin: 10px 0;
}
.result-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.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 {
@ -198,5 +244,8 @@
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);
}

View File

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

View File

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

View File

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

View File

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

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 {
}

View File

@ -1,21 +1,20 @@
<mat-dialog-content class="classroom">
<div *ngFor="let group of groupedClients" class="classroom-group">
<div class="misc-clients">
<div class="classroom-board" cdkDrag cdkDragBoundary=".classroom" i18n="@@digital-board">Pizarra digital</div>
<img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom" i18n-alt="@@projector-alt"/>
<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"/>
</div>
<div *ngFor="let row of group.clientRows" class="client-row">
<div class="client-container" *ngFor="let client of row"
cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event, client)" cdkDragBoundary=".classroom">
<div class="client-container" *ngFor="let client of row" cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event, client)" cdkDragBoundary=".classroom">
<div class="client-box" (dblclick)="handleClientClick(client)">
<mat-card appearance="outlined">
<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-name">{{ client.name }}</div>
<!-- <div class="client-details">
<div class="client-details">
<span>{{ client.ip }}</span>
</div> -->
</div>
</div>
</div>
</mat-card>
@ -25,6 +24,5 @@
</div>
</mat-dialog-content>
<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>

View File

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