feat: make basic view

phodal · Mar 11, 2020 · c3f08fe · c3f08fe
1 parent 8213973
commit c3f08fe
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 16 deletions.
diff --git a/src/app/presentation/home/home.component.html b/src/app/presentation/home/home.component.html
@@ -18,5 +18,5 @@ <h2 class="title intro">DevOps 元素周期表 —— 搭配您的 DevOps 要素
     <h5>DevOps 运动的主要特点是强烈倡导对构建软件的所有环节 (从集成、测试、发布到部署和基础架构管理) 进行全面的自动化和监控。</h5>
   </div>
 
-  <component-process-table [data]="[]"></component-process-table>
+  <component-process-table [tableValue]="''"></component-process-table>
 </div>
diff --git a/src/app/shared/components/process-table/process-table.component.html b/src/app/shared/components/process-table/process-table.component.html
@@ -1,18 +1,12 @@
 <div class="table-container" role="table" aria-label="Destinations">
   <div class="flex-table header" role="rowgroup">
-    <div class="flex-row first" role="columnheader">Country</div>
-    <div class="flex-row" role="columnheader">Events</div>
-    <div class="flex-row" role="columnheader">Time</div>
-    <div class="flex-row" role="columnheader">Fees</div>
-    <div class="flex-row" role="columnheader">Fees</div>
-    <div class="flex-row" role="columnheader">Fees</div>
+    <div class="flex-row" *ngFor="let header of processTable.headers;let first = first" [ngClass]="first ? 'first' : ''">
+      {{header}}
+    </div>
   </div>
-  <div class="flex-table row" role="rowgroup">
-    <div class="flex-row first" role="cell"><span class="flag-icon flag-icon-gb"></span> United Kingdom</div>
-    <div class="flex-row" role="cell">Stonehenge, Windsor and Bath with Pub Lunch</div>
-    <div class="flex-row" role="cell">19 Sep, 1p.m.</div>
-    <div class="flex-row" role="cell">US$500</div>
-    <div class="flex-row" role="cell">US$500</div>
-    <div class="flex-row" role="cell">US$500</div>
+  <div class="flex-table row" role="rowgroup" *ngFor="let column of processTable.cells">
+    <div class="flex-row" *ngFor="let cell of column;let first = first"  [ngClass]="first ? 'first' : ''">
+      {{cell}}
+    </div>
   </div>
 </div>
diff --git a/src/app/shared/components/process-table/process-table.component.ts b/src/app/shared/components/process-table/process-table.component.ts
@@ -1,4 +1,10 @@
 import {Component, Input, OnInit} from '@angular/core';
+import marked from 'marked';
+
+interface ProcessTable {
+  headers: string[];
+  cells: string[][];
+}
 
 @Component({
   selector: 'component-process-table',
@@ -7,10 +13,40 @@ import {Component, Input, OnInit} from '@angular/core';
 })
 export class ProcessTableComponent implements OnInit {
   @Input()
-  data: [][];
+  tableValue: string;
+  private textValue: string;
+  processTable: ProcessTable = {
+    headers: [],
+    cells: []
+  };
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit(): void {
+    this.textValue = `
+| 项目 / 过程管理 | 配置管理 | 构建  | 测试 / 质量 | 制品 / 部署 | 基础设施 | 沟通协作 | 可视化   |
+|---------------|---------|-------|------------|------------|---------|---------|---------|
+| Jira          | Gitee   | Maven | Junit      | Ubran code | VMWare  | 招呼     | Tableau |
+| Tracker       | Rational ClearCase |  Gradle | Cucumber | Fit2Cloud | OpenShift | 移事通 | Grafana |
+| VP            | CMDB | NPM | JMeter     | B9         | Cloud Foundry | | Kibana |
+| Confluence    |   Firefly    | Ant   | RobotFramework | JFrog Artifactory | | |  Prometheus |
+| ITIL          |    | MSBuild | Protractor | | | | ElasticSearch |
+|               |           |  Docker  | Sonar | | | | X-Pack |
+|               |           |        | BlackDuck | | | | |
+
+    `;
+
+    const tokens = marked.lexer(this.textValue);
+    this.buildData(tokens);
+  }
+
+  buildData(tokens: marked.Token[]) {
+    for (const token of tokens) {
+      if (token.type === 'table') {
+        this.processTable.headers = token.header;
+        this.processTable.cells = token.cells;
+      }
+    }
   }
 }