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

overview items

Browse Source
This commit is contained in:
insanity 2018-02-20 18:40:39 +09:00
parent d607f2c847
commit 69b59f094d
14 changed files with 264 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/commons/component/layouts.module.ts
View File

@ -7,6 +7,8 @@ import { MenuItemComponent } from './menu-item/menu-item.component';
import { SubMenubarComponent } from './sub-menubar/sub-menubar.component';
import { FlexLayoutModule } from '@angular/flex-layout';
import { InfoTableComponent } from './info-table/info-table.component';
import { SensorSummaryComponent } from './sensor-summary/sensor-summary.component';
import { SensorItemFilterComponent } from './sensor-item-filter/sensor-item-filter.component';
@NgModule({
@ -14,6 +16,6 @@ import { InfoTableComponent } from './info-table/info-table.component';
CommonModule,
FlexLayoutModule,
],
declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent, SubMenubarComponent, InfoTableComponent]
declarations: [SidebarComponent, HeaderComponent, FooterComponent, MenuItemComponent, SubMenubarComponent, InfoTableComponent, SensorSummaryComponent, SensorItemFilterComponent]
})
export class LayoutsModule { }

3
src/app/commons/component/sensor-item-filter/sensor-item-filter.component.html Normal file
View File

@ -0,0 +1,3 @@
<p>
sensor-item-filter works!
</p>

0
src/app/commons/component/sensor-item-filter/sensor-item-filter.component.scss Normal file
View File

25
src/app/commons/component/sensor-item-filter/sensor-item-filter.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SensorItemFilterComponent } from './sensor-item-filter.component';
describe('SensorItemFilterComponent', () => {
let component: SensorItemFilterComponent;
let fixture: ComponentFixture<SensorItemFilterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SensorItemFilterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SensorItemFilterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/commons/component/sensor-item-filter/sensor-item-filter.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'of-sensor-item-filter',
templateUrl: './sensor-item-filter.component.html',
styleUrls: ['./sensor-item-filter.component.scss']
})
export class SensorItemFilterComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

36
src/app/commons/component/sensor-summary/sensor-summary.component.html Normal file
View File

@ -0,0 +1,36 @@
<div class="sales-list mat-elevation-z4 ">
<mat-toolbar>
<mat-toolbar-row>
<span>Sensor Items Summary</span>
<span class="pull-right"></span>
<button mat-icon-button>
<mat-icon (click)="reload();">refresh</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
<mat-progress-bar *ngIf="showLoader" [color]="'primary'" [mode]="'indeterminate'" [value]="90" [bufferValue]="'10'">
</mat-progress-bar>
<mat-list>
<mat-list-item *ngFor="let status of sensorStatusList" (click)="handleSensorFilterClick(status)">
<img matListAvatar [src]="status.icon">
<h3> {{status.name}} </h3>
<span class="pull-right"></span>
<mat-chip-list>
<mat-chip *ngIf="status.name=='UP'" color="primary" selected="true">
{{status.count}}
</mat-chip>
<mat-chip *ngIf="status.name=='DOWN'" color="warn" selected="true">
{{status.count}}
</mat-chip>
<mat-chip *ngIf="status.name=='WARN'" color="warn" selected="true">
{{status.count}}
</mat-chip>
<mat-chip *ngIf="status.name=='ERROR'" color="warn" selected="true">
{{status.count}}
</mat-chip>
</mat-chip-list>
</mat-list-item>
</mat-list>
</div>

27
src/app/commons/component/sensor-summary/sensor-summary.component.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin sensor-summary($theme) {
.sensor-list{
margin: 10px 5px;
background: white;
}
.pull-right{
flex: 1 1 auto;
}
mat-list-item:hover {
background: #e8eaf6;
cursor: pointer;
}
.mat-chip {
padding: 1px 13px;
}
}
.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/sensor-summary/sensor-summary.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SensorSummaryComponent } from './sensor-summary.component';
describe('SensorSummaryComponent', () => {
let component: SensorSummaryComponent;
let fixture: ComponentFixture<SensorSummaryComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SensorSummaryComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SensorSummaryComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

53
src/app/commons/component/sensor-summary/sensor-summary.component.ts Normal file
View File

@ -0,0 +1,53 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'of-sensor-summary',
templateUrl: './sensor-summary.component.html',
styleUrls: ['./sensor-summary.component.scss']
})
export class SensorSummaryComponent implements OnInit {
public showLoader = false;
// icon 상태별 색깔 아이콘으로 교체
public sensorStatusList = [
{
icon: 'https://www.bugsplat.com/images/icons/angular_icon_blue.png',
name: 'UP',
count: '10',
},
{
icon: 'https://firebase.google.com/_static/4d0ad1dc9e/images/firebase/logo.png',
name: 'DOWN',
count: '20',
},
{
// tslint:disable-next-line:max-line-length
icon: 'https://crunchbase-production-res.cloudinary.com/image/upload/c_lpad,h_256,w_256,f_jpg/v1481031537/j9c8urpwe7uabwmt2qau.png',
name: 'WARN',
count: 30,
},
{
icon: 'https://www.gstatic.com/images/branding/product/2x/app_maker_64dp.png',
name: 'ERROR',
count: 40,
}
];
constructor() { }
ngOnInit() {
}
reload() {
this.showLoader = true;
setTimeout(() => {
this.showLoader = false;
}, 2000);
}
handleSensorFilterClick(t: any) {
console.log(t);
}
}

