diff --git a/src/app/app.component.html b/src/app/app.component.html index f9c41fa..b3df466 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,14 @@ - -
-

- {{title}}!! -

- -
- +
+ +
+
+ Register + Sign In +
+
+
+ +
+
+
+ \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29..c5af2bc 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,6 @@ +.page { + background-color: rgb(31, 95, 121); +} +.main { + text-align: center; +} diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts deleted file mode 100644 index 7d2799c..0000000 --- a/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; - -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!!'); - })); -}); diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 45af001..da40707 100644 --- a/src/app/app.component.ts +++ b/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'; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index cb77428..b732590 100644 --- a/src/app/app.module.ts +++ b/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 { } diff --git a/src/app/common/common.module.ts b/src/app/common/common.module.ts index aea001f..413b039 100644 --- a/src/app/common/common.module.ts +++ b/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 { } diff --git a/src/app/common/components/presentation/basic-button/basic-button.component.html b/src/app/common/components/presentation/basic-button/basic-button.component.html new file mode 100644 index 0000000..396e078 --- /dev/null +++ b/src/app/common/components/presentation/basic-button/basic-button.component.html @@ -0,0 +1 @@ + diff --git a/src/app/common/components/presentation/basic-button/basic-button.component.scss b/src/app/common/components/presentation/basic-button/basic-button.component.scss new file mode 100644 index 0000000..1c67ae5 --- /dev/null +++ b/src/app/common/components/presentation/basic-button/basic-button.component.scss @@ -0,0 +1,3 @@ +.mat-button { + min-width: 200px; +} \ No newline at end of file diff --git a/src/app/common/components/presentation/basic-button/basic-button.component.ts b/src/app/common/components/presentation/basic-button/basic-button.component.ts new file mode 100644 index 0000000..5b6c30e --- /dev/null +++ b/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 = new EventEmitter(); + + constructor() { } + + ngOnInit() { + } + + click(event) { + this.clickEvent.emit(event); + } + +} diff --git a/src/app/common/components/presentation/check-box/check-box.component.html b/src/app/common/components/presentation/check-box/check-box.component.html index 88744b2..2f50f04 100644 --- a/src/app/common/components/presentation/check-box/check-box.component.html +++ b/src/app/common/components/presentation/check-box/check-box.component.html @@ -1,3 +1 @@ -

- DRIVER-CHECKBOX -

