Calculate monthly MI

components/new/details.vue

@@ -260,8 +260,6 @@ function generate() {
         this.errors = errors
         return
     }
-    
-    window.location.hash = 'new/summary'
 }
 
 export default {

components/new/new.vue

@@ -93,7 +93,7 @@ const loans = [
 	Object.assign({}, example,),
 	Object.assign(
 		Object.assign({}, example),
-		{title: "Another One", mi: {}}
+		{title: "Another One", mi: {rate: 0}}
 	),
 ]
 
@@ -146,27 +146,25 @@ function setPrice(value) {
 // Changes loan.ltv's <input> and data() values, then syncs with data.amount
 function setLtv(e) {
 	let ltv = strip(e)
-	let loan = this.loans[this.sel]
 	if (!this.estimate.price) return
 
 	if (ltv > 100) ltv = 100
 	if (ltv < 0) ltv = 0
 
-	loan.ltv = ltv
-	loan.amount = (ltv / 100 * this.estimate.price).toFixed(2)
+	this.loan.ltv = ltv
+	this.loan.amount = (ltv / 100 * this.estimate.price).toFixed(2)
 }
 
 // Changes loan.amount\'s <input> and data() values, then syncs with data.ltv
 function setAmount(e) {
 	let amount = strip(e)
-	let loan = this.loans[this.sel]
 	if (!this.estimate.price) return
 
-	if (amount > loan.price) amount = loan.price
+	if (amount > this.loan.price) amount = this.loan.price
 	if (amount < 0) amount = 0
 
-	loan.amount = amount
-	loan.ltv = (amount / this.estimate.price * 100).toFixed(2)
+	this.loan.amount = amount
+	this.loan.ltv = (amount / this.estimate.price * 100).toFixed(2)
 }
 
 function setDti(e) {
@@ -197,7 +195,7 @@ function generate() {
 	window.location.hash = 'new/summary'
 }
   
-// Percentage values of fees always takek precedent over amounts. The conversion
+// Percentage values of fees always take precedent over amounts. The conversion
 // happens in setPrice()
 export default {
 	components: { LoanSummary, LoanDetails },

components/new/summary.vue

@@ -1,11 +1,11 @@
 <template>
-<div>
+<div v-if="downpayment && totalMonthly > 0">
 
 <section class="form inputs">
 <h3>Monthly Payment - ${{totalMonthly}}</h3>
 <label>Loan payment: ${{loanPayment.toFixed(2)}}</label>
 <label v-if="loan.mi.monthly">
-    Mortgage insurance: ${{(loanPayment*loan.mi.rate/100).toFixed(2)}}
+    Mortgage insurance: ${{(loan.amount*loan.mi.rate/100/12).toFixed(2)}}
 </label>
 <label>Property taxes: ${{loan.tax}}</label>
 </section>
@@ -13,10 +13,10 @@
 <section class="form inputs">
 <h3>Cash to Close - ${{totalMonthly}}</h3>
 <label>Closing costs: ${{fees}}</label>
-<label>Credits: ${{credits}}</label>
-<label>Downpayment: ${{downpayment.toFixed(2)}}</label>
+<label v-if="credits">Credits: ${{credits}}</label>
+<label>Down payment: ${{downpayment.toFixed(2)}}</label>
 <label v-if="!loan.mi.monthly">
-    Mortgage insurance: ${{(loanPayment*loan.mi.rate).toFixed(2)}}
+    Mortgage insurance: ${{(loanPayment*loan.mi.rate/100).toFixed(2)}}
 </label>
 </section>
 
@@ -30,16 +30,20 @@
 
 <script setup>
 import { ref, computed } from 'vue'
-const props = defineProps(['downpayment', 'loan'])
+const props = defineProps(['downpayment', 'loan', 'valid'])
 
 function amortize(principle, rate, periods) {
     return principle * rate*(1+rate)**periods / ((1+rate)**periods - 1)
 }
 
-const loanPayment = computed(() => amortize(props.loan.amount,
+const loanPayment = computed(() => {
+    let amount = props.loan.amount
+    if (!props.loan.mi.monthly) amount =
+    amount + props.loan.mi.rate/100*(amount+props.downpayment)
+    return amortize(props.loan.amount,
     props.loan.interest / 100 / 12,
     props.loan.term*12)
-)
+})
   
 const totalMonthly = computed (
     () => (loanPayment.value +
@@ -48,6 +52,12 @@ const totalMonthly = computed (
         props.loan.hazard).toFixed(2)
     )
 
+const totalCash = computed (
+    () => (fees.value +
+        credits.value +
+        props.downpayment).toFixed(2)
+    )
+
 // Closing costs
 const fees = computed(() => {
     return props.loan.fees.reduce((total, x) => {
@@ -66,5 +76,4 @@ const credits = computed(() => {
 const cashToClose = computed(() => {
     return fees + credits + downpayment
 })
- 
 </script>