- Mortgage Expense Calculator
+ 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.
+
+ Buying a property is a big investment in our lives.
-
+
Mortgage Amount
-
-
+ €
+
+
+ (click)="value=null">
close
-
-
CALCULATE
+
+ CALCULATE
+
-
+
+
+ refresh
+
diff --git a/src/app/components/calculate/calculate.component.ts b/src/app/components/calculate/calculate.component.ts
index bbe8321..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',
@@ -7,11 +8,27 @@ import { Component, OnInit } from '@angular/core';
})
export class CalculateComponent implements OnInit {
value = null;
+ isCalculate = false;
- constructor() {
+ constructor(@Inject(DOCUMENT) private doc: Document) {
}
ngOnInit(): void {
}
+ setCalculationState() {
+ const showCalculation = !this.isCalculate
+ && this.value !== null
+ && this.value !== undefined
+ && this.value !== '';
+
+ if (showCalculation) {
+ this.isCalculate = true;
+ }
+ }
+
+ refreshPage() {
+ this.doc.defaultView.location.reload();
+ }
+
}
diff --git a/src/app/components/calculate/results/results.component.html b/src/app/components/calculate/results/results.component.html
index 7e0d899..18bea11 100644
--- a/src/app/components/calculate/results/results.component.html
+++ b/src/app/components/calculate/results/results.component.html
@@ -1,11 +1,14 @@
+ fxLayoutAlign="center center"
+ class="margin-top-md margin-bottom-md">
@@ -15,7 +18,10 @@
fxLayoutAlign="space-between center">
+ [disabled]="expenseItem.exceededAmount"
+ (change)="updateExpenseItemCheckedState()"
+ [(ngModel)]="expenseItem.checked"
+ color="primary">
@@ -33,6 +39,11 @@
class="margin-bottom-zero">(This cost is tax deductible, which means it can be lowered with effectively
38% or 49% depending on the amount of your gross income.)
+ (This expense has an average amount.)
+
{{ expenseItem.info }}
@@ -42,7 +53,7 @@
{{ expenseItem.name }}
(Not compulsory)
+ [ngStyle.lt-md]="{'font-size': '12px'}">(Not compulsory.)
(This cost is tax deductible, which means it can be lowered with effectively
38% or 49% depending on the amount of your gross income.)
+ (This expense has an average amount.)
+
{{ expenseItem.info }}
+ [ngStyle.lt-md]="{'font-size': '12px'}"
+ [ngClass.lt-md]="'margin-top-sm'"> {{ expenseItem.info }}
@@ -61,17 +78,30 @@
euro
+ [ngStyle.gt-xs]="{'cursor': 'help'}">euro_symbol
info
+ approximately
+
+
- ???
+ {{ calculateExpense(expenseItem.amount.bothApplicable, expenseItem.amount.costRange, expenseItem.amount.percentage,
+ expenseItem.checked).average | currency: 'EUR' : 'symbol' : '1.0-0' }}
-
+
TOTAL
+ (Average)
+
+
+ help
+
+ TOTAL
+ class="margin-bottom-zero"
+ [ngStyle]="{'font-size': '24px'}"> {{ totalExpenseAmounts.average | currency: 'EUR' : 'symbol' : '1.0-0' }}
+
+
+
+
+
TOTAL
+ (Minimum)
+
+
+
help
+
+
{{ totalExpenseAmounts.min | currency: 'EUR' : 'symbol' : '1.0-0' }}
+
+
+
+
+
TOTAL
+ (Maximum)
+
+
+
help
+
+
???
+ class="margin-bottom-zero"
+ [ngStyle]="{'font-size': '16px'}"> {{ totalExpenseAmounts.max | currency: 'EUR' : 'symbol' : '1.0-0' }}
diff --git a/src/app/components/calculate/results/results.component.scss b/src/app/components/calculate/results/results.component.scss
index 24ad306..33dda24 100644
--- a/src/app/components/calculate/results/results.component.scss
+++ b/src/app/components/calculate/results/results.component.scss
@@ -1,7 +1,11 @@
-@import 'src/assets/scss/mixins';
+@import '../../../../assets/scss/mixins';
:host {
mat-icon {
@include md-icon-size(16px);
+
+ &[svgicon=approximately] {
+ @include md-icon-size(14px);
+ }
}
}
diff --git a/src/app/components/calculate/results/results.component.ts b/src/app/components/calculate/results/results.component.ts
index e499ed1..e9c3d11 100644
--- a/src/app/components/calculate/results/results.component.ts
+++ b/src/app/components/calculate/results/results.component.ts
@@ -1,28 +1,235 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { ExpenseItems } from '../../../shared/expense-data.model';
+import { ExpenseItem, ExpenseVariations, MinMaxModel } from '../../../shared/expense-data.model';
+import { CustomIconService } from '../../../shared/custom-icon.service';
@Component({
selector: 'app-results',
templateUrl: './results.component.html',
styleUrls: [ './results.component.scss' ]
})
-export class ResultsComponent implements OnInit {
- public expenseItems: ExpenseItems[];
+export class ResultsComponent implements OnInit, OnChanges {
+ @Input() mortgageValue;
+ @Input() calculateState;
- constructor() {
+ public expenseItems: ExpenseItem[];
+ public calculatedMortgageExpenses: ExpenseItem[];
+ public totalExpenseAmounts: ExpenseVariations;
+
+ private readonly FIRST_ELEMENT = 0;
+ private readonly SECOND_ELEMENT = 1;
+ private readonly MAX_NATIONAL_MORTGAGE_GUARANTEE_AMOUNT = 31e4;
+ private readonly TOTAL_NUMBER_OF_REAL_ESTATE_EXPENSE_SCENARIOS = 12;
+
+ constructor(private customIconService: CustomIconService) {
+ this.customIconService.addIcon('approximately', 'approximately.svg');
}
ngOnInit(): void {
- this.expenseItems = this.createExpenseItemsList();
}
- createExpenseItemsList(): ExpenseItems[] {
- const expenseItems: ExpenseItems[] = [
+ ngOnChanges(changes: SimpleChanges): void {
+ for (const propName in changes) {
+ if (changes.hasOwnProperty(propName)) {
+ switch (propName) {
+ case 'mortgageValue': {
+ this.setCalculatedExpenses(Number(changes[ propName ].currentValue));
+
+ this.expenseItems = this.calculatedMortgageExpenses;
+
+ this.setExceededAmountFlag(this.mortgageValue);
+
+ this.totalExpenseAmounts = this.calculateTotal(this.expenseItems);
+ break;
+ }
+ }
+ }
+ }
+ }
+
+ setExceededAmountFlag(mortgageValue) {
+ if (mortgageValue > this.MAX_NATIONAL_MORTGAGE_GUARANTEE_AMOUNT) {
+ const exceededAmountItem = this.expenseItems.find(expenseElement => expenseElement.exceededAmount === false);
+
+ exceededAmountItem.exceededAmount = true;
+ exceededAmountItem.amount.percentage[this.FIRST_ELEMENT] = 0;
+ exceededAmountItem.checked = false;
+ }
+ }
+
+ updateExpenseItemCheckedState() {
+ this.totalExpenseAmounts = this.calculateTotal(this.expenseItems);
+ }
+
+ calculateTotal(expenseItems: ExpenseItem[]): ExpenseVariations {
+ const totalExpenseAmounts: ExpenseVariations = {
+ min: 0,
+ average: 0,
+ max: 0,
+ };
+
+ expenseItems.forEach((expenseItem: ExpenseItem) => {
+ const expenseVariations = this.calculateExpense(
+ expenseItem.amount.bothApplicable,
+ expenseItem.amount.costRange,
+ expenseItem.amount.percentage,
+ expenseItem.checked
+ );
+
+ totalExpenseAmounts.min += expenseVariations.min;
+ totalExpenseAmounts.average += expenseVariations.average;
+ totalExpenseAmounts.max += expenseVariations.max;
+ });
+
+ return totalExpenseAmounts;
+ }
+
+ calculateExpense(isBothApplicable: boolean, costRange: MinMaxModel, percentage: number[], checked: boolean): ExpenseVariations {
+ const firstPercentageElement = percentage[this.FIRST_ELEMENT];
+ const secondPercentageElement = percentage[this.SECOND_ELEMENT];
+ const checkNotDefined = checked === undefined || checked === null;
+
+ if (checkNotDefined) {
+ if (firstPercentageElement === 0) {
+ return {
+ min: costRange.min,
+ average: Math.ceil(( costRange.min + costRange.max ) / 2),
+ max: costRange.max
+ };
+ } else {
+ return {
+ min: firstPercentageElement,
+ average: firstPercentageElement,
+ max: firstPercentageElement
+ };
+ }
+ } else {
+ if (checked) {
+ if (!isBothApplicable) {
+ if (firstPercentageElement === 0) {
+ return {
+ min: costRange.min,
+ average: Math.ceil(( costRange.min + costRange.max ) / 2),
+ max: costRange.max
+ };
+ } else {
+ return {
+ min: firstPercentageElement,
+ average: firstPercentageElement,
+ max: firstPercentageElement
+ };
+ }
+ } else {
+ return {
+ min: costRange.min,
+ average: this.calculateRealEstateAgencyAverageExpense(costRange, percentage),
+ max: costRange.max + secondPercentageElement
+ };
+ }
+ } else {
+ return {
+ min: 0,
+ average: 0,
+ max: 0
+ };
+ }
+ }
+ }
+
+ calculateRealEstateAgencyAverageExpense(costRange: MinMaxModel, percentage: number[]): number {
+ const firstPercentageElement = percentage[ this.FIRST_ELEMENT ];
+ const secondPercentageElement = percentage[ this.SECOND_ELEMENT ];
+ const minCost = costRange.min;
+ const maxCost = costRange.max;
+ const averageCost = minCost + maxCost / 2;
+ const averagePercentageCost = ( firstPercentageElement + secondPercentageElement ) / 2;
+
+ return Math.ceil((
+ ( minCost ) +
+ ( averageCost ) +
+ ( minCost + firstPercentageElement ) +
+ ( minCost + secondPercentageElement ) +
+ ( minCost + ( averagePercentageCost ) ) +
+ ( maxCost ) +
+ ( maxCost + firstPercentageElement ) +
+ ( maxCost + secondPercentageElement ) +
+ ( maxCost + ( averagePercentageCost ) ) +
+ ( ( averageCost ) + firstPercentageElement ) +
+ ( ( averageCost ) + secondPercentageElement ) +
+ ( ( averageCost ) + ( averagePercentageCost ) )
+ ) / this.TOTAL_NUMBER_OF_REAL_ESTATE_EXPENSE_SCENARIOS
+ );
+ }
+
+ setCalculatedExpenses(mortgageAmount: number): ExpenseItem[] {
+ this.calculatedMortgageExpenses = this.createRawExpenseItemsList()
+ .map((expenseItem: ExpenseItem) => {
+ const expenseElement = {
+ name: expenseItem.name,
+ info: expenseItem.info,
+ compulsory: expenseItem.compulsory,
+ taxDeductible: expenseItem.taxDeductible,
+ specialExpense: expenseItem.specialExpense,
+ checked: expenseItem.checked,
+ approximate: expenseItem.approximate,
+ exceededAmount: expenseItem.exceededAmount,
+ };
+
+ const constRange = {
+ costRange: {
+ min: expenseItem.amount.costRange.min,
+ max: expenseItem.amount.costRange.max,
+ },
+ };
+
+ const bothApplicable = {
+ bothApplicable: expenseItem.amount.bothApplicable,
+ };
+
+ if (expenseItem.name === 'Real Estate Agent') {
+ return {
+ ... expenseElement,
+ amount: {
+ percentage: [
+ Math.floor((expenseItem.amount.percentage[this.FIRST_ELEMENT] / 100) * mortgageAmount),
+ Math.floor((expenseItem.amount.percentage[this.SECOND_ELEMENT] / 100) * mortgageAmount)
+ ],
+ ...constRange,
+ ...bothApplicable,
+ }
+ } as ExpenseItem;
+ } else if (expenseItem.name === 'Bank Guarantee') {
+ return {
+ ... expenseElement,
+ amount: {
+ percentage: [
+ Math.floor((10 / 100) * (expenseItem.amount.percentage[this.FIRST_ELEMENT] / 100) * mortgageAmount)
+ ],
+ ...constRange,
+ ...bothApplicable,
+ }
+ } as ExpenseItem;
+ } else {
+ return {
+ ... expenseElement,
+ amount: {
+ percentage: [Math.floor((expenseItem.amount.percentage[this.FIRST_ELEMENT] / 100) * mortgageAmount)],
+ ...constRange,
+ ...bothApplicable,
+ }
+ } as ExpenseItem;
+ }
+ });
+
+ return this.calculatedMortgageExpenses;
+ }
+
+ createRawExpenseItemsList(): ExpenseItem[] {
+ const expenseItems: ExpenseItem[] = [
{
name: 'Financial Advisor',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 2000,
max: 5000,
@@ -32,11 +239,12 @@ export class ResultsComponent implements OnInit {
info: 'Prices for a financial advisor can vary from approx. 2,000 euros to more than 5,000 euros.',
compulsory: true,
taxDeductible: true,
+ approximate: true,
},
{
name: 'Valuation',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 300,
max: 800,
@@ -46,11 +254,12 @@ export class ResultsComponent implements OnInit {
info: 'Every bank or lender requires an official valuation report if you’re getting a mortgage. This will cost you somewhere between 300 and 800 euros, depending on the size of the house (the bigger, the more work) and of course the evaluator you choose.',
compulsory: true,
taxDeductible: true,
+ approximate: true,
},
{
name: 'Civil-Law Notary',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 900,
max: 2000,
@@ -60,11 +269,12 @@ export class ResultsComponent implements OnInit {
info: 'You’ll need a notary to legally transfer the property to your name and register it at the land registry. Costs for this will vary from 900 euros to as much as 2,000 euros, depending on the notary.',
compulsory: true,
taxDeductible: true,
+ approximate: true,
},
{
name: 'Transfer Tax',
amount: {
- percentage: [ 2 ],
+ percentage: [2],
costRange: {
min: 0,
max: 0,
@@ -78,7 +288,7 @@ export class ResultsComponent implements OnInit {
{
name: 'Organizing Medical Report',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 125,
max: 150,
@@ -88,25 +298,29 @@ export class ResultsComponent implements OnInit {
info: 'This expense is related to organizing you medical report and handling files with the authorities.',
compulsory: true,
taxDeductible: false,
+ approximate: true,
},
{
name: 'Bank Guarantee',
amount: {
- percentage: [ 1 ],
+ percentage: [1],
costRange: {
min: 0,
max: 0,
},
bothApplicable: false,
},
- info: 'You’ll need to provide the seller with a 10% deposit once you’ve signed the purchase agreement. If you can’t provide a 10% deposit, you’ll need to get a bank guarantee for that amount. You can expect the bank guarantee to cost you about 1% of the amount of the guarantee.',
+ info: 'You’ll need to provide the seller with a 10% deposit once you’ve signed the purchase agreement. If you can’t provide a' +
+ ' 10% deposit, you’ll need to get a bank guarantee for that amount. Fees for bank guarantees vary from provider to provider.' +
+ ' It is often 1% of the deposit, but some providers charge less or even nothing at all. The notary will deduct these fees' +
+ ' upon transfer. You can expect the bank guarantee to cost you between from nothing to 1% of the amount of the guarantee.',
compulsory: true,
taxDeductible: false,
},
{
name: 'Structural Survey',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 250,
max: 900,
@@ -116,11 +330,12 @@ export class ResultsComponent implements OnInit {
info: 'A structural survey to inspect your home will cost between 250 and 900 euros, depending on the size of the building.',
compulsory: true,
taxDeductible: false,
+ approximate: true,
},
{
name: 'National Mortgage Guarantee(NHG)',
amount: {
- percentage: [ 0.9 ],
+ percentage: [0.9],
costRange: {
min: 0,
max: 0,
@@ -131,11 +346,13 @@ export class ResultsComponent implements OnInit {
compulsory: false,
taxDeductible: true,
specialExpense: true,
+ exceededAmount: false,
+ checked: true
},
{
name: 'Real Estate Agent',
amount: {
- percentage: [ 0.5, 1.5 ],
+ percentage: [0.5, 1.5],
costRange: {
min: 500,
max: 3000,
@@ -146,11 +363,13 @@ export class ResultsComponent implements OnInit {
compulsory: false,
taxDeductible: false,
specialExpense: true,
+ approximate: true,
+ checked: true
},
{
name: 'Life Insurance',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 250,
max: 500,
@@ -161,11 +380,13 @@ export class ResultsComponent implements OnInit {
compulsory: false,
taxDeductible: false,
specialExpense: true,
+ approximate: true,
+ checked: true
},
{
name: 'Contact with Agency',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 350,
max: 500,
@@ -176,14 +397,16 @@ export class ResultsComponent implements OnInit {
compulsory: false,
taxDeductible: false,
specialExpense: true,
+ approximate: true,
+ checked: true
},
{
name: 'Translator',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
- min: 500,
- max: 750,
+ min: 250,
+ max: 500,
},
bothApplicable: false,
},
@@ -191,11 +414,13 @@ export class ResultsComponent implements OnInit {
compulsory: false,
taxDeductible: false,
specialExpense: true,
+ approximate: true,
+ checked: true
},
{
name: 'Self-employed Customers',
amount: {
- percentage: [ 0 ],
+ percentage: [0],
costRange: {
min: 495,
max: 500,
@@ -206,6 +431,8 @@ export class ResultsComponent implements OnInit {
compulsory: false,
taxDeductible: false,
specialExpense: true,
+ approximate: true,
+ checked: true
}
];
diff --git a/src/app/core/header/share-buttons/share-buttons.component.scss b/src/app/core/header/share-buttons/share-buttons.component.scss
index a06d2c0..6e4c675 100644
--- a/src/app/core/header/share-buttons/share-buttons.component.scss
+++ b/src/app/core/header/share-buttons/share-buttons.component.scss
@@ -1,4 +1,4 @@
-@import 'src/assets/scss/mixins';
+@import '../../../../assets/scss/mixins';
:host {
flex: 1 1 auto;
diff --git a/src/app/shared/expense-data.model.ts b/src/app/shared/expense-data.model.ts
index 0d38ed9..2606635 100644
--- a/src/app/shared/expense-data.model.ts
+++ b/src/app/shared/expense-data.model.ts
@@ -1,19 +1,28 @@
-export interface ExpenseItems {
+export interface ExpenseItem {
name: string;
amount: CostRanges;
info: string;
compulsory: boolean;
taxDeductible: boolean;
- specialExpense?: boolean,
+ checked?: boolean;
+ specialExpense?: boolean;
+ approximate?: boolean;
+ exceededAmount?: boolean;
}
-interface CostRanges {
+export interface CostRanges {
percentage: number[];
costRange: MinMaxModel;
bothApplicable: boolean;
}
-interface MinMaxModel {
+export interface MinMaxModel {
min: number;
max: number;
}
+
+export interface ExpenseVariations {
+ min: number;
+ average: number;
+ max: number;
+}
diff --git a/src/assets/custom-font-icons/approximately.svg b/src/assets/custom-font-icons/approximately.svg
new file mode 100644
index 0000000..d5999d1
--- /dev/null
+++ b/src/assets/custom-font-icons/approximately.svg
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/assets/scss/media-queries.scss b/src/assets/scss/media-queries.scss
new file mode 100644
index 0000000..ad5fd31
--- /dev/null
+++ b/src/assets/scss/media-queries.scss
@@ -0,0 +1,7 @@
+@media only screen and (max-width: 800px) {
+ app-calculate .mat-raised-button {
+ line-height: 47px !important;
+ padding: 0 16px !important;
+ font-size: 15px !important;
+ }
+}
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
new file mode 100644
index 0000000..64920d0
--- /dev/null
+++ b/src/assets/scss/theme.scss
@@ -0,0 +1,9 @@
+@import '~@angular/material/theming';
+@include mat-core();
+
+$my-app-primary: mat-palette($mat-deep-purple);
+$my-app-accent: mat-palette($mat-red);
+$my-app-warn: mat-palette($mat-amber);
+$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
+
+@include angular-material-theme($my-app-theme);
diff --git a/src/styles.scss b/src/styles.scss
index 3d1532d..8dcc855 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,7 +1,15 @@
+@import 'assets/scss/mixins.scss';
+@import 'assets/scss/media-queries.scss';
+
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 {
@@ -20,6 +28,11 @@ body {
width: 100%;
}
+::selection {
+ color: white;
+ background: #673ab7;
+}
+
.margin {
&-top {
&-xl {
@@ -124,12 +137,12 @@ body {
.mat-form-field-appearance-legacy {
.mat-form-field-infix {
- padding: 0.7em 0 !important;
+ padding: 0.54em 0 !important;
}
}
.mat-card .mat-divider-horizontal {
- min-height: 30px;
+ min-height: 20px;
}
.mat-list-base .mat-list-item .mat-list-item-content {
@@ -141,3 +154,14 @@ 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);
+}
+
+.mat-raised-button {
+ line-height: 50px !important;
+ padding: 0 20px !important;
+ font-size: 18px !important;
+}
+