custom UI list monitoring

2024-06-12 19:44:51 +07:00 · 2024-06-12 19:44:51 +07:00 · 11184e4a46
parent fe740dc3c1
commit 11184e4a46
4 changed files with 124 additions and 59 deletions
--- a/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
+++ b/src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
@ -1,15 +1,19 @@
-<div class="app-content content">
-    <div class="content-wrapper">
-      <div class="content-header row mb-1">
-        <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
-      </div>
-      <div class="content-body">
-        <section id="basic-form-layouts">
-          <div class="row">
-            <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
-              <m-card>
-                <ng-container mCardHeaderTitle>
-                  <h2>
+<div class="app-content content" style="background-color: #000000 !important">
+  <div class="content-wrapper">
+    <div class="content-header row mb-1">
+      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+    </div>
+    <div class="content-body">
+      <section id="basic-form-layouts">
+        <div class="row">
+          <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
+            <div class="card" style="background-color: #252525 !important">
+              <div class="card-content">
+                <div
+                  class="card-header"
+                  style="background-color: #252525 !important"
+                >
+                  <h2 style="color: #ffffff">
                    {{
                      isEditMode()
                        ? "Edit List Monitoring"
@ -18,20 +22,23 @@
                        : "Add New List Monitoring"
                    }}
                  </h2>
-                </ng-container>
-                <ng-container mCardBody>
+                </div>
+                <div class="card-body">
                  <form
                    [formGroup]="projectInfo"
                    (ngSubmit)="onProjectInfoSubmit()"
                  >
                    <div class="form-body">
-                      <h4 class="form-section">
-                        <i class="feather ft-user"></i> General Information
+                      <h4 class="form-section" style="color: #ffffff">
+                        <i class="feather ft-user" style="color: #ffffff"></i>
+                        General Information
                      </h4>
                      <div class="row">
                        <div class="col-md-6">
                          <div class="form-group">
-                            <label for="buildingId">Building *</label>
+                            <label for="buildingId" style="color: #ffffff"
+                              >Building *</label
+                            >
                            <div class="input-group">
                              <select
                                id="buildingId"
@ -62,7 +69,9 @@
                        </div>
                        <div class="col-md-6">
                          <div class="form-group">
-                            <label for="statusId">Status *</label>
+                            <label for="statusId" style="color: #ffffff"
+                              >Status *</label
+                            >
                            <div class="input-group">
                              <select
                                id="statusId"
@ -124,6 +133,11 @@
                                    <button
                                      class="btn btn-danger"
                                      type="button"
+                                      style="
+                                        color: #000000 !important;
+                                        border-color: #bef264 !important;
+                                        background-color: #bef264 !important;
+                                      "
                                      (click)="removePhone(i)"
                                    >
                                      <i class="feather ft-x"></i>
@ -135,6 +149,11 @@
                            <button
                              type="button"
                              class="btn btn-primary"
+                              style="
+                                color: #000000 !important;
+                                border-color: #bef264 !important;
+                                background-color: #bef264 !important;
+                              "
                              (click)="addPhone()"
                            >
                              <i class="feather ft-plus"></i> Add Room
@ -176,22 +195,36 @@
                      <button
                        type="button"
                        class="btn btn-warning mr-1"
+                        style="
+                          color: #bef264 !important;
+                          border-color: #bef264 !important;
+                          background-color: #000000 !important;
+                        "
                        (click)="cancel()"
                      >
                        <i class="feather ft-x"></i> Cancel
                      </button>
-                      <button type="submit" class="btn btn-primary" *ngIf="mode !== 'view'" (click)="save()">
+                      <button
+                        type="submit"
+                        class="btn btn-primary"
+                        style="
+                          color: #000000 !important;
+                          border-color: #bef264 !important;
+                          background-color: #bef264 !important;
+                        "
+                        *ngIf="mode !== 'view'"
+                        (click)="save()"
+                      >
                        <i class="la la-check"></i> Save
                      </button>
                    </div>
                  </form>
-                </ng-container>
-              </m-card>
+                </div>
+              </div>
            </div>
          </div>
-        </section>
-      </div>
+        </div>
+      </section>
    </div>
  </div>
-  
-  
+</div>
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
@ -324,9 +324,11 @@
  background-color: #1a1a1a; /* Darker black for hover effect */
 }

+/* Tambahkan ini ke styles.css atau CSS komponen */
+
 /* Custom styles for Swal buttons */