6
src/app/commons/ui/material/material.module.ts
View File

@ -7,7 +7,8 @@ import {
MatToolbarModule, MatSnackBarModule, MatSidenavModule,
MatTabsModule, MatSelectModule, MatRadioModule,
MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule
MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule,
MatProgressBarModule
} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
@ -18,7 +19,8 @@ const MATERIAL_MODULES: any[] = [
MatToolbarModule, MatSnackBarModule, MatSidenavModule,
MatTabsModule, MatSelectModule, MatRadioModule,
MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule
MatDialogModule, MatGridListModule, MatTableModule, MatPaginatorModule,
MatProgressBarModule
];
@NgModule({

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

@ -3,11 +3,14 @@
<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 fxLayout="row" fxLayoutWrap>
<of-sensor-summary fxFlex="60" fxFlex.lt-sm="100" fxFlex.sm="100" fxFlex.md="70" ></of-sensor-summary>
<of-sensor-item-filter></of-sensor-item-filter>
</div>
</div>
@ -17,6 +20,8 @@
<h3 class="mat-headline" fxFlex="80">Activities</h3>
</div>
<mat-divider></mat-divider>
<perfect-scrollbar>
<div>
<mat-list>
<mat-list-item *ngFor="let message of messages" (click)="handleActivityClick(message)">
@ -25,9 +30,11 @@
<p mat-line>{{message.date}} {{message.from}}</p>
</mat-list-item>
</mat-list>
</div>
</perfect-scrollbar>
</div>
</div>
<div>
<button mat-raised-button (click)="openDialog()">Pick one</button>
<!-- <button mat-raised-button (click)="openDialog()">Pick one</button> -->
</div>

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

@ -18,22 +18,62 @@ export class OverviewPageComponent implements OnInit {
public messages = [
{
from: '존버왕김단타',
from: '1존버왕김단타',
content: 'pac코인 여태 안 탄 혹우 있냐',
date: '2017-01-01'
},
{
from: '코인왕박손절',
from: '2코인왕박손절',
content: '큉텀이 낳냐 아다가 낳냐',
date: '2017-01-01'
},
{
from: '존버왕김단타',
from: '3존버왕김단타',
content: 'pac코인 여태 안 탄 혹우 있냐',
date: '2017-01-01'
},
{
from: '코인왕박손절',
from: '4코인왕박손절',
content: '큉텀이 낳냐 아다가 낳냐',
date: '2017-01-01'
},
{
from: '5존버왕김단타',
content: 'pac코인 여태 안 탄 혹우 있냐',
date: '2017-01-01'
},
{
from: '6코인왕박손절',
content: '큉텀이 낳냐 아다가 낳냐',
date: '2017-01-01'
},
{
from: '7존버왕김단타',
content: 'pac코인 여태 안 탄 혹우 있냐',
date: '2017-01-01'
},
{
from: '8코인왕박손절',
content: '큉텀이 낳냐 아다가 낳냐',
date: '2017-01-01'
},
{
from: '9존버왕김단타',
content: 'pac코인 여태 안 탄 혹우 있냐',
date: '2017-01-01'
},
{
from: '10코인왕박손절',
content: '큉텀이 낳냐 아다가 낳냐',
date: '2017-01-01'
},
{
from: '11존버왕김단타',
content: 'pac코인 여태 안 탄 혹우 있냐',
date: '2017-01-01'
},
{
from: '12코인왕박손절',
content: '큉텀이 낳냐 아다가 낳냐',
date: '2017-01-01'
},

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

@ -6,17 +6,23 @@ import { DashboardCardComponent } from 'app/commons/component/dashboard-card/das
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';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { SensorSummaryComponent } from '../../commons/component/sensor-summary/sensor-summary.component';
import { SensorItemFilterComponent } from '../../commons/component/sensor-item-filter/sensor-item-filter.component';
@NgModule({
imports: [
CommonModule,
OverviewPageRoutingModule,
DashboardCardModule,
MaterialModule
MaterialModule,
PerfectScrollbarModule
],
declarations: [
OverviewPageComponent,
AddDashboardDialogComponent
AddDashboardDialogComponent,
SensorSummaryComponent,
SensorItemFilterComponent
],
entryComponents: [
AddDashboardDialogComponent

3
src/theme/theme.scss
View File

@ -3,6 +3,7 @@
@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';
@import '~app/commons/component/sensor-summary/sensor-summary.component.scss';
$mat-light-theme-background: (
status-bar: map_get($mat-grey, 300),
@ -56,6 +57,8 @@ of-dashboard-card {
@include angular-material-theme($cdk-theme);
@include auth($cdk-theme);
@include sensor-summary($cdk-theme);
html {
height:100%;