fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

custom UI list monitoring

This commit is contained in:
Fuzi_fauzia 2024-06-12 19:44:51 +07:00
parent fe740dc3c1
commit 11184e4a46
4 changed files with 124 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html
View File

@ -1,4 +1,4 @@
<div class="app-content content">
<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>
@ -7,9 +7,13 @@
<section id="basic-form-layouts">
<div class="row">
<div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
<m-card>
<ng-container mCardHeaderTitle>
<h2>
<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>
</div>
</section>
</div>
</div>
</div>

21
src/app/content/hemat-app/list-monitoring/list-monitoring.component.css
View File

@ -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 */
}

2
src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
View File

@ -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>

73
src/app/content/hemat-app/list-monitoring/list-monitoring.component.ts
View File

@ -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.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",
},
});
}
});
}