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

Added interceptor 401 and refactor commands

oggui/calendar
Manuel Aranda Rosales 2024-10-03 14:47:18 +02:00
parent 9226dd50d6
commit 011094b232
12 changed files with 310 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ogWebconsole/src/app/components/calendar/calendar.component.css
View File

@ -2,7 +2,7 @@
font-size: 24px; font-size: 24px;
} }
.images-button-row { .calendar-button-row {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
margin-top: 16px; margin-top: 16px;
@ -16,31 +16,11 @@
padding: 16px; padding: 16px;
} }
.imagesLists-container {
flex: 1;
}
.card.unidad-card { .card.unidad-card {
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
.image-container {
display: flex;
align-items: center;
margin-bottom: 16px;
border-bottom: 1px solid rgba(122, 122, 122, 0.555);
}
.image-container h4 {
margin: 0;
flex: 1;
}
.image-name{
cursor: pointer;
}
table { table {
width: 100%; width: 100%;
margin-top: 50px; margin-top: 50px;

3
ogWebconsole/src/app/components/calendar/calendar.component.html
View File

@ -1,6 +1,6 @@
<div class="header-container"> <div class="header-container">
<h2 class="title" i18n="@@adminImagesTitle">Administrar calendarios</h2> <h2 class="title" i18n="@@adminImagesTitle">Administrar calendarios</h2>
<div class="images-button-row"> <div class="calendar-button-row">
<button mat-flat-button color="primary" (click)="addImage()">Añadir calendario</button> <button mat-flat-button color="primary" (click)="addImage()">Añadir calendario</button>
</div> </div>
</div> </div>
@ -26,7 +26,6 @@
<ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'"> <ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
{{ column.cell(image) }} {{ column.cell(image) }}
</ng-container> </ng-container>
</td> </td>
</ng-container> </ng-container>

82
ogWebconsole/src/app/components/commands/main-commands/commands.component.css
View File

@ -1,49 +1,33 @@
.commands-list { .title {
margin-bottom: 20px; font-size: 24px;
} }
.command-item { .calendar-button-row {
cursor: pointer; display: flex;
margin-bottom: 10px; justify-content: flex-start;
padding: 10px; margin-top: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
} }
.command-item:hover { .divider {
background-color: #e9e9e9; margin: 20px 0;
} }
.command-details { .lists-container {
padding: 20px; padding: 16px;
border: 1px solid #ddd;
background-color: #f4f4f4;
border-radius: 4px;
} }
.script-display { .imagesLists-container {
margin-top: 20px; flex: 1;
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 4px;
} }
pre { .card.unidad-card {
margin: 0; height: 100%;
font-family: 'Courier New', Courier, monospace; box-sizing: border-box;
} }
.mat-elevation-z8{ table {
margin-top: 20px; width: 100%;
} margin-top: 50px;
tr:hover {
background-color: rgba(219, 219, 219, 0.219);
}
.detailBtn{
cursor: pointer;
} }
.search-container { .search-container {
@ -65,6 +49,30 @@ tr:hover {
padding: 5px; padding: 5px;
} }
.command-button-row{ .header-container {
margin-bottom: 10px; display: flex;
} justify-content: space-between;
align-items: center;
padding: 10px;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.mat-chip-readonly-true {
background-color: #4CAF50 !important;
color: white !important;
}
.mat-chip-readonly-false {
background-color: #F44336 !important;
color: white !important;
}

54
ogWebconsole/src/app/components/commands/main-commands/commands.component.html
View File

@ -14,46 +14,28 @@
</mat-form-field> </mat-form-field>
</div> </div>
<table mat-table [dataSource]="commands" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Nombre columna --> <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<th mat-header-cell *matHeaderCellDef> Nombre </th> <td mat-cell *matCellDef="let command" >
<td mat-cell *matCellDef="let command"> {{ command.name }} </td> <ng-container *ngIf="column.columnDef !== 'readOnly'">
{{ column.cell(command) }}
</ng-container>
<ng-container *ngIf="column.columnDef === 'readOnly'" >
<mat-chip *ngIf="command.readOnly" class="mat-chip-readonly-true"><mat-icon style="color:white;">check</mat-icon></mat-chip>
<mat-chip *ngIf="!command.readOnly" class="mat-chip-readonly-false"> <mat-icon style="color:white;">close</mat-icon></mat-chip>
</ng-container>
</td>
</ng-container> </ng-container>
<!-- Creado por columna -->
<ng-container matColumnDef="createdBy">
<th mat-header-cell *matHeaderCellDef> Creado por </th>
<td mat-cell *matCellDef="let command"> {{ command.createdBy }} </td>
</ng-container>
<!-- Fecha de creación columna -->
<ng-container matColumnDef="createdAt">
<th mat-header-cell *matHeaderCellDef> Fecha de creación </th>
<td mat-cell *matCellDef="let command"> {{ command.createdAt | date:'short' }} </td>
</ng-container>
<!-- Columna para el menú de acciones -->
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Acciones </th> <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let command"> <td mat-cell *matCellDef="let client" style="text-align: center;">
<button mat-icon-button [matMenuTriggerFor]="menu"> <button mat-icon-button color="info" (click)="viewDetails($event, client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<mat-icon>more_vert</mat-icon> <button mat-icon-button color="primary" (click)="editCommand($event, client)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteCommand($event, client)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button> </button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="viewDetails(command)">
<mat-icon>info</mat-icon>
<span>Detalles</span>
</button>
<button mat-menu-item (click)="editCommand(command)">
<mat-icon>edit</mat-icon>
<span>Editar</span>
</button>
<button mat-menu-item (click)="deleteCommand(command)">
<mat-icon>delete</mat-icon>
<span>Eliminar</span>
</button>
</mat-menu>
</td> </td>
</ng-container> </ng-container>

49
ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
View File

@ -5,6 +5,8 @@ import { ToastrService } from 'ngx-toastr';
import { CommandDetailComponent } from './detail-command/command-detail.component'; import { CommandDetailComponent } from './detail-command/command-detail.component';
import { CreateCommandComponent } from './create-command/create-command.component'; import { CreateCommandComponent } from './create-command/create-command.component';
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component'; import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
@Component({ @Component({
selector: 'app-commands', selector: 'app-commands',
@ -13,13 +15,36 @@ import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/
}) })
export class CommandsComponent implements OnInit { export class CommandsComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
commands: any[] = []; dataSource = new MatTableDataSource<any>();
filters: { [key: string]: string | boolean } = {}; filters: { [key: string]: string | boolean } = {};
length: number = 0; length: number = 0;
itemsPerPage: number = 20; itemsPerPage: number = 20;
page: number = 1; page: number = 0;
pageSizeOptions: number[] = [10, 20, 40, 100]; pageSizeOptions: number[] = [10, 20, 40, 100];
displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions']; datePipe: DatePipe = new DatePipe('es-ES');
columns = [
{
columnDef: 'id',
header: 'ID',
cell: (command: any) => `${command.id}`,
},
{
columnDef: 'name',
header: 'Nombre',
cell: (command: any) => `${command.name}`
},
{
columnDef: 'readOnly',
header: 'Solo Lectura',
cell: (command: any) => `${command.readOnly}`
},
{
columnDef: 'createdAt',
header: 'Fecha de creación',
cell: (command: any) => `${this.datePipe.transform(command.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
}
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
private apiUrl = `${this.baseUrl}/commands`; private apiUrl = `${this.baseUrl}/commands`;
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {} constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
@ -29,9 +54,9 @@ export class CommandsComponent implements OnInit {
} }
search(): void { search(): void {
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe( this.http.get<any>(`${this.apiUrl}?page=${this.page +1 }&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => { (data) => {
this.commands = data['hydra:member']; this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems']; this.length = data['hydra:totalItems'];
}, },
(error) => { (error) => {
@ -40,7 +65,8 @@ export class CommandsComponent implements OnInit {
); );
} }
viewDetails(command: any): void { viewDetails(event: MouseEvent, command: any): void {
event.stopPropagation();
this.dialog.open(CommandDetailComponent, { this.dialog.open(CommandDetailComponent, {
width: '800px', width: '800px',
data: command, data: command,
@ -53,14 +79,16 @@ export class CommandsComponent implements OnInit {
}).afterClosed().subscribe(() => this.search()); }).afterClosed().subscribe(() => this.search());
} }
editCommand(command: any): void { editCommand(event: MouseEvent, command: any): void {
event.stopPropagation();
this.dialog.open(CreateCommandComponent, { this.dialog.open(CreateCommandComponent, {
width: '600px', width: '600px',
data: { command }, data: command['@id']
}).afterClosed().subscribe(() => this.search()); }).afterClosed().subscribe(() => this.search());
} }
deleteCommand(command: any): void { deleteCommand(event: MouseEvent,command: any): void {
event.stopPropagation();
this.dialog.open(DeleteModalComponent, { this.dialog.open(DeleteModalComponent, {
width: '300px', width: '300px',
data: { name: command.name }, data: { name: command.name },
@ -80,8 +108,9 @@ export class CommandsComponent implements OnInit {
} }
onPageChange(event: any): void { onPageChange(event: any): void {
this.page = event.pageIndex === 0 ? 1 : event.pageIndex; this.page = event.pageIndex;
this.itemsPerPage = event.pageSize; this.itemsPerPage = event.pageSize;
this.length = event.length;
this.search(); this.search();
} }
} }

77
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.css
View File

@ -1,43 +1,60 @@
.dialog-title { .full-width {
font-size: 1.5em;
color: #343a40;
margin: 0;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.command-form {
padding: 20px;
background-color: #fff;
}
.form-field {
width: 100%; width: 100%;
margin-bottom: 20px; }
.form-container {
padding: 40px;
} }
.checkbox-group { .form-group {
display: flex; margin-top: 20px;
flex-direction: column; margin-bottom: 26px;
margin-bottom: 20px;
} }
.action-buttons { .full-width {
display: flex; width: 100%;
justify-content: flex-end; margin-bottom: 16px;
}
.additional-form {
margin-top: 20px; margin-top: 20px;
} }
.cancel-button { .checkbox-group {
margin-right: 10px; display: flex;
color: #dc3545; flex-direction: column;
margin: 15px 0;
align-items: flex-start;
} }
.submit-button { .time-fields {
background-color: #007bff; display: flex;
color: #fff; gap: 15px;
} }
.submit-button:hover { .time-field {
background-color: #0056b3; flex: 1;
} }
.list-item-content {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
}
.text-content {
flex-grow: 1;
margin-right: 16px;
margin-left: 10px;
}
.icon-container {
display: flex;
align-items: center;
}
.right-icon {
margin-left: 8px;
cursor: pointer;
}

48
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.html
View File

@ -1,28 +1,30 @@
<h2 mat-dialog-title class="dialog-title">{{ isEditMode ? 'Editar Comando' : 'Añadir Comando' }}</h2> <h2 mat-dialog-title>{{ commandId ? 'Editar' : 'Crear' }} Comando</h2>
<mat-dialog-content class="form-container">
<form [formGroup]="createCommandForm" (ngSubmit)="onSubmit()" class="command-form">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre</mat-label>
<input matInput formControlName="name" placeholder="Nombre del comando" required>
</mat-form-field>
<form [formGroup]="createCommandForm" (ngSubmit)="onSubmit()" class="command-form"> <mat-form-field appearance="fill" class="full-width">
<mat-form-field appearance="fill" class="form-field"> <mat-label>Script</mat-label>
<mat-label>Nombre</mat-label> <textarea matInput formControlName="script" placeholder="Script del comando"></textarea>
<input matInput formControlName="name" placeholder="Nombre del comando" required> </mat-form-field>
</mat-form-field>
<mat-form-field appearance="fill" class="form-field"> <div class="checkbox-group">
<mat-label>Script</mat-label> <mat-checkbox formControlName="readOnly">Solo lectura</mat-checkbox>
<textarea matInput formControlName="script" placeholder="Script del comando" required></textarea> <mat-checkbox formControlName="enabled">Habilitado</mat-checkbox>
</mat-form-field> </div>
<div class="checkbox-group"> <mat-form-field appearance="fill" class="full-width">
<mat-checkbox formControlName="readOnly">Solo lectura</mat-checkbox> <mat-label>Comentarios</mat-label>
<mat-checkbox formControlName="enabled">Habilitado</mat-checkbox> <textarea matInput formControlName="comments" placeholder="Comentarios"></textarea>
</div> </mat-form-field>
</form>
</mat-dialog-content>
<mat-form-field appearance="fill" class="form-field"> <mat-dialog-actions align="end">
<mat-label>Comentarios</mat-label> <button mat-button (click)="onCancel($event)">Cancelar</button>
<textarea matInput formControlName="comments" placeholder="Comentarios"></textarea> <button mat-button (click)="onSubmit()" cdkFocusInitial> Guardar </button>
</mat-form-field> </mat-dialog-actions>
<div mat-dialog-actions class="action-buttons">
<button mat-button (click)="onCancel($event)" class="cancel-button">Cancelar</button>
<button mat-flat-button color="primary" type="submit" class="submit-button">{{ isEditMode ? 'Guardar' : 'Añadir' }}</button>
</div>
</form>

78
ogWebconsole/src/app/components/commands/main-commands/create-command/create-command.component.ts
View File

@ -3,6 +3,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import {DataService} from "../data.service";
@Component({ @Component({
selector: 'app-create-command', selector: 'app-create-command',
@ -11,27 +12,49 @@ import { ToastrService } from 'ngx-toastr';
}) })
export class CreateCommandComponent { export class CreateCommandComponent {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
createCommandForm!: FormGroup; createCommandForm: FormGroup<any>;
isEditMode: boolean;
private apiUrl = `${this.baseUrl}/commands`; private apiUrl = `${this.baseUrl}/commands`;
commandId: string | null = null;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
private http: HttpClient, private http: HttpClient,
public dialogRef: MatDialogRef<CreateCommandComponent>, public dialogRef: MatDialogRef<CreateCommandComponent>,
private toastService: ToastrService, private toastService: ToastrService,
private dataService: DataService,
@Inject(MAT_DIALOG_DATA) public data: any @Inject(MAT_DIALOG_DATA) public data: any
) { ) {
this.isEditMode = data && data.command; this.createCommandForm = this.fb.group({
name: ['', Validators.required],
script: [''],
readOnly: [false],
enabled: [true],
comments: [''],
});
} }
ngOnInit(): void { ngOnInit(): void {
this.createCommandForm = this.fb.group({ if (this.data) {
name: [this.isEditMode ? this.data.command.name : '', Validators.required], this.load()
script: [this.isEditMode ? this.data.command.script : '', Validators.required], }
readOnly: [this.isEditMode ? this.data.command.readOnly : false], }
enabled: [this.isEditMode ? this.data.command.enabled : true],
comments: [this.isEditMode ? this.data.command.comments : ''] load(): void {
this.dataService.getCommand(this.data).subscribe({
next: (response) => {
console.log(response);
this.createCommandForm = this.fb.group({
name: [response.name, Validators.required],
notes: [response.notes],
script: [response.script],
readOnly: [response.readOnly],
enabled: [response.enabled],
});
this.commandId = response['@id'];
},
error: (err) => {
console.error('Error fetching remote calendar:', err);
}
}); });
} }
@ -42,24 +65,35 @@ export class CreateCommandComponent {
onSubmit(): void { onSubmit(): void {
if (this.createCommandForm.valid) { if (this.createCommandForm.valid) {
const commandData = this.createCommandForm.value;
if (this.isEditMode) { const payload = {
this.http.patch(`${this.apiUrl}/${this.data.command.uuid}`, commandData).subscribe( name: this.createCommandForm.value.name,
response => { script: this.createCommandForm.value.script,
this.toastService.success('Comando creado con éxito'); readOnly: this.createCommandForm.value.readOnly,
this.dialogRef.close(commandData); enabled: this.createCommandForm.value.enabled,
comments: this.createCommandForm.value.comments,
};
if (this.commandId) {
this.http.put(`${this.baseUrl}${this.commandId}`, payload).subscribe(
(response) => {
this.toastService.success('Comando editado correctamente');
this.dialogRef.close();
}, },
error => { (error) => {
console.error('Error editing command', error); this.toastService.error(error['error']['hydra:description']);
console.error('Error al editar el comando', error);
} }
); );
} else { } else {
this.http.post(this.apiUrl, commandData).subscribe( this.http.post(`${this.baseUrl}/commands`, payload).subscribe(
response => { (response) => {
this.dialogRef.close(true); this.toastService.success('Comando añadido correctamente');
this.dialogRef.close();
}, },
error => { (error) => {
console.error('Error adding command', error); this.toastService.error(error['error']['hydra:description']);
console.error('Error al añadir comando', error);
} }
); );
} }

54
ogWebconsole/src/app/components/commands/main-commands/data.service.ts Normal file
View File

@ -0,0 +1,54 @@
import { Injectable } from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
private apiUrl = `${this.baseUrl}/commands?page=1&itemsPerPage=1000`;
constructor(private http: HttpClient) {}
getCommands(filters: { [key: string]: string }): Observable<{ totalItems: any; data: any }> {
const params = new HttpParams({ fromObject: filters });
return this.http.get<any>(this.apiUrl, { params }).pipe(
map(response => {
if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
return {
data: response['hydra:member'],
totalItems: response['hydra:totalItems']
}
} else {
throw new Error('Unexpected response format');
}
}),
catchError(error => {
console.error('Error fetching commands', error);
return throwError(error);
})
);
}
getCommand(id: string): Observable<any> {
return this.http.get<any>(`${this.baseUrl}${id}`).pipe(
map(response => {
if (response.name) {
return response;
} else {
throw new Error('Unexpected response format');
}
}),
catchError(error => {
console.error('Error fetching user group', error);
return throwError(error);
})
);
}
}

23
ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.css
View File

@ -1,19 +1,18 @@
.modal-container { .modal-container {
background-color: #fff; background-color: #fff;
padding: 20px; padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 10px; border-radius: 10px;
width: calc(100% - 40px); width: calc(100% - 40px);
max-width: 800px; max-width: 800px;
height: calc(100% - 40px); height: calc(100% - 40px);
max-height: 90vh; max-height: 90vh;
margin: 20px auto; margin: 20px auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
.modal-title { .modal-title {
@ -28,7 +27,7 @@
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
padding: 10px; padding: 10px;
max-height: calc(100vh - 200px); max-height: calc(100vh - 200px);
} }
.modal-content p { .modal-content p {
@ -45,8 +44,8 @@
border-radius: 8px; border-radius: 8px;
font-size: 1.2em; font-size: 1.2em;
overflow: auto; overflow: auto;
max-height: 300px; max-height: 300px;
white-space: pre-wrap; white-space: pre-wrap;
word-wrap: break-word; word-wrap: break-word;
} }
@ -73,12 +72,6 @@
border-radius: 5px; border-radius: 5px;
} }
.cancel-button {
background-color: #dc3545;
color: white;
border-radius: 5px;
}
.primary-button:hover, .primary-button:hover,
.accent-button:hover, .accent-button:hover,
.cancel-button:hover { .cancel-button:hover {
@ -100,4 +93,4 @@
mat-checkbox { mat-checkbox {
margin-left: 20px; margin-left: 20px;
} }

18
ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.html
View File

@ -26,21 +26,6 @@
Debes seleccionar al menos un cliente. Debes seleccionar al menos un cliente.
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<!-- <mat-checkbox formControlName="scheduleExecution" (change)="onScheduleChange($event)">
Programar ejecución
</mat-checkbox>
<div *ngIf="showDatePicker" class="schedule-container">
<mat-form-field appearance="fill">
<mat-label>Fecha</mat-label>
<input matInput [matDatepicker]="picker" formControlName="scheduleDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Hora</mat-label>
<input matInput type="time" formControlName="scheduleTime">
</mat-form-field>
</div> -->
</form> </form>
</div> </div>
@ -48,7 +33,6 @@
<button mat-button color="primary" class="primary-button" [disabled]="false" (click)="execute()" > <button mat-button color="primary" class="primary-button" [disabled]="false" (click)="execute()" >
{{ showClientSelect ? 'Ejecutar' : 'Configurar ejecución' }} {{ showClientSelect ? 'Ejecutar' : 'Configurar ejecución' }}
</button> </button>
<!-- <button mat-button color="accent" class="accent-button" (click)="edit()">Editar</button> --> <button mat-button (click)="cancel()">Cancelar</button>
<button mat-button class="cancel-button" (click)="cancel()">Cancelar</button>
</div> </div>
</div> </div>

19
ogWebconsole/src/app/core/services/custom.interceptor.ts
View File

@ -1,10 +1,12 @@
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs'; import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
@Injectable() @Injectable()
export class CustomInterceptor implements HttpInterceptor { export class CustomInterceptor implements HttpInterceptor {
constructor() { } constructor(private router: Router) { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const token = localStorage.getItem('loginToken'); const token = localStorage.getItem('loginToken');
@ -24,6 +26,15 @@ export class CustomInterceptor implements HttpInterceptor {
}); });
} }
return next.handle(newCloneRequest); return next.handle(newCloneRequest).pipe(
catchError((error: HttpErrorResponse) => {
if (error.status === 401) {
this.router.navigate(['/auth/login']).then(r => {
console.error('Error 401, redirect to login page');
});
}
return throwError(() => error);
})
);
} }
} }