86 lines
2.0 KiB
TypeScript

import { Component } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
@Component({
selector: "app-control-scheduler",
templateUrl: "./control-scheduler.component.html",
styleUrls: ["./control-scheduler.component.css"],
})
export class ControlSchedulerComponent {
labelModal: string = "";
myForm: FormGroup;
dataSwitch = [
{
label: 'On',
value: true
}, {
label: 'Off',
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,
) {}
ngOnInit() {
this.createForm()
}
createForm() {
const controls = {
timeset: ["", Validators.required],
switch: [false],
repeat: [false], // Default value for repeat checkbox
};
// 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);
}
onDayChange(day: string, isChecked: boolean) {
if (isChecked) {
this.selectedDays.push(day);
} else {
this.selectedDays = this.selectedDays.filter(d => d !== day);
}
}
save() {
const formValues = this.myForm.value;
// Collect selected days' labels
const selectedDays = this.daysOfWeek
.filter(day => formValues[day.value])
.map(day => day.label);
// Construct the final output
const result = {
timeset: formValues.timeset,
switch: formValues.switch,
repeat: formValues.repeat,
day: selectedDays
};
console.log("Form Result: ", result);
}
}