added and incorporated basic presentation components

src/app/app.component.html

@@ -1,8 +1,14 @@
-<!--The whole content below can be removed with the new code.-->
-<div style="text-align:center">
-  <h1>
-    {{title}}!!
-  </h1>
-  <app-login></app-login>
-</div>
-
+<div class="page">
+  <app-toolbar title="UltiCar"></app-toolbar>
+  <div class="main">
+    <div class="navLinks">
+      <a [routerLink]="['']">Register</a>
+      <a [routerLink]="['/login']">Sign In</a>
+    </div>
+    <div id="routing">
+      <div class="container">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  </div>
+

src/app/app.component.scss

@@ -0,0 +1,6 @@
+.page {
+  background-color: rgb(31, 95, 121);
+}
+.main {
+  text-align: center;
+}

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'Lit';
+  title = 'UltiCar';
 }

src/app/app.module.ts

@@ -1,11 +1,16 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
+import { Routes, RouterModule } from '@angular/router';
 import { FeCommonModule } from './common/common.module';
 import { AppComponent } from './app.component';
+import { LoginComponent } from 'app/common/components/smart/login/login.component';
 
-import { MatButtonModule, MatCheckboxModule} from '@angular/material';
+const routes:Routes = [ 
+    {path: '', redirectTo: 'login', pathMatch: 'full'},
+    {path: 'login', component: LoginComponent},
+    {path: 'dashboard', component: LoginComponent}
+]
 
 @NgModule({
   declarations: [
@@ -14,9 +19,9 @@ import { MatButtonModule, MatCheckboxModule} from '@angular/material';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    FeCommonModule
+    FeCommonModule,
+    RouterModule.forRoot(routes)
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/common/common.module.ts

@@ -1,15 +1,21 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 import { TextBoxComponent } from './components/presentation/text-box/text-box.component';
 import { LoginComponent } from './components/smart/login/login.component';
 import { CheckBoxComponent } from './components/presentation/check-box/check-box.component';
+import { ToolbarComponent } from './components/presentation/toolbar/toolbar.component';
+import { RaisedButtonComponent } from './components/presentation/raised-button/raised-button.component';
+import { BasicButtonComponent } from './components/presentation/basic-button/basic-button.component';
+import { IconButtonComponent } from './components/presentation/icon-button/icon-button.component';
+import { MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatFormFieldControl, MatInputModule, MatIconModule, MatCardModule } from '@angular/material';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule, MatToolbarModule, MatCheckboxModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatCardModule, FormsModule
   ],
-  declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent],
-  exports: [ 
-    LoginComponent, TextBoxComponent, CheckBoxComponent]
+  declarations: [TextBoxComponent, LoginComponent, CheckBoxComponent, ToolbarComponent, RaisedButtonComponent, BasicButtonComponent, IconButtonComponent],
+  exports: [ToolbarComponent],
 })
+
 export class FeCommonModule { }

src/app/common/components/presentation/basic-button/basic-button.component.html

@@ -0,0 +1 @@
+<button mat-button [color]="color" (click)="click($event)">{{label}}</button>

src/app/common/components/presentation/basic-button/basic-button.component.scss

@@ -0,0 +1,3 @@
+.mat-button {
+  min-width: 200px;
+}

src/app/common/components/presentation/basic-button/basic-button.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-button',
+  templateUrl: './basic-button.component.html',
+  styleUrls: ['./basic-button.component.scss']
+})
+export class BasicButtonComponent implements OnInit {
+
+  @Input() private label:string
+  @Input() private color:string
+
+  @Output() public clickEvent:EventEmitter<any> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  click(event) {
+    this.clickEvent.emit(event);
+  }
+
+}

src/app/common/components/presentation/check-box/check-box.component.html

@@ -1,3 +1 @@
-<p>
-  DRIVER-CHECKBOX
-</p>
+<mat-checkbox [color]="color" [(ngModel)]="checkboxValue" (ngModelChange)="onChange($event)">{{label}}</mat-checkbox>

src/app/common/components/presentation/check-box/check-box.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'app-check-box',
@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CheckBoxComponent implements OnInit {
 
+  @Input() private label: string
+  @Input() private color: string
+  @Input() private checkboxValue:boolean  
+
+  @Output() checkboxChange:EventEmitter<any> = new EventEmitter();
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  onChange(newValue) {
+    this.checkboxValue = newValue;
+    console.log("The checkbox value is: " + newValue);
+    this.checkboxChange.emit(newValue);
+  }
+
 }

