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

refs #729. RemoteCalendar and RemoteCalendarRule. Finish

oggui/calendar
Manuel Aranda Rosales 2024-09-26 12:03:20 +02:00
parent 30bd210b09
commit 390f454ac2
9 changed files with 100 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ogWebconsole/src/app/app-routing.module.ts
View File

@ -15,14 +15,10 @@ import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-bo
import {OgbootStatusComponent} from "./components/ogboot/ogboot-status/ogboot-status.component";
import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
<<<<<<< HEAD
import { CommandsComponent } from './components/commands/commands.component';
import { CalendarComponent } from "./components/calendar/calendar.component";
=======
import { CommandsComponent } from './components/commands/main-commands/commands.component';
import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
>>>>>>> 30cd43ff0fcccafbf6d2b7534dd31ba0b3c2c257
const routes: Routes = [
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' },
{

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

@ -39,7 +39,7 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let calendar" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editImage(calendar)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" (click)="editCalendar(calendar)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="primary" (click)="sync(calendar)"><mat-icon>sync</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteCalendar(calendar)" i18n="@@buttonDelete"><mat-icon>delete</mat-icon></button>
</td>

20
ogWebconsole/src/app/components/calendar/calendar.component.ts
View File

@ -90,10 +90,10 @@ export class CalendarComponent implements OnInit {
console.log('Syncing calendars');
}
editImage(calendar: any): void {
editCalendar(calendar: any): void {
const dialogRef = this.dialog.open(CreateCalendarComponent, {
width: '700px',
data: calendar
data: calendar['@id']
});
dialogRef.afterClosed().subscribe(result => {
@ -103,28 +103,28 @@ export class CalendarComponent implements OnInit {
});
}
deleteCalendar(role: any): void {
deleteCalendar(calendar: any): void {
const dialogRef = this.dialog.open(DeleteModalComponent, {
width: '300px',
data: { name: role.name }
width: '400px',
data: { name: calendar.name }
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
const apiUrl = `${this.baseUrl}/remote-calendars/${role.uuid}`;
const apiUrl = `${this.baseUrl}${calendar['@id']}`;
this.http.delete(apiUrl).subscribe({
next: () => {
console.log('Role deleted successfully');
console.log('Calendar deleted successfully');
this.search();
this.toastService.success('Role deleted successfully');
this.toastService.success('Calendar deleted successfully');
},
error: (error) => {
console.error('Error deleting role:', error);
this.toastService.error('Error deleting calendar');
}
});
} else {
console.log('Role deletion cancelled');
console.log('calendar deletion cancelled');
}
});
}

2
ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.css
View File

@ -16,8 +16,6 @@
}
.checkbox-group {
display: flex;
flex-direction: column;
margin: 15px 0;
align-items: flex-start;
}

16
ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.html
View File

@ -4,12 +4,20 @@
<div *ngIf="!isRemoteAvailable" class="form-group">
<mat-label>Selecciona los días de la semana</mat-label>
<div class="checkbox-group">
<mat-checkbox *ngFor="let day of weekDays" [(ngModel)]="busyWeekDays[day]">
{{ day }}
</mat-checkbox>
<div class="row">
<div class="col-md-6 checkbox-group">
<mat-checkbox *ngFor="let day of weekDays.slice(0, (weekDays.length / 2) + 1)" [(ngModel)]="busyWeekDays[day]">
{{ day }}
</mat-checkbox>
</div>
<div class="col-md-6 checkbox-group ">
<mat-checkbox *ngFor="let day of weekDays.slice(weekDays.length / 2 + 1 )" [(ngModel)]="busyWeekDays[day]">
{{ day }}
</mat-checkbox>
</div>
</div>
<div class="time-fields">
<mat-form-field appearance="fill" class="time-field">
<mat-label>Hora de inicio</mat-label>

4
ogWebconsole/src/app/components/calendar/create-calendar-rule/create-calendar-rule.component.ts
View File

@ -30,7 +30,7 @@ export class CreateCalendarRuleComponent {
private toastService: ToastrService,
private http: HttpClient,
public dialogRef: MatDialogRef<CreateCalendarRuleComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
@Inject(MAT_DIALOG_DATA) public data: any,
) { }
ngOnInit(): void {
@ -78,7 +78,7 @@ export class CreateCalendarRuleComponent {
remoteCalendar: this.calendarId,
busyWeekDays: this.selectedDaysIndices,
busyFromHour: this.busyFromHour,
busyToHour: this.busyFromHour,
busyToHour: this.busyToHour,
availableFromDate: this.availableFromDate,
availableToDate: this.availableToDate,
isRemoteAvailable: this.isRemoteAvailable,

20
ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.html
View File

@ -1,15 +1,21 @@
<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} calendario</h2>
<mat-dialog-content class="form-container">
<button mat-flat-button color="primary" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">Añadir regla</button>
<!-- Campo para el nombre -->
<mat-form-field appearance="fill" class="full-width">
<mat-label>Nombre</mat-label>
<input matInput [(ngModel)]="name">
<input matInput [(ngModel)]="name" required>
<mat-icon *ngIf="isEditMode" matSuffix (click)="submitForm()">mode_edit</mat-icon>
</mat-form-field>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div *ngIf="isEditMode" mat-subheader>Reglas</div>
<button mat-flat-button color="primary" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
Añadir regla
</button>
</div>
<div mat-subheader>Reglas</div>
<mat-list>
<mat-divider *ngIf="isEditMode"></mat-divider>
<mat-list *ngIf="isEditMode">
<ng-container *ngFor="let rule of remoteCalendarRules;">
<mat-list-item>
<div class="list-item-content">
@ -23,7 +29,7 @@
<button mat-icon-button color="primary" class="right-icon" (click)="createRule(rule)" i18n="@@editImage">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" class="right-icon" >
<button mat-icon-button color="warn" class="right-icon" (click)="deleteCalendarRule(rule)" >
<mat-icon>delete</mat-icon>
</button>
</div>
@ -35,5 +41,5 @@
<mat-dialog-actions align="end">
<button mat-button (click)="onNoClick()">Cancelar</button>
<button mat-button (click)="submitForm()" cdkFocusInitial>{{ isEditMode ? 'Guardar' : 'Añadir' }}</button>
<button mat-button (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial> Guardar </button>
</mat-dialog-actions>

50
ogWebconsole/src/app/components/calendar/create-calendar/create-calendar.component.ts
View File

@ -3,6 +3,8 @@ import {ToastrService} from "ngx-toastr";
import {HttpClient} from "@angular/common/http";
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
import {CreateCalendarRuleComponent} from "../create-calendar-rule/create-calendar-rule.component";
import {DataService} from "../data.service";
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
@Component({
selector: 'app-create-calendar',
@ -22,17 +24,29 @@ export class CreateCalendarComponent implements OnInit {
public dialogRef: MatDialogRef<CreateCalendarComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
public dialog: MatDialog,
private dataService: DataService,
) { }
ngOnInit(): void {
if (this.data) {
this.isEditMode = true;
this.name = this.data.name;
this.remoteCalendarRules = this.data.remoteCalendarRules;
this.calendarId = this.data['@id']
this.load()
}
}
load(): void {
this.dataService.getRemoteCalendar(this.data).subscribe({
next: (response) => {
this.isEditMode = true;
this.name = response.name;
this.remoteCalendarRules = response.remoteCalendarRules;
this.calendarId = this.data;
},
error: (err) => {
console.error('Error fetching remote calendar:', err);
}
});
}
onNoClick(): void {
this.dialogRef.close();
}
@ -48,6 +62,7 @@ export class CreateCalendarComponent implements OnInit {
next: (response) => {
this.toastService.success('Calendar updated successfully');
this.dialogRef.close(true);
this.load()
},
error: (error) => {
console.error('Error:', error);
@ -60,6 +75,7 @@ export class CreateCalendarComponent implements OnInit {
next: (response) => {
this.toastService.success('Calendar created successfully');
this.dialogRef.close(true);
this.load()
},
error: (error) => {
console.error('Error:', error);
@ -80,6 +96,32 @@ export class CreateCalendarComponent implements OnInit {
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.load()
}
});
}
deleteCalendarRule(rule: any): void {
const dialogRef = this.dialog.open(DeleteModalComponent, {
width: '400px',
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
const apiUrl = `${this.baseUrl}${rule['@id']}`;
this.http.delete(apiUrl).subscribe({
next: () => {
console.log('Calendar deleted successfully');
this.load();
this.toastService.success('Calendar deleted successfully');
},
error: (error) => {
this.toastService.error('Error deleting calendar');
}
});
} else {
console.log('calendar deletion cancelled');
}
});
}

16
ogWebconsole/src/app/components/calendar/data.service.ts
View File

@ -29,4 +29,20 @@ export class DataService {
})
);
}
getRemoteCalendar(id: string): Observable<any> {
return this.http.get<any>(`${this.baseUrl}${id}`).pipe(
map(response => {
if (response.name && response.remoteCalendarRules) {
return response;
} else {
throw new Error('Unexpected response format');
}
}),
catchError(error => {
console.error('Error fetching calendar', error);
return throwError(error);
})
);
}
}