From 9a971c8de15df72079d29db81c635faac0b7edff Mon Sep 17 00:00:00 2001 From: Osman Fikret Ceylan Date: Wed, 13 May 2020 22:35:07 +0200 Subject: [PATCH 01/24] calculate.component.ts and results.component.ts main communication functional design integrated, Background SVG added to the body, UX improvements on the results.component.html --- .../calculate/calculate.component.html | 21 +++++++++----- .../calculate/calculate.component.ts | 12 ++++++++ .../calculate/results/results.component.html | 4 ++- .../calculate/results/results.component.ts | 28 +++++++++++++++++-- src/styles.scss | 9 ++++++ 5 files changed, 63 insertions(+), 11 deletions(-) diff --git a/src/app/components/calculate/calculate.component.html b/src/app/components/calculate/calculate.component.html index 8131d14..6c57c37 100644 --- a/src/app/components/calculate/calculate.component.html +++ b/src/app/components/calculate/calculate.component.html @@ -1,14 +1,16 @@

Mortgage Expense Calculator

-

+

Buying a property is a big investment in our lives. Most people don't know what amount of money they need for the expenses of a mortgage.
@@ -38,20 +40,25 @@ matSuffix mat-icon-button aria-label="Clear" - (click)="value=''"> + (click)="value=null"> close

- +
-
diff --git a/src/app/components/calculate/calculate.component.ts b/src/app/components/calculate/calculate.component.ts index bbe8321..0934c47 100644 --- a/src/app/components/calculate/calculate.component.ts +++ b/src/app/components/calculate/calculate.component.ts @@ -7,6 +7,7 @@ import { Component, OnInit } from '@angular/core'; }) export class CalculateComponent implements OnInit { value = null; + isCalculate = false; constructor() { } @@ -14,4 +15,15 @@ export class CalculateComponent implements OnInit { ngOnInit(): void { } + setCalculationState() { + const showCalculation = !this.isCalculate + && this.value !== null + && this.value !== undefined + && this.value !== ''; + + if (showCalculation) { + this.isCalculate = true; + } + } + } diff --git a/src/app/components/calculate/results/results.component.html b/src/app/components/calculate/results/results.component.html index 7e0d899..ee9a13c 100644 --- a/src/app/components/calculate/results/results.component.html +++ b/src/app/components/calculate/results/results.component.html @@ -1,11 +1,13 @@ + fxLayoutAlign="center center" + class="margin-top-md margin-bottom-md"> diff --git a/src/app/components/calculate/results/results.component.ts b/src/app/components/calculate/results/results.component.ts index e499ed1..2167e4a 100644 --- a/src/app/components/calculate/results/results.component.ts +++ b/src/app/components/calculate/results/results.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { ExpenseItems } from '../../../shared/expense-data.model'; @@ -7,14 +7,36 @@ import { ExpenseItems } from '../../../shared/expense-data.model'; templateUrl: './results.component.html', styleUrls: [ './results.component.scss' ] }) -export class ResultsComponent implements OnInit { +export class ResultsComponent implements OnInit, OnChanges { + @Input() mortgageValue; + @Input() calculateState; + public expenseItems: ExpenseItems[]; constructor() { } ngOnInit(): void { - this.expenseItems = this.createExpenseItemsList(); + if (this.calculateState) { + this.expenseItems = this.createExpenseItemsList(); + } + } + + ngOnChanges(changes: SimpleChanges): void { + for (const propName in changes) { + if (changes.hasOwnProperty(propName)) { + switch (propName) { + case 'mortgageValue': { + console.log(changes[propName].currentValue); + break; + } + case 'calculateState': { + console.log(changes[propName].currentValue); + break; + } + } + } + } } createExpenseItemsList(): ExpenseItems[] { diff --git a/src/styles.scss b/src/styles.scss index 3d1532d..81f9084 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -2,6 +2,11 @@ body { height: 100vh; margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; + background-image: url('assets/logo/mecLogoEmptyWhite.svg'); + background-repeat: no-repeat; + background-color: #fbfbfb; + background-size: 30%; + background-position: bottom; } .no--padding { @@ -141,3 +146,7 @@ body { .mat-checkbox-layout .mat-checkbox-label { white-space: initial; } + +.mat-card:not([class*=mat-elevation-z]) { + box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.07), 0px 1px 1px 0 rgba(0, 0, 0, 0.35), 0 1px 3px 0 rgba(0, 0, 0, 0.43); +} From 2838012a86f8ca00cebe6a773e2d942605dece51 Mon Sep 17 00:00:00 2001 From: Osman Fikret Ceylan Date: Wed, 13 May 2020 22:46:40 +0200 Subject: [PATCH 02/24] #20 Re-calculate button integration to calculate.component.html --- .../components/calculate/calculate.component.html | 13 ++++++++++++- src/app/components/calculate/calculate.component.ts | 9 +++++++-- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/app/components/calculate/calculate.component.html b/src/app/components/calculate/calculate.component.html index 6c57c37..6183fdd 100644 --- a/src/app/components/calculate/calculate.component.html +++ b/src/app/components/calculate/calculate.component.html @@ -50,7 +50,8 @@ + (click)="setCalculationState()">CALCULATE + + + diff --git a/src/app/components/calculate/calculate.component.ts b/src/app/components/calculate/calculate.component.ts index 0934c47..6b46f0e 100644 --- a/src/app/components/calculate/calculate.component.ts +++ b/src/app/components/calculate/calculate.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Inject, OnInit } from '@angular/core'; +import { DOCUMENT } from '@angular/common'; @Component({ selector: 'app-calculate', @@ -9,7 +10,7 @@ export class CalculateComponent implements OnInit { value = null; isCalculate = false; - constructor() { + constructor(@Inject(DOCUMENT) private doc: Document) { } ngOnInit(): void { @@ -26,4 +27,8 @@ export class CalculateComponent implements OnInit { } } + refreshPage() { + this.doc.defaultView.location.reload(); + } + } From 541f2563a66c8310ce1f37184d239789b058ba01 Mon Sep 17 00:00:00 2001 From: ofcyln Date: Thu, 14 May 2020 11:37:11 +0200 Subject: [PATCH 03/24] Main info paragraph content updated --- src/app/components/calculate/calculate.component.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/app/components/calculate/calculate.component.html b/src/app/components/calculate/calculate.component.html index 6183fdd..b500050 100644 --- a/src/app/components/calculate/calculate.component.html +++ b/src/app/components/calculate/calculate.component.html @@ -11,14 +11,15 @@ [ngClass]="'margin-top-sm'">

- Buying a property is a big investment in our lives. Most people don't know what amount of money they need for the - expenses of a mortgage. + Buying a property is a big investment in our lives.
- 'Mortgage Expense Calculator' is an application to use of calculating estimated mortgage expenses when you buy a + Most people are not sure what amount of money they need to have upfront for buying a property by a mortgage. +
+ 'Mortgage Expense Calculator' is a web application to use of calculating estimated mortgage expenses when you buy a property.
- Simply enter the mortgage amount that you are going to get below and click the calculate button to see the - estimated expenses that you need for buying your property of dreams. + Simply enter the mortgage amount that you are going to get below and click the calculate button to see the estimated + expense amount that you need to have for buying your property of dreams.

From 0fdfd3a2ce58768efa1992a9d24a5303882d0646 Mon Sep 17 00:00:00 2001 From: ofcyln Date: Thu, 14 May 2020 11:38:01 +0200 Subject: [PATCH 04/24] Main info paragraph content updated --- src/app/components/calculate/calculate.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/calculate/calculate.component.html b/src/app/components/calculate/calculate.component.html index b500050..8dc1e7d 100644 --- a/src/app/components/calculate/calculate.component.html +++ b/src/app/components/calculate/calculate.component.html @@ -13,7 +13,7 @@ [ngStyle]="{'line-height': '29px'}"> Buying a property is a big investment in our lives.
- Most people are not sure what amount of money they need to have upfront for buying a property by a mortgage. + Most people are not sure what amount of money they need to have upfront for buying a property with a mortgage.
'Mortgage Expense Calculator' is a web application to use of calculating estimated mortgage expenses when you buy a property. From 72cfec118758855e9d86b4fefa7d45c1765628e0 Mon Sep 17 00:00:00 2001 From: ofcyln Date: Thu, 14 May 2020 11:46:34 +0200 Subject: [PATCH 05/24] UX improvements on ineraction elements --- src/app/components/calculate/calculate.component.html | 2 +- src/styles.scss | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/components/calculate/calculate.component.html b/src/app/components/calculate/calculate.component.html index 8dc1e7d..dadf5e8 100644 --- a/src/app/components/calculate/calculate.component.html +++ b/src/app/components/calculate/calculate.component.html @@ -25,7 +25,7 @@
- + Mortgage Amount