penambahan temperature, air quality dan humidity

2024-07-17 15:40:55 +07:00 · 2024-07-17 15:40:55 +07:00 · c337a8941c
parent bd1cd42ed6
commit c337a8941c
6 changed files with 293 additions and 9 deletions
--- 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-16.01)
+        >Smart Building Management Systems (V@2024-07-17.02)
      </a></span
    >
  </p>
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.css
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.css
@ -105,3 +105,72 @@ canvas {
  font-weight: 800;
  font-size: 24px;
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.custom-style-header{
+  background-color: #DDE1E6 !important;
+  border-bottom: 3px solid #242222;
+}
+
+/* day */
+.days-container {
+  display: flex;
+  justify-content: space-around;
+}
+
+.day {
+  font-family: "Nunito Sans", sans-serif;
+  color: #242222;
+  padding: 2px;
+  border-radius: 5px;
+}
+
+.current-day {
+  color: #37A647;
+}
+
+.temperature-container {
+  text-align: center;
+  margin-top: 50px;
+  height: 100px;
+}
+
+.temperature {
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 36px;
+  font-weight: bold;
+  color: #242222;
+}
+
+.date-time-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.current-date,
+.current-time {
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 16px;
+  color: #242222;
+}
+
+.custom-card-temp{
+  height: 300px;
+}
+
+/* echart */
+.custom-card-air {
+  background-color: #dde1e6 !important;
+}
+
+.echart-container {
+  height: 200px; /* Tinggi awal untuk menentukan tinggi chart */
+  width: 100%; /* Lebar maksimal */
+}
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@ -168,6 +168,75 @@
          </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-header custom-style-header">
+              <h4 class="card-title text-center text-custom-label">
+                Temperature
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="days-container">
+                <div
+                  *ngFor="let day of days"
+                  [ngClass]="{ 'current-day': day.isToday }"
+                  class="day"
+                >
+                  {{ day.name }}
+                </div>
+              </div>
+              <div class="temperature-container">
+                <span class="temperature">{{ roomTemperature }}°C</span>
+              </div>
+              <div class="date-time-container">
+                <span class="current-time">Time :{{ currentTime }}</span>
+                <span class="current-date">{{ currentDate }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-md-6 col-12">
+          <div class="card custom-card-air">
+            <div class="card-header custom-style-header">
+              <h4 class="card-title text-center text-custom-label">
+                Air Quality
+              </h4>
+            </div>
+            <div class="card-body">
+              <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-header custom-style-header">
+              <h4 class="card-title text-center text-custom-label">
+                Humidity
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="days-container">
+                <div
+                  *ngFor="let day of days"
+                  [ngClass]="{ 'current-day': day.isToday }"
+                  class="day"
+                >
+                  {{ day.name }}
+                </div>
+              </div>
+              <div class="temperature-container">
+                <span class="temperature">{{ roomHumidity }}%</span>
+              </div>
+              <div class="date-time-container">
+                <span class="current-time">Time :{{ currentTime }}</span>
+                <span class="current-date">{{ currentDate }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
      <div class="row">
        <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
          <div
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@ -4,6 +4,7 @@ import { ChartOptions, ChartType, ChartDataset } from "chart.js";
 import { EnergyMonitoringService } from "../../service/energy-monitoring.service";
 import { CurrencyPipe } from "@angular/common";
 import { LoginService } from "../../service/login.service";
+import { DeviceService } from "../../service/device.service";

@Component({
  selector: "app-detail",
@ -18,6 +19,24 @@ export class DetailComponent {
  donutChart1: any;
  donutChart2: any;

+  // temperature
+  days = [
+    { name: "Sun", isToday: false },
+    { name: "Mon", isToday: false },
+    { name: "Tue", isToday: false },
+    { name: "Wed", isToday: false },
+    { name: "Thu", isToday: false },
+    { name: "Fri", isToday: false },
+    { name: "Sat", isToday: false },
+  ];
+  roomTemperature: number = 0;
+  roomHumidity: number = 0;
+  valueAirQuality: number = 0;
+  currentDate: string;
+  currentTime: string;
+  // temperature
+  chartOption: any;
+
  dataChart = {
    donut: {
      series: [20, 20, 20, 20, 20],
@ -34,7 +53,7 @@ export class DetailComponent {
  public barChartOptions: ChartOptions = {
    responsive: true,
    animation: {
-      duration: 0 
+      duration: 0,
    },
    scales: {
      x: {
@ -42,7 +61,7 @@ export class DetailComponent {
      },
      y: {
        stacked: true,
-        beginAtZero: true
+        beginAtZero: true,
      },
    },
  };
@ -88,7 +107,7 @@ export class DetailComponent {
      pointHoverBorderWidth: 2,
      pointRadius: 4,
      tension: 0.3,
-      spanGaps: true
+      spanGaps: true,
    },
    // {
    //   type: "line",
@ -127,7 +146,8 @@ export class DetailComponent {
    private energyMonitoringService: EnergyMonitoringService,
    private currencyPipe: CurrencyPipe,
    private router: Router,
-    private authService: LoginService
+    private authService: LoginService,
+    private deviceService: DeviceService
  ) {}

  get formattedSummaryCost(): string {
@ -156,6 +176,8 @@ export class DetailComponent {
        this.dataEnergyMonitoringSTemperature(buildingId);
        this.dataEnergyDeviceCategory(buildingId);
        this.dataEnergyChartKwhWater(buildingId);
+        this.dataDeviceIr();
+        this.getAirQualityData();
      }
    });

@ -172,6 +194,112 @@ export class DetailComponent {
        showLabel: true,
      },
    };
+
+    const today = new Date().getDay();
+    this.days[today].isToday = true;
+
+    const now = new Date();
+    this.currentDate = now.toLocaleDateString();
+    this.currentTime = now.toLocaleTimeString();
+  }
+
+  getAirQualityData(){
+    this.valueAirQuality = Math.floor(Math.random() * 501)
+    this.chartOption = {
+      series: [
+        {
+          type: "gauge",
+          startAngle: 180,
+          endAngle: 0,
+          center: ["50%", "75%"],
+          radius: "130%", // Adjust the radius to make the chart smaller
+          min: 0,
+          max: 500,
+          splitNumber: 5,
+          axisLine: {
+            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
+              ],
+            },
+          },
+          pointer: {
+            icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+            length: "12%",
+            width: 15,
+            offsetCenter: [0, "-50%"],
+            itemStyle: {
+              color: "auto",
+            },
+          },
+          axisTick: {
+            length: 10,
+            lineStyle: {
+              color: "auto",
+              width: 2,
+            },
+          },
+          splitLine: {
+            length: 15,
+            lineStyle: {
+              color: "auto",
+              width: 5,
+            },
+          },
+          axisLabel: {
+            color: "#464646",
+            fontSize: 16, // Adjust font size
+            distance: -40, // Adjust distance
+            rotate: "tangential",
+            formatter: function (value: number) {
+              // return Math.round(value) === 100 ? "100" : Math.round(value) + "";
+              return value.toString();
+            },
+          },
+          title: {
+            offsetCenter: [0, " 15%"],
+            fontSize: 18, // Adjust font size
+          },
+          detail: {
+            fontSize: 24, // Adjust font size
+            offsetCenter: [0, "-25%"], // Adjust offset
+            valueAnimation: true,
+            formatter: function (value: number) {
+              return Math.round(value) + "";
+            },
+            color: "inherit",
+          },
+          data: [
+            {
+              value: this.valueAirQuality,
+              name: this.getGradeName(this.valueAirQuality),
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  getGradeName(value: number): string {
+    if (value <= 50) {
+      return "Good";
+    } else if (value <= 100) {
+      return "Moderate";
+    } else if (value <= 150) {
+      return "Unhealthy for Sensitive Groups";
+    } else if (value <= 200) {
+      return "Unhealthy";
+    } else if (value <= 300) {
+      return "Very Unhealthy";
+    } else {
+      return "Hazardous";
+    }
  }

  breadcrumbLink() {
@ -201,6 +329,14 @@ export class DetailComponent {
        this.topCard = res.data;
      });
  }
+
+  dataDeviceIr() {
+    this.deviceService.getDeviceStatus(452).subscribe((res) => {
+      console.log(res);
+      this.roomTemperature = res.result[0].value;
+      this.roomHumidity = res.result[1].value;
+    });
+  }
  dataEnergyMonitoringSummary(buildingId) {
    this.energyMonitoringService
      .getDashboardSummary(buildingId)
--- a/src/app/content/hemat-app/service/device.service.ts
+++ b/src/app/content/hemat-app/service/device.service.ts
@ -88,4 +88,14 @@ export class DeviceService {
    });
    return this.http.get<any>(url, { headers });
  }
+
+  getDeviceStatus(id): Observable<any> {
+    const endpoint = `/devices`;
+    const url = `${BASE_URL}${endpoint}/status?id=${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }
--- 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.16.01)</span>
+                  <span>(v@2024.07.17.02)</span>
                </p>
                <!-- <div class="card-body">
                  <a