Add table, Support multiply boards and slide them periodly

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",

src/app/app.component.css

@@ -0,0 +1,4 @@
+.footer{
+    position: relative;
+    top: -160px
+}

src/app/app.component.html

@@ -7,36 +7,37 @@ <h1>
 <app-cad-board>
 </app-cad-board>
 
-
-<b>
-  CAD-BOARD PROJECT IS HIRING!
-</b>
-
-<ol>
-  <li>
-    Database Administrator: TBH
-  </li>
-  <li>
-    Angular Developer: Hui KONG
-  </li>
-  <li>
-    Node JS Developer: TBH
-  </li>
-  <li>
-    System Administrator: Min LIN
-  </li>
-  <li>
-    UI Designer: TBH
-  </li>
-</ol>
-
-
-<p>
-  Contact Huan LI for details.
-</p>
-
-<div align="center">
-
-  <h3>Advertisement space for rent!</h3>
-
-</div>
+<div class="footer">
+  <b>
+    CAD-BOARD PROJECT IS HIRING!
+  </b>
+
+  <ol>
+    <li>
+      Database Administrator: TBH
+    </li>
+    <li>
+      Angular Developer: Hui KONG
+    </li>
+    <li>
+      Node JS Developer: TBH
+    </li>
+    <li>
+      System Administrator: Min LIN
+    </li>
+    <li>
+      UI Designer: TBH
+    </li>
+  </ol>
+
+
+  <p>
+    Contact Huan LI for details.
+  </p>
+
+  <div align="center">
+
+    <h3>Advertisement space for rent!</h3>
+
+  </div>
+</div>

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,

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

src/app/cad-board/cad-board.component.html

@@ -1,10 +1,21 @@
-<google-chart
-  width="800"
-  [title]="changingChart.title"
-  [type]="changingChart.type"
-  [data]="changingChart.data"
-  [columnNames]="changingChart.columnNames"
-  [options]="changingChart.options">
-</google-chart>
-
-<!-- button (click)="changeChart()">Change Data</button -->
+<div class="header">
+  <div class="tableContent">
+    <el-table [model]="tableData" [border]="true" center="all">
+      <el-table-column model-key="key" label="GPU" width="200">
+      </el-table-column>
+      <el-table-column model-key="value" label="IP" width="100">
+      </el-table-column>
+    </el-table>
+  </div>
+  <div class="chartContent">
+    <google-chart width="600" [title]="changingChart.title" [type]="changingChart.type" [data]="changingChart.data"
+      [columnNames]="changingChart.columnNames" [options]="changingChart.options">
+    </google-chart>
+  </div>
+
+</div>
+
+
+
+
+<!-- button (click)="changeChart()">Change Data</button -->

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<Array<string | number | {}>>,
-  roles       : Array<{type: string, role: string}>,
+  title: string,
+  type: string,
+  data: Array<Array<string | number | {}>>,
+  roles: Array<{ type: string, role: string }>,
   columnNames?: Array<string>,
-  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,38 +58,66 @@ export class CadScreenComponent implements OnInit, OnDestroy {
   // chart: GoogleChartComponent
 
   subscription: Subscription
+  newData = []
+  pos = 0
+  tableData = []
+  totalData = {}
 
   constructor(
     private gpu: GpuService,
   ) { }
 
   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;
+    }
   }
 
 }