penyesuaian UI device

This commit is contained in:
2024-06-05 13:35:58 +07:00
parent 4578a5db61
commit 3f1c97ebe4
12 changed files with 296 additions and 58 deletions

View File

@@ -4,6 +4,68 @@
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<section id="configuration">
<div class="row">
<div class="col-lg-4 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Device</h6>
<h3>{{filteredRows.length}}</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-zap primary font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Device Aktive</h6>
<h3>{{totalOn}}</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-wifi success font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Device Non-Active</h6>
<h3>{{totalOff}}</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-wifi-off danger font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="configuration">
<div class="row">
<div
@@ -11,19 +73,65 @@
*blockUI="'zeroConfiguration'; message: 'Loading'"
>
<m-card>
<ng-container mCardHeaderTitle> Device Table </ng-container>
<!-- <ng-container mCardHeaderTitle> Device Table </ng-container> -->
<ng-container mCardBody>
<div class="row mb-2">
<div class="col-md-6">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
<div class="col-2">
<div class="form-group">
<ng-select
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
placeholder="Select Building"
[(ngModel)]="singlebasicSelected"
>
</ng-select>
</div>
</div>
<div class="col-md-6 text-right">
<div class="col-2">
<div class="form-group">
<ng-select
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
placeholder="Select Month"
[(ngModel)]="singlebasicSelected"
>
</ng-select>
</div>
</div>
<div class="col-2">
<div class="form-group">
<ng-select
[items]="singleSelectArray"
[searchable]="true"
bindLabel="item_text"
placeholder="Select Category"
[(ngModel)]="singlebasicSelected"
>
</ng-select>
</div>
</div>
<div class="col-2">
<div class="form-group">
<input
type="text"
class="form-control"
placeholder="Search..."
[(ngModel)]="searchTerm"
(input)="filterRows()"
/>
</div>
</div>
<div class="col-2 text-left">
<button type="button" class="btn btn-outline-success mr-1">
<i class="la la-search"></i>
</button>
</div>
<div class="col-2 text-right">
<button
class="btn btn-secondary"
[disabled]="spinnerActive"
@@ -39,6 +147,7 @@
</button>
</div>
</div>
<div class="card-dashboard">
<ngx-datatable
class="bootstrap table-bordered"
@@ -68,9 +177,9 @@
[flexGrow]="1"
[minWidth]="140"
>
<ng-template ngx-datatable-header-template>
<span>Image</span>
</ng-template>
<ng-template ngx-datatable-header-template>
<span>Image</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-row="row">
<span class="avatar avatar-sm rounded-circle">
<img [src]="row.icon" /><i></i
@@ -204,48 +313,6 @@
</div>
</div>
</section>
<!-- <section id="configuration">
<div class="row">
<div class="col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Total Use</h6>
<h3>3,568</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-zap danger font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h6 class="text-muted">Estimation Cost</h6>
<h3>Rp 1.000.000.000.000</h3>
</div>
<div class="align-self-center">
<i
class="feather ft-trending-up success font-large-2 float-right"
></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section> -->
</div>
</div>
</div>