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

perbaikan UI scheduler

This commit is contained in:
Fuzi_fauzia 2024-08-27 16:41:09 +07:00
parent 98159a1584
commit 7c443080d6
11 changed files with 179 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_layout/footer/footer.component.html
View File

@ -13,7 +13,7 @@
href="https://allbestsistem.com/"
target="_blank"
style="background-color: #ffffff !important;"
>Smart Building Management Systems (V@2024-08-26.3)
>Smart Building Management Systems (V@2024-08-27.2)
</a></span
>
</p>

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

@ -83,7 +83,7 @@
</div>
<!-- Checkbox for Repeat -->
<!-- <div class="form-group col-md-12">
<div class="form-group col-md-12">
<label style="color: #242222">Repeat:</label>
<div class="form-check">
<input
@ -93,9 +93,9 @@
/>
<label class="form-check-label" style="color: #242222">Yes</label>
</div>
</div> -->
</div>
<div class="form-group col-md-12">
<!-- <div class="form-group col-md-12">
<label for="active" style="color: #242222">Active:</label>
<select
id="active"
@ -112,7 +112,7 @@
>
Active is required.
</div>
</div>
</div> -->
</div>
</form>
</div>

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

@ -8,7 +8,6 @@ import {
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
import { DeviceService } from "../../service/device.service";
@Component({
selector: "app-control-scheduler",
templateUrl: "./control-scheduler.component.html",
@ -62,9 +61,9 @@ export class ControlSchedulerComponent {
ngOnInit() {
this.createForm();
if (this.mode === 'add') {
if (this.mode === "add") {
this.labelModal = "Add Scheduler";
} else if (this.mode === 'edit') {
} else if (this.mode === "edit") {
this.editForm();
this.labelModal = "Edit Scheduler";
}
@ -88,7 +87,7 @@ export class ControlSchedulerComponent {
this.myForm = this.fb.group(controls);
}
editForm(){
editForm() {
this.selectedDays = this.data.days || [];
this.myForm.patchValue({
name: this.data.name,
@ -97,7 +96,7 @@ export class ControlSchedulerComponent {
active: this.data.active,
switch: this.data.switch,
});
// Patch the form with the selected days
this.selectedDays.forEach((day) => {
this.myForm.patchValue({
@ -123,20 +122,35 @@ export class ControlSchedulerComponent {
.map((day) => day.value);
// Construct the final output
const result = {
name: formValues.name,
device_id: formValues.device_id,
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
let result = {};
if (this.mode === "add") {
result = {
name: formValues.name,
device_id: formValues.device_id,
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
} else {
result = {
id: this.data.id,
name: formValues.name,
device_id: formValues.device_id,
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
}
if (this.myForm.valid) {
this.activeModal.close(result);
} else {
this.markFormGroupTouched(this.myForm)
this.markFormGroupTouched(this.myForm);
}
// console.log("Form Result: ", result);

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

@ -175,7 +175,9 @@ export class DeviceControlComponent {
}
schedulerItem(row) {
this.router.navigate(["/device/scheduler", row.id, row.name]);
console.log(row);
this.router.navigate(["/device/scheduler", row.id]);
}
// schedulerItem(item) {

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

@ -69,7 +69,7 @@ import { SchedulerListComponent } from './scheduler-list/scheduler-list.componen
data: { mode: 'view' }
},
{
path: 'scheduler/:id/:name',
path: 'scheduler/:id',
component: SchedulerListComponent,
data: { mode: 'scheduler' }
}

1
src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.css
View File

@ -52,4 +52,3 @@
background-color: #d1d9ff;
color: #303f9f;
}

81
src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.html
View File

@ -15,7 +15,7 @@
>
<h4 class="form-section m-0" style="color: #242222">
<i class="feather ft-calendar" style="color: #242222"></i>
{{deviceName}}
{{ deviceName ? deviceName : '' }}
</h4>
<button
@ -40,44 +40,57 @@
class="list-group-item d-flex justify-content-between align-items-center mb-3"
*ngFor="let schedule of listScheduler"
>
<div>
<h5 style="color: #242222">
{{ schedule.name }} ({{schedule.switch ? 'On' : 'Off'}})
</h5>
<h2 class="mb-0" style="color: #242222">
{{ schedule.timeset }}
</h2>
<!-- Tambahkan checkbox di sini -->
<div class="d-flex align-items-center">
<div class="mr-2">
<input
type="checkbox"
[(ngModel)]="schedule.selected"
(change)="checkSelected()"
/>
</div>
<div (click)="editSchedule(schedule)">
<h5 style="color: #242222">
{{ schedule.name }} ({{
schedule.switch ? "On" : "Off"
}})
</h5>
<h2 class="mb-0" style="color: #242222">
{{ schedule.timeset }}
</h2>
</div>
</div>
<div>
<button
class="btn btn-sm btn-info mr-1"
style="
background-color: transparent !important;
border-color: #37a647 !important;
"
(click)="editSchedule(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>
<ui-switch
style="border-color: #bef264 !important"
class="switchery"
switchColor="white"
color="rgb(55, 166, 71)"
size="small"
[checked]="schedule.active"
(change)="switchChanged($event, schedule)"
></ui-switch>
</div>
</li>
</ul>
<!-- Tambahkan tombol delete di sini -->
<div class="d-flex justify-content-center">
<button
*ngIf="hasSelected"
class="btn btn-danger mt-2"
(click)="deleteSelectedSchedules()"
style="
background-color: transparent !important;
border-color: #37a647 !important;
"
>
<i
class="ficon la la-trash"
style="color: #37a647 !important"
></i>
</button>
</div>
</div>
<ng-template #noSchedules>

97
src/app/content/hemat-app/device/scheduler-list/scheduler-list.component.ts
View File

@ -14,6 +14,7 @@ export class SchedulerListComponent {
listScheduler: any;
deviceId: any;
deviceName: any;
hasSelected: boolean = false;
schedules = [
{
id: 1,
@ -36,11 +37,10 @@ export class SchedulerListComponent {
ngOnInit(): void {
this.route.params.subscribe((params) => {
const id = params["id"];
const name = params["name"];
this.deviceName = name;
this.deviceId = id;
if (id) {
this.dataListScheduler(id);
this.dataDevice(id);
}
});
this.breadcrumb = {
@ -68,6 +68,24 @@ export class SchedulerListComponent {
dataListScheduler(id) {
this.deviceService.getDeviceScheduler(id).subscribe((data) => {
this.listScheduler = data.results;
console.log(this.listScheduler);
});
}
dataDevice(id) {
this.deviceService.getDeviceByid(id).subscribe((data) => {
this.deviceName = data.data.name
});
}
switchChanged(e, item) {
const data = {
id: item.id,
active: e,
};
this.deviceService.putDeviceSchedulerActive(data, item.id).subscribe((res) => {
this.dataListScheduler(this.deviceId);
});
}
@ -97,7 +115,6 @@ export class SchedulerListComponent {
}
editSchedule(data) {
console.log(data);
const modalRef = this.modalService.open(ControlSchedulerComponent, {
size: "md",
backdrop: "static",
@ -111,9 +128,11 @@ export class SchedulerListComponent {
modalRef.result.then(
(result) => {
if (result) {
this.deviceService.putDeviceScheduler(result, data.id).subscribe((res) => {
this.dataListScheduler(this.deviceId);
});
this.deviceService
.putDeviceScheduler(result, data.id)
.subscribe((res) => {
this.dataListScheduler(this.deviceId);
});
}
},
(reason) => {
@ -122,28 +141,52 @@ export class SchedulerListComponent {
);
}
checkSelected() {
this.hasSelected = this.listScheduler.some((schedule) => schedule.selected);
}
deleteSelectedSchedules() {
const selectedSchedules = this.listScheduler.filter(
(schedule) => schedule.selected
);
if (selectedSchedules.length > 0) {
Swal.fire({
title: "Apakah kamu yakin ingin menghapus jadwal yang dipilih?",
text: "Tindakan ini tidak dapat dibatalkan.",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#37a647",
cancelButtonColor: "#d33",
confirmButtonText: "Ya, hapus!",
cancelButtonText: "Batal",
allowOutsideClick: false,
}).then((result) => {
if (result.isConfirmed) {
selectedSchedules.forEach((schedule) => {
this.deleteSchedule(schedule.id);
});
Swal.fire({
title: "Terhapus!",
text: "Jadwal yang dipilih berhasil dihapus.",
icon: "success",
});
}
});
} else {
Swal.fire({
title: "Tidak ada jadwal yang dipilih!",
text: "Pilih setidaknya satu jadwal untuk dihapus.",
icon: "info",
});
}
}
deleteSchedule(id) {
Swal.fire({
title: "Apakah kamu yakin ingin menghapus jadwal ini?",
text: "Tindakan ini tidak dapat dibatalkan.",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#37a647",
cancelButtonColor: "#d33",
confirmButtonText: "Ya, hapus!",
cancelButtonText: "Batal",
allowOutsideClick: false,
}).then((result) => {
if (result.isConfirmed) {
this.deviceService.deleteDeviceScheduler(id).subscribe((data) => {
this.dataListScheduler(this.deviceId);
});
Swal.fire({
title: "Terhapus!",
text: "Jadwal berhasil dihapus.",
icon: "success",
});
}
this.deviceService.deleteDeviceScheduler(id).subscribe(() => {
this.dataListScheduler(this.deviceId);
this.hasSelected = false;
});
}
}

12
src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
View File

@ -105,15 +105,9 @@
<i class="feather ft-plus"> New Floor</i>
</button>
</div>
<small
class="form-text text-muted danger"
*ngIf="submitted && f.floorId.errors"
class="invalid-feedback"
>
<div *ngIf="f.floorId.errors.required">
Building is required
</div>
</small>
<div *ngIf="projectInfo.get('floorId').touched && projectInfo.get('floorId').invalid" class="text-danger">
Floor is required.
</div>
</div>
</div>
</div>

20
src/app/content/hemat-app/service/device.service.ts
View File

@ -99,6 +99,16 @@ export class DeviceService {
return this.http.get<any>(url, { headers });
}
getDeviceByid(id): Observable<any> {
const endpoint = `/devices`;
const url = `${BASE_URL}${endpoint}/${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
filterDashboard(building, floor): Observable<any> {
const endpoint = `/building/dashboard/list`;
const params = new URLSearchParams({
@ -146,6 +156,16 @@ export class DeviceService {
return this.http.put<any>(url, data, { headers });
}
putDeviceSchedulerActive(data, id): Observable<any> {
const endpoint = `/device-scheduler/${id}/Active`;
const url = `${BASE_URL}${endpoint}`;
const headers = new HttpHeaders({
"Content-Type": "application/json",
"x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
});
return this.http.put<any>(url, data, { headers });
}
deleteDeviceScheduler(id): Observable<any> {
const endpoint = `/device-scheduler/${id}`;
const url = `${BASE_URL}${endpoint}`;

2
src/app/login/login.component.html
View File

@ -138,7 +138,7 @@
<p
class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
>
<span>(v@2024.08.26.3)</span>
<span>(v@2024.08.27.2)</span>
</p>
<!-- <div class="card-body">
<a