Visualización de aulas y clientes

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css

@@ -0,0 +1,47 @@
+/* src/app/classroom-view/classroom-view.component.css */
+
+.classroom {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.classroom-group {
+  margin: 10px;
+  width: 800px;
+  background-color: #fafafa;
+}
+
+.organizational-unit-name {
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.client-row {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.client-container {
+  margin: 5px;
+}
+
+.client-box {
+  width: 100px;
+  height: 100px;
+  background-color: lightblue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #000;
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.client-box p {
+  margin: 0;
+}

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html

@@ -0,0 +1,14 @@
+<div class="classroom">
+  <div *ngIf="groupedClients.length > 0">
+    <mat-card *ngFor="let group of groupedClients" class="classroom-group">
+      <p class="organizational-unit-name">{{ group.organizationalUnitName }}</p>
+      <div *ngFor="let row of group.clientRows" class="client-row">
+        <div class="client-container" *ngFor="let client of row">
+          <div class="client-box" (click)="handleClientClick(client)">
+            <p>{{ client.name }}</p>
+          </div>
+        </div>
+      </div>
+    </mat-card>
+  </div>
+</div>

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClassroomViewComponent } from './classroom-view.component';
+
+describe('ClassroomViewComponent', () => {
+  let component: ClassroomViewComponent;
+  let fixture: ComponentFixture<ClassroomViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ClassroomViewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ClassroomViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts

@@ -0,0 +1,57 @@
+// src/app/classroom-view/classroom-view.component.ts
+
+import { Component, Input, OnInit } from '@angular/core';
+
+interface GroupedClients {
+  organizationalUnitName: string;
+  clientRows: any[][];
+}
+
+@Component({
+  selector: 'app-classroom-view',
+  templateUrl: './classroom-view.component.html',
+  styleUrls: ['./classroom-view.component.css']
+})
+export class ClassroomViewComponent implements OnInit {  
+  @Input() clients: any[] = [];
+  @Input() pcInTable: number = 3;
+  groupedClients: GroupedClients[] = [];
+
+  constructor() {}
+
+  ngOnInit(): void {
+    this.groupClientsByOrganizationalUnit();
+  }
+
+  ngOnChanges(): void {
+    this.groupClientsByOrganizationalUnit(); 
+  }
+
+  groupClientsByOrganizationalUnit(): void {
+    const grouped = this.clients.reduce((acc, client) => {
+      const ouName = client.organizationalUnit.name;
+      if (!acc[ouName]) {
+        acc[ouName] = [];
+      }
+      acc[ouName].push(client);
+      return acc;
+    }, {});
+
+    this.groupedClients = Object.keys(grouped).map(ouName => ({
+      organizationalUnitName: ouName,
+      clientRows: this.chunkArray(grouped[ouName], this.pcInTable)
+    }));
+  }
+
+  chunkArray(arr: any[], chunkSize: number): any[][] {
+    const chunks = [];
+    for (let i = 0; i < arr.length; i += chunkSize) {
+      chunks.push(arr.slice(i, i + chunkSize));
+    }
+    return chunks;
+  }
+
+  handleClientClick(client: any): void {
+    console.log('Client clicked:', client);
+  }
+}