added interest changes functionality - still needs some adjustment

hristop · Apr 6, 2023 · bdfea9e · bdfea9e
1 parent 86e3dd8
commit bdfea9e
Show file tree

Hide file tree

Showing 9 changed files with 287 additions and 185 deletions.
diff --git a/index.html b/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <title>Loan Calculator</title>
   </head>
   <body data-ui5-compact-size>
@@ -12,7 +11,7 @@
       <ui5-panel
         fixed accessible-role="Complementary"
         header-text="Basic Information">
-        <span id="error"></span>
+        <div id="error"></div>
         <form>
           <div>
             <ui5-label class="label" for="startDate" required>Start Date:</ui5-label>
@@ -36,15 +35,25 @@
           <div>
             <ui5-checkbox id="fixedPrincipal" text="Fixed principal" ></ui5-checkbox>
           </div>
-          <div class="extraPaymentsContainer">
+          <div class="table-container">
             <div>
               <ui5-panel
                 fixed
                 accessible-role="Complementary"
                 header-text="Extra Payments" >
                 <div id="extraPayments"></div>
                 <ui5-button id="addExtraPayment">Add extra payment</ui5-button>
-                <ui5-title level="h2" class="hidden">Regular Payments</ui5-title>
+              </ui5-panel>
+            </div>
+          </div>
+          <div class="table-container">
+            <div>
+              <ui5-panel
+                fixed
+                accessible-role="Complementary"
+                header-text="Interest Rate Changes" >
+                <div id="interestChanges"></div>
+                <ui5-button id="addInterestChange">Add Interest Rate Change</ui5-button>
               </ui5-panel>
             </div>
           </div>

diff --git a/src/css/style.css b/src/css/style.css
@@ -36,6 +36,7 @@ main {
   }
 }
 
+/* ------ Common -------- */
 .hidden {
   display: none;
 }
@@ -49,23 +50,35 @@ ui5-panel {
   margin: 0.5rem auto 0.5rem auto;
 }
 
-.extraPaymentsContainer {
+#error {
   text-align: center;
 }
 
-ui5-table#extraPaymentsTable {
+#error ui5-message-strip {
+  max-width: 100%;
+  margin-bottom: 1rem;
+}
+
+/* ------ Extra payments -------- */
+.table-container {
+  text-align: center;
+}
+
+ui5-table#extraPaymentsTable,
+ui5-table#interestChangesTable {
   max-width: 100%;
   text-align: left;
 }
 
+
+/* ------ Info Section -------- */
 #info > div ui5-li::part(title) {
   text-align: left;
   font-weight: bold;
 }
 
 #info > div ui5-li::part(additional-text) {
   text-align: right;
-  /* font-weight: bold; */
 }
 
 #info {
@@ -82,6 +95,7 @@ ui5-table#extraPaymentsTable {
   flex-grow: 1;
 }
 
+/* ------ Charts -------- */
 #chartsPanel > div {
   display: flex;
   flex-direction: column;
@@ -96,16 +110,15 @@ ui5-table#extraPaymentsTable {
 
 div#lineChart {
   height: 400px;
-  flex-grow: 1;
-  flex-shrink: 1;
+  max-width: 100%;
 }
 
 div#pieChart {
   height: 400px;
-  flex-grow: 1;
-  flex-shrink: 1;
+  max-width: 100%;
 }
 
+/* ---------- LARGER SCREENS -------------- */
 @media screen and (min-width: 800px) {
   body {
     margin: 0;
@@ -125,6 +138,8 @@ div#pieChart {
 
   #error ui5-message-strip {
     max-width: 450px;
+    margin-bottom: 1rem;
+    text-align: center;
   }
 
   form {
@@ -163,16 +178,17 @@ div#pieChart {
     min-width: fit-content;
   }
 
-  form > div.extraPaymentsContainer {
+  form > div.table-container {
     width: 95%;
   }
 
-  form > div.extraPaymentsContainer > div {
+  form > div.table-container > div {
     width: 100%;
     text-align: center;
   }
 
-  ui5-table#extraPaymentsTable {
+  ui5-table#extraPaymentsTable,
+  ui5-table#interestChangesTable {
     max-width: 95%;
   }
 
@@ -189,10 +205,10 @@ div#pieChart {
     margin-bottom: 1rem;
   }
 
-  ui5-panel {
+  /* ui5-panel {
     margin-top: 1rem;
     margin-bottom: 1rem;
-  }
+  } */
 
   ui5-button {
     margin-top: 1rem;
@@ -211,4 +227,14 @@ div#pieChart {
     flex-grow: 1;
     max-width: 35%;
   }
+
+  div#lineChart {
+    height: 400px;
+    max-width: 50%
+  }
+
+  div#pieChart {
+    height: 400px;
+    max-width: 50%
+  }
 }
diff --git a/src/js/calcLoan.js b/src/js/calcLoan.js
@@ -2,18 +2,21 @@ import { validInput, validateAdditionalPayments } from "./validateInput";
 import { renderMonthTableStart, renderMonthTableRow, renderMonthTableEnd } from "./monthTable";
 import { gatherAdditionalPayments } from "./extraPayment";
 import { drawLineChart, drawPieChart } from "./charts";
