integrasi add dan delete scheduler

src/app/_layout/footer/footer.component.html

@@ -13,7 +13,7 @@
         href="https://allbestsistem.com/"
         target="_blank"
         style="background-color: #ffffff !important;"
-        >Smart Building Management Systems (V@2024-08-22.2)
+        >Smart Building Management Systems (V@2024-08-26.2)
       </a></span
     >
   </p>

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

@@ -94,6 +94,25 @@
           <label class="form-check-label" style="color: #242222">Yes</label>
         </div>
       </div>
+
+      <div class="form-group col-md-12">
+        <label for="active" style="color: #242222">Active:</label>
+        <select
+          id="active"
+          class="form-control custom-select"
+          formControlName="active"
+        >
+          <option *ngFor="let data of dataActive" [value]="data.value">
+            {{ data.label }}
+          </option>
+        </select>
+        <div
+          *ngIf="myForm.get('active').touched && myForm.get('active').invalid"
+          class="text-danger"
+        >
+          Active is required.
+        </div>
+      </div>
     </div>
   </form>
 </div>

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

@@ -1,6 +1,13 @@
 import { Component, Input } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+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",
@@ -8,27 +15,39 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
   styleUrls: ["./control-scheduler.component.css"],
 })
 export class ControlSchedulerComponent {
-  @Input() device: any;
+  @Input() deviceId: any;
   labelModal: string = "";
   myForm: FormGroup;
   dataSwitch = [
     {
-      label: 'On',
+      label: "On",
-      value: true
+      value: true,
-    }, {
+    },
-      label: 'Off',
+    {
-      value: false
+      label: "Off",
-    }
+      value: false,
+    },
+  ];
+
+  dataActive = [
+    {
+      label: "Active",
+      value: true,
+    },
+    {
+      label: "Non Active",
+      value: false,
+    },
   ];
 
   daysOfWeek = [
-    { label: 'Monday', value: 'monday' },
+    { label: "Monday", value: "monday" },
-    { label: 'Tuesday', value: 'tuesday' },
+    { label: "Tuesday", value: "tuesday" },
-    { label: 'Wednesday', value: 'wednesday' },
+    { label: "Wednesday", value: "wednesday" },
-    { label: 'Thursday', value: 'thursday' },
+    { label: "Thursday", value: "thursday" },
-    { label: 'Friday', value: 'friday' },
+    { label: "Friday", value: "friday" },
-    { label: 'Saturday', value: 'saturday' },
+    { label: "Saturday", value: "saturday" },
-    { label: 'Sunday', value: 'sunday' }
+    { label: "Sunday", value: "sunday" },
   ];
 
   selectedDays: string[] = [];
