Add new loan fields

assets/main.css

@@ -16,6 +16,19 @@ h2 {
 	color: var(--text);
 }
 
+label {
+	font-size: 16px;
+}
+
+section.form label {
+	display: flex;
+	align-items: center;
+}
+
+.page section.form h3 {
+	margin: 10px 0 10px 30px;
+}
+
 main .panel {
 	height: 100%;
 	width: 100%;
@@ -114,11 +127,14 @@ menu.sidebar svg {
 .page {
 	padding: 0 2%;
 	width: 100%;
+	overflow-y: scroll;
+	scrollbar-width: none;
 }
 
 .page section {
 	margin-top: 50px;
 	margin: auto;
+	margin-bottom: 40px;
 	max-width: 700px;
 }
 
@@ -147,8 +163,11 @@ section.loans-list {
 	display: flex;
 	flex-direction: column;
 	width: fit-content;
-	margin: 0;
+	margin: 0 0 50px 0;
 	justify-content: center;
+	border-left: 1px solid var(--text-lightest);
+	padding: 10px;
+	margin-bottom: 50px;
 }
 
 .loans-list h3:not(.sel) {
@@ -160,13 +179,6 @@ section.loans-list {
 	width: fit-content;
 }
 
-.loans-list {
-	/* cursor: pointer; */
-	border: 1px solid var(--text-lightest);
-	padding: 10px;
-	border-radius: 3px;
-}
-
 .loans-list .add svg {
 	width: 35px;
 	height: 35px;
@@ -177,3 +189,21 @@ section.loans-list {
 .loans-list .add svg:hover {
 	color: black;
 }
+
+section.radios {
+	display: grid;
+	grid-template-columns: 50px 1fr;
+	row-gap: 20px;
+	/* border-bottom: 1px solid var(--text-lightest); */
+	/* padding-bottom: 50px; */
+	/* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
+	/* border-radius: 3px; */
+}
+
+section.radios h3 {
+	grid-column: 1 / 3;
+}
+
+.form.radios input {
+	height: 20px;
+}

components/new.vue

@@ -6,8 +6,8 @@
 <section class="loans-list">
 
 <h3 v-for="(l, indx) in loans"
-:class="selected == indx ? 'sel' : ''"
-@click="() => selected = indx"
+:class="sel == indx ? 'sel' : ''"
+@click="() => sel = indx"
 >
 {{l.title}}
 </h3>
@@ -21,19 +21,135 @@ fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16"> <path d="M8 4a.5.5 0
 
 </section>
 
+<section class="radios form">
+<h3>Transaction Type</h3>
+<input type="radio" name="transaction_type" value="transaction"
+@input="e => loans[sel].transaction = 0"
+selected="loans[sel].transaction == 0">
+<label>Purchase</label>
+<input type="radio" name="transaction_type" value="refinance"
+@input="e => loans[sel].transaction = 1"
+selected="loans[sel].transaction == 1">
+<label>Refinance</label>
+</section>
+
+<section class="form">
+<h3>Property Details</h3>
+<label>Price ($)</label>
+<input :value="loans[sel].price" @input="setPrice">
+<label>Type</label>
+<select id="" name="" v-model="loans[sel].property">
+	<option value="attched">Single Family Attached</option>
+	<option value="detached">Single Family Detached</option>
+	<option value="lorise">Lo-rise (4 stories or less)</option>
+	<option value="hirise">Hi-rise (over 4 stories)</option>
+</select>
+<label></label>
+</section>
+
+<section class="radios form">
+<h3>Loan Type</h3>
+<input type="radio" name="loan_type" value="conv" v-model="loans[sel].type"
+>
+<label>Conventional</label>
+<input type="radio" name="loan_type" value="fha" v-model="loans[sel].type">
+<label>FHA</label>
+<input type="radio" name="loan_type" value="va" v-model="loans[sel].type">
+<label>VA</label>
+<input type="radio" name="loan_type" value="usda" v-model="loans[sel].type">
+<label>USDA</label>
+</section>
+
+<section class="form">
+<h3>Loan Details</h3>
+<label>Loan Term (years)</label>
+<input :value="loans[sel].term"
+@input="(e) => loans[sel].term = parseInt(e.target.value.replace(/[^0-9]/g, ''))">
+
+<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">
+</section>
+
 </div>
 </template>
 
 <script>
+function setLtv(loan, ltv) {
+	if (ltv > 100) ltv = 100
+	if (ltv < 0) ltv = 0
+
+	loan.ltv = ltv
+	loan.amount = ltv / 100 * loan.price
+}
+
+function setAmount(e) {
+	let amount = parseInt(e.target.value.replace(/[^0-9]/g, ''))
+	let loan = this.loans[this.sel]
+
+	if (amount > loan.price) amount = loan.price
+	if (amount < 0) amount = 0
+	loan.amount = amount
+	loan.ltv = amount / loan.price * 100
+}
+
+function setPrice(e) {
+	let value = 
+	parseInt(e.target.value.replace(/[^0-9]/g, ''))
+	// Should check for NaN after backspace
+
+	console.log("the price is %s", value)
+
+	this.loans[this.sel].price =
+	value
+}
+
 const loans = [
-	{title: "Loan Example"},
-	{title: "Another One"}
+	{
+		title: "Loan Example",
+		property: "",
+		transaction: 0,
+		type: "",
+		price: 0,
+		term: 0,
+		ltv: 0,
+		amount: 0,
+		program: "",
+		pud: false,
+		zip: ''
+	},
+	{
+		title: "Another One",
+		property: "",
+		transaction: 0,
+		type: "",
+		price: 0,
+		term: 0,
+		ltv: 0,
+		program: "",
+		pud: true,
+		zip: ''
+	}
+]
+
+const propertyTypes = [
+	
 ]
 
 export default {
+	methods: { setPrice },
 	props: ['user'],
 	data() {
-		return {loans: loans, selected: 0}
+		return {
+				loans: loans, sel: 0, loan: loans[0],
+			}
 	}
 }
 </script>