diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..13566b8 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml new file mode 100644 index 0000000..1bdc1c2 --- /dev/null +++ b/.idea/material_theme_project_new.xml @@ -0,0 +1,12 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..bff06b9 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/oggui.iml b/.idea/oggui.iml new file mode 100644 index 0000000..c956989 --- /dev/null +++ b/.idea/oggui.iml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/php.xml b/.idea/php.xml new file mode 100644 index 0000000..f324872 --- /dev/null +++ b/.idea/php.xml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/ogWebconsole/.gitignore b/ogWebconsole/.gitignore index 0711527..03923dd 100644 --- a/ogWebconsole/.gitignore +++ b/ogWebconsole/.gitignore @@ -40,3 +40,4 @@ testem.log # System files .DS_Store Thumbs.db + diff --git a/ogWebconsole/angular.json b/ogWebconsole/angular.json index fbdb2d4..9ffbc13 100644 --- a/ogWebconsole/angular.json +++ b/ogWebconsole/angular.json @@ -102,5 +102,12 @@ } } } + }, + "cli": { +<<<<<<< Updated upstream + "analytics": "95fac95c-8936-41a8-8c9c-1fae82fe6912" +======= + "analytics": "ba7c0825-8034-43ff-9c60-83dac232db7e" +>>>>>>> Stashed changes } } diff --git a/ogWebconsole/src/app/app.component.css b/ogWebconsole/src/app/app.component.css index e69de29..aac26c0 100644 --- a/ogWebconsole/src/app/app.component.css +++ b/ogWebconsole/src/app/app.component.css @@ -0,0 +1,7 @@ +.sidenav-container { + height: 100%; +} + +.content { + padding: 16px; +} diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 2e28d37..ae1361b 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -35,7 +35,7 @@ import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/d import { ChangePasswordModalComponent } from './components/pages/admin/users/users/change-password-modal/change-password-modal.component'; import { GroupsComponent } from './components/groups/groups.component'; import {MatDividerModule} from '@angular/material/divider'; -import { CreateOrganizationalUnitComponent } from './components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component'; +import { CreateOrganizationalUnitComponent } from './components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component'; import {MatStepperModule} from '@angular/material/stepper'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component'; @@ -44,6 +44,8 @@ import { EditOrganizationalUnitComponent } from './components/groups/organizatio import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component'; import { ClassroomViewComponent } from './components/groups/classroom-view/classroom-view.component'; +import {MatProgressSpinner} from "@angular/material/progress-spinner"; +import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu"; @NgModule({ declarations: [ AppComponent, @@ -70,27 +72,27 @@ import { ClassroomViewComponent } from './components/groups/classroom-view/class EditClientComponent, ClassroomViewComponent ], - bootstrap: [AppComponent], - imports: [BrowserModule, - AppRoutingModule, - FormsModule, - ReactiveFormsModule, - MatToolbarModule, - MatIconModule, - MatButtonModule, - MatSidenavModule, - BrowserAnimationsModule, - MatCardModule, - MatCheckboxModule, - MatFormFieldModule, - MatInputModule, - MatListModule, - MatTableModule, - MatDialogModule, - MatSelectModule, - MatDividerModule, - MatStepperModule, - MatSlideToggleModule], + bootstrap: [AppComponent], + imports: [BrowserModule, + AppRoutingModule, + FormsModule, + ReactiveFormsModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + MatSidenavModule, + BrowserAnimationsModule, + MatCardModule, + MatCheckboxModule, + MatFormFieldModule, + MatInputModule, + MatListModule, + MatTableModule, + MatDialogModule, + MatSelectModule, + MatDividerModule, + MatStepperModule, + MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem], providers: [ { provide: HTTP_INTERCEPTORS, diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html index dce2116..6a520fd 100644 --- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html +++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.html @@ -15,5 +15,5 @@
- +
diff --git a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts index 3e2dffc..60d38d3 100644 --- a/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts +++ b/ogWebconsole/src/app/components/groups/clients/edit-client/edit-client.component.ts @@ -1,7 +1,7 @@ -import { HttpClient } from '@angular/common/http'; -import { Component } from '@angular/core'; +import {HttpClient, HttpHeaders} from '@angular/common/http'; +import {Component, Inject} from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; -import { MatDialogRef } from '@angular/material/dialog'; +import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import { CreateClientComponent } from '../create-client/create-client.component'; @Component({ @@ -12,12 +12,20 @@ import { CreateClientComponent } from '../create-client/create-client.component' export class EditClientComponent { clientForm!: FormGroup; parentUnits: any[] = []; // Array to store parent units fetched from API + isEditMode: boolean; // Flag to check if it's edit mode constructor( private fb: FormBuilder, private dialogRef: MatDialogRef, - private http: HttpClient - ) { } + private http: HttpClient, + @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode + + ) { + this.isEditMode = !!data?.uuid; // Check if uuid is passed to determine edit mode + if (this.isEditMode) { + this.loadData(data.uuid); + } + } ngOnInit(): void { this.loadParentUnits(); // Load parent units when component initializes @@ -48,19 +56,52 @@ export class EditClientComponent { ); } + loadData(uuid: string) { + const url = `http://127.0.0.1:8080/clients/${uuid}`; + + this.http.get(url).subscribe( + data => { + this.clientForm.patchValue({ + name: data.name, + organizationalUnit: data.organizationalUnit ? data.organizationalUnit['@id'] : '' + }); + }); + } + onSubmit() { console.log('Form data:', this.clientForm.value); if (this.clientForm.valid) { const formData = this.clientForm.value; - this.http.post('http://127.0.0.1:8080/clients', formData).subscribe( - response => { - console.log('Response from POST:', response); - this.dialogRef.close(response); - }, - error => { - console.error('Error during POST:', error); - } - ); + + if (this.isEditMode) { + // Edit mode: Send PUT request to update the unit + const putUrl = `http://127.0.0.1:8080/clients/${this.data.uuid}`; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.patch(putUrl, formData, { headers }).subscribe( + response => { + console.log('PUT successful:', response); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar PUT:', error); + } + ); + } else { + // Create mode: Send POST request to create a new unit + const postUrl = 'http://127.0.0.1:8080/clients'; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.post(postUrl, formData, { headers }).subscribe( + response => { + console.log('POST successful:', response); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar POST:', error); + } + ); + } } } diff --git a/ogWebconsole/src/app/components/groups/data.service.ts b/ogWebconsole/src/app/components/groups/data.service.ts index ed9d78f..4b56083 100644 --- a/ogWebconsole/src/app/components/groups/data.service.ts +++ b/ogWebconsole/src/app/components/groups/data.service.ts @@ -71,8 +71,8 @@ export class DataService { } deleteElement(uuid: string, type: string): Observable { - const url = type === 'client' - ? `http://127.0.0.1:8080/clients/${uuid}` + const url = type === 'client' + ? `http://127.0.0.1:8080/clients/${uuid}` : `http://127.0.0.1:8080/organizational-units/${uuid}`; return this.http.delete(url).pipe( catchError(error => { @@ -81,7 +81,7 @@ export class DataService { }) ); } - + } diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css index f982e9b..920d648 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.css +++ b/ogWebconsole/src/app/components/groups/groups.component.css @@ -7,12 +7,38 @@ mat-card { margin: 10px; } +mat-card-title { + display: flex; + justify-content: space-between; + margin: 10px; +} + .elements-card{ margin: 10px; width: 800px; background-color: #fafafa; } +.title-with-breadcrumb { + display: flex; + flex-direction: column; +} + +mat-card-subtitle { + font-size: 0.875rem; + color: rgba(0, 0, 0, 0.54); +} + +mat-card-subtitle a { + cursor: pointer; + text-decoration: underline; + color: #1976d2; /* Color azul típico de enlaces */ +} + +mat-card-subtitle a:hover { + text-decoration: none; +} + .groups-button-row { display: flex; flex-grow: 1; diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index 2e5ef0b..8ad719a 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -10,7 +10,7 @@ Unidad organizativa - apartment @@ -25,8 +25,17 @@ - Elementos - {{ breadcrumb.join(' > ') }} + +
+ Elementos + + + {{ crumb }} + > + + +
+ diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index 7f3e840..adc928c 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -21,7 +21,10 @@ export class GroupsComponent implements OnInit { breadcrumb: string[] = []; clientsData: any[] = []; // Nueva variable para almacenar los datos de clients - constructor(private dataService: DataService, public dialog: MatDialog) {} + + + breadcrumbData: any[] = []; // Almacenar datos de breadcrumb para navegar +constructor(private dataService: DataService, public dialog: MatDialog) {} ngOnInit(): void { this.dataService.getUnidadesOrganizativas().subscribe( @@ -34,6 +37,7 @@ export class GroupsComponent implements OnInit { this.selectedUnidad = unidad; this.selectedDetail = unidad; // Mostrar detalles de la unidad seleccionada this.breadcrumb = [unidad.nombre]; + this.breadcrumbData = [unidad]; this.loadChildrenAndClients(unidad.uuid); } @@ -41,13 +45,26 @@ export class GroupsComponent implements OnInit { this.selectedDetail = child; // Mostrar detalles del niño seleccionado if (child.type !== 'client' && child.uuid && child.id) { this.breadcrumb.push(child.name || child.nombre); + this.breadcrumbData.push(child); this.loadChildrenAndClients(child.uuid); } } + navigateToBreadcrumb(index: number): void { + this.breadcrumb = this.breadcrumb.slice(0, index + 1); + const target = this.breadcrumbData[index]; + this.breadcrumbData = this.breadcrumbData.slice(0, index + 1); + if (target.type === 'client') { + this.selectedDetail = target; + } else { + this.loadChildrenAndClients(target.uuid); + } + } + loadChildrenAndClients(uuid: string): void { this.dataService.getChildren(uuid).subscribe( childrenData => { + console.log('Children data:', childrenData); this.dataService.getClients(uuid).subscribe( clientsData => { this.clientsData = clientsData; // Almacenar clientsData para pasarlo al componente hijo @@ -145,10 +162,13 @@ export class GroupsComponent implements OnInit { } onEditClick(type: any, uuid: string): void { + console.log('Tipo del elemento a editar:', type); + console.log('UUID del elemento a editar:', uuid); if (type != "client") { const dialogRef = this.dialog.open(EditOrganizationalUnitComponent); } else { + console.log('Editar cliente'); const dialogRef = this.dialog.open(EditClientComponent); } } -} \ No newline at end of file +} diff --git a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html index ec35819..e8aee32 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html +++ b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.html @@ -1,4 +1,5 @@

Añadir Unidad Organizativa

+
@@ -20,7 +21,7 @@ {{ unit.name }} - + Descripción @@ -30,7 +31,7 @@
- +
diff --git a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts index 1d2247e..43eb8eb 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts +++ b/ogWebconsole/src/app/components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component.ts @@ -70,7 +70,7 @@ export class CreateOrganizationalUnitComponent implements OnInit { onSubmit() { if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) { const parentValue = this.generalFormGroup.value.parent; - + const formData = { name: this.generalFormGroup.value.name, parent: parentValue || null, @@ -78,12 +78,12 @@ export class CreateOrganizationalUnitComponent implements OnInit { comments: this.additionalInfoFormGroup.value.comments, type: this.generalFormGroup.value.type }; - + // Realizar la solicitud POST console.log('POST data:', formData); const postUrl = 'http://127.0.0.1:8080/organizational-units'; const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); - + this.http.post(postUrl, formData, { headers }).subscribe( response => { console.log('POST successful:', response); @@ -98,7 +98,7 @@ export class CreateOrganizationalUnitComponent implements OnInit { ); } } - + onNoClick(): void { this.dialogRef.close(); diff --git a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html index b0361d9..839c4da 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html +++ b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.html @@ -20,7 +20,7 @@ {{ unit.name }} - + Descripción @@ -30,7 +30,7 @@
- +
diff --git a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts index c9c18f6..6c86f66 100644 --- a/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts +++ b/ogWebconsole/src/app/components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts @@ -1,7 +1,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; -import { Component, EventEmitter, Output } from '@angular/core'; +import { Component, EventEmitter, Inject, OnInit, Output } from '@angular/core'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; -import { MatDialogRef } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { CreateOrganizationalUnitComponent } from '../create-organizational-unit/create-organizational-unit.component'; @Component({ @@ -9,30 +9,36 @@ import { CreateOrganizationalUnitComponent } from '../create-organizational-unit templateUrl: './edit-organizational-unit.component.html', styleUrl: './edit-organizational-unit.component.css' }) -export class EditOrganizationalUnitComponent { +export class EditOrganizationalUnitComponent implements OnInit { isLinear = true; generalFormGroup: FormGroup; additionalInfoFormGroup: FormGroup; networkSettingsFormGroup: FormGroup; types: string[] = ['organizational-unit', 'classrooms-group', 'classroom', 'clients-group']; parentUnits: any[] = []; // Array to store parent units fetched from API + isEditMode: boolean; // Flag to check if it's edit mode @Output() unitAdded = new EventEmitter(); // Event emitter to notify parent component about unit addition constructor( private _formBuilder: FormBuilder, private dialogRef: MatDialogRef, - private http: HttpClient // Inject HttpClient for HTTP requests + private http: HttpClient, // Inject HttpClient for HTTP requests + @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode ) { + this.isEditMode = !!data?.uuid; // Check if uuid is passed to determine edit mode + this.generalFormGroup = this._formBuilder.group({ name: ['', Validators.required], parent: [''], description: [''], type: ['', Validators.required] }); + this.additionalInfoFormGroup = this._formBuilder.group({ comments: [''], }); + this.networkSettingsFormGroup = this._formBuilder.group({ proxy: [''], dns: [''], @@ -49,6 +55,10 @@ export class EditOrganizationalUnitComponent { hardwareProfile: ['', Validators.pattern('https?://.+')], validation: [false] }); + + if (this.isEditMode) { + this.loadData(data.uuid); + } } ngOnInit() { @@ -68,38 +78,89 @@ export class EditOrganizationalUnitComponent { ); } + loadData(uuid: string) { + const url = `http://127.0.0.1:8080/organizational-units/${uuid}`; + + this.http.get(url).subscribe( + data => { + this.generalFormGroup.patchValue({ + name: data.name, + parent: data.parent ? data.parent['@id'] : '', + description: data.description, + type: data.type + }); + this.additionalInfoFormGroup.patchValue({ + comments: data.comments + }); + this.networkSettingsFormGroup.patchValue({ + proxy: data.proxy, + dns: data.dns, + netmask: data.netmask, + router: data.router, + ntp: data.ntp, + p2pMode: data.p2pMode, + p2pTime: data.p2pTime, + mcastIp: data.mcastIp, + mcastSpeed: data.mcastSpeed, + mcastPort: data.mcastPort, + mcastMode: data.mcastMode, + menu: data.menu, + hardwareProfile: data.hardwareProfile, + validation: data.validation + }); + }, + error => { + console.error('Error fetching data for edit:', error); + } + ); + } + onSubmit() { if (this.generalFormGroup.valid && this.additionalInfoFormGroup.valid && this.networkSettingsFormGroup.valid) { const parentValue = this.generalFormGroup.value.parent; - + const formData = { name: this.generalFormGroup.value.name, parent: parentValue || null, description: this.generalFormGroup.value.description, comments: this.additionalInfoFormGroup.value.comments, - type: this.generalFormGroup.value.type + type: this.generalFormGroup.value.type, + ...this.networkSettingsFormGroup.value }; - - // Realizar la solicitud POST - console.log('POST data:', formData); - const postUrl = 'http://127.0.0.1:8080/organizational-units'; - const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); - - this.http.post(postUrl, formData, { headers }).subscribe( - response => { - console.log('POST successful:', response); - // Emitir evento para notificar que se ha añadido una nueva unidad - this.unitAdded.emit(); - this.dialogRef.close(); // Cerrar el diálogo después de añadir - }, - error => { - console.error('Error al realizar POST:', error); - // Manejar el error según sea necesario - } - ); + + if (this.isEditMode) { + // Edit mode: Send PUT request to update the unit + const putUrl = `http://127.0.0.1:8080/organizational-units/${this.data.uuid}`; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.put(putUrl, formData, { headers }).subscribe( + response => { + console.log('PUT successful:', response); + this.unitAdded.emit(); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar PUT:', error); + } + ); + } else { + // Create mode: Send POST request to create a new unit + const postUrl = 'http://127.0.0.1:8080/organizational-units'; + const headers = new HttpHeaders({ 'Content-Type': 'application/json' }); + + this.http.post(postUrl, formData, { headers }).subscribe( + response => { + console.log('POST successful:', response); + this.unitAdded.emit(); + this.dialogRef.close(); + }, + error => { + console.error('Error al realizar POST:', error); + } + ); + } } } - onNoClick(): void { this.dialogRef.close(); diff --git a/ogWebconsole/src/app/components/layout/header/header.component.css b/ogWebconsole/src/app/components/layout/header/header.component.css index d5ba1ce..6c84df7 100644 --- a/ogWebconsole/src/app/components/layout/header/header.component.css +++ b/ogWebconsole/src/app/components/layout/header/header.component.css @@ -1,15 +1,13 @@ mat-toolbar { - display: flex; - justify-content: space-between; - padding: 10px; height: 50px; - box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5); + background-color: #3f51b5; + color: white; } .navbar-button-row { display: flex; - justify-content: space-around; + justify-content: end; flex-grow: 1; } @@ -20,4 +18,4 @@ button[mat-flat-button] { .navbar-tittle{ padding-left: 20px; cursor: pointer; -} \ No newline at end of file +} diff --git a/ogWebconsole/src/app/components/layout/header/header.component.html b/ogWebconsole/src/app/components/layout/header/header.component.html index 737223f..6a54ed5 100644 --- a/ogWebconsole/src/app/components/layout/header/header.component.html +++ b/ogWebconsole/src/app/components/layout/header/header.component.html @@ -1,19 +1,11 @@ - Opengnsys webconsole
- - - - - - - - - - -
- - \ No newline at end of file + + + + + + + + diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css index 09b9d86..0b7bd3a 100644 --- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css +++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.css @@ -1,6 +1,11 @@ -.content-wrapper{ - display: block; - grid-area: content; - margin: 20px; -} \ No newline at end of file +.container { + width: auto; + height: 100%; +} + +.content { + margin: 10px; + padding: 10px; +} + diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html index 1373e77..f5e4d99 100644 --- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html +++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.html @@ -1,6 +1,11 @@ -
- -
+ + + + + + + -
\ No newline at end of file + + diff --git a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts index 1365866..8017e31 100644 --- a/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts +++ b/ogWebconsole/src/app/components/layout/main-layout/main-layout.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-main-layout', templateUrl: './main-layout.component.html', - styleUrl: './main-layout.component.css' + styleUrl: './main-layout.component.css', }) export class MainLayoutComponent { isSidebarVisible: boolean = false; diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css index d68e53c..60409d3 100644 --- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css +++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css @@ -1,25 +1,37 @@ -.sidebar { - width: 250px; - position: fixed; - top: 50px; - left: -260px; - height: 100%; - background-color: rgb(245, 245, 245); - transition: left 0.3s ease-in-out; - box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5); - z-index: 99999999999; - } - - .sidebar.visible { - left: 0; - } - - .sidebar-content{ - margin: 20px; - } - - button { - margin-bottom: 10px; +mat-nav-list { + width: 250px; } - +mat-list-item { + cursor: pointer; + display: flex; + align-items: center; +} + +.entry{ + display: flex; + align-items: center; + gap: 1rem; + padding:0.75rem; +} + +mat-icon { + margin-right: 8px; +} + +.user-logged{ + align-items: center; + gap: 2rem; + padding:1.5rem; + font-size: x-large; +} + +.sidebar-content { + display: flex; + flex-direction: column; + height: 100%; +} + +.admin-link { + margin-top: auto; +} diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html index a4a5b88..3c47833 100644 --- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html +++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html @@ -1,8 +1,58 @@ -
-
-

Bienvenido {{username}}

- - -
-
- \ No newline at end of file + + + + {{username}} + + + + + + + + apartment + Grupos + + + + + chevron_right + Acciones + + + + + desktop_windows + Imágenes + + + + + settings_input_component + Componentes + + + + + warehouse + Repositorios + + + + + list + Menús + + + + + search + Buscar + + + + + calendar_month + Calendarios + + + diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts index 85e49bd..5445f3c 100644 --- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts +++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts @@ -11,7 +11,7 @@ describe('SidebarComponent', () => { imports: [SidebarComponent] }) .compileComponents(); - + fixture = TestBed.createComponent(SidebarComponent); component = fixture.componentInstance; fixture.detectChanges(); diff --git a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts index ad83d71..9f6c4b1 100644 --- a/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts +++ b/ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts @@ -38,4 +38,4 @@ export class SidebarComponent { console.log("User edited successfully!") }); */ } -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..d8af095 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "oggui", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}