UnivateProperties/src/components/misc/bondCaclculator.vue

<template>
  <div>
    <h2 id="modal-bondcal">Bond Calculator</h2>
    <p>Calculate the value of the property you could buy</p>
    <input
      type="text"
      class="form-control mb-2"
      name="income"
      id="gross-income"
      placeholder="Gross Monthly Household Income"
      v-model="amount"
      @input="displayValue()"
    />
    <input
      type="text"
      class="form-control mb-2"
      name="deposit"
      id="deposit"
      placeholder="Deposit Amount – May be Required"
      v-model="deposit"
      @input="displayDeposit()"
    />
    <div class="slidecontainer mt-4">
      <input type="range" min="5" max="30" value="10" class="slider" id="myRange" v-model="term" />
    </div>
    <p>{{ term }} Years</p>
    <input
      type="text"
      class="form-control mb-2"
      name="interest"
      id="interest"
      placeholder="Interest Rate (Percent)"
      v-model="rate"
    />
    <!-- <button @click="calculate()" class="btn-solid-blue scrollto">CALCULATE</button> -->
    <div class="container p-0 mt-5">
      <div class="row">
        <div class="col-md-7">
          Monthly Repayment
        </div>
        <div class="col-md-5">
          <strong>{{ totalMonthlyPayment | toCurrency }}</strong>
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-md-7">
          Gross Montly Income
        </div>
        <div class="col-md-5">
          <strong>{{ grossIncome | toCurrency }}</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      amount: "R1000000",
      deposit: "R0",
      term: 10,
      rate: 7,
      isInputActive: false
    };
  },
  props: ["value"],
  methods: {
    calculate() {
      var rate = this.calcRate();
      var years = this.term * 12;
      var topPart = rate * Math.pow(1 + rate, years);
      var bottomPart = Math.pow(1 + rate, years) - 1;
      var netAmnt = this.amount - this.deposit;
      var bond = (netAmnt * topPart) / bottomPart;
    },
    calcRate() {
      var answer = this.rate / 100 / 12;
      return answer;
    },
    displayValue() {
      const formatter = new Intl.NumberFormat("en-US", {
        minimumFractionDigits: 2
      });
      if (this.amount.charAt(0) !== "R") {
        this.amount = "R" + formatter.format(this.amount);
        if (this.amount < 1) {
          this.amount = "R" + 0;
        }
      }
    },
    displayDeposit() {
      if (this.deposit.charAt(0) !== "R") {
        if (this.deposit < 1) {
          this.deposit = "R" + 0;
        }
      }
    }
  },
  computed: {
    totalMonthlyPayment() {
      var rate = this.calcRate;
      var years = this.term * 12;
      var topPart = rate * Math.pow(1 + rate, years);
      var bottomPart = Math.pow(1 + rate, years) - 1;

      var netAmnt = parseFloat(this.amount.substring(1)) - parseFloat(this.deposit.substring(1));
      var bond = (netAmnt * topPart) / bottomPart;
      if (isNaN(bond)) {
        return 0;
      } else {
        return bond;
      }
    },
    calcRate() {
      var answer = this.rate / 100 / 12;
      return answer;
    },
    grossIncome() {
      return this.totalMonthlyPayment * 3.335120643;
    }
  }
};
</script>

<style lang="scss" scoped></style>