From efaf30d55ef59630d56f60b0a91f4d38f25b1743 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Sun, 23 Jun 2024 03:09:40 +0700 Subject: [PATCH] perbaikan UI device dan penambahan export --- src/app/_services/tableexcel.service.ts | 76 +++++++++--- .../device-control.component.html | 14 +-- .../hemat-app/device/device.component.html | 110 +++++++++++++----- .../hemat-app/device/device.component.ts | 44 ++++++- .../surveillance/surveillance.component.html | 68 ++++++++--- 5 files changed, 244 insertions(+), 68 deletions(-) diff --git a/src/app/_services/tableexcel.service.ts b/src/app/_services/tableexcel.service.ts index 12d0b93..cea1e5e 100644 --- a/src/app/_services/tableexcel.service.ts +++ b/src/app/_services/tableexcel.service.ts @@ -1,37 +1,87 @@ -import { Injectable } from '@angular/core'; -import * as FileSaver from 'file-saver'; -import * as XLSX from 'xlsx'; +import { Injectable } from "@angular/core"; +import * as FileSaver from "file-saver"; +import * as XLSX from "xlsx"; const EXCEL_TYPE = - 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; -const EXCEL_EXTENSION = '.xlsx'; + "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8"; +const EXCEL_EXTENSION = ".xlsx"; @Injectable({ - providedIn: 'root' + providedIn: "root", }) export class TableexcelService { - constructor() { } + constructor() {} public exportAsExcelFile(json: any[], excelFileName: string): void { const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json); - console.log('worksheet', worksheet); + console.log("worksheet", worksheet); const workbook: XLSX.WorkBook = { Sheets: { data: worksheet }, - SheetNames: ['data'] + SheetNames: ["data"], }; const excelBuffer: any = XLSX.write(workbook, { - bookType: 'xlsx', - type: 'array' + bookType: "xlsx", + type: "array", }); this.saveAsExcelFile(excelBuffer, excelFileName); } private saveAsExcelFile(buffer: any, fileName: string): void { const data: Blob = new Blob([buffer], { - type: EXCEL_TYPE + type: EXCEL_TYPE, }); FileSaver.saveAs( data, - fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION + fileName + "_export_" + new Date().getTime() + EXCEL_EXTENSION ); } + + public exportAsExcelFileDevice( + 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: 10 }, + { wch: 20 }, + { wch: 20 }, + { wch: 20 }, + { wch: 20 }, + ]; + worksheet["!cols"] = columnWidths; + + const header = [ + "Device", + "Building", + "Room", + "Watt", + "Category", + "Status", + "Type", + "Voltage", + ]; + 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/device/device-control/device-control.component.html b/src/app/content/hemat-app/device/device-control/device-control.component.html index 1895cdb..db7aebd 100644 --- a/src/app/content/hemat-app/device/device-control/device-control.component.html +++ b/src/app/content/hemat-app/device/device-control/device-control.component.html @@ -10,8 +10,8 @@
-
-
+
+
-
+
-
+
- -
+
-
- -
diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html index e347b34..e716906 100644 --- a/src/app/content/hemat-app/device/device.component.html +++ b/src/app/content/hemat-app/device/device.component.html @@ -7,10 +7,7 @@
-
+
@@ -23,9 +20,22 @@
- +
+ +
@@ -34,7 +44,7 @@
@@ -47,9 +57,22 @@

{{ totalOn }}

- +
+ +
@@ -58,7 +81,7 @@
@@ -71,9 +94,22 @@

{{ totalOff }}

- +
+ +
@@ -90,7 +126,7 @@
-
+
-
+
-
+
- -
+
-
- -
+
+
+
+
+ +
diff --git a/src/app/content/hemat-app/device/device.component.ts b/src/app/content/hemat-app/device/device.component.ts index 8dae940..15513c3 100644 --- a/src/app/content/hemat-app/device/device.component.ts +++ b/src/app/content/hemat-app/device/device.component.ts @@ -6,6 +6,9 @@ import { ActivatedRoute, Router } from "@angular/router"; import { BuildingService } from "../service/monitoring-api.service"; import { DeviceService } from "../service/device.service"; import { ToastrService } from "ngx-toastr"; +import * as FileSaver from "file-saver"; +import * as XLSX from "xlsx"; +import { TableexcelService } from "src/app/_services/tableexcel.service"; @Component({ selector: "app-device", @@ -31,6 +34,7 @@ export class DeviceComponent implements OnInit { rows: any = []; public breadcrumb: any; spinnerActive: boolean = false; + spinnerExportActive: boolean = false; singlebasicSelected: any; @@ -39,7 +43,8 @@ export class DeviceComponent implements OnInit { private router: Router, private monitoringApiService: BuildingService, private deviceService: DeviceService, - private toastr: ToastrService + private toastr: ToastrService, + private tableexcelService: TableexcelService ) {} ngOnInit() { @@ -59,7 +64,11 @@ export class DeviceComponent implements OnInit { }; this.storedData = JSON.parse(localStorage.getItem("currentUser")); this.buildingSelected = this.storedData.buildingId; - this.fetchData(this.buildingSelected, this.categorySelected, this.statusSelected); + this.fetchData( + this.buildingSelected, + this.categorySelected, + this.statusSelected + ); this.dataListMaster(); this.dataListBuilding(); } @@ -115,7 +124,8 @@ export class DeviceComponent implements OnInit { this.spinnerFilterActive = true; this.fetchData( this.buildingSelected, - this.categorySelected, this.statusSelected + this.categorySelected, + this.statusSelected ); setTimeout(() => { this.spinnerFilterActive = false; @@ -192,7 +202,33 @@ export class DeviceComponent implements OnInit { timeOut: 2000, closeButton: true, }); - this.fetchData(this.buildingSelected, this.categorySelected, this.statusSelected); + this.fetchData( + this.buildingSelected, + this.categorySelected, + this.statusSelected + ); + }, 3000); + } + + exportDevice() { + this.spinnerExportActive = true; + setTimeout(() => { + const columnsToExport = [ + "name", + "building_name", + "room_name", + "watt", + "category_name", + "status_name", + "type_name", + "voltage_name", + ]; + this.tableexcelService.exportAsExcelFileDevice( + this.filteredRows, + "Smart_building_list_device", + columnsToExport + ); + this.spinnerExportActive = false; }, 3000); } } diff --git a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html index 0d40432..e220000 100644 --- a/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html +++ b/src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html @@ -11,7 +11,7 @@
-
+
-
+
-
+
-
+
-
- -
@@ -106,9 +103,22 @@

123123

- +
+ +
@@ -130,9 +140,22 @@

13123

- +
+ +
@@ -154,9 +177,22 @@

13123

- +
+ +