Add MI and HOA fields

components/mi.vue

@@ -0,0 +1,5 @@
+<template>
+</template>
+
+<script>
+</script>

components/new.vue

@@ -41,10 +41,10 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
 <h3>Borrower</h3>
 <label>Number of Borrowers</label>
 <input :value="estimate.borrowers"
-@input="(e) => estimate.borrowers = strip(e)">
+@input="(e) => estimate.borrowers = stripInt(e)">
 <label>Credit Score</label>
 <input :value="estimate.creditScore"
-@input="(e) => estimate.creditScore = strip(e)">
+@input="(e) => estimate.creditScore = stripInt(e)">
 <label>Monthly Income ($)</label>
 <input :value="estimate.mIncome"
 @input="(e) => estimate.mIncome = strip(e)">
@@ -53,11 +53,11 @@ class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0
 
 <section class="radios form">
 <h3>Transaction Type</h3>
-<input type="radio" name="transaction_type" value="transaction"
+<input type="radio" name="transaction_type" value="estimate.transaction"
 @input="e => estimate.transaction = 0"
 selected="estimate.transaction == 0">
 <label>Purchase</label>
-<input type="radio" name="transaction_type" value="refinance"
+<input type="radio" name="transaction_type" value="estimate.refinance"
 @input="e => estimate.transaction = 1"
 selected="estimate.transaction == 1">
 <label>Refinance</label>
@@ -109,46 +109,42 @@ selected="estimate.transaction == 1">
 <input :value="loans[sel].housingDti" @input="setHousingDti">
 <label>Total DTI (%) - Optional</label>
 <input :value="loans[sel].dti" @input="setDti">
+<label>Home Owner's Association ($/month)</label>
+<input :value="loans[sel].hoa"
+@input="(e) => { loans[sel].hoa = strip(e) }">
+
 <label>Interest Rate (%)</label>
-<input :value="loans[sel].interest" @input="setInterest">
+<input :value="loans[sel].interest"
+@input="(e) => { loans[sel].interest = stripPerc(e) }">
 <label>Days of Interest</label>
-<input :value="loans[sel].interestDays" @input="setInterestDays">
-
-<label>Hazard Insurance Escrowed?</label>
-<input type="checkbox" :value="loans[sel].hazardEscrowed" @input="">
-<label>Months to Escrow Hazard Insurance</label>
-<input :value="loans[sel].hazardMonths" @input="">
-<label>Hazard Insurance ($/monthly)</label>
-<input :value="loans[sel].hazard" @input="setHazard">
-
-<label>Taxes Escrowed?</label>
-<input type="checkbox" :value="loans[sel].taxEscrowed" @input="">
-<label>Months to Escrow Real Estate Tax</label>
-<input :value="loans[sel].taxEscrow" @input="">
-<label>Real Estate Tax ($/monthly)</label>
-<input :value="loans[sel].tax" @input="setTax">
+<input :value="loans[sel].interestDays"
+@input="(e) => {loans[sel].interestDays = stripInt(e)}">
+
+<label>Hazard Insurance Escrow (months)</label>
+<input :value="loans[sel].hazardEscrow"
+@input="(e) => {loans[sel].hazardEscrow = stripInt(e)}">
+<label>Hazard Insurance ($/month)</label>
+<input :value="loans[sel].hazard"
+@input="(e) => {loans[sel].hazard = strip(e)}">
+
+<label>Real Estate Tax Escrow (months)</label>
+<input :value="loans[sel].taxEscrow"
+@input="e => {loans[sel].taxEscrow = stripInt(e)}">
+<label>Real Estate Tax ($/month)</label>
+<input :value="loans[sel].tax"
+@input="(e) => {loans[sel].tax = strip(e)}">
 </section>
 
