Add sample on todo page.

8 files changed, 77 insertions, 15 deletions

diff --git a/Timeline/ClientApp/.vscode/launch.json b/Timeline/ClientApp/.vscode/launch.json
new file mode 100644
index 00000000..5b749430
--- /dev/null
+++ b/Timeline/ClientApp/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "https://localhost:5001",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/Timeline/ClientApp/src/app/app.component.css b/Timeline/ClientApp/src/app/app.component.css
index 759a30d6..13a44248 100644
--- a/Timeline/ClientApp/src/app/app.component.css
+++ b/Timeline/ClientApp/src/app/app.component.css
@@ -1,7 +1,3 @@
-.fill-remaining-space {
-  flex: 1 1 auto;
-}
-
 a.icp-record {
   color: grey;
   text-decoration: none;
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
index c17267c5..6a603863 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
@@ -1,12 +1,42 @@
+.align-self-bottom {
+  align-self: flex-end;
+}
+
+.first-item-box {
+  justify-content: space-between;
+}
+
+.item-box {
+  display: flex;
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.sample-box {
+  box-sizing: border-box;
+  align-self: flex-start;
+}
+
 .item-id {
   display: inline-block;
   text-align: center;
-  background: skyblue;
   border-radius: 0.2rem;
   width: 1.2rem;
   height: 1.2rem;
 }
 
-mat-list-item {
-  margin: 10px;
+.item-id-sample {
+  display: inline-block;
+  border-radius: 0.2em;
+  width: 1em;
+  height: 1em;
+}
+
+.item-id-open {
+  background: red;
+}
+
+.item-id-closed {
+  background: green;
 }
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
index 3a80e4eb..ce6eb2ed 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
@@ -1,9 +1,21 @@
 <mat-progress-bar *ngIf="!items" mode="indeterminate"></mat-progress-bar>
 
 <mat-list>
-  <mat-list-item *ngFor="let item of items">
-    <mat-card>
-        <span class="item-id">{{item.id}}</span> {{item.title}}
-    </mat-card>
+  <mat-list-item *ngFor="let item of items; let i = index" style="height:unset;">
+    <div class="item-box" [class.first-item-box]="i === 0">
+      <mat-card [class.align-self-bottom]="i === 0">
+        <span class="item-id" [class.item-id-closed]="item.closed"
+          [class.item-id-open]="!item.closed">{{item.id}}</span>
+        {{item.title}}
+      </mat-card>
+      <div class="sample-box" *ngIf="i === 0">
+          <div class="mat-caption">
+            <span class="item-id-sample item-id-open"></span> means working now.
+          </div>
+          <div class="mat-caption">
+            <span class="item-id-sample item-id-closed"></span> means completed.
+          </div>
+        </div>
+    </div>
   </mat-list-item>
 </mat-list>
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
index 722ecbdc..8af1f5ef 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { TodoListService, WorkItem } from '../todo-list.service';
+import { TodoListService, WorkItem } from './todo-list.service';
 
 @Component({
   selector: 'app-todo-list-page',
diff --git a/Timeline/ClientApp/src/app/todo-list.service.spec.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.spec.ts
index 529ba8cc..529ba8cc 100644
--- a/Timeline/ClientApp/src/app/todo-list.service.spec.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.spec.ts
diff --git a/Timeline/ClientApp/src/app/todo-list.service.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.ts
index 238919d3..0b54653b 100644
--- a/Timeline/ClientApp/src/app/todo-list.service.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list.service.ts
@@ -20,6 +20,7 @@ interface WorkItemResult {
 export interface WorkItem {
   id: number;
   title: string;
+  closed: boolean;
 }
 
 @Injectable({
@@ -30,8 +31,8 @@ export class TodoListService {
   private username = 'crupest';
   private organization = 'crupest-web';
   private project = 'Timeline';
-  private fieldId = 'System.Title';
-
+  private titleFieldName = 'System.Title';
+  private stateFieldName = 'System.State';
 
   constructor(private client: HttpClient) { }
 
@@ -58,7 +59,11 @@ export class TodoListService {
             }, { headers: headers }).pipe(
               switchMap(result => result.workItems),
               concatMap(result => this.client.get<WorkItemResult>(result.url, { headers: headers })),
-              map(result => <WorkItem>{ id: result.id, title: result.fields[this.fieldId] }),
+              map(result => <WorkItem>{
+                id: result.id,
+                title: <string>result.fields[this.titleFieldName],
+                closed: ((<string>result.fields[this.stateFieldName]).toLowerCase() === 'closed')
+              }),
               toArray()
             );
         }
diff --git a/Timeline/ClientApp/src/styles.css b/Timeline/ClientApp/src/styles.css
index 7a81e04c..fad44c53 100644
--- a/Timeline/ClientApp/src/styles.css
+++ b/Timeline/ClientApp/src/styles.css
@@ -4,3 +4,7 @@
 body {
   margin: 0;
 }
+
+.fill-remaining-space {
+  flex: 1 1 auto;
+}