hemat_solution/src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.ts

import { Component, Input } from "@angular/core";
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from "@angular/forms";
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
import { DeviceService } from "../../service/device.service";

@Component({
  selector: "app-control-scheduler",
  templateUrl: "./control-scheduler.component.html",
  styleUrls: ["./control-scheduler.component.css"],
})
export class ControlSchedulerComponent {
  @Input() deviceId: any;
  @Input() data: any;
  @Input() mode: any;
  labelModal: string = "";
  myForm: FormGroup;
  dataSwitch = [
    {
      label: "On",
      value: true,
    },
    {
      label: "Off",
      value: false,
    },
  ];

  dataActive = [
    {
      label: "Active",
      value: true,
    },
    {
      label: "Non Active",
      value: false,
    },
  ];

  daysOfWeek = [
    { label: "Monday", value: "monday" },
    { label: "Tuesday", value: "tuesday" },
    { label: "Wednesday", value: "wednesday" },
    { label: "Thursday", value: "thursday" },
    { label: "Friday", value: "friday" },
    { label: "Saturday", value: "saturday" },
    { label: "Sunday", value: "sunday" },
  ];

  selectedDays: string[] = [];

  constructor(
    public activeModal: NgbActiveModal,
    private fb: FormBuilder,
    private deviceService: DeviceService
  ) {}

  ngOnInit() {
    this.createForm();
    if (this.mode === "add") {
      this.labelModal = "Add Scheduler";
    } else if (this.mode === "edit") {
      this.editForm();
      this.labelModal = "Edit Scheduler";
    }
  }

  createForm() {
    const controls = {
      name: ["", Validators.required],
      timeset: ["", Validators.required],
      active: [true],
      switch: [false],
      recurring: [true], // Default value for repeat checkbox
      device_id: this.deviceId,
    };

    // Initialize checkboxes for each day of the week
    this.daysOfWeek.forEach((day) => {
      controls[day.value] = [false]; // Each day starts as unchecked
    });

    this.myForm = this.fb.group(controls);
    this.myForm.setValidators(this.atLeastOneDaySelectedValidator());
  }

  editForm() {
    this.selectedDays = this.data.days || [];
    this.myForm.patchValue({
      name: this.data.name,
      timeset: this.data.timeset,
      recurring: this.data.recurring,
      active: this.data.active,
      switch: this.data.switch,
    });

    // Patch the form with the selected days
    this.selectedDays.forEach((day) => {
      this.myForm.patchValue({
        [day]: true,
      });
    });
  }

  atLeastOneDaySelectedValidator() {
    return (formGroup: FormGroup) => {
      const selectedDays = this.daysOfWeek.some(
        (day) => formGroup.get(day.value)?.value
      );
      return selectedDays ? null : { noDaySelected: true };
    };
  }

  onDayChange(day: string, isChecked: boolean) {
    if (isChecked) {
      this.selectedDays.push(day);
    } else {
      this.selectedDays = this.selectedDays.filter((d) => d !== day);
    }
  }

  save() {
    if (this.myForm.valid) {
      const formValues = this.myForm.value;

      // Collect selected days' labels
      const selectedDays = this.daysOfWeek
        .filter((day) => formValues[day.value])
        .map((day) => day.value);

      // Construct the final output
      let result = {};

      if (this.mode === "add") {
        result = {
          name: formValues.name,
          device_id: formValues.device_id,
          timeset: formValues.timeset,
          recurring: formValues.recurring,
          active: formValues.active,
          switch: formValues.switch,
          days: selectedDays,
        };
      } else {
        result = {
          id: this.data.id,
          name: formValues.name,
          device_id: formValues.device_id,
          timeset: formValues.timeset,
          recurring: formValues.recurring,
          active: formValues.active,
          switch: formValues.switch,
          days: selectedDays,
        };
      }

      this.activeModal.close(result);
    } else {
      this.markFormGroupTouched(this.myForm);
    }
  }

  markFormGroupTouched(formGroup: FormGroup) {
    (Object as any).values(formGroup.controls).forEach((control) => {
      control.markAsTouched();
      if (control.controls) {
        this.markFormGroupTouched(control);
      }
    });
  }
}