@@ -36,25 +55,25 @@ export class ControlSchedulerComponent {
   constructor(
     public activeModal: NgbActiveModal,
     private fb: FormBuilder,
+    private deviceService: DeviceService
   ) {}
 
   ngOnInit() {
-    this.createForm()
+    this.createForm();
-    console.log(this.device);
-    
   }
 
   createForm() {
     const controls = {
-      name:["", Validators.required],
+      name: ["", Validators.required],
       timeset: ["", Validators.required],
+      active: [true],
       switch: [false],
-      recurring: [false], // Default value for repeat checkbox
+      recurring: [true], // Default value for repeat checkbox
-      device_id: this.device.id
+      device_id: this.deviceId,
     };
 
     // Initialize checkboxes for each day of the week
-    this.daysOfWeek.forEach(day => {
+    this.daysOfWeek.forEach((day) => {
       controls[day.value] = [false]; // Each day starts as unchecked
     });
 
@@ -65,7 +84,7 @@ export class ControlSchedulerComponent {
     if (isChecked) {
       this.selectedDays.push(day);
     } else {
-      this.selectedDays = this.selectedDays.filter(d => d !== day);
+      this.selectedDays = this.selectedDays.filter((d) => d !== day);
     }
   }
 
@@ -74,19 +93,35 @@ export class ControlSchedulerComponent {
 
     // Collect selected days' labels
     const selectedDays = this.daysOfWeek
-      .filter(day => formValues[day.value])
+      .filter((day) => formValues[day.value])
-      .map(day => day.label);
+      .map((day) => day.label);
 
     // Construct the final output
     const result = {
       name: formValues.name,
-      timeset: formValues.timeset,
-      switch: formValues.switch,
-      recurring: formValues.recurring,
       device_id: formValues.device_id,
-      days: selectedDays
+      timeset: formValues.timeset,
+      recurring: formValues.recurring,
+      active: formValues.active,
+      switch: formValues.switch,
+      days: selectedDays,
     };
 
-    console.log("Form Result: ", result);
+    if (this.myForm.valid) {
+      this.activeModal.close(result);
+    } else {
+      this.markFormGroupTouched(this.myForm)
+    }
+
+    // console.log("Form Result: ", result);
+  }
+
+  markFormGroupTouched(formGroup: FormGroup) {
+    (Object as any).values(formGroup.controls).forEach((control) => {
+      control.markAsTouched();
+      if (control.controls) {
+        this.markFormGroupTouched(control);
+      }
+    });
   }
 }

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

@@ -175,6 +175,8 @@ export class DeviceControlComponent {
   }
 
   schedulerItem(row) {
+    console.log(row);
+    
     this.router.navigate(["/device/scheduler", row.id]);
   }
 

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

@@ -25,7 +25,7 @@
                       border-color: #37a647 !important;
                       color: #ffffff !important;
                     "
-                    (click)="addSchedulerItem(1)"
+                    (click)="addSchedulerItem()"
                   >
                     <span style="font-weight: 600">Add Schedule</span>
                   </button>
@@ -38,14 +38,14 @@
                           <ul class="list-group">
                             <li
                               class="list-group-item d-flex justify-content-between align-items-center mb-3"
-                              *ngFor="let schedule of schedules"
+                              *ngFor="let schedule of listScheduler"
                             >
                               <div>
                                 <h5 style="color: #242222">
-                                  {{ schedule.title }}
+                                  {{ schedule.name }} ({{schedule.switch ? 'On' : 'Off'}})
                                 </h5>
                                 <h2 class="mb-0" style="color: #242222">
-                                  {{ schedule.time }}
+                                  {{ schedule.timeset }}
                                 </h2>
                               </div>
                               <div>

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

@@ -1,7 +1,9 @@
 import { Component } from "@angular/core";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { ControlSchedulerComponent } from "../control-scheduler/control-scheduler.component";
-
+import { ActivatedRoute } from "@angular/router";
+import { DeviceService } from "../../service/device.service";
+import Swal from "sweetalert2";
 @Component({
   selector: "app-scheduler-list",
   templateUrl: "./scheduler-list.component.html",
@@ -9,6 +11,8 @@ import { ControlSchedulerComponent } from "../control-scheduler/control-schedule
 })
 export class SchedulerListComponent {
   public breadcrumb: any;
+  listScheduler: any;
+  deviceId: any;
   schedules = [
     {
       id: 1,
@@ -22,11 +26,24 @@ export class SchedulerListComponent {
     },
   ];
 
-  constructor(private modalService: NgbModal) {}
+  constructor(
+    private modalService: NgbModal,
+    private route: ActivatedRoute,
+    private deviceService: DeviceService
+  ) {}
 
   ngOnInit(): void {
+    this.route.params.subscribe((params) => {
+      const id = params["id"];
+      this.deviceId = id;
+      if (id) {
+        this.dataListScheduler(id);
+      }
+    });
     this.breadcrumb = {
       mainlabel: "Scheduler List",
+      linkBack: "/device/control-device",
+      isLinkBack: true,
       links: [
         {
           name: "Home",
@@ -45,19 +62,28 @@ export class SchedulerListComponent {
     };
   }
 
-  addSchedulerItem(item) {
+  dataListScheduler(id) {
+    this.deviceService.getDeviceScheduler(id).subscribe((data) => {
+      this.listScheduler = data.results;
+    });
+  }
+
+  addSchedulerItem() {
     const modalRef = this.modalService.open(ControlSchedulerComponent, {
       size: "md",
       backdrop: "static",
       keyboard: false,
-      centered: true
+      centered: true,
     });
 
-    modalRef.componentInstance.device = item;
+    modalRef.componentInstance.deviceId = this.deviceId;
+    modalRef.componentInstance.mode = "add";
     modalRef.result.then(
       (result) => {
         if (result) {
-          console.log(result);
+          this.deviceService.postDeviceScheduler(result).subscribe((res) => {
+            this.dataListScheduler(this.deviceId);
+          });
         }
       },
       (reason) => {
@@ -67,4 +93,27 @@ export class SchedulerListComponent {
     // Handle edit action
   }
 
+  deleteSchedule(id) {
+    Swal.fire({
+      title: "Apakah kamu yakin ingin menghapus jadwal ini?",
+      text: "Tindakan ini tidak dapat dibatalkan.",
+      icon: "warning",
+      showCancelButton: true,
+      confirmButtonColor: "#37a647",
+      cancelButtonColor: "#d33",
+      confirmButtonText: "Ya, hapus!",
+      cancelButtonText: "Batal",
+    }).then((result) => {
+      if (result.isConfirmed) {
+        this.deviceService.deleteDeviceScheduler(id).subscribe((data) => {
+          this.dataListScheduler(this.deviceId);
+        });
+        Swal.fire({
+          title: "Terhapus!",
+          text: "Jadwal berhasil dihapus.",
+          icon: "success",
+        });
+      }
+    });
+  }
 }

src/app/content/hemat-app/service/device.service.ts

@@ -115,4 +115,34 @@ export class DeviceService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  getDeviceScheduler(id): Observable<any> {
+    const endpoint = `/device-scheduler`;
+    const url = `${BASE_URL}${endpoint}?device_id=${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
+
+  postDeviceScheduler(data): Observable<any> {
+    const endpoint = `/device-scheduler`;
+    const url = `${BASE_URL}${endpoint}`;
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
+    });
+    return this.http.post<any>(url, data, { headers });
+  }
+
+  deleteDeviceScheduler(id): Observable<any> {
+    const endpoint = `/device-scheduler/${id}`;
+    const url = `${BASE_URL}${endpoint}`;
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
+    });
+    return this.http.delete<any>(url, { headers });
+  }
 }

src/app/login/login.component.html

@@ -138,7 +138,7 @@
                 <p
                   class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
                 >
-                  <span>(v@2024.08.22.2)</span>
+                  <span>(v@2024.08.26.2)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a