Guardar circulares servicio completo

Front/src/app/modules/Administrador/pages/calendar/calendar.component.ts

@@ -15,6 +15,7 @@ import { GradosEducativosService } from '../../services/grados-educativos.servic
 import { GruposService } from '../../services/grupos.service';
 import { MateriaService } from '../../services/materia.service';
 import moment from 'moment';
+import { EventoServiceService } from '../../services/evento-service.service';
 
 
 
@@ -28,43 +29,7 @@ export class CalendarComponent implements OnInit {
   public valor: string = localStorage.getItem('vista') || '';
   public fecha: string = localStorage.getItem('dia') || '';
   public primerColorTitulos: string = '';
-  public eventList: any;
-
-  constructor(private calendarService: CalendarService, public dialog: MatDialog) { }
-
-  ngOnInit() {
-    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || ''
-    this.primerColorTitulos = primerColorTitulos;
-    this.getEvents();
-  }
-
-  sumarDias(fecha: Date, dias: number) {
-    fecha.setDate(fecha.getDate() + dias);
-    return fecha;
-  }
-
-  getEvents() {
-    this.calendarService.allEvents().subscribe((response: any) => {
-      const events = response.map((event: any) => ({
-        id: event.id,
-        title: event.title,
-        start: this.sumarDias(new Date(event.start), 1).toISOString(),
-        end: this.sumarDias(new Date(event.end), 1).toISOString(),
-
-        // start: new Date(event.start),
-        // end: new Date(event.end),
-        description: event.description,
-        backgroundColor: event.color
-      }));
-      this.calendarOptions.events = events;
-    });
-  }
-
-
-  calendarOptions: CalendarOptions = {
-    // windowResize: function (arg) {
-    //   alert('The calendar has adjusted to a window resize. Current view: ' + arg.view.type);
-    // },
+  public calendarOptions: CalendarOptions = {
     initialDate: this.fecha,
     locale: 'es',
     weekNumbers: true,
@@ -77,39 +42,57 @@ export class CalendarComponent implements OnInit {
       dayGridDay: 'Día'
     },
     headerToolbar: {
-
       start: 'today prev,next',
       center: 'title',
       end: 'dayGridMonth,timeGridWeek,dayGridDay,listWeek',
     },
     initialView: this.valor,
     navLinks: true,
-    editable: true,
+    editable: false,
     selectable: true,
     selectMirror: true,
     dayMaxEvents: true,
     plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
-    // dateClick: (arg) => this.handleDateClick(arg),
-    events: [
-      // {
-      //   id: 'a',
-      //   title: 'my event',
-      //   start: '2024-06-01'
-      // }
-    ]
-
+    events: []
   };
 
-  // handleDateClick(arg: any) {
-  //   prompt('date click! ' + arg.dateStr)
-  // }
+  constructor(
+    private calendarService: CalendarService,
+    public dialog: MatDialog,
+    private eventoService: EventoServiceService,
+  ) { }
+
+  ngOnInit() {
+    let primerColorTitulos = localStorage.getItem('primerColorTitulos') || ''
+    this.primerColorTitulos = primerColorTitulos;
+    this.getEvents();
+  }
+
+  getEvents() {
+    this.eventoService.obtenerEventos().subscribe((response: any) => {
+      const events = response.map((event: any) => ({
+        id: event.idEvento,
+        title: event.titulo,
+        start: new Date(event.fechaInicio).toISOString(),
+        end: new Date(event.fechaFin).toISOString(),
+        description: event.descripcion,
+        backgroundColor: event.colorEvento,
+        textColor: event.colorTexto || '#FFFFFF'
+      }));
+
+      this.calendarOptions.events = events;
+      console.log(this.calendarOptions.events);
+
+
+    });
+  }
 
   openDialog() {
     this.dialog.open(ModalEvent, {
       autoFocus: false
     });
   }
-};
+}
 
 @Component({
   selector: 'dialog-content-example-dialog',
@@ -173,6 +156,7 @@ export class ModalEvent implements OnInit, OnDestroy {
     private gradoService: GradosEducativosService,
     private grupoService: GruposService,
     private materiaService: MateriaService,
+    private eventoService: EventoServiceService
   ) {
     this.lista();
   }
@@ -192,6 +176,9 @@ export class ModalEvent implements OnInit, OnDestroy {
 
   public opciones: any[] = [];
   public opciones1: any[] = [];
+
+  public eventsCalendar: any[] = [];
+
   audiencia = [
     { value: 'AL', audiencia: 'Alumnos' },
     { value: 'PF', audiencia: 'Padre de Familia' },
@@ -340,6 +327,14 @@ export class ModalEvent implements OnInit, OnDestroy {
 
     console.log(formattedData);
 
+    this.eventoService.crearEvento(formattedData).subscribe((response: any) => {
+      console.log(response);
+      // this.form.reset();
+      // this.dialog.closeAll();
+    }, (error) => {
+      console.error(error.error);
+    });
+
   }
 
   generarHorasDelDia(): { hora24: string, hora12: string }[] {

Front/src/app/modules/Administrador/pages/main/main.component.css

@@ -298,6 +298,11 @@
     font-size: 18px;
 }
 
+.bold {
+    font-weight: bold;
+    color: black;
+  }
+
 .general-container {
     padding-right: 15px;
     padding-left: 15px;

Front/src/app/modules/Administrador/pages/main/main.component.html

@@ -79,7 +79,9 @@
                     [style.border]="day.event != 'Sin Evento' ? '1px red solid' : '' ">
                     <span class="num-day">{{day.num}}</span>
                     <span class="day ">{{day.day}}</span>
-                    <span class="event mt-10">{{day.event}}</span>
+                    <span class="event mt-10" [ngClass]="{'bold': day.event !== 'Sin Evento'}">
+                        {{day.event}}
+                    </span>
                 </div>
             </article>
             <footer class="justify-end">
@@ -126,12 +128,14 @@
 
                             <ng-container matColumnDef="horaEntrada">
                                 <th mat-header-cell *matHeaderCellDef> Fecha y Hora de Entrada </th>
-                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaHora| date: 'dd/MM/yyyy hh:mm:ss'}}</td>
+                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaHora| date: 'dd/MM/yyyy
+                                    hh:mm:ss'}}</td>
                             </ng-container>
 
                             <ng-container matColumnDef="horaSalida">
                                 <th mat-header-cell *matHeaderCellDef> Fecha y Hora de Salida </th>
-                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaHoraFin| date: 'dd/MM/yyyy hh:mm:ss'}}</td>
+                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaHoraFin| date: 'dd/MM/yyyy
+                                    hh:mm:ss'}}</td>
                             </ng-container>
 
 
@@ -174,7 +178,8 @@
 
                             <ng-container matColumnDef="receptoresAudiencia">
                                 <th mat-header-cell *matHeaderCellDef> Receptores-Audiencia</th>
-                                <td mat-cell *matCellDef="let circular"> {{circular.idReceptores}} - {{circular.audiencia}} </td>
+                                <td mat-cell *matCellDef="let circular"> {{circular.idReceptores}} -
+                                    {{circular.audiencia}} </td>
                             </ng-container>
 
                             <ng-container matColumnDef="importancia">
@@ -184,12 +189,14 @@
 
                             <ng-container matColumnDef="fechaPublicacion">
                                 <th mat-header-cell *matHeaderCellDef> Fecha de Publicación </th>
-                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaPublicacion| date: 'dd/MM/yyyy hh:mm:ss'}} </td>
+                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaPublicacion| date:
+                                    'dd/MM/yyyy hh:mm:ss'}} </td>
                             </ng-container>
 
                             <ng-container matColumnDef="fechaCaducidad">
                                 <th mat-header-cell *matHeaderCellDef> Fecha de Caducidad </th>