+{{label}} diff --git a/src/app/common/components/presentation/check-box/check-box.component.spec.ts b/src/app/common/components/presentation/check-box/check-box.component.spec.ts deleted file mode 100644 index 7917295..0000000 --- a/src/app/common/components/presentation/check-box/check-box.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CheckBoxComponent } from './check-box.component'; - -describe('CheckBoxComponent', () => { - let component: CheckBoxComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CheckBoxComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CheckBoxComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/common/components/presentation/check-box/check-box.component.ts b/src/app/common/components/presentation/check-box/check-box.component.ts index 775dd54..1b8e179 100644 --- a/src/app/common/components/presentation/check-box/check-box.component.ts +++ b/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 = new EventEmitter(); + constructor() { } ngOnInit() { } + onChange(newValue) { + this.checkboxValue = newValue; + console.log("The checkbox value is: " + newValue); + this.checkboxChange.emit(newValue); + } + } diff --git a/src/app/common/components/presentation/icon-button/icon-button.component.html b/src/app/common/components/presentation/icon-button/icon-button.component.html new file mode 100644 index 0000000..0733da4 --- /dev/null +++ b/src/app/common/components/presentation/icon-button/icon-button.component.html @@ -0,0 +1,3 @@ + diff --git a/src/app/common/components/presentation/icon-button/icon-button.component.scss b/src/app/common/components/presentation/icon-button/icon-button.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/common/components/presentation/icon-button/icon-button.component.ts b/src/app/common/components/presentation/icon-button/icon-button.component.ts new file mode 100644 index 0000000..16eab48 --- /dev/null +++ b/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 = new EventEmitter(); + + constructor() { } + + ngOnInit() { + } + + click($event) { + this.clickEvent.emit(event); + } + +} diff --git a/src/app/common/components/presentation/raised-button/raised-button.component.html b/src/app/common/components/presentation/raised-button/raised-button.component.html new file mode 100644 index 0000000..76d7eba --- /dev/null +++ b/src/app/common/components/presentation/raised-button/raised-button.component.html @@ -0,0 +1 @@ + diff --git a/src/app/common/components/presentation/raised-button/raised-button.component.scss b/src/app/common/components/presentation/raised-button/raised-button.component.scss new file mode 100644 index 0000000..722dc0f --- /dev/null +++ b/src/app/common/components/presentation/raised-button/raised-button.component.scss @@ -0,0 +1,3 @@ +.mat-raised-button { + min-width: 200px; +} diff --git a/src/app/common/components/presentation/raised-button/raised-button.component.ts b/src/app/common/components/presentation/raised-button/raised-button.component.ts new file mode 100644 index 0000000..bf16712 --- /dev/null +++ b/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 = new EventEmitter(); + + constructor() { } + + ngOnInit() { + } + + click(event) { + this.clickEvent.emit(event); + } + +} diff --git a/src/app/common/components/presentation/text-box/text-box.component.html b/src/app/common/components/presentation/text-box/text-box.component.html index 73b7c6e..1df5ad0 100644 --- a/src/app/common/components/presentation/text-box/text-box.component.html +++ b/src/app/common/components/presentation/text-box/text-box.component.html @@ -1 +1,7 @@ - +
+ + + {{hide ? 'lock_outline' : 'lock_open'}} + {{icon}} + +
diff --git a/src/app/common/components/presentation/text-box/text-box.component.spec.ts b/src/app/common/components/presentation/text-box/text-box.component.spec.ts deleted file mode 100644 index 153caf7..0000000 --- a/src/app/common/components/presentation/text-box/text-box.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TextBoxComponent } from './text-box.component'; - -describe('TextBoxComponent', () => { - let component: TextBoxComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ TextBoxComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TextBoxComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should be created', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/common/components/presentation/text-box/text-box.component.ts b/src/app/common/components/presentation/text-box/text-box.component.ts index 2787aab..0e7dd25 100644 --- a/src/app/common/components/presentation/text-box/text-box.component.ts +++ b/src/app/common/components/presentation/text-box/text-box.component.ts @@ -1,4 +1,5 @@ -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', @@ -6,13 +7,20 @@ import { Component, OnInit, Input } from '@angular/core'; 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 = new EventEmitter(); + constructor() { } - ngOnInit() { - this.value = 'hello' + ngOnInit() {} + + onChange(event) { + console.log(this.textboxValue); } } diff --git a/src/app/common/components/presentation/toolbar/toolbar.component.html b/src/app/common/components/presentation/toolbar/toolbar.component.html new file mode 100644 index 0000000..9f054bf --- /dev/null +++ b/src/app/common/components/presentation/toolbar/toolbar.component.html @@ -0,0 +1,4 @@ + + + {{title}} + diff --git a/src/app/common/components/presentation/toolbar/toolbar.component.scss b/src/app/common/components/presentation/toolbar/toolbar.component.scss new file mode 100644 index 0000000..14d0275 --- /dev/null +++ b/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; +} diff --git a/src/app/common/components/presentation/toolbar/toolbar.component.ts b/src/app/common/components/presentation/toolbar/toolbar.component.ts new file mode 100644 index 0000000..9232b51 --- /dev/null +++ b/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); + } + +} diff --git a/src/app/common/components/smart/login/login.component.html b/src/app/common/components/smart/login/login.component.html index 8227ee5..e324e21 100644 --- a/src/app/common/components/smart/login/login.component.html +++ b/src/app/common/components/smart/login/login.component.html @@ -1,5 +1,17 @@ -
-
- - - +
+ + directions_car +

UltiCar

+
+ +
+ +
+ +
+ +
+ +
diff --git a/src/app/common/components/smart/login/login.component.scss b/src/app/common/components/smart/login/login.component.scss index e69de29..5d48667 100644 --- a/src/app/common/components/smart/login/login.component.scss +++ b/src/app/common/components/smart/login/login.component.scss @@ -0,0 +1,17 @@ +.mat-icon { + font-size: 48px; + margin-left: -24px; +} +.mat-card-all { + padding-top: 10%; + padding-left: 10%; + padding-right: 10%; +} + +.mat-card-sign-in { + padding-bottom: 5px; +} + +.mat-card-inputs { + padding-bottom: 5%; +} diff --git a/src/app/common/components/smart/login/login.component.spec.ts b/src/app/common/components/smart/login/login.component.spec.ts index b9b2bc1..7e4c8aa 100644 --- a/src/app/common/components/smart/login/login.component.spec.ts +++ b/src/app/common/components/smart/login/login.component.spec.ts @@ -6,20 +6,7 @@ describe('LoginComponent', () => { let component: LoginComponent; let fixture: ComponentFixture; - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ LoginComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(LoginComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - it('should be created', () => { - expect(component).toBeTruthy(); + expect(true).toBeTruthy(); }); }); diff --git a/src/app/common/components/smart/login/login.component.ts b/src/app/common/components/smart/login/login.component.ts index 54c3e51..dacb1b5 100644 --- a/src/app/common/components/smart/login/login.component.ts +++ b/src/app/common/components/smart/login/login.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { Routes, RouterModule, Router } from '@angular/router'; @Component({ selector: 'app-login', @@ -7,17 +8,31 @@ import { Component, OnInit } from '@angular/core'; }) export class LoginComponent implements OnInit { - constructor() { } + constructor(private router: Router) { } + + @Input() private disabled:string ngOnInit() { } - loginUser(user, pass) { - console.log('clicked login'); + signIn(event) { + console.log("Signed in: " + event); + } + + register(event) { + console.log("Registered: " + event); } - registerUser() { - console.log('clicked register'); + rememberUser(event, checkboxValue) { + if(checkboxValue) { + console.log("Will remember."); + } else { + console.log("Will not remember.") + } } + rememberUserValue = true; + usernameValue = ""; + passwordValue = ""; + } diff --git a/src/app/common/models/user.ts b/src/app/common/models/user.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/styles.scss b/src/styles.scss index e143f1b..d4aa986 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,9 +1,49 @@ -/* You can add global styles to this file, and also import other style files */ -@import './sass/variables.scss'; -@import "~@angular/material/prebuilt-themes/indigo-pink.css"; - -.ride-sharing-fe { - p, h1 { - color:$red; - } -} \ No newline at end of file +@import '~@angular/material/theming'; + +@include mat-core(); + +$my-theme-primary: mat-palette($mat-cyan); +$my-theme-accent: mat-palette($mat-teal); +$my-theme-warn: mat-palette($mat-red); + +$mat-light-theme-background: ( + status-bar: map_get($mat-grey, 300), + app-bar: map_get($mat-grey, 100), + background: map_get($mat-grey, 100), + hover: rgba(black, 0.04), + card: white, + dialog: white, + disabled-button: $black-12-opacity, + raised-button: white, + focused-button: $black-6-opacity, + selected-button: map_get($mat-grey, 300), + selected-disabled-button: map_get($mat-grey, 400), + disabled-button-toggle: map_get($mat-grey, 200), + unselected-chip: map_get($mat-grey, 300), + disabled-list-option: map_get($mat-grey, 200), + ); + + $mat-light-theme-foreground: ( + base: black, + divider: $black-12-opacity, + dividers: $black-12-opacity, + disabled: rgba(black, 0.38), + disabled-button: rgba(black, 0.38), + disabled-text: rgba(black, 0.38), + hint-text: rgba(black, 0.38), + secondary-text: rgba(black, 0.54), + icon: rgba(black, 0.54), + icons: rgba(black, 0.54), + text: rgba(black, 0.87), + slider-min: rgba(black, 0.87), + slider-off: rgba(black, 0.26), + slider-off-active: rgba(black, 0.38), + ); + +$my-theme: mat-light-theme( + $my-theme-primary, + $my-theme-accent, + $my-theme-warn +); + +@include angular-material-theme($my-theme);