perbaikan tampilan monitoring room
This commit is contained in:
@@ -7,16 +7,12 @@
|
||||
<section id="social-cards">
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
placeholder="Search..."
|
||||
/>
|
||||
<input type="text" class="form-control" placeholder="Search..." />
|
||||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
[routerLink]="['/monitoring/add-new-room']"
|
||||
[routerLink]="['/monitoring/add-new-building']"
|
||||
>
|
||||
<i class="feather ft-plus"></i> Add new building
|
||||
</button>
|
||||
@@ -25,130 +21,132 @@
|
||||
<div class="row mt-2">
|
||||
<div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
|
||||
<div class="card">
|
||||
<div class="card-header mb-2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h4
|
||||
class="text-muted mb-1 font-weight-bold"
|
||||
style="font-family: Montserrat, sans-serif"
|
||||
>
|
||||
Building Name
|
||||
</h4>
|
||||
<h3
|
||||
class="text-muted mb-0"
|
||||
style="font-family: Montserrat, sans-serif"
|
||||
>
|
||||
{{ data.build_name }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-top: 3px solid #100a0a" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body text-center">
|
||||
<div class="card-header mb-2">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h4
|
||||
class="text-muted mb-1 font-weight-bold"
|
||||
style="font-family: Montserrat, sans-serif"
|
||||
>
|
||||
Building Name
|
||||
</h4>
|
||||
<h3
|
||||
class="text-muted mb-0"
|
||||
style="font-family: Montserrat, sans-serif"
|
||||
>
|
||||
{{data.build_name}}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<hr style="border-top: 3px solid #100a0a" />
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<x-chartist
|
||||
*ngIf="data"
|
||||
[data]="data.donut"
|
||||
[type]="donutChart1.type"
|
||||
[options]="donutChart1.options"
|
||||
[events]="donutChart1.events"
|
||||
>
|
||||
</x-chartist>
|
||||
<x-chartist
|
||||
*ngIf="data"
|
||||
[data]="data.donut"
|
||||
[type]="donutChart1.type"
|
||||
[options]="donutChart1.options"
|
||||
[events]="donutChart1.events"
|
||||
>
|
||||
</x-chartist>
|
||||
|
||||
<div
|
||||
class="text-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
"
|
||||
>
|
||||
<h3
|
||||
class="display-4 blue-grey darken-1"
|
||||
style="font-size: 2em"
|
||||
<div
|
||||
class="text-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
"
|
||||
>
|
||||
<h3
|
||||
class="display-4 blue-grey darken-1"
|
||||
style="font-size: 2em"
|
||||
>
|
||||
{{ data.total }} kWh
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body" style="padding-top: 0">
|
||||
<div class="row mb-3">
|
||||
<div class="col Started">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>23% - Lighning</span
|
||||
>
|
||||
{{data.total}} kWh
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body" style="padding-top: 0">
|
||||
<div class="row mb-3">
|
||||
<div class="col Started">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>23% - Lighning</span
|
||||
>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="success"
|
||||
[value]="23"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col Progress">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>14% - In Progress</span
|
||||
>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="danger"
|
||||
[value]="14"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col Remaining">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>35% - Remaining</span
|
||||
>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="warning"
|
||||
[value]="35"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col Done">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>28% - Started</span
|
||||
>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="primary"
|
||||
[value]="28"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="success"
|
||||
[value]="23"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-float btn-square btn-outline-secondary"
|
||||
<div class="col Progress">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>14% - In Progress</span
|
||||
>
|
||||
<i class="feather ft-layers"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
|
||||
>
|
||||
<i class="la la-building"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-float btn-square btn-outline-secondary"
|
||||
[routerLink]="['/monitoring/monitoring-room']"
|
||||
>
|
||||
<i class="feather ft-log-in"></i>
|
||||
</button>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="danger"
|
||||
[value]="14"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col Remaining">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>35% - Remaining</span
|
||||
>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="warning"
|
||||
[value]="35"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col Done">
|
||||
<span class="mb-1 text-muted cardtext d-block"
|
||||
>28% - Started</span
|
||||
>
|
||||
<div>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="primary"
|
||||
[value]="28"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group text-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-float btn-square btn-outline-secondary"
|
||||
triggers="hover:click:hover"
|
||||
ngbTooltip="Edit"
|
||||
>
|
||||
<i class="feather ft-edit"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
|
||||
triggers="hover:click:hover"
|
||||
ngbTooltip="Detail"
|
||||
>
|
||||
<i class="la la-building"></i>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-float btn-square btn-outline-secondary"
|
||||
triggers="hover:click:hover"
|
||||
ngbTooltip="Room"
|
||||
[routerLink]="['/monitoring/monitoring-room']"
|
||||
>
|
||||
<i class="feather ft-log-in"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Component } from "@angular/core";
|
||||
import { ChartApiService } from "src/app/_services/chart.api";
|
||||
|
||||
@Component({
|
||||
selector: "app-building",
|
||||
@@ -51,7 +50,7 @@ export class BuildingComponent {
|
||||
},
|
||||
];
|
||||
|
||||
constructor(private chartApiservice: ChartApiService) {}
|
||||
constructor() {}
|
||||
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
|
||||
Reference in New Issue
Block a user