diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts index 63bcbad..e38f87b 100644 --- a/src/app/content/hemat-app/monitoring/building/building.component.ts +++ b/src/app/content/hemat-app/monitoring/building/building.component.ts @@ -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]); } } diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html index fd9463a..8b92db1 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.html +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html @@ -1 +1,165 @@ -

detail works!

+
+
+
+ +
+
+
+
+

Sales and Expenses

+
+
+ +
+ Previous Fiscal Year + Last 12 Months +
+
+
+
+
+
+
+
+
+
+
+ +
$ 12080.00
+

Total Sales

+ + +
$ 8500.00
+

Total Receipts

+ + +
$ 560.00
+

Total Expenses

+ +
+
+
+
+
+ +
+ +
+
+
+

Your Top Expenses

+
+
+ +
+ Previous Fiscal Year + Last 12 Months +
+
+
+
+
+
+
+
+
+
+
+ + +
+ + + Sales, Receipts and Dues + + + +
+
+ + + + + + + + + + + + + + + + + +
SalesReceiptsDue
+ {{ element.name }} + {{ element.sales }}{{ element.receipts }}{{ element.due }}
+
+
+ + +
+ +
+
+
+
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts index 8b64639..a8c50cc 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts @@ -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); + } } diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts index 35b9bb7..9df8713 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.module.ts +++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts @@ -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 }),