penyesuaian UI device
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user