From 536cd437985f6ddc6481e373ab6572dd62d2c3e6 Mon Sep 17 00:00:00 2001 From: sally <15210789943@qq.com> Date: Sun, 18 Nov 2018 22:55:13 +0800 Subject: [PATCH 01/13] Add table, Support multiply boards and slide them periodly --- package.json | 1 + src/app/app.component.css | 4 ++ src/app/app.component.html | 67 ++++++++++----------- src/app/app.module.ts | 6 ++ src/app/cad-board/cad-board.component.css | 21 +++++++ src/app/cad-board/cad-board.component.html | 31 ++++++---- src/app/cad-board/cad-board.component.ts | 69 +++++++++++++++------- 7 files changed, 136 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index a6a40be..d40890b 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "@types/shelljs": "^0.8.0", "angular-google-charts": "0.0.9", "core-js": "^2.5.4", + "element-angular": "^0.7.6", "firebase": "^5.5.4", "rxjs": "~6.2.0", "shelljs": "^0.8.2", diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..9190d68 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,4 @@ +.footer{ + position: relative; + top: -160px +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 7bfa84b..67a7253 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -7,36 +7,37 @@

- - - CAD-BOARD PROJECT IS HIRING! - - -
    -
  1. - Database Administrator: TBH -
  2. -
  3. - Angular Developer: Hui KONG -
  4. -
  5. - Node JS Developer: TBH -
  6. -
  7. - System Administrator: Min LIN -
  8. -
  9. - UI Designer: TBH -
  10. -
- - -

- Contact Huan LI for details. -

- -
- -

Advertisement space for rent!

- -
+ \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 670136d..3675320 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,11 @@ import { GoogleChartsModule } from 'angular-google-charts' import { AppComponent } from './app.component' import { CadScreenComponent } from './cad-board/cad-board.component' +// import module +import { ElModule } from 'element-angular' + +// if you use webpack, import style +import 'element-angular/theme/index.css' @NgModule({ declarations: [ @@ -16,6 +21,7 @@ import { CadScreenComponent } from './cad-board/cad-board.component' ], imports: [ BrowserModule, + ElModule.forRoot(), GoogleChartsModule, FirebaseModule, HttpClientModule, diff --git a/src/app/cad-board/cad-board.component.css b/src/app/cad-board/cad-board.component.css index e69de29..8081a51 100644 --- a/src/app/cad-board/cad-board.component.css +++ b/src/app/cad-board/cad-board.component.css @@ -0,0 +1,21 @@ +@import "~element-angular/theme/index.css"; +.header{ + position: relative; +} +.tableContent{ + width: 300px; + position: relative; + left: 600px; + top: 20px; +} +.chartContent{ + position: relative; + top: -170px; +} + +.tableContent{ + border: 1px solid #ddd; + padding: 8px; + line-height: 2; + border-radius: 5px; +} diff --git a/src/app/cad-board/cad-board.component.html b/src/app/cad-board/cad-board.component.html index a3a084a..92b3c04 100644 --- a/src/app/cad-board/cad-board.component.html +++ b/src/app/cad-board/cad-board.component.html @@ -1,10 +1,21 @@ - - - - +
+
+ + + + + + +
+
+ + +
+ +
+ + + + + \ No newline at end of file diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts index f02b022..9440ce5 100644 --- a/src/app/cad-board/cad-board.component.ts +++ b/src/app/cad-board/cad-board.component.ts @@ -3,30 +3,31 @@ import { OnInit, ViewChild, OnDestroy, -} from '@angular/core' +} from '@angular/core' import { Subscription } from 'rxjs' import { GoogleChartComponent, -} from 'angular-google-charts' +} from 'angular-google-charts' import { GpuService, -} from '../gpu.service' +} from '../gpu.service' +import 'element-angular/theme/index.css' interface GoogleChart { - title : string, - type : string, - data : Array>, - roles : Array<{type: string, role: string}>, + title: string, + type: string, + data: Array>, + roles: Array<{ type: string, role: string }>, columnNames?: Array, - options? : {}, + options?: {}, } @Component({ - selector : 'app-cad-board', + selector: 'app-cad-board', templateUrl: './cad-board.component.html', - styleUrls : ['./cad-board.component.css'] + styleUrls: ['./cad-board.component.css'] }) export class CadScreenComponent implements OnInit, OnDestroy { @@ -57,6 +58,10 @@ export class CadScreenComponent implements OnInit, OnDestroy { // chart: GoogleChartComponent subscription: Subscription + newData = [] + pos = 0 + tableData = [] + totalData = {} constructor( private gpu: GpuService, @@ -64,31 +69,55 @@ export class CadScreenComponent implements OnInit, OnDestroy { ngOnInit() { this.subscription = this.gpu.getGpus().subscribe(data => { + console.log(data); const newData = [] + this.totalData = data; + console.log(this.totalData); for (const [key, value] of Object.entries(data)) { console.log('changed:', key, value) const numberValue = parseInt(value, 10) - newData.push([key, numberValue]) + var flag = 0; + for (var i = 0; i < key.length; i++) { + if (key[i] == "I" && key[i + 1] == "P") { + flag = 1; + delete (data[key]); + if (this.tableData.length < 4) { + this.tableData.push({ "key": key, "value": value }) + } + } + } + if (flag == 0) { + newData.push([key, numberValue]); + } } - - console.log(newData) + this.newData = newData; this.changingChart.data = newData }) + this.repeat(); } - ngOnDestroy () { + ngOnDestroy() { if (this.subscription) { this.subscription.unsubscribe() } } + repeat() { + let timer = setInterval(() => { this.changeChart() }, 10000); + } changeChart() { - this.changingChart.data = [ - ['Copper', Math.random() * 20.0], - ['Silver', Math.random() * 20.0], - ['Gold', Math.random() * 20.0], - ['Platinum', Math.random() * 20.0], - ] + this.changingChart.data = []; + for (var i = this.pos; i < this.pos + 7; i++) { + if (i >= this.newData.length) { + break; + } else { + this.changingChart.data.push(this.newData[i]) + } + } + this.pos += 7; + if (this.pos >= this.newData.length) { + this.pos = 0; + } } } From 62c513416c6c5b689c50bc5ac21f2c2add3d8435 Mon Sep 17 00:00:00 2001 From: sally <15210789943@qq.com> Date: Mon, 19 Nov 2018 17:34:56 +0800 Subject: [PATCH 02/13] #10 modify style --- src/app/app.module.ts | 15 ++++----- src/app/cad-board/cad-board.component.html | 3 -- src/app/cad-board/cad-board.component.ts | 38 +++++++++++----------- 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3675320..ed58ce3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,18 +1,15 @@ -import { BrowserModule } from '@angular/platform-browser' -import { NgModule } from '@angular/core' -import { HttpClientModule } from '@angular/common/http' +import { BrowserModule } from '@angular/platform-browser' +import { NgModule } from '@angular/core' +import { HttpClientModule } from '@angular/common/http' -import { FirebaseModule } from './firebase/' +import { FirebaseModule } from './firebase/' import { GoogleChartsModule } from 'angular-google-charts' -import { AppComponent } from './app.component' +import { AppComponent } from './app.component' import { CadScreenComponent } from './cad-board/cad-board.component' // import module -import { ElModule } from 'element-angular' - -// if you use webpack, import style -import 'element-angular/theme/index.css' +import { ElModule } from 'element-angular' @NgModule({ declarations: [ diff --git a/src/app/cad-board/cad-board.component.html b/src/app/cad-board/cad-board.component.html index 92b3c04..b26a434 100644 --- a/src/app/cad-board/cad-board.component.html +++ b/src/app/cad-board/cad-board.component.html @@ -12,10 +12,7 @@ [columnNames]="changingChart.columnNames" [options]="changingChart.options"> - - - \ No newline at end of file diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts index 9440ce5..a58f2d3 100644 --- a/src/app/cad-board/cad-board.component.ts +++ b/src/app/cad-board/cad-board.component.ts @@ -3,31 +3,30 @@ import { OnInit, ViewChild, OnDestroy, -} from '@angular/core' -import { Subscription } from 'rxjs' +} from '@angular/core' +import { Subscription } from 'rxjs' import { GoogleChartComponent, -} from 'angular-google-charts' +} from 'angular-google-charts' import { GpuService, -} from '../gpu.service' -import 'element-angular/theme/index.css' +} from '../gpu.service' interface GoogleChart { - title: string, - type: string, - data: Array>, - roles: Array<{ type: string, role: string }>, + title : string, + type : string, + data : Array>, + roles : Array<{ type: string, role: string }>, columnNames?: Array, - options?: {}, + options? : {}, } @Component({ - selector: 'app-cad-board', + selector : 'app-cad-board', templateUrl: './cad-board.component.html', - styleUrls: ['./cad-board.component.css'] + styleUrls : ['./cad-board.component.css'] }) export class CadScreenComponent implements OnInit, OnDestroy { @@ -35,8 +34,8 @@ export class CadScreenComponent implements OnInit, OnDestroy { changingChart = { title: 'Machine Learning Status', - type: 'BarChart', - data: [ + type : 'BarChart', + data : [ ['Loading ...', 1], ], columnNames: ['GPU', '%'], @@ -58,8 +57,8 @@ export class CadScreenComponent implements OnInit, OnDestroy { // chart: GoogleChartComponent subscription: Subscription - newData = [] - pos = 0 + newData = [] + pos = 0 tableData = [] totalData = {} @@ -96,16 +95,17 @@ export class CadScreenComponent implements OnInit, OnDestroy { this.repeat(); } - ngOnDestroy() { + ngOnDestroy () { if (this.subscription) { this.subscription.unsubscribe() } } - repeat() { + repeat () { let timer = setInterval(() => { this.changeChart() }, 10000); } - changeChart() { + + changeChart () { this.changingChart.data = []; for (var i = this.pos; i < this.pos + 7; i++) { if (i >= this.newData.length) { From 8aae60215da9898524935cff19be144f40342463 Mon Sep 17 00:00:00 2001 From: sally <15210789943@qq.com> Date: Mon, 19 Nov 2018 23:28:13 +0800 Subject: [PATCH 03/13] #10 modify code style --- src/app/cad-board/cad-board.component.ts | 38 ++++++++++++------------ 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts index a58f2d3..1d7e7f3 100644 --- a/src/app/cad-board/cad-board.component.ts +++ b/src/app/cad-board/cad-board.component.ts @@ -68,31 +68,31 @@ export class CadScreenComponent implements OnInit, OnDestroy { ngOnInit() { this.subscription = this.gpu.getGpus().subscribe(data => { - console.log(data); + console.log(data) const newData = [] - this.totalData = data; - console.log(this.totalData); + this.totalData = data + console.log(this.totalData) for (const [key, value] of Object.entries(data)) { console.log('changed:', key, value) const numberValue = parseInt(value, 10) - var flag = 0; - for (var i = 0; i < key.length; i++) { - if (key[i] == "I" && key[i + 1] == "P") { - flag = 1; - delete (data[key]); + let flag = 0 + for (let i = 0; i < key.length; i++) { + if (key[i] === 'I' && key[i + 1] === 'P') { + flag = 1 + delete (data[key]) if (this.tableData.length < 4) { - this.tableData.push({ "key": key, "value": value }) + this.tableData.push({ 'key': key, 'value': value }) } } } - if (flag == 0) { - newData.push([key, numberValue]); + if (flag === 0) { + newData.push([key, numberValue]) } } - this.newData = newData; + this.newData = newData this.changingChart.data = newData }) - this.repeat(); + this.repeat() } ngOnDestroy () { @@ -102,21 +102,21 @@ export class CadScreenComponent implements OnInit, OnDestroy { } repeat () { - let timer = setInterval(() => { this.changeChart() }, 10000); + const timer = setInterval(() => { this.changeChart() }, 10000) } changeChart () { - this.changingChart.data = []; - for (var i = this.pos; i < this.pos + 7; i++) { + this.changingChart.data = [] + for (let i = this.pos; i < this.pos + 7; i++) { if (i >= this.newData.length) { - break; + break } else { this.changingChart.data.push(this.newData[i]) } } - this.pos += 7; + this.pos += 7 if (this.pos >= this.newData.length) { - this.pos = 0; + this.pos = 0 } } From ee269bd28a83fd5bb2d1288b8ae10b613839e906 Mon Sep 17 00:00:00 2001 From: linyimin Date: Thu, 22 Nov 2018 23:50:48 +0800 Subject: [PATCH 04/13] Update app.component.spec.ts --- src/app/app.component.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 157ed9f..c660dc4 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -7,6 +7,8 @@ import { FirebaseModule } from './firebase' import { AppComponent } from './app.component' import { CadScreenComponent } from './cad-board/cad-board.component' +import + describe('AppComponent', () => { beforeEach(async(() => { From 75af0f0974a7591fb75d18afe69bbe2571b6b995 Mon Sep 17 00:00:00 2001 From: linyimin Date: Thu, 22 Nov 2018 23:54:20 +0800 Subject: [PATCH 05/13] Update app.component.spec.ts --- src/app/app.component.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index c660dc4..026de95 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -7,7 +7,7 @@ import { FirebaseModule } from './firebase' import { AppComponent } from './app.component' import { CadScreenComponent } from './cad-board/cad-board.component' -import +import { ElModule } from 'element-angular' describe('AppComponent', () => { @@ -17,6 +17,7 @@ describe('AppComponent', () => { FirebaseModule, GoogleChartsModule, HttpClientModule, + ElModule, ], declarations: [ AppComponent, From 3a123f43e45daa67e8709e771caf48ee5b4cb50b Mon Sep 17 00:00:00 2001 From: linyimin Date: Fri, 23 Nov 2018 00:02:12 +0800 Subject: [PATCH 06/13] Add ElModule dependency --- src/app/gpu.service.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/gpu.service.spec.ts b/src/app/gpu.service.spec.ts index d3a91bc..6d35e1c 100644 --- a/src/app/gpu.service.spec.ts +++ b/src/app/gpu.service.spec.ts @@ -2,11 +2,12 @@ import { TestBed } from '@angular/core/testing' import { FirebaseModule } from './firebase' import { GpuService } from './gpu.service' - +import { ElModule } from 'element-angular' describe('GpuService', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [ FirebaseModule, + ElModule, ] })) From f3db5db3c14682d0abcc758e806266dea640dd35 Mon Sep 17 00:00:00 2001 From: linyimin Date: Fri, 23 Nov 2018 00:02:45 +0800 Subject: [PATCH 07/13] Remove async --- src/app/app.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 026de95..ad77b98 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -40,7 +40,7 @@ describe('AppComponent', () => { // expect(app.title).toContain('CAD') // })) - it('should render title in a h1 tag', async (() => { + it('should render title in a h1 tag', (() => { const fixture = TestBed.createComponent(AppComponent) fixture.detectChanges() From 8f02ec81d9451689852435ba624b4dc9d3b3e842 Mon Sep 17 00:00:00 2001 From: linyimin Date: Fri, 23 Nov 2018 00:16:41 +0800 Subject: [PATCH 08/13] Add ElModule dependency --- src/app/cad-board/cad-board.component.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/cad-board/cad-board.component.spec.ts b/src/app/cad-board/cad-board.component.spec.ts index bd63808..8c639f8 100644 --- a/src/app/cad-board/cad-board.component.spec.ts +++ b/src/app/cad-board/cad-board.component.spec.ts @@ -7,6 +7,7 @@ import { FirebaseModule } from '../firebase' import { VersionCheckService } from '../version-check.service' import { CadScreenComponent } from './cad-board.component' +import { ElModule } from 'element-angular' describe('CadScreenComponent', () => { let component: CadScreenComponent @@ -21,6 +22,7 @@ describe('CadScreenComponent', () => { FirebaseModule, GoogleChartsModule, HttpClientModule, + ElModule, ], }) .compileComponents() From f80bc4d80cf9fceae717deef586a50826aecb9a1 Mon Sep 17 00:00:00 2001 From: sally <15210789943@qq.com> Date: Fri, 23 Nov 2018 13:39:57 +0800 Subject: [PATCH 09/13] fix #10 Add ElModule dependency --- src/app/cad-board/cad-board.component.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts index 1d7e7f3..4a04b80 100644 --- a/src/app/cad-board/cad-board.component.ts +++ b/src/app/cad-board/cad-board.component.ts @@ -39,14 +39,14 @@ export class CadScreenComponent implements OnInit, OnDestroy { ['Loading ...', 1], ], columnNames: ['GPU', '%'], - options: { - animation: { + options : { + animation : { duration: 250, - easing: 'ease-in-out', - startup: true + easing : 'ease-in-out', + startup : true }, hAxis: { - title: 'GPU Utilization', + title : 'GPU Utilization', minValue: 0, maxValue: 100, }, @@ -69,13 +69,13 @@ export class CadScreenComponent implements OnInit, OnDestroy { ngOnInit() { this.subscription = this.gpu.getGpus().subscribe(data => { console.log(data) - const newData = [] - this.totalData = data + const newData = [] + this.totalData = data console.log(this.totalData) for (const [key, value] of Object.entries(data)) { console.log('changed:', key, value) const numberValue = parseInt(value, 10) - let flag = 0 + let flag = 0 for (let i = 0; i < key.length; i++) { if (key[i] === 'I' && key[i + 1] === 'P') { flag = 1 @@ -90,7 +90,6 @@ export class CadScreenComponent implements OnInit, OnDestroy { } } this.newData = newData - this.changingChart.data = newData }) this.repeat() } From a20b539aae80a9b182bf1069a4aaf8e48f1af0fa Mon Sep 17 00:00:00 2001 From: linyimin Date: Sat, 24 Nov 2018 14:56:16 +0800 Subject: [PATCH 10/13] Change allScriptsTimeout from 11s to 60 s --- e2e/protractor.conf.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js index be02ebc..4144e70 100644 --- a/e2e/protractor.conf.js +++ b/e2e/protractor.conf.js @@ -7,7 +7,7 @@ const { SpecReporter } = require('jasmine-spec-reporter'); process.env.CHROME_BIN = require('puppeteer').executablePath() exports.config = { - allScriptsTimeout: 11000, + allScriptsTimeout: 60000, specs: [ './src/**/*.e2e-spec.ts' ], From 076082edfbf9291d0cfe8db7ede1e05d9e02c15d Mon Sep 17 00:00:00 2001 From: linyimin Date: Sat, 24 Nov 2018 15:02:28 +0800 Subject: [PATCH 11/13] Change repeat time from 10s to 2s --- src/app/cad-board/cad-board.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts index 4a04b80..ae736b7 100644 --- a/src/app/cad-board/cad-board.component.ts +++ b/src/app/cad-board/cad-board.component.ts @@ -101,7 +101,7 @@ export class CadScreenComponent implements OnInit, OnDestroy { } repeat () { - const timer = setInterval(() => { this.changeChart() }, 10000) + const timer = setInterval(() => { this.changeChart() }, 2000) } changeChart () { From 0b66de7ccc19823a68c6c837eb615d2780306999 Mon Sep 17 00:00:00 2001 From: linyimin Date: Sun, 25 Nov 2018 09:48:48 +0800 Subject: [PATCH 12/13] Remove the repeat function --- src/app/cad-board/cad-board.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts index ae736b7..aa0dcdf 100644 --- a/src/app/cad-board/cad-board.component.ts +++ b/src/app/cad-board/cad-board.component.ts @@ -91,7 +91,7 @@ export class CadScreenComponent implements OnInit, OnDestroy { } this.newData = newData }) - this.repeat() + // this.repeat() } ngOnDestroy () { From a0a0a0c2cf5068f3dbba9dde2fa7e8790ed65e39 Mon Sep 17 00:00:00 2001 From: linyimin Date: Mon, 10 Dec 2018 10:13:02 +0800 Subject: [PATCH 13/13] Update cad-board.component.ts Add repeat function --- src/app/cad-board/cad-board.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts index aa0dcdf..ae736b7 100644 --- a/src/app/cad-board/cad-board.component.ts +++ b/src/app/cad-board/cad-board.component.ts @@ -91,7 +91,7 @@ export class CadScreenComponent implements OnInit, OnDestroy { } this.newData = newData }) - // this.repeat() + this.repeat() } ngOnDestroy () {