penambahan UI control scheduler

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.ts

@@ -268,7 +268,7 @@ export class AddEditDeviceComponent implements OnInit {
           text: "Data lokasi device tidak dapat diubah!",
           icon: "warning",
           showCancelButton: true,
-          confirmButtonColor: "#3085d6",
+          confirmButtonColor: "#37a647",
           cancelButtonColor: "#d33",
           confirmButtonText: "Yes, save it!",
         }).then((result) => {

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

@@ -0,0 +1,3 @@
+::ng-deep .modal-backdrop.show {
+    z-index: auto !important;
+  }

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

@@ -0,0 +1,89 @@
+<div class="modal-header" style="background-color: #fbfbfb !important">
+  <h4 class="modal-title" style="color: #242222">{{ labelModal }}</h4>
+  <button
+    type="button"
+    class="close"
+    aria-label="Close"
+    (click)="activeModal.dismiss('Cross click')"
+  >
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body" style="background-color: #fbfbfb !important">
+  <form [formGroup]="myForm">
+    <div class="form-row">
+      <div class="form-group col-md-12">
+        <label for="timeOn" style="color: #242222">Time On:</label>
+        <input
+          type="time"
+          class="form-control"
+          formControlName="timeOn"
+          id="timeOn"
+        />
+        <div
+          *ngIf="myForm.get('timeOn').touched && myForm.get('timeOn').invalid"
+          class="text-danger"
+        >
+          Time On is required.
+        </div>
+      </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>
+        <select
+          id="status"
+          class="form-control custom-select"
+          formControlName="status"
+        >
+          <option *ngFor="let data of dataMasterStatus" [value]="data.id">
+            {{ data.name }}
+          </option>
+        </select>
+        <div
+          *ngIf="myForm.get('status').touched && myForm.get('status').invalid"
+          class="text-danger"
+        >
+          Status is required.
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+<div class="modal-footer" style="background-color: #fbfbfb !important">
+  <button
+    type="button"
+    class="btn btn-secondary"
+    style="
+      color: #242222 !important;
+      background-color: #fbfbfb !important;
+      border-color: #fbfbfb !important;
+    "
+    (click)="activeModal.dismiss('Cross click')"
+  >
+    Close
+  </button>
+  <button
+    type="button"
+    style="color: #ffffff !important; background-color: #37a647 !important"
+    class="btn btn-primary"
+    (click)="addRow()"
+  >
+    Save
+  </button>
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ControlSchedulerComponent } from './control-scheduler.component';
+
+describe('ControlSchedulerComponent', () => {
+  let component: ControlSchedulerComponent;
+  let fixture: ComponentFixture<ControlSchedulerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ControlSchedulerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ControlSchedulerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,50 @@
+import { Component } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { BuildingService } from "../../service/monitoring-api.service";
+
+@Component({
+  selector: "app-control-scheduler",
+  templateUrl: "./control-scheduler.component.html",
+  styleUrls: ["./control-scheduler.component.css"],
+})
+export class ControlSchedulerComponent {
+  labelModal: string = "";
+  myForm: FormGroup;
+  dataMasterStatus: any;
+
+  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],
+    });
+  }
+
+  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);
+      
+    });
+  }
+}

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

@@ -27,3 +27,28 @@
   font-family: "Open Sans", sans-serif !important;
   font-size: 12px;
 }
