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

integrasi add dan delete scheduler

This commit is contained in:
Fuzi_fauzia 2024-08-26 11:04:02 +07:00
parent b1ee612602
commit ca5f0c8c0c
8 changed files with 179 additions and 44 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-22.2)
>Smart Building Management Systems (V@2024-08-26.2)
</a></span
>
</p>

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

@ -94,6 +94,25 @@
<label class="form-check-label" style="color: #242222">Yes</label>
</div>
</div>
<div class="form-group col-md-12">
<label for="active" style="color: #242222">Active:</label>
<select
id="active"
class="form-control custom-select"
formControlName="active"
>
<option *ngFor="let data of dataActive" [value]="data.value">
{{ data.label }}
</option>
</select>
<div
*ngIf="myForm.get('active').touched && myForm.get('active').invalid"
class="text-danger"
>
Active is required.
</div>
</div>
</div>
</form>
</div>

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

@ -1,6 +1,13 @@
import { Component, Input } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from "@angular/forms";
import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
import { DeviceService } from "../../service/device.service";
@Component({
selector: "app-control-scheduler",
@ -8,27 +15,39 @@ import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
styleUrls: ["./control-scheduler.component.css"],
})
export class ControlSchedulerComponent {
@Input() device: any;
@Input() deviceId: any;
labelModal: string = "";
myForm: FormGroup;
dataSwitch = [
{
label: 'On',
value: true
}, {
label: 'Off',
value: false
}
label: "On",
value: true,
},
{
label: "Off",
value: false,
},
];
dataActive = [
{
label: "Active",
value: true,
},
{
label: "Non Active",
value: false,
},
];
daysOfWeek = [
{ label: 'Monday', value: 'monday' },
{ label: 'Tuesday', value: 'tuesday' },
{ label: 'Wednesday', value: 'wednesday' },
{ label: 'Thursday', value: 'thursday' },
{ label: 'Friday', value: 'friday' },
{ label: 'Saturday', value: 'saturday' },
{ label: 'Sunday', value: 'sunday' }
{ label: "Monday", value: "monday" },
{ label: "Tuesday", value: "tuesday" },
{ label: "Wednesday", value: "wednesday" },
{ label: "Thursday", value: "thursday" },
{ label: "Friday", value: "friday" },
{ label: "Saturday", value: "saturday" },
{ label: "Sunday", value: "sunday" },
];
selectedDays: string[] = [];
@ -36,25 +55,25 @@ export class ControlSchedulerComponent {
constructor(
public activeModal: NgbActiveModal,
private fb: FormBuilder,
private deviceService: DeviceService
) {}
ngOnInit() {
this.createForm()
console.log(this.device);
this.createForm();
}
createForm() {
const controls = {
name:["", Validators.required],
name: ["", Validators.required],
timeset: ["", Validators.required],
active: [true],
switch: [false],
recurring: [false], // Default value for repeat checkbox
device_id: this.device.id
recurring: [true], // Default value for repeat checkbox
device_id: this.deviceId,
};
// Initialize checkboxes for each day of the week
this.daysOfWeek.forEach(day => {
this.daysOfWeek.forEach((day) => {
controls[day.value] = [false]; // Each day starts as unchecked
});
@ -65,7 +84,7 @@ export class ControlSchedulerComponent {
if (isChecked) {
this.selectedDays.push(day);
} else {
this.selectedDays = this.selectedDays.filter(d => d !== day);
this.selectedDays = this.selectedDays.filter((d) => d !== day);
}
}
@ -74,19 +93,35 @@ export class ControlSchedulerComponent {
// Collect selected days' labels
const selectedDays = this.daysOfWeek
.filter(day => formValues[day.value])
.map(day => day.label);
.filter((day) => formValues[day.value])
.map((day) => day.label);
// Construct the final output
const result = {
name: formValues.name,
timeset: formValues.timeset,
switch: formValues.switch,
recurring: formValues.recurring,
device_id: formValues.device_id,
days: selectedDays
timeset: formValues.timeset,
recurring: formValues.recurring,
active: formValues.active,
switch: formValues.switch,
days: selectedDays,
};
console.log("Form Result: ", result);
if (this.myForm.valid) {
this.activeModal.close(result);
} else {
this.markFormGroupTouched(this.myForm)
}
// console.log("Form Result: ", result);
}
markFormGroupTouched(formGroup: FormGroup) {
(Object as any).values(formGroup.controls).forEach((control) => {
control.markAsTouched();
if (control.controls) {
this.markFormGroupTouched(control);
}
});
}
}

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

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

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

@ -25,7 +25,7 @@
border-color: #37a647 !important;
color: #ffffff !important;
"
(click)="addSchedulerItem(1)"
(click)="addSchedulerItem()"
>
<span style="font-weight: 600">Add Schedule</span>
</button>
@ -38,14 +38,14 @@
<ul class="list-group">
<li
class="list-group-item d-flex justify-content-between align-items-center mb-3"
*ngFor="let schedule of schedules"
*ngFor="let schedule of listScheduler"
>
<div>
<h5 style="color: #242222">
{{ schedule.title }}
{{ schedule.name }} ({{schedule.switch ? 'On' : 'Off'}})
</h5>
<h2 class="mb-0" style="color: #242222">
{{ schedule.time }}
{{ schedule.timeset }}
</h2>
</div>
<div>

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

@ -1,7 +1,9 @@
import { Component } from "@angular/core";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { ControlSchedulerComponent } from "../control-scheduler/control-scheduler.component";
import { ActivatedRoute } from "@angular/router";
import { DeviceService } from "../../service/device.service";
import Swal from "sweetalert2";
@Component({
selector: "app-scheduler-list",
templateUrl: "./scheduler-list.component.html",
@ -9,6 +11,8 @@ import { ControlSchedulerComponent } from "../control-scheduler/control-schedule
})
export class SchedulerListComponent {
public breadcrumb: any;
listScheduler: any;
deviceId: any;
schedules = [
{
id: 1,
@ -22,11 +26,24 @@ export class SchedulerListComponent {
},
];
constructor(private modalService: NgbModal) {}
constructor(
private modalService: NgbModal,
private route: ActivatedRoute,
private deviceService: DeviceService
) {}
ngOnInit(): void {
this.route.params.subscribe((params) => {
const id = params["id"];
this.deviceId = id;
if (id) {
this.dataListScheduler(id);
}
});
this.breadcrumb = {
mainlabel: "Scheduler List",
linkBack: "/device/control-device",
isLinkBack: true,
links: [
{
name: "Home",
@ -45,19 +62,28 @@ export class SchedulerListComponent {
};
}
addSchedulerItem(item) {
dataListScheduler(id) {
this.deviceService.getDeviceScheduler(id).subscribe((data) => {
this.listScheduler = data.results;
});
}
addSchedulerItem() {
const modalRef = this.modalService.open(ControlSchedulerComponent, {
size: "md",
backdrop: "static",
keyboard: false,
centered: true
backdrop: "static",
keyboard: false,
centered: true,
});
modalRef.componentInstance.device = item;
modalRef.componentInstance.deviceId = this.deviceId;
modalRef.componentInstance.mode = "add";
modalRef.result.then(
(result) => {
if (result) {
console.log(result);
this.deviceService.postDeviceScheduler(result).subscribe((res) => {
this.dataListScheduler(this.deviceId);
});
}
},
(reason) => {
@ -67,4 +93,27 @@ export class SchedulerListComponent {
// Handle edit action
}
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",
}).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",
});
}
});
}
}

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

@ -115,4 +115,34 @@ export class DeviceService {
});
return this.http.get<any>(url, { headers });
}
getDeviceScheduler(id): Observable<any> {
const endpoint = `/device-scheduler`;
const url = `${BASE_URL}${endpoint}?device_id=${id}`;
const headers = new HttpHeaders({
'Content-Type': 'application/json',
'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
});
return this.http.get<any>(url, { headers });
}
postDeviceScheduler(data): Observable<any> {
const endpoint = `/device-scheduler`;
const url = `${BASE_URL}${endpoint}`;
const headers = new HttpHeaders({
"Content-Type": "application/json",
"x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
});
return this.http.post<any>(url, data, { headers });
}
deleteDeviceScheduler(id): Observable<any> {
const endpoint = `/device-scheduler/${id}`;
const url = `${BASE_URL}${endpoint}`;
const headers = new HttpHeaders({
"Content-Type": "application/json",
"x-api-key": "j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT",
});
return this.http.delete<any>(url, { headers });
}
}

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.22.2)</span>
<span>(v@2024.08.26.2)</span>
</p>
<!-- <div class="card-body">
<a