From ca30a991ae8f35b2a103a90f0ed6157472376a2f Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Fri, 28 Jun 2024 08:07:17 +0700 Subject: [PATCH] export detail --- src/app/_layout/footer/footer.component.html | 2 +- src/app/_services/tableexcel.service.ts | 78 +++- .../cost-management.component.css | 5 + .../cost-management.component.ts | 2 + .../modal-export/modal-export.component.css | 416 ++++++++++++++++++ .../modal-export/modal-export.component.html | 127 +++++- .../modal-export/modal-export.component.ts | 73 ++- .../service/cost-management.service.ts | 10 + src/app/login/login.component.html | 2 +- 9 files changed, 680 insertions(+), 35 deletions(-) diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html index 49b2ea5..c76e469 100644 --- a/src/app/_layout/footer/footer.component.html +++ b/src/app/_layout/footer/footer.component.html @@ -13,7 +13,7 @@ href="https://allbestsistem.com/" target="_blank" style="background-color: #000000 !important;" - >Smart Building Management Systems (V@2024-06-28.01) + >Smart Building Management Systems (V@2024-06-28.02)

diff --git a/src/app/_services/tableexcel.service.ts b/src/app/_services/tableexcel.service.ts index 64c9a39..ce75892 100644 --- a/src/app/_services/tableexcel.service.ts +++ b/src/app/_services/tableexcel.service.ts @@ -98,11 +98,17 @@ export class TableexcelService { }); return filteredItem; }); - + // Calculate totals for estimation_cost and total_use - const totalEstimationCost = filteredJson.reduce((sum, item) => sum + (item['estimation_cost'] || 0), 0); - const totalUse = filteredJson.reduce((sum, item) => sum + (item['total_use'] || 0), 0); - + const totalEstimationCost = filteredJson.reduce( + (sum, item) => sum + (item["estimation_cost"] || 0), + 0 + ); + const totalUse = filteredJson.reduce( + (sum, item) => sum + (item["total_use"] || 0), + 0 + ); + // Create the worksheet const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(filteredJson); const columnWidths = [ @@ -114,7 +120,7 @@ export class TableexcelService { { wch: 30 }, ]; worksheet["!cols"] = columnWidths; - + // Add header const header = [ "Building", @@ -125,7 +131,7 @@ export class TableexcelService { "Date", ]; XLSX.utils.sheet_add_aoa(worksheet, [header]); - + // Add totals row const totalsRow = [ "Totals", @@ -133,21 +139,73 @@ export class TableexcelService { "", `Total: ${totalUse} Kwh`, `Total: ${totalEstimationCost}`, - "" + "", ]; XLSX.utils.sheet_add_aoa(worksheet, [totalsRow], { origin: -1 }); - + // Create the workbook const workbook: XLSX.WorkBook = { Sheets: { data: worksheet }, SheetNames: ["data"], }; - + // Write the workbook and save it const excelBuffer: any = XLSX.write(workbook, { bookType: "xlsx", type: "array", }); this.saveAsExcelFile(excelBuffer, excelFileName); - } + } + + public exportAsExcelFileManageDetail( + json: any[], + excelFileName: string, + columns: string[] + ): void { + const filteredJson = json.map((item) => { + const filteredItem = {}; + columns.forEach((column) => { + filteredItem[column] = item[column]; + }); + return filteredItem; + }); + + const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(filteredJson); + const columnWidths = [ + { wch: 40 }, + { wch: 30 }, + { wch: 30 }, + { wch: 20 }, + { wch: 20 }, + { wch: 20 }, + { wch: 20 }, + { wch: 20 }, + { wch: 30 }, + ]; + worksheet["!cols"] = columnWidths; + + const header = [ + "Device", + "Room", + "Category", + "Estimation Cost", + "Total Kwh", + "Watt", + "Duration", + "Price Kwh", + "Periode", + ]; + XLSX.utils.sheet_add_aoa(worksheet, [header]); + + const workbook: XLSX.WorkBook = { + Sheets: { data: worksheet }, + SheetNames: ["data"], + }; + + const excelBuffer: any = XLSX.write(workbook, { + bookType: "xlsx", + type: "array", + }); + this.saveAsExcelFile(excelBuffer, excelFileName); + } } diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css index 3b51239..a99d931 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.css +++ b/src/app/content/hemat-app/cost-management/cost-management.component.css @@ -417,3 +417,8 @@ input[type="month"]::-webkit-calendar-picker-indicator { background-color: #1a1a1a; /* Darker black for hover effect */ } +.modal-open .content { + filter: blur(5px); + transition: filter 0.3s ease-in-out; +} + diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts index 109c61e..9d36b8a 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts @@ -97,6 +97,8 @@ export class CostManagementComponent implements OnInit { totalUse: item.total_use, endDate: item.end_date, statusId: item.status_id, + categoryId: item.category_id, + roomId: item.room_id, })); }); } diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css index 10cac6b..d4aff3e 100644 --- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css +++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css @@ -1,3 +1,419 @@ +:host ::ng-deep .progress-bar { + background-color: #bef264 !important; +} + +:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut { + stroke: #8a8a8a; + stroke-width: 20px !important; +} + +:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut { + stroke: #bef264; + stroke-width: 20px !important; +} + +:host ::ng-deep .donut-chart2 .ct-label { + fill: #ffffff; + color: rgb(255, 255, 255); + font-size: 12px; + line-height: 1; +} + +:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point { + stroke: #bef264; +} + +:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line { + stroke: #bef264; +} + +:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area { + fill: #bef264; + fill-opacity: 1; +} + +:host ::ng-deep .sp-line-total-cost .ct-point { + stroke-width: 0px; +} + +.ct-chart-bar .ct-series .ct-bar { + stroke-width: 20px !important; /* Atur lebar bar sesuai kebutuhan */ +} + +.ct-chart-bar .ct-label.ct-horizontal { + margin-left: -10px !important; /* Mengatur margin label horizontal */ + margin-right: -10px !important; +} + +:host ::ng-deep .donut-chart3 .ct-series-a .ct-bar { + stroke: #bef264; + fill: none; + stroke-width: 30px; +} + +:host ::ng-deep .donut-chart3 .ct-series-b .ct-bar { + stroke: #bef264; + fill: none; + stroke-width: 30px; +} + +:host ::ng-deep .donut-chart3 .ct-label { + fill: #ffffff; + color: rgb(255, 255, 255); + font-size: 12px; + line-height: 1; + margin-right: 20px; +} + +:host ::ng-deep .ct-label.ct-horizontal { + font-size: 12px; /* Adjust font size */ + transform: rotate(-45deg); /* Rotate labels if needed for better fit */ + text-anchor: end; + margin-top: 10px; +} + +:host ::ng-deep .ct-chart-bar .ct-labels .ct-label.ct-horizontal { + margin-right: 20px; /* Adjust margin for labels */ +} + +.chart-title { + font-size: 18px; + margin-bottom: 10px; + font-weight: bold; +} + +/* Hide the default calendar icon */ +input[type="month"]::-webkit-calendar-picker-indicator { + background-color: #ffffff; +} + +/* table */ +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-header + .datatable-header-cell + .datatable-header-cell-label { + font-family: inherit; + font-size: medium; + font-weight: bold; + color: #6b6f82; +} +:host ::ng-deep .ngx-datatable .datatable-row-center, +.ngx-datatable .datatable-row-group, +.ngx-datatable .datatable-row-right { + position: relative; + height: 50px !important; +} + +:host ::ng-deep .datatable-icon-right:before { + font-family: "icofont"; + font-style: normal; +} + +:host ::ng-deep .datatable-icon-skip:before { + font-family: "icofont"; + font-style: normal; +} + +:host ::ng-deep .datatable-icon-left:before { + font-family: "icofont"; + font-style: normal; +} + +:host ::ng-deep .datatable-icon-left:before { + content: "\2039"; + font-size: x-large; +} + +:host ::ng-deep .datatable-icon-prev:before { + content: "\00AB"; + font-size: x-large; +} + +:host ::ng-deep .datatable-icon-right:before { + content: "\203A"; + font-size: x-large; +} + +:host ::ng-deep .datatable-icon-skip:before { + content: "\00BB"; + font-size: x-large; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-left, +.ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-right, +.ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-prev { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-right, +.ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-right { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-skip { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-prev { + font-size: 16px; + line-height: 22px; + padding: 0px 09px; + background-color: #d4d2e7; +} + +:host + ::ng-deep + .datatable-footer + .datatable-pager + ul + li:not(.disabled).active + a, +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + ul[_ngcontent-c11] + li[_ngcontent-c11]:not(.disabled):hover + a[_ngcontent-c11] { + background-color: #d4d2e7; + font-weight: bold; + font-size: larger; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a { + height: 32px; + min-width: 34px; + line-height: 22px; + padding: 0; + border-radius: 3px; + margin: 0 3px; + text-align: center; + vertical-align: top; + padding-top: 3px; + text-decoration: none; + vertical-align: bottom; + color: #7c8091; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-left, +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-prev[_ngcontent-c11] { + font-size: 14px; + line-height: 9px; + padding: 0px 08px; + background-color: #ffffff; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-left, +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-right, +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-skip, +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + .datatable-icon-prev, +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-right[_ngcontent-c11], +.ngx-datatable.bootstrap[_ngcontent-c11] + .datatable-footer[_ngcontent-c11] + .datatable-pager[_ngcontent-c11] + .datatable-icon-prev[_ngcontent-c11] { + font-size: 0px; + line-height: 22px; + padding: 0px 09px; + background-color: #ffffff; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + ul + li:not(.disabled):hover + a { + background-color: #545454; + font-weight: bold; + color: white; +} + +:host + ::ng-deep + .ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + ul + li:not(.disabled).active + a, +.ngx-datatable.bootstrap + .datatable-footer + .datatable-pager + ul + li:not(.disabled):hover + a { + background-color: #252525; + font-weight: bold; + color: white; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer { + background: #252525; + color: #ededed; + margin-top: -1px; + overflow: inherit; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-header { + font-weight: bold; + height: unset !important; + overflow: inherit; +} + +:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager { + flex: 0 0 0%; +} + +:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager { + display: flex; +} + +:host + ::ng-deep + .ngx-datatable + .datatable-footer + .selected-count + .datatable-pager { + flex: 0 0 0%; +} + +:host ::ng-deep .ngx-datatable { + display: -webkit-box; +} + +:host ::ng-deep .ng-select .ng-select-container { + color: #ffffff !important; + background-color: #252525 !important; + height: 40px !important; +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row { + background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */ +} + +:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover { + background-color: #1a1a1a; /* Darker black for hover effect */ +} + ::ng-deep .modal-backdrop.show { z-index: auto !important; } diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html index f7d5727..dfdbbc0 100644 --- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html +++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html @@ -1,7 +1,121 @@ -
-

