From df1cd2339eef560ba972cd9dc13b6b7a05829066 Mon Sep 17 00:00:00 2001
From: Fuzi_fauzia <fuzi.fauzia@allbestsistem.com>
Date: Tue, 23 Jul 2024 13:25:47 +0700
Subject: [PATCH] perbaikan master room dan detail monitoring

---
 src/app/_layout/footer/footer.component.html  |   2 +-
 .../master-room/master-room.component.html    |  16 +++
 .../monitoring/detail/detail.component.html   |  96 +++++++------
 .../monitoring/detail/detail.component.ts     | 127 +++++++++---------
 src/app/login/login.component.html            |   2 +-
 5 files changed, 135 insertions(+), 108 deletions(-)

diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index b9b8ae5..ac2eddd 100644
--- a/src/app/_layout/footer/footer.component.html
+++ b/src/app/_layout/footer/footer.component.html
@@ -13,7 +13,7 @@
         href="https://allbestsistem.com/"
         target="_blank"
         style="background-color: #ffffff !important;"
-        >Smart Building Management Systems (V@2024-07-22.03)
+        >Smart Building Management Systems (V@2024-07-23.01)
       </a></span
     >
   </p>
diff --git a/src/app/content/hemat-app/master/master-room/master-room.component.html b/src/app/content/hemat-app/master/master-room/master-room.component.html
index 0fc7a26..406a02c 100644
--- a/src/app/content/hemat-app/master/master-room/master-room.component.html
+++ b/src/app/content/hemat-app/master/master-room/master-room.component.html
@@ -79,6 +79,22 @@
                         </ng-template>
                       </ngx-datatable-column>
 
+                      <ngx-datatable-column
+                        name="code"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span class="style-custom-label">Code Room</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                        <p class="style-custom-label">{{ value }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+
                       <ngx-datatable-column
                         name="description"
                         [flexGrow]="1"
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html
index fa5d110..d84e2f7 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content" style="background-color: #FBFBFB;">
+<div class="app-content content" style="background-color: #fbfbfb">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -6,20 +6,25 @@
     <div class="content-body">
       <div class="row">
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #DDE1E6 !important">
+          <div class="card" style="background-color: #dde1e6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
                     <h5 class="custom-label">Kwh Consumption</h5>
                     <h3 class="custom-value">
-                      {{ topCard?.kwh_consumption ? topCard?.kwh_consumption.toFixed(1) : 0 }} Kwh
+                      {{
+                        topCard?.kwh_consumption
+                          ? topCard?.kwh_consumption.toFixed(1)
+                          : 0
+                      }}
+                      Kwh
                     </h3>
                   </div>
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #37A647;
+                        background-color: #37a647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -40,7 +45,7 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #DDE1E6 !important">
+          <div class="card" style="background-color: #dde1e6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
@@ -51,7 +56,7 @@
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #37A647;
+                        background-color: #37a647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -72,7 +77,7 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #DDE1E6 !important">
+          <div class="card" style="background-color: #dde1e6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
@@ -83,7 +88,7 @@
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #37A647;
+                        background-color: #37a647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -104,7 +109,7 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card" style="background-color: #DDE1E6 !important">
+          <div class="card" style="background-color: #dde1e6 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
@@ -112,14 +117,17 @@
                     <h5 class="custom-label">Summary Cost</h5>
                     <h3 class="custom-value">
                       {{
-                        summaryCost?.summary_cost ? (summaryCost?.summary_cost | currency : "Rp " : "symbol" : "1.0-0") : 0
+                        summaryCost?.summary_cost
+                          ? (summaryCost?.summary_cost
+                            | currency : "Rp " : "symbol" : "1.0-0")
+                          : 0
                       }}
                     </h3>
                   </div>
                   <div class="align-self-center">
                     <div
                       style="
-                        background-color: #37A647;
+                        background-color: #37a647;
                         border-radius: 50%;
                         width: 50px;
                         height: 50px;
@@ -142,34 +150,27 @@
       </div>
       <div class="row">
         <div class="col-12">
-          <div class="card" style="background-color: #DDE1E6 !important">
-            <div class="card-content">
-              <div class="card-body">
-                <canvas
-                  style="
-                    background-color: #DDE1E6 !important;
-                    border-color: #DDE1E6;
-                    color: #242222;
-                  "
-                  class="barchart"
-                  height="400"
-                  width="1900"
-                  baseChart
-                  [datasets]="barChartData"
-                  [labels]="barChartLabels"
-                  [options]="barChartOptions"
-                  [legend]="barChartLegend"
-                  chartType="bar"
-                >
-                </canvas>
-              </div>
+          <div class="card" style="background-color: #dde1e6 !important">
+            <div class="card-body">
+              <div
+                echarts
+                [options]="chartOptionBar"
+                class="echart-container"
+                style="
+                  height: 400px !important;
+                  display: block;
+                "
+              ></div>
             </div>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col-xl-4 col-md-6 col-12">
-          <div class="card custom-card-temp" style="background-color: #DDE1E6 !important">
+          <div
+            class="card custom-card-temp"
+            style="background-color: #dde1e6 !important"
+          >
             <div class="card-header custom-style-header">
               <h4 class="card-title text-center text-custom-label">
                 Temperature
@@ -203,17 +204,22 @@
               </h4>
             </div>
             <div class="card-body">
-              <div echarts [options]="chartOption" class="echart-container"></div>
+              <div
+                echarts
+                [options]="chartOption"
+                class="echart-container"
+              ></div>
             </div>
           </div>
         </div>
-        
+
         <div class="col-xl-4 col-md-6 col-12">
-          <div class="card custom-card-temp" style="background-color: #DDE1E6 !important">
+          <div
+            class="card custom-card-temp"
+            style="background-color: #dde1e6 !important"
+          >
             <div class="card-header custom-style-header">
-              <h4 class="card-title text-center text-custom-label">
-                Humidity
-              </h4>
+              <h4 class="card-title text-center text-custom-label">Humidity</h4>
             </div>
             <div class="card-body">
               <div class="days-container">
@@ -240,14 +246,20 @@
         <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
           <div
             class="card"
-            style="background-color: transparent !important; border: none; box-shadow: none;"
+            style="
+              background-color: transparent !important;
+              border: none;
+              box-shadow: none;
+            "
           >
             <div class="card-content">
               <div class="card-body clearfix">
                 <div class="media align-items-stretch mb-2">
                   <div class="align-self-center">
                     <i
-                      class="{{item.icon}} background-round info font-large-1 mr-2"
+                      class="{{
+                        item.icon
+                      }} background-round info font-large-1 mr-2"
                       style="color: #ffffff !important"
                     ></i>
                   </div>
