Feature/login page

project-angular-src/package.json

@@ -12,16 +12,19 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
+    "@angular/animations": "^5.2.5",
+    "@angular/cdk": "^5.2.1",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.1",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
     "rxjs": "^5.5.6",
     "webpack": "^3.10.0",
     "zone.js": "^0.8.19"

project-angular-src/src/app/add-project/add-project.component.html

@@ -1,3 +1,4 @@
+<app-toolbar></app-toolbar>
 <div class="container">
   <form (ngSubmit)="onSubmit()">
     <div>
@@ -11,3 +12,5 @@
     <button type="submit">Submit</button>
   </form>
 </div>
+
+

project-angular-src/src/app/app-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes, Router } from '@angular/router';
+import { LoginPageComponent } from './login-page/login-page.component';
+import { ViewProjectComponent } from './view-project/view-project.component';
+import { AddProjectComponent } from './add-project/add-project.component';
+import { ProjectSearchComponent } from './project-search/project-search.component';
+import { HomeComponent } from './home/home.component';
+import { ProfileComponent } from './profile/profile.component';
+
+const routes: Routes = [
+  { path: 'login', component: LoginPageComponent },
+  { path: 'project', component: ViewProjectComponent},
+  { path: 'projectSearch', component: ProjectSearchComponent},
+  { path: 'home', component: HomeComponent},
+  { path: 'addProject', component: AddProjectComponent},
+  { path: 'profile', component: ProfileComponent}
+]
+
+@NgModule({
+  exports: [ RouterModule ],
+  imports: [ RouterModule.forRoot(routes)]
+})
+export class AppRoutingModule { }

project-angular-src/src/app/app.component.html

@@ -1,4 +1 @@
-<div id="project-app-component">
-   <h1>{{title}}!</h1>
-   <app-view-project></app-view-project>
-</div>
+<router-outlet></router-outlet>

project-angular-src/src/app/app.module.ts

@@ -1,4 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
 import { HttpModule } from '@angular/http';
@@ -7,18 +8,52 @@ import { AppComponent } from './app.component';
 import { AddProjectComponent } from './add-project/add-project.component';
 import { ViewProjectComponent } from './view-project/view-project.component';
 import { ProjectService } from './services/project.service';
