refs #917 Fix client-main-view component and add restore-image component
parent
800b73db61
commit
98bd49eab2
|
@ -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}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<p>restore-image works!</p>
|
|
@ -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 {
|
||||
|
||||
}
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue