Fixed Client side problem that nothing is displayed.

Issue #1

client/src/app/app.component.html

@@ -3,6 +3,7 @@
         <mat-nav-list>
             <a mat-list-item [routerLink]="['/']" (click)="layout.close()" routerLinkActive="nav-active" [routerLinkActiveOptions]="{exact: true}"><mat-icon>home</mat-icon>Home</a>
             <a mat-list-item [routerLink]="['/users']" (click)="layout.close()" routerLinkActive="nav-active"><mat-icon>account_box</mat-icon>Users</a>
+            <a mat-list-item [routerLink]="['/todos']" (click)="layout.close()" routerLinkActive="nav-active"><mat-icon>account_box</mat-icon>Todos</a>
         </mat-nav-list>
     </td-navigation-drawer>
     <td-layout-nav  toolbarTitle="Menu" navigationRoute="/">

client/src/app/app.module.ts

@@ -10,12 +10,19 @@ import {HomeComponent} from './home/home.component';
 import {UserComponent} from './users/user.component';
 import {UserListComponent} from './users/user-list.component';
 import {UserListService} from './users/user-list.service';
+
+import {TodoComponent} from './todos/todo.component';
+import {TodoListComponent} from './todos/todo-list.component';
+import {TodoListService} from './todos/todo-list.service';
+
 import {Routing} from './app.routes';
 import {APP_BASE_HREF} from '@angular/common';
 
 import {CustomModule} from './custom.module';
 import {AddUserComponent} from './users/add-user.component';
 
+import {AddTodoComponent} from './todos/add-todo.component';
+
 
 @NgModule({
     imports: [
@@ -29,15 +36,24 @@ import {AddUserComponent} from './users/add-user.component';
         HomeComponent,
         UserListComponent,
         UserComponent,
-        AddUserComponent
+        AddUserComponent,
+
+        TodoListComponent,
+        TodoComponent,
+        AddTodoComponent
     ],
     providers: [
         UserListService,
         {provide: APP_BASE_HREF, useValue: '/'},
+        {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true},
+
+        TodoListService,
+        {provide: APP_BASE_HREF, useValue: '/'},
         {provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}
     ],
     entryComponents: [
       AddUserComponent,
+      AddTodoComponent
     ],
     bootstrap: [AppComponent]
 })

client/src/app/app.routes.ts

@@ -3,11 +3,13 @@ import {ModuleWithProviders} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 import {HomeComponent} from './home/home.component';
 import {UserListComponent} from './users/user-list.component';
+import{TodoListComponent} from './todos/todo-list.component';
 
 // Route Configuration
 export const routes: Routes = [
     {path: '', component: HomeComponent},
-    {path: 'users', component: UserListComponent}
+    {path: 'users', component: UserListComponent},
+    {path: 'todos', component: TodoListComponent}
 ];
 
 export const Routing: ModuleWithProviders = RouterModule.forRoot(routes);

client/src/app/todos/add-todo.component.html

@@ -1,24 +1,24 @@
 <div layout-gt-sm="row">
     <div flex-gt-sm="80" flex-offset-gt-sm="10">
         <mat-card>
-            <mat-card-title>New User</mat-card-title>
+            <mat-card-title>New Todo</mat-card-title>
                 <mat-divider></mat-divider>
             <mat-card-content>
             <mat-form-field>
-                <input matInput #input type="text" placeholder="Name" [(ngModel)]="newUserName">
+                <input matInput #input type="text" placeholder="Owner" [(ngModel)]="newTodoOwner">
             </mat-form-field>
             <mat-form-field>
-                <input matInput #input type="number" placeholder="Age" [(ngModel)]="newUserAge">
+                <input matInput #input type="number" placeholder="Status" [(ngModel)]="newTodoStatus">
             </mat-form-field>
             <mat-form-field>
-                <input matInput #input type="text" placeholder="Company" [(ngModel)]="newUserCompany">
+                <input matInput #input type="text" placeholder="Body" [(ngModel)]="newTodoBody">
             </mat-form-field>
             <mat-form-field>
-                <input matInput #input type="text" placeholder="Email" [(ngModel)]="newUserEmail">
+                <input matInput #input type="text" placeholder="Category" [(ngModel)]="newTodoCategory">
             </mat-form-field>
 
                 <button mat-raised-button color="primary" #input type="button"
-                    (click)="this.addNewUser(newUserName, newUserAge, newUserCompany, newUserEmail)">Add User</button>
+                    (click)="this.addNewTodo(newTodoOwner, newTodoStatus, newTodoBody, newTodoCategory)">Add Todo</button>
             </mat-card-content>
         </mat-card>
         <button mat-raised-button (click)="onNoClick()" type="button">Exit</button>

client/src/app/todos/add-todo.component.ts