+
+.menu-popup {
+  position: absolute;
+  right: 0;
+  top: 30px;
+  background-color: white;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  z-index: 1000;
+}
+
+.menu-popup ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-popup ul li {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.menu-popup ul li:hover {
+  background-color: #f0f0f0;
+}

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

@@ -7,7 +7,13 @@
       <section id="configuration">
         <div class="row">
           <div class="col-12">
-            <div class="card" style="background-color: #fbfbfb !important; box-shadow: none !important;">
+            <div
+              class="card"
+              style="
+                background-color: #fbfbfb !important;
+                box-shadow: none !important;
+              "
+            >
               <div class="card-content">
                 <div class="card-body">
                   <div class="row">
@@ -61,7 +67,7 @@
                           class="btn ml-2"
                           (click)="doFilter()"
                           style="
-                            background-color: #37A647 !important;
+                            background-color: #37a647 !important;
                             border-color: #ffffff !important;
                             border-radius: 12px;
                             color: #ffffff;
@@ -84,9 +90,9 @@
                           class="btn btn-outline-success ml-2"
                           (click)="doCancelFilter()"
                           style="
-                            background-color: #FBFBFB !important;
+                            background-color: #fbfbfb !important;
-                            border-color: #6B6B6B !important;
+                            border-color: #6b6b6b !important;
-                            color: #6B6B6B;
+                            color: #6b6b6b;
                             border-radius: 12px;
                           "
                         >
@@ -155,6 +161,27 @@
                         }}</span>
                       </div>
                     </div>
+
+                    <div style="position: absolute; top: 10px; right: 10px">
+                      <button
+                        (click)="toggleMenu(item.id)"
+                        class="btn"
+                        style="
+                          background: none;
+                          border: none;
+                          font-size: 20px;
+                          padding: 0;
+                        "
+                      >
+                        &#x22EE;
+                      </button>
+                      <div *ngIf="item.menuOpen" class="menu-popup">
+                        <ul>
+                          <li (click)="schedulerItem(item)">scheduler</li>
+                        </ul>
+                      </div>
+                    </div>
+
                     <div
                       class="ui-switch-container"
                       style="position: absolute; bottom: 10px; right: 10px"

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

@@ -4,6 +4,8 @@ import { BuildingService } from "../../service/monitoring-api.service";
 import { DeviceService } from "../../service/device.service";
 import { ToastrService } from "ngx-toastr";
 import { LoginService } from "../../service/login.service";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { ControlSchedulerComponent } from "../control-scheduler/control-scheduler.component";
 
 @Component({
   selector: "app-device-control",
@@ -34,7 +36,8 @@ export class DeviceControlComponent {
     private deviceService: DeviceService,
     private monitoringApiService: BuildingService,
     private toastr: ToastrService,
-    private authService: LoginService
+    private authService: LoginService,
+    private modalService: NgbModal,
   ) {}
 
   ngOnInit() {
@@ -161,7 +164,36 @@ export class DeviceControlComponent {
     });
   }
 
-  addFieldValue() {}
+  toggleMenu(itemId) {
+    this.filteredDeviceRows.forEach(item => {
+      if (item.id === itemId) {
+        item.menuOpen = !item.menuOpen;
+      } else {
+        item.menuOpen = false;  // Close other menus
+      }
+    });
+  }
 
-  addDevice(): void {}
+  schedulerItem(item) {
+    console.log(item);
+    const modalRef = this.modalService.open(ControlSchedulerComponent, {
+      size: "md",
+      backdrop: "static", 
+      keyboard: false, 
+      centered: true
+    });
+
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          console.log(result);
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+    // Handle edit action
+  }
 }

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

@@ -16,6 +16,7 @@ import { AddEditDeviceComponent } from './add-edit-device/add-edit-device.compon
 import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component';
 import { DeviceControlComponent } from './device-control/device-control.component';
 import { UiSwitchModule } from 'ngx-ui-switch';
+import { ControlSchedulerComponent } from './control-scheduler/control-scheduler.component';
 
 
 
@@ -24,7 +25,8 @@ import { UiSwitchModule } from 'ngx-ui-switch';
     DeviceComponent,
     AddEditDeviceComponent,
     ModalAddEditComponent,
-    DeviceControlComponent
+    DeviceControlComponent,
+    ControlSchedulerComponent
   ],
   imports: [
     CommonModule,

src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts

@@ -344,7 +344,7 @@ export class AddEditListComponent {
         text: "You have unsaved changes. Do you really want to leave?",
         icon: 'warning',
         showCancelButton: true,
-        confirmButtonColor: '#3085d6',
+        confirmButtonColor: '#37a647',
         cancelButtonColor: '#d33',
         confirmButtonText: 'Yes, leave',
         cancelButtonText: 'No, stay'