perbakan UI scheduler

src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.html

@@ -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>

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

@@ -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);
   }
 }

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

@@ -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;
+      });
+    }
+  }
 }