penambahan UI detail monitoring building
This commit is contained in:
parent
e894196ebd
commit
3bd4e1df1c
|
|
@ -84,10 +84,10 @@ export class BuildingComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
viewRow(row) {
|
viewRow(row) {
|
||||||
this.router.navigate(["/monitoring/view-new-building", row.build_name]);
|
this.router.navigate(["/monitoring/view-new-building", row.id]);
|
||||||
}
|
}
|
||||||
|
|
||||||
editRow(row) {
|
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({
|
@Component({
|
||||||
selector: 'app-detail',
|
selector: "app-detail",
|
||||||
templateUrl: './detail.component.html',
|
templateUrl: "./detail.component.html",
|
||||||
styleUrls: ['./detail.component.css']
|
styleUrls: ["./detail.component.css"],
|
||||||
})
|
})
|
||||||
export class DetailComponent {
|
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 { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-building-room.component';
|
||||||
import { ArchwizardModule } from 'angular-archwizard';
|
import { ArchwizardModule } from 'angular-archwizard';
|
||||||
import { DetailComponent } from './detail/detail.component';
|
import { DetailComponent } from './detail/detail.component';
|
||||||
|
import { NgxEchartsModule } from 'ngx-echarts';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
|
@ -40,6 +41,10 @@ import { DetailComponent } from './detail/detail.component';
|
||||||
ArchwizardModule,
|
ArchwizardModule,
|
||||||
BreadcrumbModule,
|
BreadcrumbModule,
|
||||||
NgbModule,
|
NgbModule,
|
||||||
|
NgxEchartsModule.forRoot({
|
||||||
|
echarts: () => import('echarts')
|
||||||
|
}),
|
||||||
|
|
||||||
BlockUIModule.forRoot({
|
BlockUIModule.forRoot({
|
||||||
template: BlockTemplateComponent
|
template: BlockTemplateComponent
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue