penambahan pop up table dan export chart

2024-08-21 15:29:28 +07:00 · 2024-08-21 15:29:28 +07:00 · 633effdb9b
parent 7a28e52e89
commit 633effdb9b
5 changed files with 239 additions and 92 deletions
--- a/src/app/_services/tableexcel.service.ts
+++ b/src/app/_services/tableexcel.service.ts
@ -208,4 +208,73 @@ export class TableexcelService {
    });
    this.saveAsExcelFile(excelBuffer, excelFileName);
  }
+
+  public exportAsExcelFileMonitoringDetail(
+    json: any[],
+    excelFileName: string,
+    columns: string[],
+    mode: any
+  ): 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);
+    let columnWidths = [];
+    if (mode === "building") {
+      columnWidths = [
+        { wch: 30 },
+        { wch: 40 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+      ];
+    } else if (mode === "floor") {
+      columnWidths = [
+        { wch: 40 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+        { wch: 30 },
+      ];
+    } else if (mode === "room") {
+      columnWidths = [{ wch: 30 }, { wch: 30 }, { wch: 30 }, { wch: 30 }];
+    }
+
+    worksheet["!cols"] = columnWidths;
+
+    let header = [];
+    if (mode === "building") {
+      header = [
+        "Floor",
+        "Room",
+        "Device",
+        "Duration",
+        "Price Kwh",
+        "Estimation Cost",
+      ];
+    } else if (mode === "floor") {
+      header = ["Room", "Device", "Duration", "Price Kwh", "Estimation Cost"];
+    } else if (mode === "room") {
+      header = ["Device", "Duration", "Price Kwh", "Estimation Cost"];
+    }
+
+    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);
+  }
 }
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@ -6,6 +6,8 @@ import { CurrencyPipe } from "@angular/common";
 import { LoginService } from "../../service/login.service";
 import { DeviceService } from "../../service/device.service";
 import { color } from "echarts";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { ModalExportComponent } from "../modal-export/modal-export.component";