@@ -10,7 +10,7 @@ import {Todo} from "./todo";
 })
 export class AddTodoComponent {
     public newTodoOwner:string;
-    public newTodoStatus: number;
+    public newTodoStatus: string;
     public newTodoBody: string;
     public newTodoCategory: string;
     private todoAddSuccess : Boolean = false;
@@ -25,7 +25,7 @@ export class AddTodoComponent {
         this.dialogRef.close();
     }
 
-    addNewTodo(owner: string, status: number, body : string, category : string) : void{
+    addNewTodo(owner: string, status: boolean, body : string, category : string) : void{
 
         //Here we clear all the fields, there's probably a better way
         //of doing this could be with forms or something else

client/src/app/todos/todo-list.component.html

@@ -31,8 +31,8 @@
                         <mat-panel-title  matTooltip="category: {{todo.category}}" >{{todo.owner}}</mat-panel-title>
 
                     </mat-expansion-panel-header>
-                    <mat-panel-description >Works for {{todo.body}}</mat-panel-description>
-                     <mat-panel-description>Status: {{todo.status}} years old</mat-panel-description>
+                    <mat-panel-description >Owner {{todo.owner}}</mat-panel-description>
+                     <mat-panel-description>Status: {{todo.status}} </mat-panel-description>
 
                 </mat-expansion-panel>
                 </mat-accordion>

client/src/app/todos/todo-list.component.ts

@@ -16,9 +16,11 @@ export class TodoListComponent implements OnInit {
     public todos: Todo[];
     public filteredTodos: Todo[];
 
-    public todoName : string;
-    public todoAge : number;
-    public todoCompany : string;
+    public todoOwner : string;
+    public todoID : string;
+    public todoStatus : boolean;
+    public todoBody : string;
+    public todoCategory : string;
 
     public loadReady: boolean = false;
 
@@ -42,23 +44,23 @@ export class TodoListComponent implements OnInit {
     }
 
 
-    public filterTodos(searchName: string, searchAge: number): Todo[] {
+    public filterTodos(searchOwner: string, searchStatus: boolean): Todo[] {
 
         this.filteredTodos = this.todos;
 
         //Filter by owner
-        if (searchName != null) {
-            searchName = searchName.toLocaleLowerCase();
+        if (searchOwner != null) {
+            searchOwner = searchOwner.toLocaleLowerCase();
 
             this.filteredTodos = this.filteredTodos.filter(todo => {
-                return !searchName || todo.owner.toLowerCase().indexOf(searchName) !== -1;
+                return !searchOwner || todo.owner.toLowerCase().indexOf(searchOwner) !== -1;
             });
         }
 
         //Filter by status
-        if (searchAge != null) {
+        if (searchStatus != null) {
             this.filteredTodos = this.filteredTodos.filter(todo => {
-                return !searchAge || todo.status == searchAge;
+                return !searchStatus || todo.status == searchStatus;
             });
         }
 
@@ -75,12 +77,13 @@ export class TodoListComponent implements OnInit {
         //
         //Subscribe waits until the data is fully downloaded, then
         //performs an action on it (the first lambda)
-
+        console.log("in refreshTodos");
         let todos : Observable<Todo[]> = this.todoListService.getTodos();
         todos.subscribe(
             todos => {
+                console.log("First todo in refresh is " + JSON.stringify(todos[0]));
                 this.todos = todos;
-                this.filterTodos(this.todoName, this.todoAge);
+                this.filterTodos(this.todoOwner, this.todoStatus);
             },
             err => {
                 console.log(err);
@@ -90,9 +93,11 @@ export class TodoListComponent implements OnInit {
 
 
     loadService(): void {
+        console.log('in loadService');
         this.loadReady = true;
-        this.todoListService.getTodos(this.todoCompany).subscribe(
+        this.todoListService.getTodos(this.todoBody).subscribe(
             todos => {
+                console.log("First todo in loadService is " + JSON.stringify(todos[0]));
                 this.todos = todos;
                 this.filteredTodos = this.todos;
             },

client/src/app/todos/todo-list.service.spec.ts

@@ -9,23 +9,23 @@ describe('Todo list service: ', () => {
     // A small collection of test todos
     const testTodos: Todo[] = [
         {
-            _id: 'chris_id',
-            owner: 'Chris',
-            status: 25,
-            body: 'UMM',
-            category: '[email protected]'
+            _id: '58af3a600343927e48e8720f',
+            owner: 'Blanche',
+            status: false,
+            body: 'In sunt ex non tempor cillum commodo amet incididunt anim qui commodo quis. Cillum non labore ex sint esse.',
+            category: 'software design'
         },
         {
             _id: 'pat_id',
             owner: 'Pat',
-            status: 37,
+            status: true,
             body: 'IBM',
             category: '[email protected]'
         },
         {
             _id: 'jamie_id',
             owner: 'Jamie',
-            status: 37,
+            status: true,
             body: 'Frogs, Inc.',
             category: '[email protected]'
         }

client/src/app/todos/todo-list.service.ts

@@ -15,8 +15,8 @@ export class TodoListService {
     constructor(private http: HttpClient) {
     }
 
-    getTodos(todoCompany?: string): Observable<Todo[]> {
-        this.filterByCompany(todoCompany);
+    getTodos(todoOwner?: string): Observable<Todo[]> {
+        this.filterByOwner(todoOwner);
         return this.http.get<Todo[]>(this.todoUrl);
     }
 
@@ -34,27 +34,27 @@ export class TodoListService {
     }
     */
 
-    filterByCompany(todoCompany?: string): void {
-        if(!(todoCompany == null || todoCompany == "")){
-            if (this.todoUrl.indexOf('body=') !== -1){
+    filterByOwner(todoOwner?: string): void {
+        if(!(todoOwner == null || todoOwner == "")){
+            if (this.todoUrl.indexOf('owner=') !== -1){
                 //there was a previous search by body that we need to clear
-                let start = this.todoUrl.indexOf('body=');
+                let start = this.todoUrl.indexOf('owner=');
                 let end = this.todoUrl.indexOf('&', start);
                 this.todoUrl = this.todoUrl.substring(0, start-1) + this.todoUrl.substring(end+1);
             }
             if (this.todoUrl.indexOf('&') !== -1) {
                 //there was already some information passed in this url
-                this.todoUrl += 'body=' + todoCompany + '&';
+                this.todoUrl += 'owner=' + todoOwner + '&';
             }
             else {
                 //this was the first bit of information to pass in the url
-                this.todoUrl += "?body=" + todoCompany + "&";
+                this.todoUrl += "?owner=" + todoOwner + "&";
             }
         }
         else {
             //there was nothing in the box to put onto the URL... reset
-            if (this.todoUrl.indexOf('body=') !== -1){
-                let start = this.todoUrl.indexOf('body=');
+            if (this.todoUrl.indexOf('owner=') !== -1){
+                let start = this.todoUrl.indexOf('owner=');
                 let end = this.todoUrl.indexOf('&', start);
                 if (this.todoUrl.substring(start-1, start) === '?'){
                     start = start-1
@@ -65,7 +65,7 @@ export class TodoListService {
     }
 
     addNewTodo(owner: string, status: boolean, body : string, category : string): Observable<Boolean> {
-        const body = {owner:owner, status:status, body:body, category:category};
+        const todoBody = {owner:owner, status:status, body:body, category:category};
         console.log(body);
 
         //Send post request to add a new todo with the todo data as the body with specified headers.

client/src/app/todos/todo.component.spec.ts

@@ -21,21 +21,21 @@ describe("Todo component", () => {
                 {
                     _id: "chris_id",
                     owner: "Chris",
-                    status: 25,
+                    status: true,
                     body: "UMM",
                     category: "[email protected]"
                 },
                 {
                     _id: "pat_id",
                     owner: "Pat",
-                    status: 37,
+                    status: true,
                     body: "IBM",
                     category: "[email protected]"
                 },
                 {
                     _id: "jamie_id",
                     owner: "Jamie",
-                    status: 37,
+                    status: true,
                     body: "Frogs, Inc.",
                     category: "[email protected]"
                 }

server/src/main/java/umm3601/Server.java

@@ -6,6 +6,9 @@
 import spark.Response;
 import umm3601.user.UserController;
 import umm3601.user.UserRequestHandler;
+import umm3601.todo.TodoController;
+import umm3601.todo.TodoRequestHandler;
+
 
 import java.io.IOException;
 
@@ -14,17 +17,21 @@
 import static spark.debug.DebugScreen.enableDebugScreen;
 
 public class Server {
-    private static final String userDatabaseName = "dev";
+    private static final String databaseName = "dev";
     private static final int serverPort = 4567;
 
     public static void main(String[] args) throws IOException {
 
         MongoClient mongoClient = new MongoClient();
-        MongoDatabase userDatabase = mongoClient.getDatabase(userDatabaseName);
+        MongoDatabase userDatabase = mongoClient.getDatabase(databaseName);
+        MongoDatabase todoDatabase = mongoClient.getDatabase(databaseName);
 
         UserController userController = new UserController(userDatabase);
         UserRequestHandler userRequestHandler = new UserRequestHandler(userController);
 
+        TodoController todoController = new TodoController(todoDatabase);
+        TodoRequestHandler todoRequestHandler = new TodoRequestHandler(todoController);
+
         //Configure Spark
         port(serverPort);
         enableDebugScreen();
@@ -67,6 +74,10 @@ public static void main(String[] args) throws IOException {
         get("api/users/:id", userRequestHandler::getUserJSON);
         post("api/users/new", userRequestHandler::addNewUser);
 
+        get("api/todos", todoRequestHandler::getTodos);
+        get("api/todos/:id", todoRequestHandler::getTodoJSON);
+        post("api/todos/new", todoRequestHandler::addNewTodo);
+
         // An example of throwing an unhandled exception so you can see how the
         // Java Spark debugger displays errors like this.
         get("api/error", (req, res) -> {