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

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

@ -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() {}
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);
}
}

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-content">
<div class="card-body">
<div class="row mb-2">
<div class="col-2">
<div class="row">
<div class="col-3">
<div class="form-group">
<ng-select
class="select-custom"
@ -25,7 +25,7 @@
</ng-select>
</div>
</div>
<div class="col-2">
<div class="col-3">
<div class="form-group">
<ng-select
class="select-custom"
@ -39,7 +39,7 @@
</ng-select>
</div>
</div>
<div class="col-2">
<div class="col-3">
<div class="form-group">
<ng-select
class="select-custom"
@ -53,8 +53,7 @@
</ng-select>
</div>
</div>
<div class="col-2 text-left">
<div class="col-3 text-left">
<div class="d-flex">
<button
type="button"
@ -79,10 +78,7 @@
</button>
</div>
</div>
<div class="col-2"></div>
</div>
<div class="card-dashboard"></div>
</div>
</div>
</div>

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

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

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

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