hemat_solution/src/app/content/hemat-app/device/device-control/device-control.component.html

172 lines
6.7 KiB
HTML

<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="configuration">
<div class="row">
<div class="col-12">
<div class="card" style="background-color: #252525 !important">
<div class="card-content">
<div class="card-body">
<div class="row">
<div class="col-3">
<div class="form-group">
<ng-select
class="select-custom"
[items]="dataBuildingList"
[searchable]="true"
bindLabel="name"
bindValue="id"
placeholder="Select Building"
[(ngModel)]="buildingSelected"
>
</ng-select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<ng-select
class="select-custom"
[items]="dataMasterCategori"
[searchable]="true"
bindLabel="name"
bindValue="id"
placeholder="Select Category"
[(ngModel)]="categorySelected"
>
</ng-select>
</div>
</div>
<div class="col-3">
<div class="form-group">
<ng-select
class="select-custom"
[items]="dataMasterStatus"
[searchable]="true"
bindLabel="name"
bindValue="id"
placeholder="Select Status"
[(ngModel)]="statusSelected"
>
</ng-select>
</div>
</div>
<div class="col-3 text-left">
<div class="d-flex">
<button
type="button"
class="btn btn-outline-success ml-2"
(click)="doFilter()"
style="
background-color: #252525 !important;
border-color: #ffffff !important;
border-radius: 12px;
"
[disabled]="spinnerFilterActive"
>
<i
class="la la-search"
style="color: #ffffff !important"
*ngIf="!spinnerFilterActive"
></i>
<i
class="la la-spinner spinner"
style="color: #ffffff !important"
*ngIf="spinnerFilterActive"
></i>
</button>
<button
type="button"
class="btn btn-outline-success ml-2"
(click)="doCancelFilter()"
style="
background-color: #252525 !important;
border-color: #ffffff !important;
color: #ffffff;
border-radius: 12px;
"
>
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="configuration">
<div class="row">
<div class="col-12" *ngIf="filteredRows?.length === 0">
<div class="card" style="background-color: #252525;">
<div class="card-content">
<div class="card-body">
<p class="text-center" style="color: #ffffff;">No data available</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-12" *ngFor="let item of filteredRows">
<div
class="card"
style="background-color: #252525; position: relative"
>
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="align-self-center">
<div
style="
background-color: #414F2B;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
"
>
<i
class="ri-lightbulb-flash-fill font-large-1 blue-grey d-block"
style="color: #bef264 !important"
></i>
</div>
<div style="margin-top: 10px">
<span
class="text-muted"
style="color: #ffffff !important"
>{{ item.name }}</span
>
<br />
<span
class="text-muted"
>{{item.category_name}}</span
>
</div>
</div>
<div class="ui-switch-container" style="position: absolute; bottom: 10px; right: 10px;">
<ui-switch
style="border-color: #bef264 !important"
class="switchery"
switchColor="black"
color="rgb(190, 242, 100)"
size="small"
[checked]="item.status_id === 2"
(change)="switchChanged($event, item)"
></ui-switch>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>