penambahan UI scheduler list

2024-08-23 00:27:24 +07:00 · 2024-08-23 00:27:24 +07:00 · b1ee612602
parent 9654cf92e8
commit b1ee612602
8 changed files with 315 additions and 29 deletions
--- 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
@ -12,6 +12,23 @@
 <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="name" style="color: #242222">Name:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="name"
+          formControlName="name"
+          maxlength="50"
+        />
+        <div
+          *ngIf="myForm.get('name').touched && myForm.get('name').invalid"
+          class="text-danger"
+        >
+          Name is required.
+        </div>
+      </div>
+
      <div class="form-group col-md-12">
        <label for="timeset" style="color: #242222">Time</label>
        <input
@ -58,7 +75,9 @@
              [formControlName]="day.value"
              (change)="onDayChange(day.value, $event.target.checked)"
            />
-            <label class="form-check-label" style="color: #242222">{{ day.label }}</label>
+            <label class="form-check-label" style="color: #242222">{{
+              day.label
+            }}</label>
          </div>
        </div>
      </div>
@ -70,7 +89,7 @@
          <input
            type="checkbox"
            class="form-check-input"
-            formControlName="repeat"
+            formControlName="recurring"
          />
          <label class="form-check-label" style="color: #242222">Yes</label>
        </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,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
 import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";

@ -8,6 +8,7 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
  styleUrls: ["./control-scheduler.component.css"],
 })
 export class ControlSchedulerComponent {
+  @Input() device: any;
  labelModal: string = "";
  myForm: FormGroup;
  dataSwitch = [
@ -39,13 +40,17 @@ export class ControlSchedulerComponent {

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

  createForm() {
    const controls = {
+      name:["", Validators.required],
      timeset: ["", Validators.required],
      switch: [false],
-      repeat: [false], // Default value for repeat checkbox
+      recurring: [false], // Default value for repeat checkbox
+      device_id: this.device.id
    };

    // Initialize checkboxes for each day of the week
@ -74,10 +79,12 @@ export class ControlSchedulerComponent {

    // Construct the final output
    const result = {
+      name: formValues.name,
      timeset: formValues.timeset,
      switch: formValues.switch,
-      repeat: formValues.repeat,
-      day: selectedDays
+      recurring: formValues.recurring,
+      device_id: formValues.device_id,
+      days: selectedDays
    };

    console.log("Form Result: ", result);
--- 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
@ -174,29 +174,32 @@ export class DeviceControlComponent {
    });
  }

-  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
+  schedulerItem(row) {
+    this.router.navigate(["/device/scheduler", row.id]);
  }

+  // schedulerItem(item) {
+  //   const modalRef = this.modalService.open(ControlSchedulerComponent, {
+  //     size: "md",
+  //     backdrop: "static", 
+  //     keyboard: false, 
+  //     centered: true
+  //   });
+
+  //   modalRef.componentInstance.device = item;
+  //   modalRef.result.then(
+  //     (result) => {
+  //       if (result) {
+  //         console.log(result);
+  //       }
+  //     },
+  //     (reason) => {
+  //       console.log(`Dismissed: ${reason}`);
+  //     }
+  //   );
+  //   // Handle edit action
+  // }
+
  @HostListener('document:click', ['$event'])
  clickout(event) {
    if (!event.target.closest('.menu-popup') && !event.target.closest('.btn')) {
--- a/src/app/content/hemat-app/device/device.module.ts
+++ b/src/app/content/hemat-app/device/device.module.ts
@ -17,6 +17,7 @@ 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';
+import { SchedulerListComponent } from './scheduler-list/scheduler-list.component';



@ -26,7 +27,8 @@ import { ControlSchedulerComponent } from './control-scheduler/control-scheduler
    AddEditDeviceComponent,
    ModalAddEditComponent,
    DeviceControlComponent,
-    ControlSchedulerComponent
+    ControlSchedulerComponent,
+    SchedulerListComponent
  ],
  imports: [
    CommonModule,
@ -65,8 +67,15 @@ import { ControlSchedulerComponent } from './control-scheduler/control-scheduler
        path: 'view/:id',
        component: AddEditDeviceComponent,
        data: { mode: 'view' } 
+      },
+      {
+        path: 'scheduler/:id',
+        component: SchedulerListComponent,
+        data: { mode: 'scheduler' } 
      }
-    ])
+    ]),
+
+    
  ]
 })
 export class DeviceModule { }