@Component({
  selector: "app-detail",
@ -66,6 +68,7 @@ export class DetailComponent {
    private currencyPipe: CurrencyPipe,
    private router: Router,
    private authService: LoginService,
+    private modalService: NgbModal,
  ) {}

  get formattedSummaryCost(): string {
@ -345,6 +348,27 @@ export class DetailComponent {

  onChartClick(params) {
    console.log(params);
+    const modalRef = this.modalService.open(ModalExportComponent, {
+      size: "xl",
+      centered: true,
+    });
+    modalRef.componentInstance.dataIndex = params.dataIndex;
+    modalRef.componentInstance.buildingId = this.buildingId;
+    modalRef.componentInstance.floorId = this.floorId;
+    modalRef.componentInstance.roomId = this.roomId;
+    modalRef.componentInstance.mode = this.mode;
+
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          console.log(result);
+          
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
    
    // Show popup with details
    // alert(`Day: ${params.name}\nKWH Consumption: ${params.value}`);
--- a/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html
+++ b/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html
@ -1,9 +1,17 @@
-<div class="modal-body" style="background-color: #FBFBFB !important">
+<div class="modal-body" style="background-color: #fbfbfb !important">
  <h4 style="color: #242222; margin-bottom: 20px !important">
-    Comparison of Water and Electricity Costs > {{ dataRow.building }}
+    <div *ngIf="buildingOnly">
+      <strong>{{ data_cost[0].BuildingName }}</strong>
+    </div>
+    <div *ngIf="floorOnly">
+      {{data_cost[0].BuildingName}} > <strong>{{ data_cost[0].floorName }}</strong>
+    </div>
+    <div *ngIf="roomOnly">
+      {{data_cost[0].BuildingName}} > {{data_cost[0].floorName}} > <strong>{{ data_cost[0].roomName }}</strong>
+    </div>
  </h4>
-  <p style="color: #242222">Room : {{ dataRow?.roomName }}</p>
-  <p style="color: #242222">Category : {{ dataRow?.categoryName }}</p>
+  <!-- <p style="color: #242222">Room : dfd</p>
+  <p style="color: #242222">Category : gdfg</p> -->

  <div class="card-dashboard">
    <ngx-datatable
@ -24,7 +32,7 @@
          </p>
        </ng-template>
      </ngx-datatable-column>
-      <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
+      <!-- <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
        <ng-template ngx-datatable-header-template>
          <span style="color: #242222 !important">Tanggal</span>
        </ng-template>
@ -33,7 +41,25 @@
            {{ value | date : "dd/MM/yyyy" }}
          </p>
        </ng-template>
+      </ngx-datatable-column> -->
+      <ngx-datatable-column name="floorName" [flexGrow]="1" [minWidth]="90" *ngIf="buildingOnly">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #242222 !important">Floor</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #242222 !important">{{ value }}</p>
+        </ng-template>
      </ngx-datatable-column>
+
+      <ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90" *ngIf="buildingOnly || floorOnly">
+        <ng-template ngx-datatable-header-template>
+          <span style="color: #242222 !important">Room</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #242222 !important">{{ value }}</p>
+        </ng-template>
+      </ngx-datatable-column>
+
      <ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
        <ng-template ngx-datatable-header-template>
          <span style="color: #242222 !important">Device</span>
@ -42,22 +68,41 @@
          <p style="color: #242222 !important">{{ value }}</p>
        </ng-template>
      </ngx-datatable-column>
-      <ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
+
+      <ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
        <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Room</span>
+          <span style="color: #242222 !important">Duration</span>
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          <p style="color: #242222 !important">{{ value }}</p>
        </ng-template>
      </ngx-datatable-column>
-      <ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
+
+      <!-- <ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
        <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Category</span>
+          <span style="color: #242222 !important">Price Kwh</span>
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          <p style="color: #242222 !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: #242222 !important">Price Kwh</span>
+        </ng-template>
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <p style="color: #242222 !important">
+            {{
+              value.toLocaleString("id-ID", {
+                style: "currency",
+                currency: "IDR"
+              })
+            }}
+          </p>
+        </ng-template>
      </ngx-datatable-column>
+
      <ngx-datatable-column
        name="estimationCost"
        [flexGrow]="1"
@ -77,51 +122,12 @@
          </p>
        </ng-template>
      </ngx-datatable-column>
-      <ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
-        <ng-template ngx-datatable-header-template>
-          <span style="color: #242222 !important">Total Kwh</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !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: #242222 !important">Watt</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !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: #242222 !important">Duration</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !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: #242222 !important">Price Kwh</span>
-        </ng-template>
-        <ng-template let-value="value" ngx-datatable-cell-template>
-          <p style="color: #242222 !important">
-            {{
-              value.toLocaleString("id-ID", {
-                style: "currency",
-                currency: "IDR"
-              })
-            }}
-          </p>
-        </ng-template>
-      </ngx-datatable-column>
    </ngx-datatable>
  </div>
 </div>
 <div
  class="modal-footer justify-content-between"
-  style="background-color: #FBFBFB !important; border-style: none !important"
+  style="background-color: #fbfbfb !important; border-style: none !important"
 >
  <button
    type="button"
@ -129,7 +135,7 @@
    style="
      color: #242222;
      width: 25%;
-      background-color: #FBFBFB !important;
+      background-color: #fbfbfb !important;
      border-color: #242222 !important;
      border-radius: 10px;
    "
@ -143,8 +149,8 @@
    style="
      color: #242222 !important;
      width: 25%;
-      background-color: #DDE1E6 !important;
-      border-color: #DDE1E6 !important;
+      background-color: #dde1e6 !important;
+      border-color: #dde1e6 !important;
      border-radius: 10px;
    "
    [disabled]="spinnerExportActive"
--- a/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.ts
+++ b/src/app/content/hemat-app/monitoring/modal-export/modal-export.component.ts
@ -1,9 +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";
 import { LoginService } from "../../service/login.service";
+import { BuildingService } from "../../service/monitoring-api.service";

@Component({
  selector: "app-modal-export",
@ -11,8 +10,16 @@ import { LoginService } from "../../service/login.service";
  styleUrls: ["./modal-export.component.css"],
 })
 export class ModalExportComponent {
-  @Input() buildingId: number;
-  @Input() dataRow: any;
+  @Input() buildingId: any = 0;
+  @Input() dataIndex: any = 0;
+  @Input() floorId: any = 0;
+  @Input() roomId: any = 0;
+  @Input() mode: any = "";
+
+  buildingOnly = false;
+  floorOnly = false;
+  roomOnly = false;
+
  data: any;
  filteredRows: any[];
  data_device: any[];
@ -24,47 +31,62 @@ export class ModalExportComponent {
  spinnerExportActive = false;
  constructor(
    public activeModal: NgbActiveModal,
-    private costService: CostManagementService,
    private tableexcelService: TableexcelService,
-    private authService: LoginService
+    private authService: LoginService,
+    private monitoringService: BuildingService
  ) {}

  ngOnInit() {
    this.authService.startTokenCheck();
    this.authService.startTrackingActivity();
-    const dateRow = this.convertToUTC7(this.dataRow.endDate)
-    this.formattedEndDate = dateRow.slice(0, 7);
+    this.fetchData();
  }

  ngAfterViewInit(): void {
-    console.log(this.dataRow);
-    this.fetchData(
-      this.dataRow.categoryId,
-      this.dataRow.roomId,
-      this.formattedEndDate
-    );
+    if (this.buildingId !== 0 && this.floorId === 0 && this.roomId === 0) {
+      this.buildingOnly = true;
+      this.floorOnly = false;
+      this.roomOnly = false;
+    } else if (
+      this.buildingId !== 0 &&
+      this.floorId !== 0 &&
+      this.roomId === 0
+    ) {
+      this.buildingOnly = false;
+      this.floorOnly = true;
+      this.roomOnly = false;
+    } else if (
+      this.buildingId !== 0 &&
+      this.floorId !== 0 &&
+      this.roomId !== 0
+    ) {
+      this.buildingOnly = false;
+      this.floorOnly = false;
+      this.roomOnly = true;
+    }
  }

-  fetchData(category, room, period) {
-    this.costService
-      .getCostDetail(category, room, period)
+  fetchData() {
+    this.monitoringService
+      .getDetailChart(
+        this.dataIndex + 1,
+        this.buildingId,
+        this.floorId,
+        this.roomId
+      )
      .subscribe((response) => {
        this.dataExport = response.data;
-        console.log(this.dataExport);
        this.data_cost = response.data.map((item) => ({
-          deviceName: item.device_name,
+          BuildingName: item.building_name,
+          floorName: item.floor_name,
          roomName: item.room_name,
-          categoryName: item.category_name,
-          estimationCost: item.estimation_cost,
-          totalKwh: item.total_kwh,
-          watt: item.watt,
+          deviceName: item.device_name,
          duration: item.duration,
          priceKwh: item.price_kwh,
-          // periode: item.periode,
-          periode: this.convertToUTC7(item.periode)
+          estimationCost: item.estimation_cost,
+          // periode: this.convertToUTC7(item.periode)
        }));
        console.log(this.data_cost);
-        
      });
  }

@ -80,21 +102,42 @@ export class ModalExportComponent {
  export() {
    this.spinnerExportActive = true;
    setTimeout(() => {
-      const columnsToExport = [
-        "periode",
-        "deviceName",
+      let columnsToExport = [];
+      let exportText = "";
+      if (this.mode === "building") {
+        columnsToExport = [
+          "floorName",
          "roomName",
-        "categoryName",
-        "estimationCost",
-        "totalKwh",
-        "watt",
+          "deviceName",
          "duration",
          "priceKwh",
+          "estimationCost",
        ];
-      this.tableexcelService.exportAsExcelFileManageDetail(
+        exportText = "export_detail_monitoring_building";
+      } else if (this.mode === "floor") {
+        columnsToExport = [
+          "roomName",
+          "deviceName",
+          "duration",
+          "priceKwh",
+          "estimationCost",
+        ];
+        exportText = "export_detail_monitoring_floor";
+      } else if (this.mode === "room") {
+        columnsToExport = [
+          "deviceName",
+          "duration",
+          "priceKwh",
+          "estimationCost",
+        ];
+        exportText = "export_detail_monitoring_room";
+      }
+
+      this.tableexcelService.exportAsExcelFileMonitoringDetail(
        this.data_cost,
-        "export_detail_cost_management",
-        columnsToExport
+        exportText,
+        columnsToExport,
+        this.mode
      );
      this.spinnerExportActive = false;
      this.activeModal.close("Export completed");
--- a/src/app/content/hemat-app/service/monitoring-api.service.ts
+++ b/src/app/content/hemat-app/service/monitoring-api.service.ts
@ -160,4 +160,9 @@ export class BuildingService {
  getIconData(): Observable<any> {
    return this.http.get(this.loadDataIcon, httpOptions);
  }
+
+  getDetailChart(date_index: any, building_id: any, floor_id: any, room_id: any): Observable<any> {
+    return this.get<any>(`/dashboard/chartKwhWater/detail?date_index=${date_index}&building_id=${building_id}&floor_id=${floor_id}&room_id=${room_id}`);
+  }
+
 }