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'
],
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!
-
-
-
- -
- Database Administrator: TBH
-
- -
- Angular Developer: Hui KONG
-
- -
- Node JS Developer: TBH
-
- -
- System Administrator: Min LIN
-
- -
- UI Designer: TBH
-
-
-
-
-
- Contact Huan LI for details.
-
-
-
-
-
Advertisement space for rent!
-
-
+
\ No newline at end of file
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 157ed9f..ad77b98 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 { ElModule } from 'element-angular'
+
describe('AppComponent', () => {
beforeEach(async(() => {
@@ -15,6 +17,7 @@ describe('AppComponent', () => {
FirebaseModule,
GoogleChartsModule,
HttpClientModule,
+ ElModule,
],
declarations: [
AppComponent,
@@ -37,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()
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 670136d..ed58ce3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,13 +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'
@NgModule({
declarations: [
@@ -16,6 +18,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..b26a434 100644
--- a/src/app/cad-board/cad-board.component.html
+++ b/src/app/cad-board/cad-board.component.html
@@ -1,10 +1,18 @@
-
-
+
-
+
+
\ No newline at end of file
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()
diff --git a/src/app/cad-board/cad-board.component.ts b/src/app/cad-board/cad-board.component.ts
index f02b022..ae736b7 100644
--- a/src/app/cad-board/cad-board.component.ts
+++ b/src/app/cad-board/cad-board.component.ts
@@ -4,7 +4,7 @@ import {
ViewChild,
OnDestroy,
} from '@angular/core'
-import { Subscription } from 'rxjs'
+import { Subscription } from 'rxjs'
import {
GoogleChartComponent,
@@ -12,13 +12,13 @@ import {
import {
GpuService,
-} from '../gpu.service'
+} from '../gpu.service'
interface GoogleChart {
title : string,
type : string,
data : Array>,
- roles : Array<{type: string, role: string}>,
+ roles : Array<{ type: string, role: string }>,
columnNames?: Array,
options? : {},
}
@@ -34,19 +34,19 @@ export class CadScreenComponent implements OnInit, OnDestroy {
changingChart = {
title: 'Machine Learning Status',
- type: 'BarChart',
- data: [
+ type : 'BarChart',
+ data : [
['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,
},
@@ -57,6 +57,10 @@ export class CadScreenComponent implements OnInit, OnDestroy {
// chart: GoogleChartComponent
subscription: Subscription
+ newData = []
+ pos = 0
+ tableData = []
+ totalData = {}
constructor(
private gpu: GpuService,
@@ -64,16 +68,30 @@ export class CadScreenComponent implements OnInit, OnDestroy {
ngOnInit() {
this.subscription = this.gpu.getGpus().subscribe(data => {
- const newData = []
+ 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])
+ 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 })
+ }
+ }
+ }
+ if (flag === 0) {
+ newData.push([key, numberValue])
+ }
}
-
- console.log(newData)
- this.changingChart.data = newData
+ this.newData = newData
})
+ this.repeat()
}
ngOnDestroy () {
@@ -82,13 +100,23 @@ export class CadScreenComponent implements OnInit, OnDestroy {
}
}
- changeChart() {
- this.changingChart.data = [
- ['Copper', Math.random() * 20.0],
- ['Silver', Math.random() * 20.0],
- ['Gold', Math.random() * 20.0],
- ['Platinum', Math.random() * 20.0],
- ]
+ repeat () {
+ const timer = setInterval(() => { this.changeChart() }, 2000)
+ }
+
+ changeChart () {
+ this.changingChart.data = []
+ for (let 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
+ }
}
}
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,
]
}))