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

.

Browse Source
This commit is contained in:
insanity 2018-02-08 18:26:52 +09:00
parent f0b7e19946
commit d2782be605
10 changed files with 220 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/commons/component/dashboard-card/dashboard-card.component.html
View File

@ -1,15 +1,21 @@
<div fxLayout="row" class="dashcard mat-elevation-z4 " >
<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 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>

2
src/app/commons/component/dashboard-card/dashboard-card.component.scss
View File

@ -13,7 +13,7 @@
@mixin dashcard($theme) {
.dashcard {
margin: 10px 5px;
margin: 0px 5px 0px 5px;
height: 100px;
background-color:white;
}

12
src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.html Normal file
View File

@ -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
src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.scss Normal file
View File

25
src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.spec.ts Normal file
View File

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

34
src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.ts Normal file
View File

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

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

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

50
src/app/pages/overview/overview-page.component.scss
View File

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

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

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

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

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