penambahan UI detail monitoring building
This commit is contained in:
parent
e894196ebd
commit
3bd4e1df1c
|
|
@ -84,10 +84,10 @@ export class BuildingComponent {
|
|||
}
|
||||
|
||||
viewRow(row) {
|
||||
this.router.navigate(["/monitoring/view-new-building", row.build_name]);
|
||||
this.router.navigate(["/monitoring/view-new-building", row.id]);
|
||||
}
|
||||
|
||||
editRow(row) {
|
||||
this.router.navigate(["/monitoring/edit-new-building", row.build_name]);
|
||||
this.router.navigate(["/monitoring/edit-new-building", row.id]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,165 @@
|
|||
<p>detail works!</p>
|
||||
<div class="app-content content">
|
||||
<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">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Sales and Expenses</h4>
|
||||
<div class="heading-elements">
|
||||
<div ngbDropdown class="dropdown">
|
||||
<button
|
||||
class="btn btn-secondary btn-sm dropdown-toggle"
|
||||
type="button"
|
||||
id="dropdownMenuButton"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
ngbDropdownToggle
|
||||
>
|
||||
This Fiscal Year
|
||||
</button>
|
||||
<div
|
||||
ngbDropdownMenu
|
||||
class="dropdown-menu"
|
||||
aria-labelledby="dropdownMenuButton"
|
||||
>
|
||||
<a class="dropdown-item" [routerLink]=""
|
||||
>Previous Fiscal Year</a
|
||||
>
|
||||
<a class="dropdown-item" [routerLink]="">Last 12 Months</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body overflow-hidden row">
|
||||
<div
|
||||
class="col-md-9 col-sm-12 border-right-grey border-right-lighten-2"
|
||||
>
|
||||
<div
|
||||
echarts
|
||||
[options]="chartOption"
|
||||
class="height-300 echart-container"
|
||||
></div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<div class="list-group">
|
||||
<a
|
||||
[routerLink]=""
|
||||
class="list-group-item list-group-item-action"
|
||||
>
|
||||
<h5 class="list-group-item-heading">$ 12080.00</h5>
|
||||
<p class="list-group-item-text primary">Total Sales</p>
|
||||
</a>
|
||||
<a
|
||||
[routerLink]=""
|
||||
class="list-group-item list-group-item-action"
|
||||
>
|
||||
<h5 class="list-group-item-heading">$ 8500.00</h5>
|
||||
<p class="list-group-item-text success">Total Receipts</p>
|
||||
</a>
|
||||
<a
|
||||
[routerLink]=""
|
||||
class="list-group-item list-group-item-action"
|
||||
>
|
||||
<h5 class="list-group-item-heading">$ 560.00</h5>
|
||||
<p class="list-group-item-text warning">Total Expenses</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--/ Sales and Expenses -->
|
||||
<div class="row" matchHeight="card">
|
||||
<!-- Your Top Expenses -->
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">Your Top Expenses</h4>
|
||||
<div class="heading-elements">
|
||||
<div ngbDropdown class="dropdown">
|
||||
<button
|
||||
class="btn btn-secondary btn-sm dropdown-toggle"
|
||||
type="button"
|
||||
id="dropdownMenuButton2"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
ngbDropdownToggle
|
||||
>
|
||||
This Fiscal Year
|
||||
</button>
|
||||
<div
|
||||
ngbDropdownMenu
|
||||
class="dropdown-menu"
|
||||
aria-labelledby="dropdownMenuButton2"
|
||||
>
|
||||
<a class="dropdown-item" [routerLink]=""
|
||||
>Previous Fiscal Year</a
|
||||
>
|
||||
<a class="dropdown-item" [routerLink]="">Last 12 Months</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
<div
|
||||
echarts
|
||||
[options]="ExpenseschartOption"
|
||||
class="height-250 echart-container"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Your Top Expenses -->
|
||||
<!-- Sales, Receipts and Dues -->
|
||||
<div
|
||||
class="col-lg-6 col-md-12"
|
||||
*blockUI="'salesRecieptsDues'; message: 'Loading'"
|
||||
>
|
||||
<m-card
|
||||
[options]="options"
|
||||
(reloadFunction)="reloadSalesRecieptsDues($event)"
|
||||
>
|
||||
<ng-container mCardHeaderTitle>
|
||||
Sales, Receipts and Dues
|
||||
</ng-container>
|
||||
|
||||
<ng-container mCardBody>
|
||||
<div class="px-0 py-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Sales</th>
|
||||
<th>Receipts</th>
|
||||
<th>Due</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let element of Sales; index as i">
|
||||
<td>
|
||||
<b>{{ element.name }}</b>
|
||||
</td>
|
||||
<td>{{ element.sales }}</td>
|
||||
<td>{{ element.receipts }}</td>
|
||||
<td>{{ element.due }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</m-card>
|
||||
</div>
|
||||
<!-- Sales, Receipts and Dues -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,187 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component } from "@angular/core";
|
||||
import { BlockUI, NgBlockUI } from "ng-block-ui";
|
||||
import { ChartApiService } from "src/app/_services/chart.api";
|
||||
interface Sales {
|
||||
name: string;
|
||||
sales: string;
|
||||
receipts: string;
|
||||
due: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-detail',
|
||||
templateUrl: './detail.component.html',
|
||||
styleUrls: ['./detail.component.css']
|
||||
selector: "app-detail",
|
||||
templateUrl: "./detail.component.html",
|
||||
styleUrls: ["./detail.component.css"],
|
||||
})
|
||||
export class DetailComponent {
|
||||
data: any;
|
||||
chartOption: any;
|
||||
Sales: any;
|
||||
ExpenseschartOption: any;
|
||||
public breadcrumb: any;
|
||||
constructor(private chartApiservice: ChartApiService) {}
|
||||
@BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
|
||||
@BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
|
||||
getInvoicechart() {
|
||||
this.Sales = this.data["sales"];
|
||||
this.chartOption = {
|
||||
grid: {
|
||||
x: 40,
|
||||
x2: 40,
|
||||
y: 35,
|
||||
y2: 25,
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
enterable: false,
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
data: ["Total Sales", "Total Receipts", "Total Expenses"],
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ["#3BAFDA", "#37BC9B", "#F6BB42"],
|
||||
|
||||
// Horizontal axis
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
// Vertical axis
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
},
|
||||
],
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: "Total Sales",
|
||||
type: "bar",
|
||||
data: this.data.TotalSales.TotalSales[0],
|
||||
},
|
||||
{
|
||||
name: "Total Receipts",
|
||||
type: "bar",
|
||||
data: this.data.TotalReceipts.TotalReceipts[0],
|
||||
},
|
||||
{
|
||||
name: "Total Expenses",
|
||||
type: "bar",
|
||||
data: this.data.TotalExpenses.TotalExpenses[0],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.ExpenseschartOption = {
|
||||
legend: {
|
||||
orient: "horizontal",
|
||||
x: "center",
|
||||
data: ["Internet", "Infrastructure", "Party", "Assets", "Electricity"],
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ["#FECEA8", "#FF847C", "#E84A5F", "#2A363B", "#99B898"],
|
||||
|
||||
// Display toolbox
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: "vertical",
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "Browsers",
|
||||
type: "pie",
|
||||
radius: ["50%", "70%"],
|
||||
center: ["50%", "57.5%"],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: "{b}" + "\n\n" + "{c} ({d}%)",
|
||||
position: "center",
|
||||
textStyle: {
|
||||
fontSize: "17",
|
||||
fontWeight: "500",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{ value: 335, name: "Internet" },
|
||||
{ value: 1548, name: "Infrastructure" },
|
||||
{ value: 135, name: "Party" },
|
||||
{ value: 234, name: "Assets" },
|
||||
{ value: 650, name: "Electricity" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
ngOnInit() {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Detail Monitoring",
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Detail Monitoring",
|
||||
isLink: false,
|
||||
link: "",
|
||||
}
|
||||
],
|
||||
};
|
||||
this.chartApiservice.getInvoiceData().subscribe((Response) => {
|
||||
this.data = Response;
|
||||
this.getInvoicechart();
|
||||
});
|
||||
}
|
||||
|
||||
reloadTotalReceivables() {
|
||||
this.blockUITotalReceivables.start("Loading..");
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUITotalReceivables.stop();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
reloadSalesRecieptsDues() {
|
||||
this.blockUISalesRecieptsDues.start("Loading..");
|
||||
|
||||
setTimeout(() => {
|
||||
this.blockUISalesRecieptsDues.stop();
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
|
|||
import { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-building-room.component';
|
||||
import { ArchwizardModule } from 'angular-archwizard';
|
||||
import { DetailComponent } from './detail/detail.component';
|
||||
import { NgxEchartsModule } from 'ngx-echarts';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
|
@ -40,6 +41,10 @@ import { DetailComponent } from './detail/detail.component';
|
|||
ArchwizardModule,
|
||||
BreadcrumbModule,
|
||||
NgbModule,
|
||||
NgxEchartsModule.forRoot({
|
||||
echarts: () => import('echarts')
|
||||
}),
|
||||
|
||||
BlockUIModule.forRoot({
|
||||
template: BlockTemplateComponent
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in New Issue