-                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaCaducidad| date: 'dd/MM/yyyy hh:mm:ss'}} </td>
+                                <td mat-cell *matCellDef="let actividad"> {{actividad.fechaCaducidad| date: 'dd/MM/yyyy
+                                    hh:mm:ss'}} </td>
                             </ng-container>
 
 

Front/src/app/modules/Administrador/pages/main/main.component.ts

@@ -181,7 +181,7 @@ export class MainComponent implements OnInit {
     const currentDay = currentDate.getDay();
 
     const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes'];
-    const events = ['Sin Evento', 'Sin Evento', 'Clase Libre', 'Clase Libre', 'Sin Evento'];
+    const events = ['Sin Evento', 'Sin Evento', '+ de 1 evento', 'Clase Libre', 'Sin Evento'];
     this.weekDays = [];
 
     let monday = currentDay - 1;

Front/src/app/modules/Administrador/services/evento-service.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { environments } from '../../../../environments/environments';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventoServiceService {
+  private URL: string = environments.baseUrl;
+
+  constructor(private http: HttpClient) { }
+
+  private getHeaders(): HttpHeaders {
+    const token = localStorage.getItem('token') || '';
+    return new HttpHeaders({
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${token}`
+    });
+  }
+
+
+  crearEvento(evento: any) {
+    return this.http.post(`${this.URL}/eventoSave`, evento, { headers: this.getHeaders() });
+  }
+
+  obtenerEventos() {
+    return this.http.get(`${this.URL}/eventosAll`, { headers: this.getHeaders() });
+  }
+
+}