Input the actual cost of your expenses

-

Building : {{ dataRow.building }}

- +
+

+ Comparison of Water and Electricity Costs > {{ dataRow.building }} +

+ +
+ + + +

+ {{ rowIndex + 1 }} +

+ + + + + Device + + +

{{ value }}

+ + + + + Room + + +

{{ value }}

+ + + + + Category + + +

{{ value }}

+ + + + + Estimation Cost + + +

+ {{ + value.toLocaleString("id-ID", { + style: "currency", + currency: "IDR" + }) + }} +

+ + + + + Total Kwh + + +

{{ value }}

+ + + + + Watt + + +

{{ value }}

+ + + + + Duration + + +

{{ value }}

+ + + + + Price Kwh + + +

+ {{ + value.toLocaleString("id-ID", { + style: "currency", + currency: "IDR" + }) + }} +

+ + + + + Tanggal + + +

+ {{ value | date : "MM/yyyy" }} +

+ + + +
- Add + + Export
diff --git a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts index 43d0339..26c973c 100644 --- a/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts +++ b/src/app/content/hemat-app/cost-management/modal-export/modal-export.component.ts @@ -1,6 +1,8 @@ import { Component, Input } from "@angular/core"; import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap"; import { DeviceService } from "../../service/device.service"; +import { CostManagementService } from "../../service/cost-management.service"; +import { TableexcelService } from "src/app/_services/tableexcel.service"; @Component({ selector: "app-modal-export", @@ -13,30 +15,65 @@ export class ModalExportComponent { data: any; filteredRows: any[]; data_device: any[]; + kwhTerm: string = ""; + costTerm: string = ""; + data_cost: any; + formattedEndDate: any; + spinnerExportActive = false; constructor( public activeModal: NgbActiveModal, - private deviceService: DeviceService + private costService: CostManagementService, + private tableexcelService: TableexcelService ) {} ngOnInit() { - this.fetchData(this.buildingId); + this.formattedEndDate = this.dataRow.endDate.slice(0, 7); + this.fetchData( + this.dataRow.categoryId, + this.dataRow.roomId, + this.formattedEndDate + ); } - fetchData(buildingSelected) { - this.deviceService.getDeviceDataById(buildingSelected).subscribe((res) => { - this.data = res; - this.filteredRows = this.data.results.data; - this.data_device = this.filteredRows.map((item) => ({ - buildingName: item.building_name, - id: item.id, - name: item.name, - icon: item.icon, - watt: item.watt, - categoryName: item.category_name, - typeName: item.type_name, - voltageName: item.voltage_name, - statusName: item.status_name, - })); - }); + fetchData(category, room, period) { + this.costService + .getCostDetail(category, room, period) + .subscribe((response) => { + this.data_cost = response.data.map((item) => ({ + deviceName: item.device_name, + roomName: item.room_name, + categoryName: item.category_name, + estimationCost: item.estimation_cost, + totalKwh: item.total_kwh, + watt: item.watt, + duration: item.duration, + priceKwh: item.price_kwh, + periode: item.periode, + })); + }); + } + + export() { + this.spinnerExportActive = true; + setTimeout(() => { + const columnsToExport = [ + "deviceName", + "roomName", + "categoryName", + "estimationCost", + "totalKwh", + "watt", + "duration", + "priceKwh", + "periode", + ]; + this.tableexcelService.exportAsExcelFileManageDetail( + this.data_cost, + "export_detail_cost_management", + columnsToExport + ); + this.spinnerExportActive = false; + this.activeModal.close('Export completed'); + }, 3000); } } diff --git a/src/app/content/hemat-app/service/cost-management.service.ts b/src/app/content/hemat-app/service/cost-management.service.ts index 2ef9a63..0e6ebf6 100644 --- a/src/app/content/hemat-app/service/cost-management.service.ts +++ b/src/app/content/hemat-app/service/cost-management.service.ts @@ -98,4 +98,14 @@ export class CostManagementService { }); return this.http.get(url, { headers }); } + + getCostDetail(category: any, room: any, period: any): Observable { + const endpoint = `/cost-detail/get/Details`; + const url = `${BASE_URL}${endpoint}?category_id=${category}&room_id=${room}&periode=${period}`; + const headers = new HttpHeaders({ + 'Content-Type': 'application/json', + 'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT' + }); + return this.http.get(url, { headers }); + } } diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html index c4a5aac..ccb6ed1 100644 --- a/src/app/login/login.component.html +++ b/src/app/login/login.component.html @@ -138,7 +138,7 @@

- (v@2024.06.28.01) + (v@2024.06.28.02)