integrasi add dan delete scheduler

2024-08-26 11:04:02 +07:00 · 2024-08-26 11:04:02 +07:00 · ca5f0c8c0c
parent b1ee612602
commit ca5f0c8c0c
8 changed files with 179 additions and 44 deletions
--- a/src/app/_layout/footer/footer.component.html
+++ b/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>
--- a/src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.html
+++ b/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>
--- a/src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.ts
+++ b/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',
-      value: true
-    }, {
-      label: 'Off',
-      value: false
-    }
+      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' }
+    { 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[] = [];
@ -36,25 +55,25 @@ export class ControlSchedulerComponent {
  constructor(
    public activeModal: NgbActiveModal,
    private fb: FormBuilder,
+    private deviceService: DeviceService
  ) {}

  ngOnInit() {
-    this.createForm()
-    console.log(this.device);
-    
+    this.createForm();
  }

  createForm() {
    const controls = {
-      name:["", Validators.required],
+      name: ["", Validators.required],
      timeset: ["", Validators.required],
+      active: [true],
      switch: [false],
-      recurring: [false], // Default value for repeat checkbox
-      device_id: this.device.id
+      recurring: [true], // Default value for repeat checkbox
+      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])
-      .map(day => day.label);
+      .filter((day) => formValues[day.value])
+      .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);
+      }
+    });
  }
 }
--- a/src/app/content/hemat-app/device/device-control/device-control.component.ts
+++ b/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]);
  }

--- a/src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.html
+++ b/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>
--- a/src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.ts
+++ b/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
+      backdrop: "static",
+      keyboard: false,
+      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",
+        });
+      }
+    });
+  }
 }
--- a/src/app/content/hemat-app/service/device.service.ts
+++ b/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 });
+  }
 }
--- a/src/app/login/login.component.html
+++ b/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