-.btn-confirm {
-  background-color: #28a745 !important;
+.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
+  background-color: #bef264 !important;
  color: white !important;
  border: none !important;
  padding: 10px 20px !important;
@ -334,7 +336,7 @@
  font-size: 16px !important;
 }

-.btn-cancel {
+.swal2-cancel.btn-cancel {
  background-color: #dc3545 !important;
  color: white !important;
  border: none !important;
@ -343,10 +345,19 @@
  font-size: 16px !important;
 }

-.btn-confirm:hover {
+.swal2-confirm.btn-confirm:hover {
  background-color: #218838 !important;
 }

-.btn-cancel:hover {
+.swal2-cancel.btn-cancel:hover {
  background-color: #c82333 !important;
 }
+
+/* Custom Swal background */
+.swal2-popup.custom-swal-background {
+  background-color: #000000 !important; /* Warna background hitam */
+  color: white !important; /* Warna teks putih */
+}
+
+
+
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
@ -1,5 +1,5 @@
 <div class="app-content content" style="background-color: #000000 !important">
-  <div class="content-wrapper">
+  <div class="content-wrapper" style="height: 900px !important;">
    <div class="content-header row mb-1">
      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
    </div>
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
@ -1,13 +1,13 @@
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
-import { TableApiService } from 'src/app/_services/table-api.service';
-import { BuildingService } from '../service/monitoring-api.service';
-import Swal from 'sweetalert2';
+import { Component } from "@angular/core";
+import { Router } from "@angular/router";
+import { TableApiService } from "src/app/_services/table-api.service";
+import { BuildingService } from "../service/monitoring-api.service";
+import Swal from "sweetalert2";

@Component({
-  selector: 'app-list-monitoring',
-  templateUrl: './list-monitoring.component.html',
-  styleUrls: ['./list-monitoring.component.css']
+  selector: "app-list-monitoring",
+  templateUrl: "./list-monitoring.component.html",
+  styleUrls: ["./list-monitoring.component.css"],
 })
 export class ListMonitoringComponent {
  public breadcrumb: any;
@ -60,8 +60,7 @@ export class ListMonitoringComponent {
    const searchTermLC = this.searchTerm.toLowerCase();
    return Object.values(row).some(
      (value) =>
-        value !== null &&
-        value.toString().toLowerCase().includes(searchTermLC)
+        value !== null && value.toString().toLowerCase().includes(searchTermLC)
    );
  }

@ -74,35 +73,57 @@ export class ListMonitoringComponent {
  }

  deleteRow(row) {
-    Swal.fire({
-      title: 'Are you sure?',
-      text: 'Do you want to delete?',
-      icon: 'question',
-      showCancelButton: true,
-      confirmButtonText: 'Yes',
-      cancelButtonText: 'No',
+    const swalWithBootstrapButtons = Swal.mixin({
      customClass: {
-        confirmButton: 'btn-confirm',
-        cancelButton: 'btn-cancel'
-      }
+        confirmButton: "btn-confirm",
+        cancelButton: "btn-cancel",
+        popup: "custom-swal-background",
+      },
+    });
+    swalWithBootstrapButtons.fire({
+      title: "Are you sure?",
+      text: "Do you want to delete?",
+      icon: "question",
+      showCancelButton: true,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire({
-          title: 'Loading...',
-          text: 'Please wait',
+          title: "Loading...",
+          text: "Please wait",
          allowOutsideClick: false,
+          customClass: {
+            popup: "custom-swal-background",
+          },
          didOpen: () => {
            Swal.showLoading();
-          }
+          },
        });
        setTimeout(() => {
-          this.monitoringApiService.deleteRoomBuilding(row.id).subscribe(data => {
-            Swal.fire('Confirmed!', 'You clicked Yes.', 'success');
-            this.fetchData();
-          });
+          this.monitoringApiService
+            .deleteRoomBuilding(row.id)
+            .subscribe((data) => {
+              Swal.fire({
+                title: "Confirmed!",
+                text: "You clicked Yes.",
+                icon: "success",
+                customClass: {
+                  popup: "custom-swal-background",
+                },
+              });
+              this.fetchData();
+            });
        }, 2000);
      } else if (result.isDismissed) {
-        Swal.fire('Cancelled', 'You clicked No.', 'error');
+        Swal.fire({
+          title: "Cancelled",
+          text: "You clicked No.",
+          icon: "error",
+          customClass: {
+            popup: "custom-swal-background",
+          },
+        });
      }
    });
  }