diff --git a/assets/main.css b/assets/main.css
index 86e6a4f..7613ceb 100644
--- a/assets/main.css
+++ b/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;
+}
diff --git a/components/new.vue b/components/new.vue
index acfb234..204705b 100644
--- a/components/new.vue
+++ b/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>
diff --git a/main.css b/main.css
deleted file mode 100644
index e69de29..0000000