penambahan UI scheduler list
This commit is contained in:
parent
9654cf92e8
commit
b1ee612602
@ -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>
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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')) {
|
||||
|
||||
@ -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 { }
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user