From b1ee612602da378aa570733cf78a24f261e9ae98 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Fri, 23 Aug 2024 00:27:24 +0700 Subject: [PATCH] penambahan UI scheduler list --- .../control-scheduler.component.html | 23 +++- .../control-scheduler.component.ts | 15 ++- .../device-control.component.ts | 45 ++++---- .../content/hemat-app/device/device.module.ts | 13 ++- .../scheduler-list.component.css | 55 ++++++++++ .../scheduler-list.component.html | 100 ++++++++++++++++++ .../scheduler-list.component.spec.ts | 23 ++++ .../scheduler-list.component.ts | 70 ++++++++++++ 8 files changed, 315 insertions(+), 29 deletions(-) create mode 100644 src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.css create mode 100644 src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.html create mode 100644 src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.spec.ts create mode 100644 src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.ts diff --git 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 index 61aab4a..5575a54 100644 --- 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 @@
+
+ + +
+ Name is required. +
+
+
- +
@@ -70,7 +89,7 @@ diff --git 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 index cee02fa..5f947b8 100644 --- 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); diff --git 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 index c0cb859..fb407ca 100644 --- 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')) { diff --git a/src/app/content/hemat-app/device/device.module.ts b/src/app/content/hemat-app/device/device.module.ts index 802208f..901aed6 100644 --- 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 { } diff --git 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 new file mode 100644 index 0000000..918279b --- /dev/null +++ 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; + } + \ No newline at end of file diff --git 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 new file mode 100644 index 0000000..1e46407 --- /dev/null +++ b/src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.html @@ -0,0 +1,100 @@ +
+
+
+ +
+
+
+
+
+
+
+
+

+ + Smart Plug Single Connector +

+ + +
+
+
+
+
+
+
    +
  • +
    +
    + {{ schedule.title }} +
    +

    + {{ schedule.time }} +

    +
    +
    + + +
    +
    • +
+
+ + +
+ No schedules available. Click the + "Add Schedule" button to create one. +
+ +
+
+
+
+
+
+
+
+
+
+
+
diff --git 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 new file mode 100644 index 0000000..aa464cb --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SchedulerListComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SchedulerListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git 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 new file mode 100644 index 0000000..343a393 --- /dev/null +++ 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 + } + +}