export detail
This commit is contained in:
parent
be40cea2a1
commit
ca30a991ae
|
|
@ -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)
|
||||
</a></span
|
||||
>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -100,8 +100,14 @@ export class TableexcelService {
|
|||
});
|
||||
|
||||
// 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);
|
||||
|
|
@ -133,7 +139,7 @@ export class TableexcelService {
|
|||
"",
|
||||
`Total: ${totalUse} Kwh`,
|
||||
`Total: ${totalEstimationCost}`,
|
||||
""
|
||||
"",
|
||||
];
|
||||
XLSX.utils.sheet_add_aoa(worksheet, [totalsRow], { origin: -1 });
|
||||
|
||||
|
|
@ -150,4 +156,56 @@ export class TableexcelService {
|
|||
});
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,121 @@
|
|||
<div class="modal-body" style="background-color: #252525 !important">
|
||||
<h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
|
||||
<p style="color: #ffffff">Building : {{ dataRow.building }}</p>
|
||||
<!-- <p style="color: #ffffff">Periode : {{ formattedDate }}</p> -->
|
||||
<div class="modal-body" style="background-color: #5b5b5b !important">
|
||||
<h4 style="color: #ffffff; margin-bottom: 20px !important">
|
||||
Comparison of Water and Electricity Costs > {{ dataRow.building }}
|
||||
</h4>
|
||||
|
||||
<div class="card-dashboard">
|
||||
<ngx-datatable
|
||||
class="bootstrap table-bordered"
|
||||
[limit]="10"
|
||||
[rows]="data_cost"
|
||||
[columnMode]="'force'"
|
||||
[headerHeight]="50"
|
||||
[footerHeight]="50"
|
||||
[rowHeight]="50"
|
||||
fxFlex="auto"
|
||||
[scrollbarH]="true"
|
||||
>
|
||||
<ngx-datatable-column name="#" [flexGrow]="0.5" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
|
||||
<p style="color: #ffffff !important">
|
||||
{{ rowIndex + 1 }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Device</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Room</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Category</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
name="estimationCost"
|
||||
[flexGrow]="1"
|
||||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Estimation Cost</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">
|
||||
{{
|
||||
value.toLocaleString("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR"
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Total Kwh</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="watt" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Watt</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Duration</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Price Kwh</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">
|
||||
{{
|
||||
value.toLocaleString("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR"
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Tanggal</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">
|
||||
{{ value | date : "MM/yyyy" }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
</ngx-datatable>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="modal-footer justify-content-between"
|
||||
|
|
@ -31,7 +145,10 @@
|
|||
border-color: #c3f164 !important;
|
||||
border-radius: 10px;
|
||||
"
|
||||
[disabled]="spinnerExportActive"
|
||||
(click)="export()"
|
||||
>
|
||||
Add
|
||||
<i class="la la-spinner spinner" *ngIf="spinnerExportActive"></i>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
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,
|
||||
typeName: item.type_name,
|
||||
voltageName: item.voltage_name,
|
||||
statusName: item.status_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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,4 +98,14 @@ export class CostManagementService {
|
|||
});
|
||||
return this.http.get<any>(url, { headers });
|
||||
}
|
||||
|
||||
getCostDetail(category: any, room: any, period: any): Observable<any> {
|
||||
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<any>(url, { headers });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.06.28.01)</span>
|
||||
<span>(v@2024.06.28.02)</span>
|
||||
</p>
|
||||
<!-- <div class="card-body">
|
||||
<a
|
||||
|
|
|
|||
Loading…
Reference in New Issue