fix dynamic update on sidebar

CityOfDetroit · Jul 31, 2024 · e8877e8 · e8877e8
1 parent 584e8b4
commit e8877e8
Showing 1 changed file with 24 additions and 37 deletions.
diff --git a/src/js/components/sidebar/subcomponents/baseline_section.js b/src/js/components/sidebar/subcomponents/baseline_section.js
@@ -1,28 +1,43 @@
 import { FISCAL_YEAR } from "../../../constants";
 import { Baseline, FundLookupTable, Fund } from "../../../models";
 import { formatCurrency } from "../../../utils/common_utils";
-
 export const BaselineSection = {
+    _data: new Baseline(),
+    _genFund : new Fund(1000),
+
+    get data() {
+        this._data = new Baseline();
+        return this._data;
+    },
+
+    set data(newData) {
+        this._data = newData;
+    },
+
+    get genFund() {
+        this._genFund = new Fund(1000);
+        return this._genFund;
+    },
 
-    data : new Baseline(),
-    genFund : new Fund(1000),
+    set genFund(newFund) {
+        this._genFund = newFund;
+    },
 
     target_html() {
-
         return `
             <div class='sidebar-stat-line' id="baseline-total">
                 <span class="stat-label">Baseline total:</span> 
                 <span class="stat">${formatCurrency(this.data.total())}</span>
             </div>
             <div class='sidebar-stat-line' id="target">
-                <span class="stat-label">GF target:</span> 
+                <span class="stat-label">FY${FISCAL_YEAR} GF target:</span> 
                 <span class="stat">${formatCurrency(Baseline.target())}</span>
             </div>
             <div class='sidebar-stat-line' id="GF-total">
                 <span class="stat-label">Current GF total:</span> 
                 <span class="stat">${formatCurrency(this.genFund.getTotal())}</span>
             </div>
-            <br>`
+            <br>`;
     },
 
     fund_html(fund) {
@@ -45,52 +60,24 @@ export const BaselineSection = {
                 <span class="stat-label">Fund total:</span> 
                 <span class="stat">${formatCurrency(fund.getTotal())}</span>
             </div>
-            <br>`
+            <br>`;
     },
 
     update() {
-        // find spot in html to update sidebar
         const baselineDiv = document.querySelector('#baseline-stats');
-        // add target info
         baselineDiv.innerHTML = this.target_html();
 
-        this.data.funds.forEach( (fund) => {
+        this.data.funds.forEach((fund) => {
             var fundDiv = document.createElement('div');
             fundDiv.id = `fund_${fund.fund}`;
             fundDiv.innerHTML = this.fund_html(fund);
             baselineDiv.appendChild(fundDiv);
         });
 
-        console.log(this.genFund.getTotal())
-        // color code based on target
         if(this.genFund.getTotal() <= Baseline.target()){
-
             document.querySelector('#GF-total .stat').style.color = "green";
         } else {
             document.querySelector('#GF-total .stat').style.color = "red";
         }
     }
-}
-
-
-// function replaceSidebarStat(stat_id, new_figure){
-//     const span = document.querySelector(`#${stat_id} .stat`);
-//     span.setAttribute('value', new_figure);
-//     span.textContent = formatCurrency(new_figure);
-// }
-
-// function addTarget(target){
-//     replaceSidebarStat('target', target);
-// }
-
-// // update all stats based on saved data
-// async function updateBaseline(){
-//     // gather info and update sidebar accordingly
-//     var baseline = new Baseline();
-//     replaceSidebarStat('baseline-revenue', baseline.revenue());
-//     replaceSidebarStat('baseline-personnel', baseline.personnel());
-//     replaceSidebarStat('baseline-nonpersonnel', baseline.nonpersonnel());
-//     replaceSidebarStat('baseline-total', baseline.total());
-
-
-// }
+};