From 3c7deac1b04b450c21851cef6f72924e37dc3ac2 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Mon, 22 Apr 2024 00:04:26 +0700 Subject: [PATCH] penambahan routing master dan monitoring --- .../_layout/settings/menu-settings.config.ts | 39 +- .../master-category.component.css | 0 .../master-category.component.html | 1 + .../master-category.component.spec.ts | 23 ++ .../master-category.component.ts | 10 + .../master-location-room.component.css | 0 .../master-location-room.component.html | 1 + .../master-location-room.component.spec.ts | 23 ++ .../master-location-room.component.ts | 10 + .../master-location.component.css | 0 .../master-location.component.html | 1 + .../master-location.component.spec.ts | 23 ++ .../master-location.component.ts | 10 + .../master-type/master-type.component.css | 0 .../master-type/master-type.component.html | 1 + .../master-type/master-type.component.spec.ts | 23 ++ .../master-type/master-type.component.ts | 10 + .../content/hemat-app/master/master.module.ts | 54 ++- .../building/building.component.css | 140 ++++++++ .../building/building.component.html | 194 ++++++++++ .../building.component.spec.ts} | 12 +- .../monitoring/building/building.component.ts | 58 +++ .../monitoring/monitoring.component.css | 281 --------------- .../monitoring/monitoring.component.html | 271 -------------- .../monitoring/monitoring.component.ts | 333 ------------------ .../hemat-app/monitoring/monitoring.module.ts | 21 +- .../monitoring/room/room.component.css | 0 .../monitoring/room/room.component.html | 1 + .../monitoring/room/room.component.spec.ts | 23 ++ .../monitoring/room/room.component.ts | 10 + 30 files changed, 671 insertions(+), 902 deletions(-) create mode 100644 src/app/content/hemat-app/master/master-category/master-category.component.css create mode 100644 src/app/content/hemat-app/master/master-category/master-category.component.html create mode 100644 src/app/content/hemat-app/master/master-category/master-category.component.spec.ts create mode 100644 src/app/content/hemat-app/master/master-category/master-category.component.ts create mode 100644 src/app/content/hemat-app/master/master-location-room/master-location-room.component.css create mode 100644 src/app/content/hemat-app/master/master-location-room/master-location-room.component.html create mode 100644 src/app/content/hemat-app/master/master-location-room/master-location-room.component.spec.ts create mode 100644 src/app/content/hemat-app/master/master-location-room/master-location-room.component.ts create mode 100644 src/app/content/hemat-app/master/master-location/master-location.component.css create mode 100644 src/app/content/hemat-app/master/master-location/master-location.component.html create mode 100644 src/app/content/hemat-app/master/master-location/master-location.component.spec.ts create mode 100644 src/app/content/hemat-app/master/master-location/master-location.component.ts create mode 100644 src/app/content/hemat-app/master/master-type/master-type.component.css create mode 100644 src/app/content/hemat-app/master/master-type/master-type.component.html create mode 100644 src/app/content/hemat-app/master/master-type/master-type.component.spec.ts create mode 100644 src/app/content/hemat-app/master/master-type/master-type.component.ts create mode 100644 src/app/content/hemat-app/monitoring/building/building.component.css create mode 100644 src/app/content/hemat-app/monitoring/building/building.component.html rename src/app/content/hemat-app/monitoring/{monitoring.component.spec.ts => building/building.component.spec.ts} (52%) create mode 100644 src/app/content/hemat-app/monitoring/building/building.component.ts delete mode 100644 src/app/content/hemat-app/monitoring/monitoring.component.css delete mode 100644 src/app/content/hemat-app/monitoring/monitoring.component.html delete mode 100644 src/app/content/hemat-app/monitoring/monitoring.component.ts create mode 100644 src/app/content/hemat-app/monitoring/room/room.component.css create mode 100644 src/app/content/hemat-app/monitoring/room/room.component.html create mode 100644 src/app/content/hemat-app/monitoring/room/room.component.spec.ts create mode 100644 src/app/content/hemat-app/monitoring/room/room.component.ts diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index c48c3ce..f172f9a 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/src/app/_layout/settings/menu-settings.config.ts @@ -899,7 +899,19 @@ export const MenuSettingsConfig: MenuConfig = { { title: 'Monitoring', icon: 'feather ft-monitor', - page: '/monitoring' + page: '/monitoring', + submenu: { + items: [ + { + title: 'Monitoring Building', + page: '/monitoring/monitoring-building' + }, + { + title: 'Monitoring Room', + page: '/monitoring/monitoring-room' + }, + ] + } }, { title: 'Device', @@ -916,6 +928,31 @@ export const MenuSettingsConfig: MenuConfig = { icon: 'feather ft-user-check', page: '/user-access' }, + { + title: 'Master', + icon: 'feather ft-server', + page: 'null', + submenu: { + items: [ + { + title: 'Master Category', + page: '/master/master-category' + }, + { + title: 'Master Location', + page: '/master/master-location' + }, + { + title: 'Master Location Room', + page: '/master/master-location-room' + }, + { + title: 'Master Type', + page: '/master/master-type' + } + ] + } + }, { section: 'APPS', icon: 'la-ellipsis-h' }, { diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.css b/src/app/content/hemat-app/master/master-category/master-category.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.html b/src/app/content/hemat-app/master/master-category/master-category.component.html new file mode 100644 index 0000000..bc24f17 --- /dev/null +++ b/src/app/content/hemat-app/master/master-category/master-category.component.html @@ -0,0 +1 @@ +

master-category works!

diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.spec.ts b/src/app/content/hemat-app/master/master-category/master-category.component.spec.ts new file mode 100644 index 0000000..53faabf --- /dev/null +++ b/src/app/content/hemat-app/master/master-category/master-category.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MasterCategoryComponent } from './master-category.component'; + +describe('MasterCategoryComponent', () => { + let component: MasterCategoryComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MasterCategoryComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MasterCategoryComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.ts b/src/app/content/hemat-app/master/master-category/master-category.component.ts new file mode 100644 index 0000000..eabbc4a --- /dev/null +++ b/src/app/content/hemat-app/master/master-category/master-category.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-master-category', + templateUrl: './master-category.component.html', + styleUrls: ['./master-category.component.css'] +}) +export class MasterCategoryComponent { + +} diff --git a/src/app/content/hemat-app/master/master-location-room/master-location-room.component.css b/src/app/content/hemat-app/master/master-location-room/master-location-room.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/master/master-location-room/master-location-room.component.html b/src/app/content/hemat-app/master/master-location-room/master-location-room.component.html new file mode 100644 index 0000000..6e291e5 --- /dev/null +++ b/src/app/content/hemat-app/master/master-location-room/master-location-room.component.html @@ -0,0 +1 @@ +

master-location-room works!

diff --git a/src/app/content/hemat-app/master/master-location-room/master-location-room.component.spec.ts b/src/app/content/hemat-app/master/master-location-room/master-location-room.component.spec.ts new file mode 100644 index 0000000..7b81e86 --- /dev/null +++ b/src/app/content/hemat-app/master/master-location-room/master-location-room.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MasterLocationRoomComponent } from './master-location-room.component'; + +describe('MasterLocationRoomComponent', () => { + let component: MasterLocationRoomComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MasterLocationRoomComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MasterLocationRoomComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/master/master-location-room/master-location-room.component.ts b/src/app/content/hemat-app/master/master-location-room/master-location-room.component.ts new file mode 100644 index 0000000..af307d5 --- /dev/null +++ b/src/app/content/hemat-app/master/master-location-room/master-location-room.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-master-location-room', + templateUrl: './master-location-room.component.html', + styleUrls: ['./master-location-room.component.css'] +}) +export class MasterLocationRoomComponent { + +} diff --git a/src/app/content/hemat-app/master/master-location/master-location.component.css b/src/app/content/hemat-app/master/master-location/master-location.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/master/master-location/master-location.component.html b/src/app/content/hemat-app/master/master-location/master-location.component.html new file mode 100644 index 0000000..671c695 --- /dev/null +++ b/src/app/content/hemat-app/master/master-location/master-location.component.html @@ -0,0 +1 @@ +

master-location works!

diff --git a/src/app/content/hemat-app/master/master-location/master-location.component.spec.ts b/src/app/content/hemat-app/master/master-location/master-location.component.spec.ts new file mode 100644 index 0000000..b0a0a91 --- /dev/null +++ b/src/app/content/hemat-app/master/master-location/master-location.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MasterLocationComponent } from './master-location.component'; + +describe('MasterLocationComponent', () => { + let component: MasterLocationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MasterLocationComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MasterLocationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/master/master-location/master-location.component.ts b/src/app/content/hemat-app/master/master-location/master-location.component.ts new file mode 100644 index 0000000..9961d58 --- /dev/null +++ b/src/app/content/hemat-app/master/master-location/master-location.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-master-location', + templateUrl: './master-location.component.html', + styleUrls: ['./master-location.component.css'] +}) +export class MasterLocationComponent { + +} diff --git a/src/app/content/hemat-app/master/master-type/master-type.component.css b/src/app/content/hemat-app/master/master-type/master-type.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/master/master-type/master-type.component.html b/src/app/content/hemat-app/master/master-type/master-type.component.html new file mode 100644 index 0000000..64f099a --- /dev/null +++ b/src/app/content/hemat-app/master/master-type/master-type.component.html @@ -0,0 +1 @@ +

master-type works!

diff --git a/src/app/content/hemat-app/master/master-type/master-type.component.spec.ts b/src/app/content/hemat-app/master/master-type/master-type.component.spec.ts new file mode 100644 index 0000000..9613e32 --- /dev/null +++ b/src/app/content/hemat-app/master/master-type/master-type.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MasterTypeComponent } from './master-type.component'; + +describe('MasterTypeComponent', () => { + let component: MasterTypeComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MasterTypeComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MasterTypeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/master/master-type/master-type.component.ts b/src/app/content/hemat-app/master/master-type/master-type.component.ts new file mode 100644 index 0000000..5fb2554 --- /dev/null +++ b/src/app/content/hemat-app/master/master-type/master-type.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-master-type', + templateUrl: './master-type.component.html', + styleUrls: ['./master-type.component.css'] +}) +export class MasterTypeComponent { + +} diff --git a/src/app/content/hemat-app/master/master.module.ts b/src/app/content/hemat-app/master/master.module.ts index dc281dd..a94c7fe 100644 --- a/src/app/content/hemat-app/master/master.module.ts +++ b/src/app/content/hemat-app/master/master.module.ts @@ -1,12 +1,62 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { MasterCategoryComponent } from './master-category/master-category.component'; +import { MasterLocationComponent } from './master-location/master-location.component'; +import { MasterLocationRoomComponent } from './master-location-room/master-location-room.component'; +import { MasterTypeComponent } from './master-type/master-type.component'; + +import { RouterModule } from '@angular/router'; +import { ChartistModule } from 'ng-chartist'; +import { NgxDatatableModule } from '@swimlane/ngx-datatable'; +import { FormsModule } from '@angular/forms'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { NgChartsModule } from 'ng2-charts'; +import { BlockUIModule } from 'ng-block-ui'; +import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; +import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component'; +import { CardModule } from '../../partials/general/card/card.module'; +import { MatchHeightModule } from '../../partials/general/match-height/match-height.module'; @NgModule({ - declarations: [], + declarations: [ + MasterCategoryComponent, + MasterLocationComponent, + MasterLocationRoomComponent, + MasterTypeComponent + ], imports: [ - CommonModule + CommonModule, + ChartistModule, + FormsModule, + NgChartsModule, + CardModule, + MatchHeightModule, + NgxDatatableModule, + PerfectScrollbarModule, + NgbModule, + BlockUIModule.forRoot({ + template: BlockTemplateComponent + }), + RouterModule.forChild([ + { + path: 'master-category', + component: MasterCategoryComponent + }, + { + path: 'master-location', + component: MasterLocationComponent + }, + { + path: 'master-location-room', + component: MasterLocationRoomComponent + }, + { + path: 'master-type', + component: MasterTypeComponent + } + ]) ] }) export class MasterModule { } diff --git a/src/app/content/hemat-app/monitoring/building/building.component.css b/src/app/content/hemat-app/monitoring/building/building.component.css new file mode 100644 index 0000000..38b0b47 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/building/building.component.css @@ -0,0 +1,140 @@ +:host ::ng-deep .Likes .ct-series-a .ct-point { + stroke: #28d094; +} +:host ::ng-deep .Likes .ct-line { + fill: none; + stroke-width: 2px; +} +:host ::ng-deep .Likes .ct-point{ + stroke-width: 0px; +} +:host ::ng-deep .Likes .ct-series-a .ct-line { + stroke: #28d094; +} +:host ::ng-deep .Likes .ct-series-a .ct-area { + fill: #28d094; +} +:host ::ng-deep .Comments .ct-series-a .ct-point { + stroke: #FF9149; +} +:host ::ng-deep .Comments .ct-line { + fill: none; + stroke-width: 2px; +} +:host ::ng-deep .Comments .ct-point{ + stroke-width: 0px; +} +:host ::ng-deep .Comments .ct-series-a .ct-line { + stroke: #FF9149; +} +:host ::ng-deep .Comments .ct-series-a .ct-area { + fill: #FF9149; +} +:host ::ng-deep .Views .ct-series-a .ct-point { + stroke: #FF4961; +} +:host ::ng-deep .Views .ct-line { + fill: none; + stroke-width: 2px; +} +:host ::ng-deep .Views .ct-point{ + stroke-width: 0px; +} +:host ::ng-deep .Views .ct-series-a .ct-line { + stroke: #FF4961; +} +:host ::ng-deep .Views .ct-series-a .ct-area { + fill: #FF4961; +} +:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{ + stroke: #ff9149; +} +:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{ + stroke: #ff9149; + +} +:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{ + fill: #ff9149; + fill-opacity: 1; +} +:host ::ng-deep .sp-line-total-cost .ct-point{ + stroke-width: 0px; +} +:host ::ng-deep .sp-line-total-cost svg { + margin-left: 13px; +} +:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-point{ + stroke: #28d094; +} +:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-line{ + stroke: #28d094; + +} +:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-area{ + fill: #28d094; + fill-opacity: 1; +} +:host ::ng-deep .sp-line-total-sales .ct-point{ + stroke-width: 0px; +} +:host ::ng-deep .sp-line-total-sales svg { + margin-left: 13px; +} +:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-point{ + stroke: #ff4961; +} +:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-line{ + stroke: #ff4961; + +} +:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-area{ + fill: #ff4961; + fill-opacity: 1; +} +:host ::ng-deep .sp-line-total-revenue .ct-point{ + stroke-width: 0px; +} +:host ::ng-deep .sp-line-total-revenue svg { + margin-left: 13px; +} +:host ::ng-deep .ct-bar { + fill: none; + stroke-width: 2px; +} +:host ::ng-deep .sp-bar-total-cost .ct-series-a .ct-bar{ + stroke: #ff9148; +} +:host ::ng-deep .sp-bar-total-sales .ct-series-a .ct-bar{ + stroke: #28d094; +} +:host ::ng-deep .sp-bar-total-revenue .ct-series-a .ct-bar{ + stroke: #ff4961; +} +:host ::ng-deep .sp-bar-total-cost { + margin-bottom: -90px; +} +:host ::ng-deep .sp-bar-total-sales{ + margin-bottom: -90px; +} +:host ::ng-deep .sp-bar-total-revenue{ + margin-bottom: -90px; +} +:host ::ng-deep .feedbacks .ct-series-a .ct-slice-donut { + stroke: #28d094; + stroke-width: 10px !important; +} +:host ::ng-deep .Subscribers .ct-series-a .ct-slice-donut { + stroke: #ff9149; + stroke-width: 10px !important; +} +:host ::ng-deep .Users .ct-series-a .ct-slice-donut { + stroke: #ff4961; + stroke-width: 10px !important; +} +:host ::ng-deep .ct-series-b .ct-slice-donut { + stroke: #eeeeee; + stroke-width: 12px !important; +} +:host ::ng-deep .text-muted { + position: absolute; +} diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html new file mode 100644 index 0000000..d57cb32 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/building/building.component.html @@ -0,0 +1,194 @@ +
+
+
+ +
+
+
+
+
+
+
+
+
+ New Feedbacks +

2,487

+
+
+ + + +
    +
  • +

    95%

    + Positive +
    • +
  • +

    5%

    + Negative +
    • +
+
+
+
+
+
+
+
+
+
+
+ New Feedbacks +

2,487

+
+
+ + + +
    +
  • +

    95%

    + Positive +
    • +
  • +

    5%

    + Negative +
    • +
+
+
+
+
+
+
+
+
+
+
+ New Feedbacks +

2,487

+
+
+ + + +
    +
  • +

    95%

    + Positive +
    • +
  • +

    5%

    + Negative +
    • +
+
+
+
+
+
+
+
+ +
+
+
diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.spec.ts b/src/app/content/hemat-app/monitoring/building/building.component.spec.ts similarity index 52% rename from src/app/content/hemat-app/monitoring/monitoring.component.spec.ts rename to src/app/content/hemat-app/monitoring/building/building.component.spec.ts index 5bc21ba..c4ac7f3 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.component.spec.ts +++ b/src/app/content/hemat-app/monitoring/building/building.component.spec.ts @@ -1,18 +1,18 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MonitoringComponent } from './monitoring.component'; +import { BuildingComponent } from './building.component'; -describe('MonitoringComponent', () => { - let component: MonitoringComponent; - let fixture: ComponentFixture; +describe('BuildingComponent', () => { + let component: BuildingComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MonitoringComponent ] + declarations: [ BuildingComponent ] }) .compileComponents(); - fixture = TestBed.createComponent(MonitoringComponent); + fixture = TestBed.createComponent(BuildingComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts new file mode 100644 index 0000000..afd5575 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/building/building.component.ts @@ -0,0 +1,58 @@ +import { Component } from "@angular/core"; +import { ChartApiService } from "src/app/_services/chart.api"; + +@Component({ + selector: "app-building", + templateUrl: "./building.component.html", + styleUrls: ["./building.component.css"], +}) +export class BuildingComponent { + Data: any; + public breadcrumb: any; + feedbacksdonutChart: any; + + constructor(private chartApiservice: ChartApiService) {} + + ngOnInit() { + this.breadcrumb = { + mainlabel: "Advance Social Cards", + links: [ + { + name: "Home", + isLink: true, + link: "/dashboard/sales", + }, + { + name: "Advance Cards", + isLink: true, + link: "#", + }, + { + name: "Social", + isLink: false, + link: "#", + }, + ], + }; + this.chartApiservice.getStatisticsData().subscribe((Response) => { + this.Data = Response; + this.getlineArea(); + }); + } + + getlineArea() { + const ChartData = this.Data; + this.feedbacksdonutChart = { + type: "Pie", + data: ChartData["feedbacksdonutChart"], + options: { + showLabel: false, + chartPadding: 0, + fullwidth: true, + height: "200px", + donut: true, + startAngle: 0, + }, + }; + } +} diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.css b/src/app/content/hemat-app/monitoring/monitoring.component.css deleted file mode 100644 index f3a877a..0000000 --- a/src/app/content/hemat-app/monitoring/monitoring.component.css +++ /dev/null @@ -1,281 +0,0 @@ -:host ::ng-deep .chartist .ct-series-a .ct-line { - - stroke: url(#gradient2); - stroke-linecap: round; - /* -webkit-filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5)) !important; */ - } -:host ::ng-deep .chartist { - filter: drop-shadow(0px 20px 11px rgba(252, 198, 198, 0.8)) !important; -} - -:host ::ng-deep .chartist .ct-grid{ - stroke-dasharray: 0px; - stroke: rgba(0, 0, 0, 0.4); - stroke-width: 0.6px; -} -:host ::ng-deep .chartist .ct-series-b .ct-line { - stroke: #c8c2c3; - stroke-dasharray: 8px 3px; -} - -:host ::ng-deep .chartist .ct-label.ct-vertical.ct-start { - font-weight: 600; - color: #636161; - font-size: 12px; -} -:host ::ng-deep .earningchart .ct-series-a .ct-area { - fill: rgba(255,117,136,1); -} -:host ::ng-deep .earningchart .ct-series-a .ct-point-circle { - stroke-width: 3px; - stroke: #FF4961; - fill: #ffffff; - } - -:host ::ng-deep .earningchart .ct-series-a .ct-line { - stroke: #FF4961; - stroke-width: 3px; -} - -:host ::ng-deep .avatar-xs { - width: 32px !important; - border: 2px solid #FFF; -} -:host ::ng-deep .donut-chart2{ - margin-bottom: -25px; - margin-top: -17px; -} - -:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut { - stroke: #28d094; - stroke-width: 5.5px !important; -} - -:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut { - stroke: #ff4961; - stroke-width: 5.5px !important; -} -:host ::ng-deep .donut-chart2 { --webkit-filter: drop-shadow(0px 10px 11px rgba(187,187,187)) !important; - filter: drop-shadow(0px 10px 11px rgba(187,187,187)); -} -:host ::ng-deep .donut-chart1 { - margin-bottom: -25px; - margin-top: -17px; -} -:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut { - stroke: #ff7889; - stroke-width: 5.5px !important; -} - -:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut { - stroke: #ffffff; - stroke-width: 5.5px !important; -} - -:host ::ng-deep .donut-chart1 .ct-label { - fill: #ffffff; - color: rgba(0, 0, 0, 0.4); - font-size: 1.75rem; - line-height: 1; -} - -:host ::ng-deep .donut-chart2 .ct-label { - fill: #ff4b62; - color: rgba(0, 0, 0, 0.4); - font-size: 1.75rem; - line-height: 1; -} - -:host ::ng-deep .position-relative { - position: relative !important; - margin-left: 0px; - -} - -:host ::ng-deep .pt-1, -.py-1 { - padding-top: 0rem !important; -} - -:host ::ng-deep .chartist .ct-label.ct-horizontal.ct-end { - /* align-items: flex-start; - justify-content: flex-start; - text-align: left; - text-anchor: start; */ - font-weight: 600; - color: #636161; - font-size: 12px; - font-family: sans-serif; -} - - -:host ::ng-deep .container > .ct-chart .ct-series.ct-series-c .ct-line { - stroke-width: 2px; - stroke-dasharray: 20px 180px; - stroke: #28d094; - animation: draw 0.3s linear infinite; -} - -@keyframes draw { - from { - stroke-dashoffset: 200 - } - - to { - stroke-dashoffset: 0; - } -} - -:host ::ng-deep .ct-series-c .ct-point, -.ct-series-c .ct-line, -.ct-series-c .ct-bar, -.ct-series-c .ct-slice-donut { - stroke: #28d094; -} - -:host ::ng-deep .ct-chart .ct-series.ct-series-c .ct-line { - stroke: #28d094; - -} - -:host ::ng-deep .ct-series-b .ct-point, -.ct-series-b .ct-line, -.ct-series-b .ct-bar, -.ct-series-b .ct-slice-donut { - stroke: #ff4961; -} - -:host ::ng-deep .container > .ct-chart .ct-series.ct-series-a .ct-line { - stroke-dasharray: 5px; - animation: dash 4s linear infinite; - -} - -@keyframes dash { - to { - stroke-dashoffset: 2000; - } -} - -:host ::ng-deep .ct-chart .ct-point { - stroke-width: 10px; - stroke-linecap: round; -} - -:host ::ng-deep .container > .ct-chart .ct-series.ct-series-b .ct-line { - stroke-width: 10px; - stroke-dasharray: 15px 5px; - animation: draw 4s linear infinite; -} - -@keyframes draw { - from { - stroke-dashoffset: 100 - } - - to { - stroke-dashoffset: 0; - } -} - - -:host ::ng-deep .container { - max-width: 100% !important; -} -:host ::ng-deep .btn.gradient-blackberry.active, -.gradient-blackberry { - background-color: #f05b4f; - -} - -:host ::ng-deep .Visit { - - background-color: #28d094; - -} - -:host ::ng-deep .Sales { - /* background-image: linear-gradient(45deg,#843cf7,#38b8f2)!important; */ - background-color: #d70206; - -} - -:host ::ng-deep .col-md-11 { - padding-right: 0 !important; -} - -:host ::ng-deep .col-md-1 { - padding-left: 0 !important; -} - -:host ::ng-deep .box-shadow-0 .ct-label.ct-vertical.ct-start { - - font-weight: bold; - color: #6e6e6e; - font-size: 12px; -} - -:host ::ng-deep .box-shadow-0 .ct-label.ct-horizontal.ct-end { - - font-weight: bold; - color: #6e6e6e; - font-size: 12px; -} - - -:host ::ng-deep .text-truncate { - padding: 0.9rem 2rem; -} - -.mr-2 { - margin-left: 1rem !important; - margin-right: 0rem !important; -} - -.mt-2 { - margin-top : 1.5rem !important; -} - -.ml-2 { - margin-left : 2rem !important; -} - -:host ::ng-deep .my-custom-cell { - padding-right: 6% !important; - padding-top: 1.5% !important; -} - -:host ::ng-deep .border_bottom { - margin-bottom: 0rem !important; -} - -:host ::ng-deep .border-top-0 { - padding: 1.25rem 2rem !important; -} - -:host ::ng-deep .progress { - box-shadow: 0 10px 18px 0 rgba(62, 57, 107, .2); - margin-top: 1rem!important; -} - -:host ::ng-deep .btn-danger { - color: #FFF !important; -} - -:host ::ng-deep .users-list li + li { - margin-left: -10px !important; -} - - -:host ::ng-deep .block-ui-wrapper { - background: rgba(255, 249, 249, 0.5) !important; -} - -:host ::ng-deep .ps--active-x > .ps__rail-x { - display: none !important; -} - -:host ::ng-deep .progress { - margin-bottom: 1rem !important; -} diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.html b/src/app/content/hemat-app/monitoring/monitoring.component.html deleted file mode 100644 index 98f8fe6..0000000 --- a/src/app/content/hemat-app/monitoring/monitoring.component.html +++ /dev/null @@ -1,271 +0,0 @@ - -
-
-
-
-
- -
-
-
- - - Revenue - - -
-
-
Current week
-

$82,124

-
-
-
Previous week
-

$52,502

-
-
-
- - -
- - -
-
-
-
-
-
- - - Hit Rate -12% - - -
- - -
- - -
-
-
- - -

Deals -55% - - 152/200 - -

-
- - -
- - -
-
-
-
-
-
-
-
-
-
Order Value
-

$ 88,568

-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
Calls
-

3,568

-
-
- -
-
-
-
-
-
-
-
-
- - - -
-
-
- - - Emails - - -

Open rate 89%

- -

Sent 310/500 -

- - - -
-
-
-
-
-

Top Products

-
- -
-
-
-
-
- - - - - - - - - - - - - - - -
iPone X2245
One Plus1850
Samsung S71550
-
-
-
-
-
-
-
-
-

Average Deal Size

-
-
-
-
-
-
-30%
-

$12,536

-

Per rep

-
-
-
12%
-

$18,548

-

Per team

-
-
-
-
-
-
-
- - - -
-
-
-
-
-
-

$1,596

- Total Earning -
-
- - -
-
- Statistics - for the last year. -
-
-
-
-
- -
-
-
-

Recent Sales

-
- -
-
-
-
- - - - - - - - - - - - - - - - - - - -
ProductCustomersCategoriesPopularityAmount
- {{row.product}} - -
    -
  • - Avatar -
    • -
- 		- - - - - - - {{ row.amount }}
-
-
-
-
-
- -
-
-
- - \ No newline at end of file diff --git a/src/app/content/hemat-app/monitoring/monitoring.component.ts b/src/app/content/hemat-app/monitoring/monitoring.component.ts deleted file mode 100644 index e9fe07c..0000000 --- a/src/app/content/hemat-app/monitoring/monitoring.component.ts +++ /dev/null @@ -1,333 +0,0 @@ -import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core'; -import * as Chartist from 'chartist'; -import { DatatableComponent } from '@swimlane/ngx-datatable'; -import { ChartEvent, ChartType } from 'ng-chartist'; -import { BlockUI, NgBlockUI } from 'ng-block-ui'; -import { PerfectScrollbarComponent, PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar'; -import { ChartApiService } from '../../../_services/chart.api'; -import { Router } from '@angular/router'; -export interface Chart { - type: ChartType; - data: Chartist.IChartistData; - options?: any; - responsiveOptions?: any; - events?: ChartEvent; -} -@Component({ - selector: 'app-monitoring', - templateUrl: './monitoring.component.html', - styleUrls: ['./monitoring.component.css'] -}) -export class MonitoringComponent implements OnInit{ - - @BlockUI('revenue') blockUIRevenue: NgBlockUI; - @BlockUI('hitrate') blockUIHitRate: NgBlockUI; - @BlockUI('email') blockUIEmail: NgBlockUI; - - public config: PerfectScrollbarConfigInterface = { suppressScrollY: true }; - @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent; - @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective; - - salesData: any; - lineArea: any; - earningchart: any; - donutChart2: any; - donutChart1: any; - options = { - bodyClass: ['pt-0'], - close: false, - expand: false, - minimize: false, - reload: true - }; - - hitRateOptions = { - bodyClass: ['bg-hexagons', 'pt-0'], - headerClass: ['bg-hexagons'], - cardClass: ['pull-up'], - close: false, - expand: false, - minimize: false, - reload: true - }; - - dealsOptions = { - bodyClass: ['bg-hexagons-danger'], - cardClass: ['pull-up'], - contentClass: ['bg-gradient-directional-danger'] - }; - - emailsOptions = { - bodyClass: ['pt-0'], - close: false, - expand: false, - minimize: false, - reload: true - }; - loadingIndicator = true; - - firstRow = ['../../../assets/images/portrait/small/avatar-s-4.png', - '../../../assets/images/portrait/small/avatar-s-5.png', - '../../../assets/images/portrait/small/avatar-s-6.png']; - secondRow = ['../../../assets/images/portrait/small/avatar-s-7.png', - '../../../assets/images/portrait/small/avatar-s-8.png']; - thirdRow = ['../../../assets/images/portrait/small/avatar-s-1.png', - '../../../assets/images/portrait/small/avatar-s-2.png', - '../../../assets/images/portrait/small/avatar-s-3.png']; - fourthRow = ['../../../assets/images/portrait/small/avatar-s-11.png', - '../../../assets/images/portrait/small/avatar-s-12.png']; - fifthRow = ['../../../assets/images/portrait/small/avatar-s-6.png', - '../../../assets/images/portrait/small/avatar-s-4.png']; - rows = [ - { - 'type': 'danger', 'value': 85, 'product': 'iPhone X', - 'image': this.firstRow, 'buttonname': 'Mobile', 'amount': '$ 1200.00', 'bagde': '+8 more' - }, - { - 'type': 'success', 'value': 75, 'product': 'iPad', - 'image': this.secondRow, 'buttonname': 'Teblet', 'amount': '$ 1190.00', 'bagde': '+5 more' - }, - { - 'type': 'danger', 'value': 65, 'product': 'OnePlus', - 'image': this.thirdRow, 'buttonname': 'Mobile', 'amount': '$ 999.00', 'bagde': '+3 more' - }, - { - 'type': 'success', 'value': 55, 'product': 'ZenPad', - 'image': this.fourthRow, 'buttonname': 'Teblet', 'amount': '$ 1150.00' - }, - { - 'type': 'danger', 'value': 45, 'product': 'Pixel 2', - 'image': this.fifthRow, 'buttonname': 'Mobile', 'amount': '$ 1180.00' - } - ]; - - @ViewChild(DatatableComponent, { static: true }) table: DatatableComponent; - Daygraph = true; - Weekgraph = false; - Monthgraph = false; - ngOnInit() { - this.chartApiservice.getSalesData().subscribe(Response => { - this.salesData = Response; - this.getChartdata(); - }); - } - constructor(private _renderer: Renderer2, private route: Router, - private chartApiservice: ChartApiService) { } - reloadRevenue() { - this.blockUIRevenue.start('Loading..'); - - setTimeout(() => { - this.blockUIRevenue.stop(); - }, 2500); - } - - reloadHitRate() { - this.blockUIHitRate.start('Please Wait..'); - - setTimeout(() => { - this.blockUIHitRate.stop(); - }, 2500); - } - - reloadEmail() { - this.blockUIEmail.start(); - - setTimeout(() => { - this.blockUIEmail.stop(); - }, 2500); - } - rotueInvoice() { - this.route.navigate(['/invoice/invoice-summary']); - } - getChartdata() { - const Chartdata = this.salesData; - this.lineArea = { - type: 'Line', - data: Chartdata['lineArea'], - options: { - lineSmooth: Chartist.Interpolation.simple({ - divisor: 2.8 - }), - fullWidth: true, - height: '270px', - showArea: false, - showPoint: false, - axisX: { - showGrid: false, - showLabel: true, - offset: 32 - }, - axisY: { - showGrid: true, - showLabel: true, - scaleMinSpace: 28, - offset: 44 - }, - }, - events: { - created(data: any): void { - const defs = data.svg.elem('defs'); - defs.elem('linearGradient', { - id: 'gradient2', - x1: 0, - y1: 0, - x2: 1, - y2: 0 - }).elem('stop', { - offset: 0, - 'stop-color': 'rgb(255,73,97)' - }).parent().elem('stop', { - offset: 1, - 'stop-color': 'rgb(255,73,97)' - }); - }, - draw(data: any): void { - const circleRadius = 4; - if (data.type === 'point') { - const circle = new Chartist.Svg('circle', { - cx: data.x, - cy: data.y, - r: circleRadius, - class: 'ct-point-circle' - }); - data.element.replace(circle); - } else if (data.type === 'label') { - // adjust label position for rotation - const dX = data.width / 2 + (26 - data.width); - data.element.attr({ x: data.element.attr('x') - dX }); - } - } - }, - }; - this.earningchart = { - type: 'Line', - data: Chartdata['earningchart'], - options: { - chartPadding: 0, - height: '440px', - low: 0, - showArea: true, - fullWidth: true, - onlyInteger: true, - axisX: { - showGrid: false, - showLabel: false, - offset: -1 - }, - axisY: { - scaleMinSpace: 40, - showGrid: false, - showLabel: false, - offset: -2 - }, - }, - responsiveOptions: [ - ['screen and (max-width: 640px) and (min-width: 381px)', { - axisX: { - labelInterpolationFnc: function (value, index) { - return index % 2 === 0 ? value : null; - } - } - }], - ['screen and (max-width: 380px)', { - axisX: { - labelInterpolationFnc: function (value, index) { - return index % 3 === 0 ? value : null; - } - } - }] - ], - events: { - created(data: any): void { - const defs = data.svg.elem('defs'); - defs.elem('linearGradient', { - id: 'gradient1', - x1: 0, - y1: 0, - x2: 1, - y2: 0 - }).elem('stop', { - offset: 0, - 'stop-color': 'rgb(255,73,97)' - }).parent().elem('stop', { - offset: 1, - 'stop-color': 'rgb(255,73,97)' - }); - }, - draw(data: any): void { - const circleRadius = 6; - if (data.type === 'point') { - const circle = new Chartist.Svg('circle', { - cx: data.x, - cy: data.y, - r: circleRadius, - class: 'ct-point-circle' - }); - data.element.replace(circle); - } - } - }, - }; - // Doughnut - this.donutChart2 = { - type: 'Pie', - data: Chartdata['donut1'], - options: { - chartPadding: 0, - fullwidth: true, - height: '273px', - donut: true, - showLabel: true, - startAngle: 0, - labelInterpolationFnc: function (value) { - const total = 82; - return total + '%'; - } - }, - events: { - draw(data: any): void { - if (data.type === 'label') { - if (data.index === 0) { - data.element.attr({ - dx: data.element.root().width() / 2, - dy: data.element.root().height() / 2 - }); - } else { - data.element.remove(); - } - } - } - } - }; - this.donutChart1 = { - type: 'Pie', - data: Chartdata['donut2'], - options: { - chartPadding: 0, - fullwidth: true, - height: '273px', - donut: true, - showLabel: true, - labelInterpolationFnc: function (value) { - const total = 76; - return total + '%'; - } - }, - events: { - draw(data: any): void { - if (data.type === 'label') { - if (data.index === 0) { - data.element.attr({ - dx: data.element.root().width() / 2, - dy: data.element.root().height() / 2 - }); - } else { - data.element.remove(); - } - } - } - } - }; - } - -} diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts index ea7ddf7..01482f2 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.module.ts +++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts @@ -1,9 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MonitoringComponent } from './monitoring.component'; import { RouterModule } from '@angular/router'; - import { ChartistModule } from 'ng-chartist'; import { NgxDatatableModule } from '@swimlane/ngx-datatable'; import { FormsModule } from '@angular/forms'; @@ -14,12 +12,14 @@ import { BlockUIModule } from 'ng-block-ui'; import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component'; import { MatchHeightModule } from '../../../content/partials/general/match-height/match-height.module'; import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; - - +import { BuildingComponent } from './building/building.component'; +import { RoomComponent } from './room/room.component'; +import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module'; @NgModule({ declarations: [ - MonitoringComponent + BuildingComponent, + RoomComponent ], imports: [ CommonModule, @@ -30,15 +30,20 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; MatchHeightModule, NgxDatatableModule, PerfectScrollbarModule, + BreadcrumbModule, NgbModule, BlockUIModule.forRoot({ template: BlockTemplateComponent }), RouterModule.forChild([ { - path: '', - component: MonitoringComponent - } + path: 'monitoring-building', + component: BuildingComponent + }, + { + path: 'monitoring-room', + component: RoomComponent + }, ]) ] }) diff --git a/src/app/content/hemat-app/monitoring/room/room.component.css b/src/app/content/hemat-app/monitoring/room/room.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/content/hemat-app/monitoring/room/room.component.html b/src/app/content/hemat-app/monitoring/room/room.component.html new file mode 100644 index 0000000..79f0391 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/room/room.component.html @@ -0,0 +1 @@ +

room works!

diff --git a/src/app/content/hemat-app/monitoring/room/room.component.spec.ts b/src/app/content/hemat-app/monitoring/room/room.component.spec.ts new file mode 100644 index 0000000..88402cd --- /dev/null +++ b/src/app/content/hemat-app/monitoring/room/room.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoomComponent } from './room.component'; + +describe('RoomComponent', () => { + let component: RoomComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RoomComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RoomComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/content/hemat-app/monitoring/room/room.component.ts b/src/app/content/hemat-app/monitoring/room/room.component.ts new file mode 100644 index 0000000..4dbe412 --- /dev/null +++ b/src/app/content/hemat-app/monitoring/room/room.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-room', + templateUrl: './room.component.html', + styleUrls: ['./room.component.css'] +}) +export class RoomComponent { + +}