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

perbaikan UI device dan penambahan export

This commit is contained in:
Fuzi_fauzia 2024-06-23 03:09:40 +07:00
parent 25559ee299
commit efaf30d55e
5 changed files with 244 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/_services/tableexcel.service.ts
View File

@ -1,37 +1,87 @@
import { Injectable } from '@angular/core'; import { Injectable } from "@angular/core";
import * as FileSaver from 'file-saver'; import * as FileSaver from "file-saver";
import * as XLSX from 'xlsx'; import * as XLSX from "xlsx";
const EXCEL_TYPE = const EXCEL_TYPE =
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8";
const EXCEL_EXTENSION = '.xlsx'; const EXCEL_EXTENSION = ".xlsx";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: "root",
}) })
export class TableexcelService { export class TableexcelService {
constructor() { } constructor() {}
public exportAsExcelFile(json: any[], excelFileName: string): void { public exportAsExcelFile(json: any[], excelFileName: string): void {
const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json); const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
console.log('worksheet', worksheet); console.log("worksheet", worksheet);
const workbook: XLSX.WorkBook = { const workbook: XLSX.WorkBook = {
Sheets: { data: worksheet }, Sheets: { data: worksheet },
SheetNames: ['data'] SheetNames: ["data"],
}; };
const excelBuffer: any = XLSX.write(workbook, { const excelBuffer: any = XLSX.write(workbook, {
bookType: 'xlsx', bookType: "xlsx",
type: 'array' type: "array",
}); });
this.saveAsExcelFile(excelBuffer, excelFileName); this.saveAsExcelFile(excelBuffer, excelFileName);
} }
private saveAsExcelFile(buffer: any, fileName: string): void { private saveAsExcelFile(buffer: any, fileName: string): void {
const data: Blob = new Blob([buffer], { const data: Blob = new Blob([buffer], {
type: EXCEL_TYPE type: EXCEL_TYPE,
}); });
FileSaver.saveAs( FileSaver.saveAs(
data, 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);
}
} }

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

@ -10,8 +10,8 @@
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #252525 !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="row mb-2"> <div class="row">
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -25,7 +25,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -39,7 +39,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -53,8 +53,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-3 text-left">
<div class="col-2 text-left">
<div class="d-flex"> <div class="d-flex">
<button <button
type="button" type="button"
@ -79,10 +78,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="col-2"></div>
</div> </div>
<div class="card-dashboard"></div>
</div> </div>
</div> </div>
</div> </div>

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

@ -7,10 +7,7 @@
<section id="configuration"> <section id="configuration">
<div class="row"> <div class="row">
<div class="col-lg-4 col-12"> <div class="col-lg-4 col-12">
<div <div class="card" style="background-color: #252525 !important">
class="card pull-up"
style="background-color: #252525 !important"
>
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="media d-flex"> <div class="media d-flex">
@ -23,9 +20,22 @@
</h3> </h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<i <div
class="feather ft-zap primary font-large-2 float-right" style="
></i> background-color: #414f2b;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="ri-device-line primary font-large-1 float-right"
style="color: #bef264 !important"
></i>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -34,7 +44,7 @@
</div> </div>
<div class="col-lg-4 col-12"> <div class="col-lg-4 col-12">
<div <div
class="card pull-up" class="card"
style="background-color: #252525 !important" style="background-color: #252525 !important"
> >
<div class="card-content"> <div class="card-content">
@ -47,9 +57,22 @@
<h3 style="color: #ffffff !important">{{ totalOn }}</h3> <h3 style="color: #ffffff !important">{{ totalOn }}</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<i <div
class="feather ft-wifi success font-large-2 float-right" style="
></i> background-color: #414f2b;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="feather ft-wifi primary font-large-1 float-right"
style="color: #bef264 !important"
></i>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -58,7 +81,7 @@
</div> </div>
<div class="col-lg-4 col-12"> <div class="col-lg-4 col-12">
<div <div
class="card pull-up" class="card"
style="background-color: #252525 !important" style="background-color: #252525 !important"
> >
<div class="card-content"> <div class="card-content">
@ -71,9 +94,22 @@
<h3 style="color: #ffffff !important">{{ totalOff }}</h3> <h3 style="color: #ffffff !important">{{ totalOff }}</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<i <div
class="feather ft-wifi-off danger font-large-2 float-right" style="
></i> background-color: #414f2b;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="feather ft-wifi-off primary font-large-1 float-right"
style="color: #bef264 !important"
></i>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -90,7 +126,7 @@
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="row mb-2"> <div class="row mb-2">
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -104,7 +140,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -118,7 +154,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -132,8 +168,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-3 text-left">
<div class="col-2 text-left">
<div class="d-flex"> <div class="d-flex">
<button <button
type="button" type="button"
@ -158,11 +193,11 @@
</button> </button>
</div> </div>
</div> </div>
<div class="col-2"></div> </div>
<div class="row mb-2">
<div class="col-2 text-right"> <div class="col-6 col-md-3 mb-2">
<button <button
class="btn btn-secondary" class="btn btn-secondary btn-block"
[disabled]="spinnerActive" [disabled]="spinnerActive"
(click)="addDevice()" (click)="addDevice()"
style=" style="
@ -175,11 +210,34 @@
class="la la-spinner spinner" class="la la-spinner spinner"
*ngIf="spinnerActive" *ngIf="spinnerActive"
></i> ></i>
<i class="feather ft-plus" *ngIf="!spinnerActive"></i <i class="feather ft-plus" *ngIf="!spinnerActive"></i>
>&nbsp; &nbsp;
<span style="font-weight: 600">Synchronization</span> <span style="font-weight: 600">Synchronization</span>
</button> </button>
</div> </div>
<div class="col-6 col-md-3 mb-2">
<button
class="btn btn-secondary btn-block"
[disabled]="spinnerExportActive"
(click)="exportDevice()"
style="
background-color: #bef264 !important;
border-color: #bef264 !important;
color: #000000 !important;
"
>
<i
class="la la-spinner spinner"
*ngIf="spinnerExportActive"
></i>
<i
class="ri-export-fill"
*ngIf="!spinnerExportActive"
></i>
&nbsp;
<span style="font-weight: 600">Export</span>
</button>
</div>
</div> </div>
<div class="card-dashboard"> <div class="card-dashboard">

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

@ -6,6 +6,9 @@ import { ActivatedRoute, Router } from "@angular/router";
import { BuildingService } from "../service/monitoring-api.service"; import { BuildingService } from "../service/monitoring-api.service";
import { DeviceService } from "../service/device.service"; import { DeviceService } from "../service/device.service";
import { ToastrService } from "ngx-toastr"; 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({ @Component({
selector: "app-device", selector: "app-device",
@ -31,6 +34,7 @@ export class DeviceComponent implements OnInit {
rows: any = []; rows: any = [];
public breadcrumb: any; public breadcrumb: any;
spinnerActive: boolean = false; spinnerActive: boolean = false;
spinnerExportActive: boolean = false;
singlebasicSelected: any; singlebasicSelected: any;
@ -39,7 +43,8 @@ export class DeviceComponent implements OnInit {
private router: Router, private router: Router,
private monitoringApiService: BuildingService, private monitoringApiService: BuildingService,
private deviceService: DeviceService, private deviceService: DeviceService,
private toastr: ToastrService private toastr: ToastrService,
private tableexcelService: TableexcelService
) {} ) {}
ngOnInit() { ngOnInit() {
@ -59,7 +64,11 @@ export class DeviceComponent implements OnInit {
}; };
this.storedData = JSON.parse(localStorage.getItem("currentUser")); this.storedData = JSON.parse(localStorage.getItem("currentUser"));
this.buildingSelected = this.storedData.buildingId; this.buildingSelected = this.storedData.buildingId;
this.fetchData(this.buildingSelected, this.categorySelected, this.statusSelected); this.fetchData(
this.buildingSelected,
this.categorySelected,
this.statusSelected
);
this.dataListMaster(); this.dataListMaster();
this.dataListBuilding(); this.dataListBuilding();
} }
@ -115,7 +124,8 @@ export class DeviceComponent implements OnInit {
this.spinnerFilterActive = true; this.spinnerFilterActive = true;
this.fetchData( this.fetchData(
this.buildingSelected, this.buildingSelected,
this.categorySelected, this.statusSelected this.categorySelected,
this.statusSelected
); );
setTimeout(() => { setTimeout(() => {
this.spinnerFilterActive = false; this.spinnerFilterActive = false;
@ -192,7 +202,33 @@ export class DeviceComponent implements OnInit {
timeOut: 2000, timeOut: 2000,
closeButton: true, 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); }, 3000);
} }
} }

68
src/app/content/hemat-app/monitoring/surveillance/surveillance.component.html
View File

@ -11,7 +11,7 @@
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -25,7 +25,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -39,7 +39,7 @@
</ng-select> </ng-select>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-3">
<div class="form-group"> <div class="form-group">
<ng-select <ng-select
class="select-custom" class="select-custom"
@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<div class="col-2 text-left"> <div class="col-3 text-left">
<div class="d-flex"> <div class="d-flex">
<button <button
type="button" type="button"
@ -79,10 +79,7 @@
</button> </button>
</div> </div>
</div> </div>
<div class="col-2"></div>
</div> </div>
<div class="card-dashboard"></div>
</div> </div>
</div> </div>
</div> </div>
@ -106,9 +103,22 @@
<h3 style="color: #ffffff !important">123123</h3> <h3 style="color: #ffffff !important">123123</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<i <div
class="feather ft-zap primary font-large-2 float-right" style="
></i> background-color: #414F2B;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="ri-dv-fill font-large-1 blue-grey d-block"
style="color: #bef264 !important"
></i>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -130,9 +140,22 @@
<h3 style="color: #ffffff !important">13123</h3> <h3 style="color: #ffffff !important">13123</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<i <div
class="feather ft-wifi success font-large-2 float-right" style="
></i> background-color: #414F2B;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="ri-live-fill font-large-1 blue-grey d-block"
style="color: #bef264 !important"
></i>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -154,9 +177,22 @@
<h3 style="color: #ffffff !important">13123</h3> <h3 style="color: #ffffff !important">13123</h3>
</div> </div>
<div class="align-self-center"> <div class="align-self-center">
<i <div
class="feather ft-wifi-off danger font-large-2 float-right" style="
></i> background-color: #414F2B;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="ri-video-off-fill font-large-1 blue-grey d-block"
style="color: #bef264 !important"
></i>
</div>
</div> </div>
</div> </div>
</div> </div>