add-cronograma-acti.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

//importaciones necesarias para el uso del calendar
import { CalendarOptions, EventApi, EventClickArg, EventInput } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import integrationPlugin from '@fullcalendar/interaction';
import * as moment from 'moment';
import { objetivoprograma } from 'src/app/modules/main/Models/objetivoPrograma';
import { Actualiza_datosService } from 'src/app/modules/main/services/actualiza_datos/actualiza_datos.service';
import { Compartir_idService } from 'src/app/modules/main/services/compartir_id/compartir_id.service';
import { Objetivo_programaService } from 'src/app/modules/main/services/objetivo_programa/objetivo_programa.service';

import { DatePipe } from "@angular/common";

@Component({
  selector: 'vex-add-cronograma-acti',
  templateUrl: './add-cronograma-acti.component.html',
  styleUrls: ['./add-cronograma-acti.component.css']
})
export class AddCronogramaActiComponent implements OnInit {

  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    weekends: true,
    events: [],
    eventClick: this.handleEventClick.bind(this)
  };
  idRecuperado: number;
  editForm: FormGroup;
  selectedEvent: EventInput;
  myForm: FormGroup;
  idProyecto: number;
  showData: boolean = false;
  showDataAdd: boolean = false;
  ocultar: boolean = true;
  showDataEvent: boolean = false;
  //arreglo para recuperar las actividades
  actividadesA: objetivoprograma[] = [];
  actividadesE: objetivoprograma[] = [];
  constructor(
    private formBuilder: FormBuilder,
    private objPS: Objetivo_programaService,
    private idCompartido: Compartir_idService,
    private datosCompartidos: Actualiza_datosService,
    private objM: objetivoprograma
  ) {
    this.myForm = this.formBuilder.group({
      Actividades: ['', Validators.required],
      fechaIni: ['', Validators.required],
      fechaFin: ['', Validators.required],
      horaFin: ['', Validators.required],
      horaIni: ['', Validators.required],
    });
  }

  ngOnInit(): void {
    this.idRecuperado = parseInt(localStorage.getItem('proyectoId'),10);
    this.datosCompartidos.datos$.subscribe(() => {
      this.obtenerRegistros();
    });

    this.objPS.parametrosActualizados.subscribe(() => {
      this.obtenerRegistros();
    });
  }


  onUpdate() {
    //obtener el id del elemento que se ha seleccionado
    if (this.myForm.valid) {
      const id_recuperado = this.myForm.get('Actividades').value;
      try {
        //tengo esta función para poder agregar las horas
        const fechaIni = moment(this.myForm.get('fechaIni').value).utc().toDate();
        const horaIni = moment(this.myForm.get('horaIni').value, 'HH:mm').utc().toDate();

        const fechaHoraIni = new Date(fechaIni);
        fechaHoraIni.setUTCHours(horaIni.getUTCHours());
        fechaHoraIni.setUTCMinutes(horaIni.getUTCMinutes());
        fechaHoraIni.setUTCHours(fechaHoraIni.getUTCHours() - 5);
        this.objM.uzytavobjetivo_programafec_ini = fechaHoraIni;

        //control para la fecha y hora fin.
        const fechaFin = moment(this.myForm.get('fechaFin').value).utc().toDate();
        const horaFin = moment(this.myForm.get('horaFin').value, 'HH:mm').utc().toDate();

        const fechaHoraFin = new Date(fechaFin);
        fechaHoraFin.setUTCHours(horaFin.getUTCHours());
        fechaHoraFin.setUTCMinutes(horaFin.getUTCMinutes());
        fechaHoraFin.setUTCHours(fechaHoraFin.getUTCHours() - 5);
        this.objM.uzytavobjetivo_programafec_fin = fechaHoraFin;
        console.log('yo digo', this.objM.uzytavobjetivo_programafec_fin)
        this.objPS.modificarParametros(id_recuperado, this.objM).subscribe(response => {
          this.showDataAdd = false;
          this.ocultar = true;
          this.myForm.reset();
          this.datosCompartidos.actualizarDatos(this.objM);
          this.objPS.parametrosActualizados.next();
        });
      } catch (error) {
        console.error('Error al enviar los datos:', error);
      }
    }
  }

  obtenerRegistros() {
    this.objPS.obtenerParametros().subscribe(data => {
      this.actividadesA = data.filter(item => item.uzytavproyec_id === this.idRecuperado && item.uzytavobjetivo_programatipo === 4);
      this.actividadesE = this.actividadesA.filter(item => item.uzytavobjetivo_programafec_ini === null && item.uzytavobjetivo_programafec_fin === null);
      const nuevosEventos: EventInput[] = [];
      this.actividadesA.forEach(actividad => {
        const evento: EventInput = {
          id: actividad.uzytavobjetivo_programa_id.toString(),
          title: actividad.uzytavobjetivo_programaobjetivo_proy,
          start: actividad.uzytavobjetivo_programafec_ini,
          end: actividad.uzytavobjetivo_programafec_fin,
          color: this.generarColorAleatorio()
        };

        nuevosEventos.push(evento);
      });
      this.calendarOptions.events = nuevosEventos;
    });
  }

  AgregarF() {
    this.showDataAdd = true;
    this.ocultar = false;
  }

  cancelarF() {
    this.showDataAdd = false;
    this.ocultar = true;
    this.myForm.get('Actividades').reset();
    this.myForm.reset();
  }

  generarColorAleatorio(): string {
    const letras = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letras[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  handleEventClick(info: EventClickArg) {
    const eventoSeleccionado = info.event;
    const id = parseInt(eventoSeleccionado.id, 10);
    this.eliminarFechas(id);
  }

  eliminarFechas(id: number) {
    const confirmacion = confirm('¿Desea eliminar el registro?');
    if (confirmacion) {
      this.objPS.modificarFechas(id).subscribe(
        () => {
          console.log('El registro se ha eliminado');
          this.obtenerRegistros();
        },
        (error) => {
          console.log('Error durante el tratamiento al registro');
        }
      );
    }
  }

}