src/app/common/components/presentation/icon-button/icon-button.component.html

@@ -0,0 +1,3 @@
+<button mat-icon-button>
+  <mat-icon aria-label="icon-button" (click)="click($event)">{{icon}}</mat-icon>
+</button>

src/app/common/components/presentation/icon-button/icon-button.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-button',
+  templateUrl: './icon-button.component.html',
+  styleUrls: ['./icon-button.component.scss']
+})
+export class IconButtonComponent implements OnInit {
+
+  @Input() private icon:string;
+
+  @Output() public clickEvent:EventEmitter<any> = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  click($event) {
+    this.clickEvent.emit(event);
+  }
+
+}

src/app/common/components/presentation/raised-button/raised-button.component.html

@@ -0,0 +1 @@
+<button mat-raised-button [color]="color" (click)="click($event)" [disabled]="disabled">{{label}}</button>

src/app/common/components/presentation/raised-button/raised-button.component.scss

@@ -0,0 +1,3 @@
+.mat-raised-button {
+  min-width: 200px;
+}

src/app/common/components/presentation/raised-button/raised-button.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input, Output, HostListener, EventEmitter } from '@angular/core';
+import { RouterModule, Routes} from '@angular/router';
+
+@Component({
+  selector: 'app-raised-button',
+  templateUrl: './raised-button.component.html',
+  styleUrls: ['./raised-button.component.scss']
+})
+export class RaisedButtonComponent implements OnInit {
+
+  @Input() private label:string
+  @Input() private color:string
+  @Input() private disabled:string
+
+  @Output() public clickEvent:EventEmitter<any> = new EventEmitter();
+
+  constructor() { }  
+
+  ngOnInit() {
+  }
+
+  click(event) {
+    this.clickEvent.emit(event);
+  }
+
+}

src/app/common/components/presentation/text-box/text-box.component.html

@@ -1 +1,7 @@
-<input type="text" [id]="id" [placeholder]="placeholder" [value]="value" (click)="click($event)" />
+<div class="form-template">
+  <mat-form-field [color]="primary">
+    <input matInput placeholder={{placeholder}} [(ngModel)]="textboxValue" (ngModelChange)="onChange($event)" [type]="hide ? 'password' : 'text'">
+    <mat-icon *ngIf="encryption" matSuffix (click)="hide = !hide">{{hide ? 'lock_outline' : 'lock_open'}}</mat-icon>
+    <mat-icon *ngIf="icon" matSuffix>{{icon}}</mat-icon>
+  </mat-form-field>
+</div>

src/app/common/components/presentation/text-box/text-box.component.ts

@@ -1,18 +1,26 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-text-box',
   templateUrl: './text-box.component.html',
   styleUrls: ['./text-box.component.scss']
 })
 export class TextBoxComponent implements OnInit {
-  @Input() private id: string
-  @Input() private placeholder: string
-  private value: string
+  @Input() private id:string
+  @Input() private placeholder:string
+  @Input() private encryption:string
+  @Input() private icon:string
+  @Input() private textboxValue:string
+
+  @Output() textboxChange:EventEmitter<String> = new EventEmitter<String>();
+
   constructor() { }
 
-  ngOnInit() {
-    this.value = 'hello'
+  ngOnInit() {}
+
+  onChange(event) {
+    console.log(this.textboxValue);
   }
 
 }

src/app/common/components/presentation/toolbar/toolbar.component.html

@@ -0,0 +1,4 @@
+<mat-toolbar color="primary">
+  <app-icon-button icon="home" (click)="goHome($event)"></app-icon-button>
+  <span>{{title}}</span>
+</mat-toolbar>

src/app/common/components/presentation/toolbar/toolbar.component.scss

@@ -0,0 +1,11 @@
+.my-sidenav {
+  padding: 10px;
+  background-color:#00BCD4;
+}
+
+.sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}

src/app/common/components/presentation/toolbar/toolbar.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-toolbar',
+  templateUrl: './toolbar.component.html',
+  styleUrls: ['./toolbar.component.scss']
+})
+export class ToolbarComponent implements OnInit {
+
+  @Input() private title:string
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  goHome(event) {
+    console.log("Clicked home: " + event);
+  }
+
+}