--- a/src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.css
+++ b/src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.css
@ -0,0 +1,55 @@
+.app-content {
+    padding-top: 20px;
+  }
+  
+  .card {
+    border-radius: 15px;
+    overflow: hidden;
+  }
+  
+  .card-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid #ddd;
+  }
+  
+  .card-body {
+    padding: 2rem;
+  }
+  
+  .list-group-item {
+    background-color: #f7f8fa;
+    margin-bottom: 10px;
+    border-radius: 10px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  
+  .list-group-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  }
+  
+  .list-group-item h5 {
+    margin-bottom: 5px;
+  }
+  
+  .list-group-item .btn-outline-secondary,
+  .list-group-item .btn-outline-danger {
+    border-radius: 20px;
+    padding: 0.25rem 0.75rem;
+  }
+  
+  .btn-light {
+    background-color: #e8eaf6;
+    color: #3f51b5;
+    border: none;
+    border-radius: 20px;
+    padding: 0.5rem 1.25rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .btn-light:hover {
+    background-color: #d1d9ff;
+    color: #303f9f;
+  }
+  
--- 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
@ -0,0 +1,100 @@
+<div class="app-content content" style="background-color: #fbfbfb !important">
+  <div class="content-wrapper">
+    <div class="content-header row mb-1">
+      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+    </div>
+    <div class="content-body">
+      <section id="basic-form-layouts">
+        <div class="row">
+          <div class="col-6" *blockUI="'projectInfo'; message: 'Loading'">
+            <div class="card" style="background-color: #fbfbfb !important">
+              <div class="card-content">
+                <div
+                  class="card-header d-flex justify-content-between align-items-center"
+                  style="background-color: #fbfbfb !important"
+                >
+                  <h4 class="form-section m-0" style="color: #242222">
+                    <i class="feather ft-calendar" style="color: #242222"></i>
+                    Smart Plug Single Connector
+                  </h4>
+
+                  <button
+                    class="btn"
+                    style="
+                      background-color: #37a647 !important;
+                      border-color: #37a647 !important;
+                      color: #ffffff !important;
+                    "
+                    (click)="addSchedulerItem(1)"
+                  >
+                    <span style="font-weight: 600">Add Schedule</span>
+                  </button>
+                </div>
+                <div class="card-body">
+                  <div class="form-body">
+                    <div class="row">
+                      <div class="col-md-12">
+                        <div *ngIf="schedules.length > 0; else noSchedules">
+                          <ul class="list-group">
+                            <li
+                              class="list-group-item d-flex justify-content-between align-items-center mb-3"
+                              *ngFor="let schedule of schedules"
+                            >
+                              <div>
+                                <h5 style="color: #242222">
+                                  {{ schedule.title }}
+                                </h5>
+                                <h2 class="mb-0" style="color: #242222">
+                                  {{ schedule.time }}
+                                </h2>
+                              </div>
+                              <div>
+                                <button
+                                  class="btn btn-sm btn-info mr-1"
+                                  style="
+                                    background-color: transparent !important;
+                                    border-color: #37a647 !important;
+                                  "
+                                  (click)="openEditModal(schedule)"
+                                >
+                                  <i
+                                    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>
+                        </div>
+
+                        <ng-template #noSchedules>
+                          <div class="alert alert-info text-center">
+                            <strong>No schedules available.</strong> Click the
+                            "Add Schedule" button to create one.
+                          </div>
+                        </ng-template>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
--- a/src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.spec.ts
+++ b/src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.spec.ts
@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SchedulerListComponent } from './scheduler-list.component';
+
+describe('SchedulerListComponent', () => {
+  let component: SchedulerListComponent;
+  let fixture: ComponentFixture<SchedulerListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SchedulerListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SchedulerListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- 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
@ -0,0 +1,70 @@
+import { Component } from "@angular/core";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { ControlSchedulerComponent } from "../control-scheduler/control-scheduler.component";
+
+@Component({
+  selector: "app-scheduler-list",
+  templateUrl: "./scheduler-list.component.html",
+  styleUrls: ["./scheduler-list.component.css"],
+})
+export class SchedulerListComponent {
+  public breadcrumb: any;
+  schedules = [
+    {
+      id: 1,
+      title: "Lampu Depan ON",
+      time: "08:55",
+    },
+    {
+      id: 2,
+      title: "Lampu Depan OFF",
+      time: "09:50",
+    },
+  ];
+
+  constructor(private modalService: NgbModal) {}
+
+  ngOnInit(): void {
+    this.breadcrumb = {
+      mainlabel: "Scheduler List",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+          link: "/dashboard/sales",
+        },
+        {
+          name: "Control Device",
+          isLink: false,
+        },
+        {
+          name: "Scheduler List",
+          isLink: false,
+        },
+      ],
+    };
+  }
+
+  addSchedulerItem(item) {
+    const modalRef = this.modalService.open(ControlSchedulerComponent, {
+      size: "md",
+      backdrop: "static", 
+      keyboard: false, 
+      centered: true
+    });
+
+    modalRef.componentInstance.device = item;
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          console.log(result);
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+    // Handle edit action
+  }
+
+}