perbakan UI scheduler
This commit is contained in:
parent
a2d166ac1a
commit
9654cf92e8
|
|
@ -13,15 +13,15 @@
|
|||
<form [formGroup]="myForm">
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-12">
|
||||
<label for="timeOn" style="color: #242222">Time On:</label>
|
||||
<label for="timeset" style="color: #242222">Time</label>
|
||||
<input
|
||||
type="time"
|
||||
class="form-control"
|
||||
formControlName="timeOn"
|
||||
id="timeOn"
|
||||
formControlName="timeset"
|
||||
id="timeset"
|
||||
/>
|
||||
<div
|
||||
*ngIf="myForm.get('timeOn').touched && myForm.get('timeOn').invalid"
|
||||
*ngIf="myForm.get('timeset').touched && myForm.get('timeset').invalid"
|
||||
class="text-danger"
|
||||
>
|
||||
Time On is required.
|
||||
|
|
@ -29,37 +29,50 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group col-md-12">
|
||||
<label for="timeOff" style="color: #242222">Time Off:</label>
|
||||
<input
|
||||
type="time"
|
||||
class="form-control"
|
||||
formControlName="timeOff"
|
||||
id="timeOff"
|
||||
/>
|
||||
<div
|
||||
*ngIf="myForm.get('timeOff').touched && myForm.get('timeOff').invalid"
|
||||
class="text-danger"
|
||||
>
|
||||
Time Off is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-12">
|
||||
<label for="status" style="color: #242222">Status:</label>
|
||||
<label for="switch" style="color: #242222">Switch:</label>
|
||||
<select
|
||||
id="status"
|
||||
id="switch"
|
||||
class="form-control custom-select"
|
||||
formControlName="status"
|
||||
formControlName="switch"
|
||||
>
|
||||
<option *ngFor="let data of dataMasterStatus" [value]="data.id">
|
||||
{{ data.name }}
|
||||
<option *ngFor="let data of dataSwitch" [value]="data.value">
|
||||
{{ data.label }}
|
||||
</option>
|
||||
</select>
|
||||
<div
|
||||
*ngIf="myForm.get('status').touched && myForm.get('status').invalid"
|
||||
*ngIf="myForm.get('switch').touched && myForm.get('switch').invalid"
|
||||
class="text-danger"
|
||||
>
|
||||
Status is required.
|
||||
Switch is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox for Days of the Week -->
|
||||
<div class="form-group col-md-12">
|
||||
<label style="color: #242222">Select Days:</label>
|
||||
<div *ngFor="let day of daysOfWeek">
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
[formControlName]="day.value"
|
||||
(change)="onDayChange(day.value, $event.target.checked)"
|
||||
/>
|
||||
<label class="form-check-label" style="color: #242222">{{ day.label }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox for Repeat -->
|
||||
<div class="form-group col-md-12">
|
||||
<label style="color: #242222">Repeat:</label>
|
||||
<div class="form-check">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="form-check-input"
|
||||
formControlName="repeat"
|
||||
/>
|
||||
<label class="form-check-label" style="color: #242222">Yes</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,7 +95,7 @@
|
|||
type="button"
|
||||
style="color: #ffffff !important; background-color: #37a647 !important"
|
||||
class="btn btn-primary"
|
||||
(click)="addRow()"
|
||||
(click)="save()"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { Component } from "@angular/core";
|
||||
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { BuildingService } from "../../service/monitoring-api.service";
|
||||
|
||||
@Component({
|
||||
selector: "app-control-scheduler",
|
||||
|
|
@ -11,40 +10,76 @@ import { BuildingService } from "../../service/monitoring-api.service";
|
|||
export class ControlSchedulerComponent {
|
||||
labelModal: string = "";
|
||||
myForm: FormGroup;
|
||||
dataMasterStatus: any;
|
||||
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 monitoringApiService: BuildingService,
|
||||
private fb: FormBuilder,
|
||||
) {}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
this.dataListMaster();
|
||||
this.createForm()
|
||||
}
|
||||
|
||||
addRow() {}
|
||||
|
||||
createForm() {
|
||||
this.myForm = this.fb.group({
|
||||
timeOn: ["", Validators.required],
|
||||
status: ["", Validators.required],
|
||||
timeOff: ["", Validators.required],
|
||||
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);
|
||||
}
|
||||
|
||||
dataListMaster() {
|
||||
this.monitoringApiService.getMasterListData().subscribe((data) => {
|
||||
const dataCategory = data.data.find(
|
||||
(item) => item.name === "master_status"
|
||||
).headerDetailParam;
|
||||
this.dataMasterStatus = dataCategory.filter(
|
||||
(item) => item.statusName.toLowerCase() === "aktif"
|
||||
);
|
||||
console.log(this.dataMasterStatus);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component } from "@angular/core";
|
||||
import { Component, HostListener } from "@angular/core";
|
||||
import { Router } from "@angular/router";
|
||||
import { BuildingService } from "../../service/monitoring-api.service";
|
||||
import { DeviceService } from "../../service/device.service";
|
||||
|
|
@ -196,4 +196,13 @@ export class DeviceControlComponent {
|
|||
);
|
||||
// Handle edit action
|
||||
}
|
||||
|
||||
@HostListener('document:click', ['$event'])
|
||||
clickout(event) {
|
||||
if (!event.target.closest('.menu-popup') && !event.target.closest('.btn')) {
|
||||
this.filteredDeviceRows.forEach(item => {
|
||||
item.menuOpen = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue