fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan UI control scheduler

This commit is contained in:
Fuzi_fauzia 2024-08-22 14:09:13 +07:00
parent a9a7e6edd3
commit a2d166ac1a
10 changed files with 263 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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) => {

3
src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.css Normal file
View File

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

89
src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.html Normal file
View File

@ -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>

23
src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.spec.ts Normal file
View File

@ -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();
});
});

50
src/app/content/hemat-app/device/control-scheduler/control-scheduler.component.ts Normal file
View File

@ -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);
});
}
}

25
src/app/content/hemat-app/device/device-control/device-control.component.css
View File

@ -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;
}

37
src/app/content/hemat-app/device/device-control/device-control.component.html
View File

@ -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;
border-color: #6B6B6B !important;
color: #6B6B6B;
background-color: #fbfbfb !important;
border-color: #6b6b6b !important;
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"

40
src/app/content/hemat-app/device/device-control/device-control.component.ts
View File

@ -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() {}
addDevice(): void {}
toggleMenu(itemId) {
this.filteredDeviceRows.forEach(item => {
if (item.id === itemId) {
item.menuOpen = !item.menuOpen;
} else {
item.menuOpen = false; // Close other menus
}
});
}
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
}
}

4
src/app/content/hemat-app/device/device.module.ts
View File

@ -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,

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

@ -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'