perbaikan UI 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-26.3)
+        >Smart Building Management Systems (V@2024-08-27.2)
       </a></span
     >
   </p>

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

@@ -83,7 +83,7 @@
       </div>
 
       <!-- Checkbox for Repeat -->
-      <!-- <div class="form-group col-md-12">
+      <div class="form-group col-md-12">
         <label style="color: #242222">Repeat:</label>
         <div class="form-check">
           <input
@@ -93,9 +93,9 @@
           />
           <label class="form-check-label" style="color: #242222">Yes</label>
         </div>
-      </div> -->
+      </div>
 
-      <div class="form-group col-md-12">
+      <!-- <div class="form-group col-md-12">
         <label for="active" style="color: #242222">Active:</label>
         <select
           id="active"
@@ -112,7 +112,7 @@
         >
           Active is required.
         </div>
-      </div>
+      </div> -->
     </div>
   </form>
 </div>

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

@@ -8,7 +8,6 @@ import {
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
 import { DeviceService } from "../../service/device.service";
 
-
 @Component({
   selector: "app-control-scheduler",
   templateUrl: "./control-scheduler.component.html",
@@ -62,9 +61,9 @@ export class ControlSchedulerComponent {
 
   ngOnInit() {
     this.createForm();
-    if (this.mode === 'add') {
+    if (this.mode === "add") {
       this.labelModal = "Add Scheduler";
-    } else if (this.mode === 'edit') {
+    } else if (this.mode === "edit") {
       this.editForm();
       this.labelModal = "Edit Scheduler";
     }
@@ -88,7 +87,7 @@ export class ControlSchedulerComponent {
     this.myForm = this.fb.group(controls);
   }
 
-  editForm(){
+  editForm() {
     this.selectedDays = this.data.days || [];
     this.myForm.patchValue({
       name: this.data.name,
@@ -123,20 +122,35 @@ export class ControlSchedulerComponent {
       .map((day) => day.value);
 
     // Construct the final output
-    const result = {
+    let result = {};
-      name: formValues.name,
+
-      device_id: formValues.device_id,
+    if (this.mode === "add") {
-      timeset: formValues.timeset,
+      result = {
-      recurring: formValues.recurring,
+        name: formValues.name,
-      active: formValues.active,
+        device_id: formValues.device_id,
-      switch: formValues.switch,
+        timeset: formValues.timeset,
-      days: selectedDays,
+        recurring: formValues.recurring,
-    };
+        active: formValues.active,
+        switch: formValues.switch,
+        days: selectedDays,
+      };
+    } else {
+      result = {
+        id: this.data.id,
+        name: formValues.name,
+        device_id: formValues.device_id,
+        timeset: formValues.timeset,
+        recurring: formValues.recurring,
+        active: formValues.active,
+        switch: formValues.switch,
+        days: selectedDays,
+      };
+    }
 
     if (this.myForm.valid) {
       this.activeModal.close(result);
     } else {
-      this.markFormGroupTouched(this.myForm)
+      this.markFormGroupTouched(this.myForm);
     }
 
     // console.log("Form Result: ", result);

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

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

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

@@ -69,7 +69,7 @@ import { SchedulerListComponent } from './scheduler-list/scheduler-list.componen
         data: { mode: 'view' } 
       },
       {
-        path: 'scheduler/:id/:name',
+        path: 'scheduler/:id',
         component: SchedulerListComponent,
         data: { mode: 'scheduler' } 
       }

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

@@ -52,4 +52,3 @@
     background-color: #d1d9ff;
     color: #303f9f;
   }
-  

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

@@ -15,7 +15,7 @@
                 >
                   <h4 class="form-section m-0" style="color: #242222">
                     <i class="feather ft-calendar" style="color: #242222"></i>
-                    {{deviceName}}
+                    {{ deviceName ? deviceName : '' }}
                   </h4>
 
                   <button
@@ -40,44 +40,57 @@
                               class="list-group-item d-flex justify-content-between align-items-center mb-3"
                               *ngFor="let schedule of listScheduler"
                             >
-                              <div>
+                              <!-- Tambahkan checkbox di sini -->
-                                <h5 style="color: #242222">
+                              <div class="d-flex align-items-center">
-                                  {{ schedule.name }} ({{schedule.switch ? 'On' : 'Off'}})
+                                <div class="mr-2">
-                                </h5>
+                                  <input
-                                <h2 class="mb-0" style="color: #242222">
+                                    type="checkbox"
-                                  {{ schedule.timeset }}
+                                    [(ngModel)]="schedule.selected"
-                                </h2>
+                                    (change)="checkSelected()"
+                                  />
+                                </div>
+                                <div (click)="editSchedule(schedule)">
+                                  <h5 style="color: #242222">
+                                    {{ schedule.name }} ({{
+                                      schedule.switch ? "On" : "Off"
+                                    }})
+                                  </h5>
+                                  <h2 class="mb-0" style="color: #242222">
+                                    {{ schedule.timeset }}
+                                  </h2>
+                                </div>
                               </div>
                               <div>
-                                <button
+                                <ui-switch
-                                  class="btn btn-sm btn-info mr-1"
+                                  style="border-color: #bef264 !important"
-                                  style="
+                                  class="switchery"
-                                    background-color: transparent !important;
+                                  switchColor="white"
-                                    border-color: #37a647 !important;
+                                  color="rgb(55, 166, 71)"
-                                  "
+                                  size="small"
-                                  (click)="editSchedule(schedule)"
+                                  [checked]="schedule.active"
-                                >
+                                  (change)="switchChanged($event, schedule)"
-                                  <i
+                                ></ui-switch>
-                                    class="ficon la la-edit"
-                                    style="color: #37a647 !important"
-                                  ></i>
-                                </button>
-                                <button
-                                  class="btn btn-sm btn-warning mr-1"
-                                  style="
-                                    background-color: transparent !important;
-                                    border-color: #37a647 !important;
-                                  "
-                                  (click)="deleteSchedule(schedule.id)"
-                                >
-                                  <i
-                                    class="ficon la la-trash"
-                                    style="color: #37a647 !important"
-                                  ></i>
-                                </button>
                               </div>
                             </li>
                           </ul>
+
+                          <!-- Tambahkan tombol delete di sini -->
+                          <div class="d-flex justify-content-center">
+                            <button
+                              *ngIf="hasSelected"
+                              class="btn btn-danger mt-2"
+                              (click)="deleteSelectedSchedules()"
+                              style="
+                                background-color: transparent !important;
+                                border-color: #37a647 !important;
+                              "
+                            >
+                              <i
+                                class="ficon la la-trash"
+                                style="color: #37a647 !important"
+                              ></i>
+                            </button>
+                          </div>
                         </div>
 
                         <ng-template #noSchedules>

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

@@ -14,6 +14,7 @@ export class SchedulerListComponent {
   listScheduler: any;
   deviceId: any;
   deviceName: any;
+  hasSelected: boolean = false;
   schedules = [
     {
       id: 1,
@@ -36,11 +37,10 @@ export class SchedulerListComponent {
   ngOnInit(): void {
     this.route.params.subscribe((params) => {
       const id = params["id"];
-      const name = params["name"];
-      this.deviceName = name;
       this.deviceId = id;
       if (id) {
         this.dataListScheduler(id);
+        this.dataDevice(id);
       }
     });
     this.breadcrumb = {
@@ -68,6 +68,24 @@ export class SchedulerListComponent {
   dataListScheduler(id) {
     this.deviceService.getDeviceScheduler(id).subscribe((data) => {
       this.listScheduler = data.results;
+      console.log(this.listScheduler);
+      
+    });
+  }
+
+  dataDevice(id) {
+    this.deviceService.getDeviceByid(id).subscribe((data) => {
+      this.deviceName = data.data.name
+    });
+  }
+
+  switchChanged(e, item) {
+    const data = {
+      id: item.id,
+      active: e,
+    };
+    this.deviceService.putDeviceSchedulerActive(data, item.id).subscribe((res) => {
+      this.dataListScheduler(this.deviceId);
     });
   }
 
@@ -97,7 +115,6 @@ export class SchedulerListComponent {
   }
 
   editSchedule(data) {
-    console.log(data);
     const modalRef = this.modalService.open(ControlSchedulerComponent, {
       size: "md",
       backdrop: "static",
@@ -111,9 +128,11 @@ export class SchedulerListComponent {
     modalRef.result.then(
       (result) => {
         if (result) {
-          this.deviceService.putDeviceScheduler(result, data.id).subscribe((res) => {
+          this.deviceService
-            this.dataListScheduler(this.deviceId);
+            .putDeviceScheduler(result, data.id)
-          });
+            .subscribe((res) => {
+              this.dataListScheduler(this.deviceId);
+            });
         }
       },
       (reason) => {
@@ -122,28 +141,52 @@ export class SchedulerListComponent {
     );
   }
 
+  checkSelected() {
+    this.hasSelected = this.listScheduler.some((schedule) => schedule.selected);
+  }
+
+  deleteSelectedSchedules() {
+    const selectedSchedules = this.listScheduler.filter(
+      (schedule) => schedule.selected
+    );
+
+    if (selectedSchedules.length > 0) {
+      Swal.fire({
+        title: "Apakah kamu yakin ingin menghapus jadwal yang dipilih?",
+        text: "Tindakan ini tidak dapat dibatalkan.",
+        icon: "warning",
+        showCancelButton: true,
+        confirmButtonColor: "#37a647",
+        cancelButtonColor: "#d33",
+        confirmButtonText: "Ya, hapus!",
+        cancelButtonText: "Batal",
+        allowOutsideClick: false,
+      }).then((result) => {
+        if (result.isConfirmed) {
+          selectedSchedules.forEach((schedule) => {
+            this.deleteSchedule(schedule.id);
+          });
+
+          Swal.fire({
+            title: "Terhapus!",
+            text: "Jadwal yang dipilih berhasil dihapus.",
+            icon: "success",
+          });
+        }
+      });
+    } else {
+      Swal.fire({
+        title: "Tidak ada jadwal yang dipilih!",
+        text: "Pilih setidaknya satu jadwal untuk dihapus.",
+        icon: "info",
+      });
+    }
+  }
+
   deleteSchedule(id) {
-    Swal.fire({
+    this.deviceService.deleteDeviceScheduler(id).subscribe(() => {
-      title: "Apakah kamu yakin ingin menghapus jadwal ini?",
+      this.dataListScheduler(this.deviceId);
-      text: "Tindakan ini tidak dapat dibatalkan.",
+      this.hasSelected = false;
-      icon: "warning",
-      showCancelButton: true,
-      confirmButtonColor: "#37a647",
-      cancelButtonColor: "#d33",
-      confirmButtonText: "Ya, hapus!",
-      cancelButtonText: "Batal",
-      allowOutsideClick: false,
-    }).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/list-monitoring/add-edit-list/add-edit-list.component.html

@@ -105,15 +105,9 @@
                                 <i class="feather ft-plus"> New Floor</i>
                               </button>
                             </div>
-                            <small
+                            <div *ngIf="projectInfo.get('floorId').touched && projectInfo.get('floorId').invalid" class="text-danger">
-                              class="form-text text-muted danger"
+                              Floor is required.
-                              *ngIf="submitted && f.floorId.errors"
+                            </div>
-                              class="invalid-feedback"
-                            >
-                              <div *ngIf="f.floorId.errors.required">
-                                Building is required
-                              </div>
-                            </small>
                           </div>
                         </div>
                       </div>

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

@@ -99,6 +99,16 @@ export class DeviceService {
     return this.http.get<any>(url, { headers });
   }
 
+  getDeviceByid(id): Observable<any> {
+    const endpoint = `/devices`;
+    const url = `${BASE_URL}${endpoint}/${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
+
   filterDashboard(building, floor): Observable<any> {
     const endpoint = `/building/dashboard/list`;
     const params = new URLSearchParams({
@@ -146,6 +156,16 @@ export class DeviceService {
     return this.http.put<any>(url, data, { headers });
   }
 
+  putDeviceSchedulerActive(data, id): Observable<any> {
+    const endpoint = `/device-scheduler/${id}/Active`;
+    const url = `${BASE_URL}${endpoint}`;
+    const headers = new HttpHeaders({
+      "Content-Type": "application/json",
+      "x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
+    });
+    return this.http.put<any>(url, data, { headers });
+  }
+
   deleteDeviceScheduler(id): Observable<any> {
     const endpoint = `/device-scheduler/${id}`;
     const url = `${BASE_URL}${endpoint}`;

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.26.3)</span>
+                  <span>(v@2024.08.27.2)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a