overflow_backup_2018_0455/overflow-webapp
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

overview

Browse Source
This commit is contained in:
insanity 2018-02-07 15:47:36 +09:00
parent b02265ae78
commit bf3ef51454
11 changed files with 159 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"

15
src/app/commons/component/dashboard-card/dashboard-card.component.html Normal file
View File

@ -0,0 +1,15 @@
<div fxLayout="row" class="dashcard mat-elevation-z4 " >
<div fxFlex="40" fxLayout="row" fxLayoutAlign="center center" [style.background]="dashData?.colorLight">
<mat-icon class="cardIcon">{{dashData?.icon}}</mat-icon>
</div>
<div fxFlex="60" fxLayout="column" fxLayoutAlign="center center" [style.background]="dashData?.colorDark" >
<div style="color: white;font-size: 40px">
<ng2-odometer [number]="dashData?.number" [config]="{ }"></ng2-odometer>
</div>
<p class="mat-body-1 border-top">
{{dashData?.title}}
</p>
</div>
</div>

41
src/app/commons/component/dashboard-card/dashboard-card.component.scss Normal file
View File

@ -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)
}
}

25
src/app/commons/component/dashboard-card/dashboard-card.component.spec.ts Normal file
View File

@ -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<DashboardCardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DashboardCardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DashboardCardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

17
src/app/commons/component/dashboard-card/dashboard-card.component.ts Normal file
View File

@ -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() {
}
}

23
src/app/commons/component/dashboard-card/dashboard-card.module.ts Normal file
View File

@ -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 { }

8
src/app/pages/overview/overview-page.component.html
View File

@ -1,3 +1,5 @@
<p>
overview works!
</p>
<div fxLayout="row" fxLayoutWrap>
<div *ngFor="let dash of dashCard" fxFlex.lt-sm="100" fxFlex.sm="50" fxFlex.md="25" >
<of-dashboard-card [dashData]="dash" ></of-dashboard-card>
</div>
</div>

7
src/app/pages/overview/overview-page.component.ts
View File

@ -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() {

7
src/app/pages/overview/overview-page.module.ts
View File

@ -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

10
src/theme/theme.scss
View File

@ -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);

10
yarn.lock
View File

@ -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"