-<section class="form inputs">
-<h3>Interest Rates</h3>
-<label>Loan Term (years)</label>
-<input :value="loans[sel].term"
-@input="(e) => loans[sel].term = strip(e)">
-
-<label>Loan Program</label>
-<select id="" name="" v-model="loans[sel].program">
-	<option value="none">None</option>
-</select>
-
-<label>Loan to Value (%)</label>
-<input :value="loans[sel].ltv" @input="setLtv">
-<label>Loan Amount ($)</label>
-<input :value="loans[sel].amount"
-@input="setAmount">
-<label>Housing Expense DTI (%) - Optional</label>
-<input :value="loans[sel].housingDti" @input="setHousingDti">
-<label>Total DTI (%) - Optional</label>
-<input :value="loans[sel].dti" @input="setDti">
+<section class="form radios">
+<h3>Mortgage Insurance</h3>
+<input type="radio" name="transaction_type" value="transaction"
+@input="e => estimate.transaction = 0"
+selected="estimate.transaction == 0">
+<label>National MI</label>
+<input type="radio" name="transaction_type" value="refinance"
+@input="e => estimate.transaction = 1"
+selected="estimate.transaction == 1">
+<label>MGIC</label>
 </section>
 
 </div>
@@ -166,11 +162,10 @@ const example = {
 		interest: 0,
 		interestDays: 0,
 		hazard: 0, // Hazard insurance monthly payment
-		hazardMonths: 0, // Hazard insurance months
-		hazardEscrowed: true, // If hazard insurance is escrowed
+		hazardEscrow: 0, // Hazard insurance escrow in months (0 is none)
 		tax: 0, // Real Estate taxes monthly payment
-		taxEscrow: 0, // Months to escrow
-		taxEscrowed: true, // If tax is escrowed
+		taxEscrow: 0, // Months to escrow (0 is none)
+		hoa: 0, // Home owner's association monthly fee
 		program: "",
 		pud: true, // Property under development
 		zip: ''
@@ -196,13 +191,36 @@ function create() {
 	this.estimate.loans.push(Object.assign({}, loans[0]))
 }
 
-// Strips non-digits from an input box event and returns it's rounded integer
+// Strips non-digits from an input box event and returns it's rounded integer.
+// It also preserves current valid entry (.)
 function strip(e) {
+	let valid = e.target.value.match(/\d+\.?\d?\d?/)?.[0] ?? ""
+	e.target.value = valid
+	return Number(valid || 0)
+}
+
+function stripInt(e) {
 	let value = parseInt(e.target.value.replace(/\D/g, '') || 0)
 	e.target.value = value
 	return value
 }
 
+function stripPerc(e) {
+	let num = strip(e)
+
+	if (num > 100) {
+		num = 100
+		e.target.value = num
+	}
+
+	if (num < 0) {
+		num = 0
+		e.target.value = num
+	}
+
+	return num
+}
+
 function stripLetters(e) {
 	let value = (e.target.value.replace(/[^\w\s]/g, '').slice(0, 20) || '')
 	e.target.value = value
@@ -227,8 +245,7 @@ function setLtv(e) {
 	if (ltv < 0) ltv = 0
 
 	loan.ltv = ltv
-	e.target.value = ltv
-	loan.amount = Math.round(ltv / 100 * this.estimate.price)
+	loan.amount = (ltv / 100 * this.estimate.price).toFixed(2)
 }
 
 // Changes loan.amount's <input> and data() values, then syncs with data.ltv
@@ -241,15 +258,13 @@ function setAmount(e) {
 	if (amount < 0) amount = 0
 
 	loan.amount = amount
-	e.target.value = amount
-	loan.ltv = Math.round(amount / this.estimate.price * 100)
+	loan.ltv = (amount / this.estimate.price * 100).toFixed(2)
 }
 
 // Updates the property price for all loans
 function setPrice(e) {
 	let value = strip(e)
 	this.estimate.price = value
-	e.target.value = value
 }
 
 function setDti(e) {
@@ -278,8 +293,8 @@ function setHousingDti(e) {
 
 export default {
 	methods: {
-		setPrice, setLtv, setAmount, setDti, setHousingDti,
-		strip, stripLetters, del, create
+		setPrice, setLtv, setAmount, setDti, setHousingDti, strip, stripInt,
+		stripLetters, stripPerc, del, create
 	},
 	props: ['user'],
 	data() {