diff --git a/package.json b/package.json index 8e1b72d..c7f2097 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@ngrx/store-devtools": "^5.0.1", "core-js": "^2.5.3", "hammerjs": "^2.0.8", + "ng2-odometer": "^1.1.3", "ngx-perfect-scrollbar": "^5.3.1", "rxjs": "^5.5.6", "zone.js": "^0.8.20" diff --git a/src/app/commons/component/dashboard-card/dashboard-card.component.html b/src/app/commons/component/dashboard-card/dashboard-card.component.html new file mode 100644 index 0000000..f37ea37 --- /dev/null +++ b/src/app/commons/component/dashboard-card/dashboard-card.component.html @@ -0,0 +1,15 @@ +
+
+ {{dashData?.icon}} +
+
+ +
+ + +
+

+ {{dashData?.title}} +

+
+
\ No newline at end of file diff --git a/src/app/commons/component/dashboard-card/dashboard-card.component.scss b/src/app/commons/component/dashboard-card/dashboard-card.component.scss new file mode 100644 index 0000000..6fc8e0b --- /dev/null +++ b/src/app/commons/component/dashboard-card/dashboard-card.component.scss @@ -0,0 +1,41 @@ +@mixin mat-icon($size: 24px) { + font-size: $size; + height: $size; + width: $size; + color:white; +} + +@mixin mat-headline { + margin: 0px; + color: white; +} + +@mixin dashcard($theme) { + + .dashcard { + margin: 10px 5px; + height: 100px; + background-color:white; + } + .mat-icon { + @include mat-icon(40px); + } + .border-top { + border-top: 1px solid white; + } + .mat-headline { + @include mat-headline(); + } + .mat-body-1{ + @include mat-headline(); + } +} +.nav-item { + transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); + cursor: default; + + &:hover { + transform: translate(0, -8px); + box-shadow: 0 20px 20px rgba(0, 0, 0, .16) + } +} \ No newline at end of file diff --git a/src/app/commons/component/dashboard-card/dashboard-card.component.spec.ts b/src/app/commons/component/dashboard-card/dashboard-card.component.spec.ts new file mode 100644 index 0000000..f23690b --- /dev/null +++ b/src/app/commons/component/dashboard-card/dashboard-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardCardComponent } from './dashboard-card.component'; + +describe('DashboardCardComponent', () => { + let component: DashboardCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashboardCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/commons/component/dashboard-card/dashboard-card.component.ts b/src/app/commons/component/dashboard-card/dashboard-card.component.ts new file mode 100644 index 0000000..a92187d --- /dev/null +++ b/src/app/commons/component/dashboard-card/dashboard-card.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'of-dashboard-card', + templateUrl: './dashboard-card.component.html', + styleUrls: ['./dashboard-card.component.scss'] +}) +export class DashboardCardComponent implements OnInit { + + @Input() dashData: any; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/commons/component/dashboard-card/dashboard-card.module.ts b/src/app/commons/component/dashboard-card/dashboard-card.module.ts new file mode 100644 index 0000000..eb38f7a --- /dev/null +++ b/src/app/commons/component/dashboard-card/dashboard-card.module.ts @@ -0,0 +1,23 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; +import { MaterialModule } from 'app/commons/ui/material/material.module'; +import { DashboardCardComponent } from 'app/commons/component/dashboard-card/dashboard-card.component'; +import { Ng2OdometerModule } from 'ng2-odometer'; + + +@NgModule({ + imports: [ + CommonModule, + MaterialModule, + RouterModule, + Ng2OdometerModule.forRoot() + ], + declarations: [ + DashboardCardComponent, + ], + exports: [ + DashboardCardComponent + ] +}) +export class DashboardCardModule { } diff --git a/src/app/pages/overview/overview-page.component.html b/src/app/pages/overview/overview-page.component.html index 9e1daf9..a341432 100644 --- a/src/app/pages/overview/overview-page.component.html +++ b/src/app/pages/overview/overview-page.component.html @@ -1,3 +1,5 @@ -

- overview works! -

+
+
+ +
+
\ No newline at end of file diff --git a/src/app/pages/overview/overview-page.component.ts b/src/app/pages/overview/overview-page.component.ts index 9140bea..7aaac1c 100644 --- a/src/app/pages/overview/overview-page.component.ts +++ b/src/app/pages/overview/overview-page.component.ts @@ -7,6 +7,13 @@ import { Component, OnInit } from '@angular/core'; }) export class OverviewPageComponent implements OnInit { + public dashCard = [ + { colorDark: '#5C6BC0', colorLight: '#7986CB', number: 1000, title: 'HOSTS', icon: 'devices_other' }, + { colorDark: '#42A5F5', colorLight: '#64B5F6', number: 2000, title: 'APPLICATIONS', icon: 'apps' }, + { colorDark: '#26A69A', colorLight: '#4DB6AC', number: 3000, title: 'SENSORS', icon: 'memory' }, + // { colorDark: '#66BB6A', colorLight: '#81C784', number: 1221, title: 'BANKING', icon: 'account_balance' } + ]; + constructor() { } ngOnInit() { diff --git a/src/app/pages/overview/overview-page.module.ts b/src/app/pages/overview/overview-page.module.ts index c8fc9f1..670fa6b 100644 --- a/src/app/pages/overview/overview-page.module.ts +++ b/src/app/pages/overview/overview-page.module.ts @@ -2,11 +2,16 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { OverviewPageRoutingModule } from 'app/pages/overview/overview-page-routing.module'; import { OverviewPageComponent } from 'app/pages/overview/overview-page.component'; +import { DashboardCardComponent } from 'app/commons/component/dashboard-card/dashboard-card.component'; +import { DashboardCardModule } from 'app/commons/component/dashboard-card/dashboard-card.module'; +import { MaterialModule } from 'app/commons/ui/material/material.module'; @NgModule({ imports: [ CommonModule, - OverviewPageRoutingModule + OverviewPageRoutingModule, + DashboardCardModule, + MaterialModule ], declarations: [ OverviewPageComponent diff --git a/src/theme/theme.scss b/src/theme/theme.scss index 31d99c1..01e3655 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -2,6 +2,7 @@ @import '~app/pages/pages.component.scss'; @import '~app/commons/component/sidebar/sidebar.component.scss'; @import '~app/commons/component/menu-item/menu-item.component.scss'; +@import '~app/commons/component/dashboard-card/dashboard-card.component.scss'; $mat-light-theme-background: ( status-bar: map_get($mat-grey, 300), @@ -41,11 +42,18 @@ of-sidebar{ @include mat-list-theme($cdk-sidebar-theme); } - of-menu-item{ @include menu-item($cdk-theme,20px) } +of-dashboard-card { + $dashcard-primary: mat-palette($primary); + $dashcard-accent: mat-palette($accent); + $dashcard-warn: mat-palette($warn); + $dashcard-theme: mat-dark-theme($dashcard-primary, $dashcard-accent,$dashcard-warn); + @include dashcard($dashcard-theme); +} + @include angular-material-theme($cdk-theme); @include auth($cdk-theme); diff --git a/yarn.lock b/yarn.lock index 27cd440..c7b0ef1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4440,6 +4440,12 @@ netmask@~1.0.4: version "1.0.6" resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35" +ng2-odometer@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/ng2-odometer/-/ng2-odometer-1.1.3.tgz#27209e7ed225790120635aba2281b8a9318b6f47" + dependencies: + odometer "^0.4.8" + ngx-perfect-scrollbar@^5.3.1: version "5.3.1" resolved "https://registry.yarnpkg.com/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-5.3.1.tgz#7fcfb26a93554ac60d0444bfaa4b9487f23c5cbc" @@ -4721,6 +4727,10 @@ obuf@^1.0.0, obuf@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e" +odometer@^0.4.8: + version "0.4.8" + resolved "https://registry.yarnpkg.com/odometer/-/odometer-0.4.8.tgz#2f6703bf4c6b384c278236d04d4bc8171abe4374" + on-finished@~2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"