@@ -282,7 +294,7 @@
           <button
             class="btn btn-primary"
             style="
-              background-color: #37A647 !important;
+              background-color: #37a647 !important;
               color: #ffffff !important;
               border-radius: 10px;
               font-family: 'Open Sans', sans-serif;
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
index f5a9c30..d52a9de 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -5,6 +5,7 @@ import { EnergyMonitoringService } from "../../service/energy-monitoring.service
 import { CurrencyPipe } from "@angular/common";
 import { LoginService } from "../../service/login.service";
 import { DeviceService } from "../../service/device.service";
+import { color } from "echarts";
 
 @Component({
   selector: "app-detail",
@@ -35,6 +36,7 @@ export class DetailComponent {
   currentDate: string;
   currentTime: string;
   chartOption: any;
+  chartOptionBar: any;
 
   // chart bar
   public barChartOptions: ChartOptions = {
@@ -56,46 +58,8 @@ export class DetailComponent {
   public barChartLabels: string[] = [];
   public barChartType: ChartType = "bar";
   public barChartLegend = true;
-  public barChartData: ChartDataset[] = [
-    {
-      data: [],
-      label: "KWH Consumption",
-      backgroundColor: "#37A647",
-      borderColor: "#37A647",
-      pointBackgroundColor: "#37A647",
-      pointBorderColor: "#37A647",
-      pointHoverBackgroundColor: "#ffffff",
-      pointHoverBorderColor: "#37A647",
-      barPercentage: 0.5,
-      categoryPercentage: 0.5,
-    },
-    {
-      type: "line",
-      data: [],
-      label: "Kwh Average",
-      backgroundColor: "#ffffff",
-      borderColor: "#ffffff",
-      pointBackgroundColor: "#ffffff",
-      pointBorderColor: "#ffffff",
-      pointHoverBackgroundColor: "#ffffff",
-      pointHoverBorderColor: "#ffffff",
-    },
-    // {
-    //   type: "line",
-    //   data: [],
-    //   label: "Weekly Kwh Average",
-    //   backgroundColor: "rgba(0,255,255,0)",
-    //   borderColor: "#ffffff",
-    //   fill: true,
-    //   pointBorderColor: "#ffffff",
-    //   pointBackgroundColor: "#FFF",
-    //   pointBorderWidth: 2,
-    //   pointHoverBorderWidth: 2,
-    //   pointRadius: 4,
-    //   tension: 0.3,
-    //   spanGaps: true,
-    // },
-  ];
+  public barChartData: number[] = [];
+  public barChartData2: number[] = [];
   //..........................
 
   // integrasi
@@ -150,12 +114,10 @@ export class DetailComponent {
         this.getAirQualityData();
       }
     });
-
-    
   }
 
-  getAirQualityData(){
-    this.valueAirQuality = Math.floor(Math.random() * 501)
+  getAirQualityData() {
+    this.valueAirQuality = Math.floor(Math.random() * 501);
     this.chartOption = {
       series: [
         {
@@ -171,12 +133,12 @@ export class DetailComponent {
             lineStyle: {
               width: 20,
               color: [
-                [1/6, "#6BD67C"],       // 0 - 50: Green
-                [2/6, "#A2D856"],       // 51 - 100: Light Green
-                [3/6, "#FFE45E"],       // 101 - 150: Yellow
-                [4/6, "#FFA644"],       // 151 - 200: Orange
-                [5/6, "#FF6E76"],       // 201 - 300: Light Red
-                [6/6, "#E768A7"]        // 301 - 500: Purple
+                [1 / 6, "#6BD67C"], // 0 - 50: Green
+                [2 / 6, "#A2D856"], // 51 - 100: Light Green
+                [3 / 6, "#FFE45E"], // 101 - 150: Yellow
+                [4 / 6, "#FFA644"], // 151 - 200: Orange
+                [5 / 6, "#FF6E76"], // 201 - 300: Light Red
+                [6 / 6, "#E768A7"], // 301 - 500: Purple
               ],
             },
           },
@@ -323,24 +285,61 @@ export class DetailComponent {
       .getDashboardChartKwhWater(buildingId)
       .subscribe((res) => {
         this.chartKwhWater = res.data;
-        this.barChartData[0].data = [];
+        console.log(this.chartKwhWater);
         this.chartKwhWater.forEach((entry) => {
-          this.barChartData[1].data.push(entry.kwh);
-          this.barChartData[0].data.push(entry.cost);
+          this.barChartData.push(entry.kwh.toFixed(1));
+          this.barChartData2.push(entry.cost);
           this.barChartLabels.push(entry.day);
         });
 
-        // const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
-        // let weekIndex = 0;
-        // console.log(this.barChartData[0].data);
-
-        // for (let i = 0; i < this.barChartData[0].data.length; i++) {
-        //   if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
-        //     this.barChartData[1].data[i] = weeklyKwh[weekIndex++];
-        //   } else {
-        //     this.barChartData[1].data[i] = null;
-        //   }
-        // }
+        this.chartOptionBar = {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+          legend: {},
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: [
+            {
+              type: "category",
+              data: this.barChartLabels,
+            },
+          ],
+          yAxis: [
+            {
+              type: "value",
+            },
+          ],
+          series: [
+            {
+              name: "KWH Consumption",
+              type: "bar",
+              color: "#ffffff",
+              stack: "Ad",
+              emphasis: {
+                focus: "series",
+              },
+              data: this.barChartData,
+            },
+            {
+              name: "Cost Consumption",
+              type: "bar",
+              stack: "Ad",
+              color: "#37a647",
+              emphasis: {
+                focus: "series",
+              },
+              data: this.barChartData2,
+            },
+          ],
+        };
       });
   }
 
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index b779213..36eee82 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -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.07.22.03)</span>
+                  <span>(v@2024.07.23.01)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a