-import { drawLineChartH, drawPieChartH } from "./chartsH";
 import { loanData } from "./loadData";
-
+import { gatherInterestChanges } from "./interestChanges";
 
 import moment from 'moment';
 
 export function setUpCalc(element) {
+    const calcVariableMonthlyPayment = (loanAmount, monthlyInterest, loanTerm) => {
+        return (loanAmount * monthlyInterest) / (1 - Math.pow(1 + monthlyInterest, -loanTerm));
+    };
+
     const calcLoanData = (loanData, includeAddPayments) => {
         const startMonth = moment(loanData.startDate, 'DD/MM/YYYY');
 
         // Calculate the monthly interest rate
-        const monthlyInterestRate = loanData.interestRate / 12;
+        let monthlyInterestRate = loanData.interestRate / 12;
 
         // This will hold the comulative interest for each month
         let totalMonthlyInterest = 0;
@@ -25,32 +28,53 @@ export function setUpCalc(element) {
         let fixedPrincipalPayment = loanData.loanAmount / loanData.loanTerm;
 
         // Fixed monthly payment
-        let variableMonthlyPayment =
-            (loanData.loanAmount * monthlyInterestRate) /
-            (1 - Math.pow(1 + monthlyInterestRate, -loanData.loanTerm));
+        let variableMonthlyPayment = calcVariableMonthlyPayment(loanData.loanAmount, monthlyInterestRate, loanData.loanTerm);
+            // (loanData.loanAmount * monthlyInterestRate) /
+            // (1 - Math.pow(1 + monthlyInterestRate, -loanData.loanTerm));
 
-        for (let index = 1; index <= loanData.loanTerm; index++) {
+        //for (let index = 1; index <= loanData.loanTerm; index++) {
+        let index = 0;
+        while (remainingPrincipal > 0) {
             const currentMonth = startMonth.add(1, 'M').format("DD/MM/YYYY");
             let bLastMonth = false;
             let newFixedPart = 0;
             let addMonthPayment = 0;
             let monthlyPrincipal = 0;
             let monthlyPayment = 0;
+            index ++;
+
+            loanData.interestRateChanges.forEach(interestRateChange => {
+                if (interestRateChange[0] !== index) {
+                    return;
+                }
+
+                if(!isNaN(interestRateChange[1])) {
+                    // the new interest rate should take effect (converted from %)
+                    monthlyInterestRate = interestRateChange[1] / 12 / 100;
+                    // Calculate the new variable monthly payment based on
+                    // - the remaining loan principal
+                    // - the new interest rate
+                    // - the remaining time
+                    // variableMonthlyPayment = calcVariableMonthlyPayment(remainingPrincipal, monthlyInterestRate, Math.abs(loanData.loanTerm - index));
+                }
+            })
 
             // Gather additional payments info that will affect the monthly payment, principal and balance
             // If the monthly fixed part changed - reflect it for next months
             includeAddPayments && loanData.additionalPayments.forEach((payment) => {
-                if (payment[0] === index) {
-                    if(!isNaN(payment[1])) {
-                        // the amount that was payed additionally
-                        addMonthPayment += payment[1];
-                    }
-
-                    if (payment[2]) {
-                        // new monthly payment or fixed principal
-                        // if such arrangement was made with the loan provider
-                        newFixedPart = payment[2];
-                    }
+                if (payment[0] !== index) {
+                    return;
+                }
+
+                if(!isNaN(payment[1])) {
+                    // the amount that was payed additionally
+                    addMonthPayment += payment[1];
+                }
+
+                if (payment[2]) {
+                    // new monthly payment or fixed principal
+                    // if such arrangement was made with the loan provider
+                    newFixedPart = payment[2];
                 }
             });
 
@@ -201,6 +225,8 @@ export function setUpCalc(element) {
 
         // Gather additional payments
         const additionalPayments = gatherAdditionalPayments();
+        const interestChanges = gatherInterestChanges();
+        console.log(interestChanges);
 
         if (!validInput(loanAmount, interestRate, loanTerm) || !validateAdditionalPayments(loanTerm, additionalPayments)) {
             return;
@@ -212,6 +238,7 @@ export function setUpCalc(element) {
 
         const data = new loanData(startDate.format("DD/MM/YYYY"), loanAmount, interestRate, loanTerm, fixedPrincipal);
         data.additionalPayments = additionalPayments;
+        data.interestRateChanges = interestChanges;
         data.lineChartData = [
             //["Month", "Principal", "Interest"],
             [0, loanAmount, 0],
@@ -233,8 +260,8 @@ export function setUpCalc(element) {
         tableDiv.innerHTML = tableHtml;
 
         // Charts
-        drawLineChartH(data.lineChartData);
-        drawPieChartH(data.pieChartData);
+        drawLineChart(data.lineChartData);
+        drawPieChart(data.pieChartData);
 
         data.destroy();
     }