+import { LoginPageComponent } from './login-page/login-page.component';
+import { AppRoutingModule } from './/app-routing.module';
+
+import { MatButtonModule } from '@angular/material';
+import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { ToolbarComponent } from './toolbar/toolbar.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import {MatIconModule} from '@angular/material/icon';
+import {MatMenuModule} from '@angular/material/menu';
+import { HomeComponent } from './home/home.component';
+import { ProjectSearchComponent } from './project-search/project-search.component';
+import { ProfileComponent } from './profile/profile.component';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatSelectModule} from '@angular/material/select';
+import {MatListModule} from '@angular/material/list';
 
 
 @NgModule({
   declarations: [
     AppComponent,
     AddProjectComponent,
-    ViewProjectComponent
+    ViewProjectComponent,
+    LoginPageComponent,
+    ToolbarComponent,
+    HomeComponent,
+    ProjectSearchComponent,
+    ProfileComponent,
   ],
   imports: [
     BrowserModule,
     HttpModule,
-    FormsModule
+    FormsModule,
+    AppRoutingModule,
+    MatButtonModule,
+    MatInputModule,
+    BrowserAnimationsModule,
+    MatCardModule,
+    MatGridListModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatSelectModule,
+    MatListModule
   ],
   providers: [
     ProjectService

project-angular-src/src/app/home/home.component.css

@@ -0,0 +1,3 @@
+mat-grid-tile {
+    background-color: lightblue;
+}

project-angular-src/src/app/home/home.component.html

@@ -0,0 +1,8 @@
+<app-toolbar></app-toolbar>
+
+<mat-grid-list cols="4" rowHeight="300px">
+    <mat-grid-tile [colspan]="1" [rowspan]="1">Your Projects</mat-grid-tile>
+    <mat-grid-tile [colspan]="3" [rowspan]="1">Material Table showing your current projects.  User should be able to click on each one to take you to the details view</mat-grid-tile>
+    <mat-grid-tile [colspan]="4" [rowspan]="2">Show projects recent projects created by other users.  Or trending projects?</mat-grid-tile>
+</mat-grid-list>
+

project-angular-src/src/app/home/home.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeComponent } from './home.component';
+
+describe('HomeComponent', () => {
+  let component: HomeComponent;
+  let fixture: ComponentFixture<HomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

project-angular-src/src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.css']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

project-angular-src/src/app/login-page/login-page.component.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    width: 500px;
+    margin: auto;
+}

project-angular-src/src/app/login-page/login-page.component.html

@@ -0,0 +1,11 @@
+<div class="container">
+      <h2 class="loginheader">Boston University Project Tracker</h2>
+      <mat-form-field>
+          <input matInput placeholder="Username">
+      </mat-form-field>
+      <mat-form-field>
+          <input matInput type="password" placeholder="Password">
+      </mat-form-field>
+      <button mat-raised-button color="primary" routerLink="/home">Login</button>
+      <p>user auth isn't currently working so just hit login and it will take you to the home page</p>
+</div>

project-angular-src/src/app/login-page/login-page.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginPageComponent } from './login-page.component';
+
+describe('LoginPageComponent', () => {
+  let component: LoginPageComponent;
+  let fixture: ComponentFixture<LoginPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

project-angular-src/src/app/login-page/login-page.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-page',
+  templateUrl: './login-page.component.html',
+  styleUrls: ['./login-page.component.css']
+})
+export class LoginPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  authenticateUser() {
+    console.log("Authenticating");
+  }
+
+}

project-angular-src/src/app/profile/profile.component.css

@@ -0,0 +1,12 @@
+mat-grid-tile {
+    display: flex;
+    flex-flow: column;
+    flex-wrap: wrap;
+    background-color: lightgreen;
+}
+
+div {
+    width: 250px;
+    height: 40px;
+    background-color: lightgray;
+}

project-angular-src/src/app/profile/profile.component.html

@@ -0,0 +1,21 @@
+<app-toolbar></app-toolbar>
+
+
+<mat-grid-list cols="4" rowHeight="200px">
+    <mat-grid-tile [colspan]="1" [rowspan]="1">
+          Welcome {{ user.firstName }} {{ user.lastName }}
+    </mat-grid-tile>
+    <mat-grid-tile [colspan]="3" [rowspan]="3">
+      Provide several details about this user like how many projects s/he is a part of.  Modify projects? Delete Projects?
+    </mat-grid-tile>
+    <mat-grid-tile [colspan]="1" [rowspan]="1">
+      <mat-list>
+        <mat-list-item>
+            emai: {{ user.email }}
+        </mat-list-item>
+        <mat-list-item>
+            Join Date: {{ user.joinDate }}
+        </mat-list-item>
+      </mat-list>
+    </mat-grid-tile>
+</mat-grid-list>

project-angular-src/src/app/profile/profile.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileComponent } from './profile.component';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProfileComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

project-angular-src/src/app/profile/profile.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.css']
+})
+export class ProfileComponent implements OnInit {
+
+  user = {
+    firstName: 'John', 
+    lastName: 'Doe', 
+    email: 'john.doe@gmail.com',
+    joinDate: new Date('2018-01-14')}
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

project-angular-src/src/app/project-search/project-search.component.css

@@ -0,0 +1,7 @@
+mat-grid-tile {
+    background-color: lightcoral;
+}
+
+mat-form-field {
+    padding-right: 20px;
+}

project-angular-src/src/app/project-search/project-search.component.html

@@ -0,0 +1,21 @@
+<app-toolbar></app-toolbar>
+
+
+<mat-grid-list cols="4" rowHeight="100px">
+  <mat-grid-tile [colspan]="4" [rowspan]="1">
+    <mat-form-field>
+      <input matInput placeholder="Project Keywords">
+    </mat-form-field>
+    <mat-form-field>
+      <mat-select placeholder="Specific Class">
+        <mat-option *ngFor="let class of classes" [value]="class.id">
+          {{ class.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <button mat-raised-button color="primary">Search</button>
+  </mat-grid-tile>
+  <mat-grid-tile [colspan]="4" [rowspan]="5">
+    Material Table with results from search.  Will be empty until user searches something.  Will signify if no results were returned
+  </mat-grid-tile>
+</mat-grid-list>

project-angular-src/src/app/project-search/project-search.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProjectSearchComponent } from './project-search.component';
+
+describe('ProjectSearchComponent', () => {
+  let component: ProjectSearchComponent;
+  let fixture: ComponentFixture<ProjectSearchComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProjectSearchComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProjectSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});