.
This commit is contained in:
insanity
parent
f0b7e19946
commit
d2782be605
|
|
@ -1,15 +1,21 @@
|
|||
<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>
|
||||
<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>
|
||||
<!-- <div class="dashcard mat-elevation-z4" [style.background]="dashData?.colorDark">
|
||||
<div>
|
||||
summary
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
@mixin dashcard($theme) {
|
||||
|
||||
.dashcard {
|
||||
margin: 10px 5px;
|
||||
margin: 0px 5px 0px 5px;
|
||||
height: 100px;
|
||||
background-color:white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<mat-form-field>
|
||||
<input matInput placeholder="Search">
|
||||
</mat-form-field>
|
||||
<p *ngIf="dashboards == null || dashboards.length == 0">No dashboards found.</p>
|
||||
<div *ngFor="let dashboard of dashboards">
|
||||
<button mat-button>{{dashboard.name}}</button>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="New Dashboard">
|
||||
</mat-form-field>
|
||||
<button mat-raised-button color="accent">OK</button>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { AddDashboardDialogComponent } from './add-dashboard-dialog.component';
|
||||
|
||||
describe('AddDashboardDialogComponent', () => {
|
||||
let component: AddDashboardDialogComponent;
|
||||
let fixture: ComponentFixture<AddDashboardDialogComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ AddDashboardDialogComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(AddDashboardDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { Component, OnInit, Input } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'of-add-dashboard-dialog',
|
||||
templateUrl: './add-dashboard-dialog.component.html',
|
||||
styleUrls: ['./add-dashboard-dialog.component.scss']
|
||||
})
|
||||
export class AddDashboardDialogComponent implements OnInit {
|
||||
|
||||
dashboards = [
|
||||
{
|
||||
id: '0',
|
||||
name: 'Dashboard1',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
name: 'Dashboard2',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Dashboard3',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Dashboard4',
|
||||
},
|
||||
];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,5 +1,33 @@
|
|||
<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 fxLayout="row" fxLayoutAlign="space-between stretch" fxFlexFil fxFill fxLayoutGap="1px">
|
||||
|
||||
<div fxFlex="70" fxLayout="column" class="mat-elevation-z2 activity-list-container">
|
||||
|
||||
<div fxLayoutAlign="start center" fxLayout="row">
|
||||
|
||||
<div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
|
||||
<of-dashboard-card [dashData]="dash"></of-dashboard-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add">
|
||||
<div fxFlex="10" fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<h3 class="mat-headline" fxFlex="80">Activities</h3>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<div>
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let message of messages" (click)="handleActivityClick(message)">
|
||||
<img matListAvatar src="assets/images/user-image2.jpg" alt="...">
|
||||
<h4 mat-line>{{message.content}} </h4>
|
||||
<p mat-line>{{message.date}} {{message.from}}</p>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button mat-raised-button (click)="openDialog()">Pick one</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
.full {
|
||||
width: 100%;
|
||||
}
|
||||
.activity-list-container {
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
|
||||
.activity-list {
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
div {
|
||||
margin: 0;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-list-header {
|
||||
background-color: #eee;
|
||||
padding: 10px;
|
||||
div {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.activity-add {
|
||||
padding: 10px;
|
||||
background: white;
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
h3 {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
|
||||
import { AddDashboardDialogComponent } from 'app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component';
|
||||
|
||||
@Component({
|
||||
selector: 'of-page-overview',
|
||||
|
|
@ -14,9 +16,46 @@ export class OverviewPageComponent implements OnInit {
|
|||
// { colorDark: '#66BB6A', colorLight: '#81C784', number: 1221, title: 'BANKING', icon: 'account_balance' }
|
||||
];
|
||||
|
||||
constructor() { }
|
||||
public messages = [
|
||||
{
|
||||
from: '존버왕김단타',
|
||||
content: 'pac코인 여태 안 탄 혹우 있냐',
|
||||
date: '2017-01-01'
|
||||
},
|
||||
{
|
||||
from: '코인왕박손절',
|
||||
content: '큉텀이 낳냐 아다가 낳냐',
|
||||
date: '2017-01-01'
|
||||
},
|
||||
{
|
||||
from: '존버왕김단타',
|
||||
content: 'pac코인 여태 안 탄 혹우 있냐',
|
||||
date: '2017-01-01'
|
||||
},
|
||||
{
|
||||
from: '코인왕박손절',
|
||||
content: '큉텀이 낳냐 아다가 낳냐',
|
||||
date: '2017-01-01'
|
||||
},
|
||||
];
|
||||
|
||||
constructor(public dialog: MatDialog) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
handleActivityClick(message: any) {
|
||||
alert(message.content);
|
||||
}
|
||||
|
||||
openDialog() {
|
||||
const dialogRef = this.dialog.open(AddDashboardDialogComponent, {
|
||||
width: '350px',
|
||||
data: { }
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
console.log('The dialog was closed');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { OverviewPageComponent } from 'app/pages/overview/overview-page.componen
|
|||
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';
|
||||
import { AddDashboardDialogComponent } from './add-dashboard-dialog/add-dashboard-dialog.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -14,7 +15,11 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
|
|||
MaterialModule
|
||||
],
|
||||
declarations: [
|
||||
OverviewPageComponent
|
||||
OverviewPageComponent,
|
||||
AddDashboardDialogComponent
|
||||
],
|
||||
entryComponents: [
|
||||
AddDashboardDialogComponent
|
||||
]
|
||||
})
|
||||
export class OverviewPageModule { }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user