activate edit icons in sidebar

CityOfDetroit · Jul 31, 2024 · dbb4cfe · dbb4cfe
1 parent 183677d
commit dbb4cfe
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 13 deletions.
diff --git a/src/css/common.css b/src/css/common.css
@@ -21,7 +21,7 @@
     font-size: 14px;
     /* spacing */
     --header-height : 125px;
-    --sidebar-width: 250px;
+    --sidebar-width: 300px;
 }
 
 /* Button styling */

diff --git a/src/js/components/sidebar/sidebar.css b/src/js/components/sidebar/sidebar.css
@@ -54,4 +54,35 @@ h6 {
 
 .section-header {
   background-color: var(--mediumGray);
+}
+
+.sidebar-stat-line {
+  display: flex;
+  align-items: center;
+  justify-content: space-between; /* Distribute space between children */
+  padding: 2px;
+  border-bottom: 1px solid #ddd;
+}
+
+.edit-icon {
+  color: var(--spiritgreen);
+  cursor: pointer;
+  font-size: 16px; /* Adjust the size as needed */
+  margin-left: 10px;
+}
+
+.edit-icon:hover {
+  color: var(--citygreen);
+}
+
+.stat-label {
+  margin-right: auto; /* Push next elements to the right */
+}
+
+.stat {
+  margin-left: 5px; /* Optional: Add some space between currency and edit icon */
+}
+
+.sidebar-stat-line.fund-total .stat {
+  margin-right: 05px; /* 25px lines up with lines above (with edit symbol) */
 }
diff --git a/src/js/components/sidebar/sidebar.js b/src/js/components/sidebar/sidebar.js
@@ -3,7 +3,7 @@ import { BaselineSection } from './subcomponents/baseline_section';
 
 import SuppSection from './subcomponents/supp_section'
 
-// Assuming you have a CSS variable --main-color defined on the :root
+// fetch CSS variables saved in :root
 const root = document.documentElement;
 const sideBarWidth = getComputedStyle(root).getPropertyValue('--sidebar-width').trim();
 
@@ -33,12 +33,6 @@ function updateSidebarTitle(new_title){
     document.getElementById('sidebar-title').textContent = new_title;
 }
 
-
-// function fetchStat(stat_id){
-//     const stat = document.querySelector(`#${stat_id} .stat`);
-//     return parseFloat(stat.getAttribute('value')) || 0;
-// }
-
 function updateTotals(){
     SuppSection.update();
     BaselineSection.update();

diff --git a/src/js/components/sidebar/subcomponents/baseline_section.js b/src/js/components/sidebar/subcomponents/baseline_section.js
@@ -1,6 +1,8 @@
 import { FISCAL_YEAR } from "../../../constants";
-import { Baseline, FundLookupTable, Fund } from "../../../models";
+import { Baseline, FundLookupTable, Fund, CurrentFund } from "../../../models";
 import { formatCurrency } from "../../../utils/common_utils";
+import { visitPage } from "../../../views/view_logic";
+
 export const BaselineSection = {
     _data: new Baseline(),
     _genFund : new Fund(1000),
@@ -44,40 +46,61 @@ export const BaselineSection = {
         return `
             <h6>${FundLookupTable.getName(fund.fund)}</h6>
             <hr>
-            <div class='sidebar-stat-line' id="baseline-revenue">
+            <div class='sidebar-stat-line revenue'>
                 <span class="stat-label">Projected revenues:</span> 
                 <span class="stat">${formatCurrency(fund.getRevenue())}</span>
+                <i class="fas fa-edit edit-icon" title="Edit"></i>
             </div>
-            <div class='sidebar-stat-line' id="baseline-personnel">
+            <div class='sidebar-stat-line personnel'>
                 <span class="stat-label">Personnel cost:</span> 
                 <span class="stat">${formatCurrency(fund.getPersonnelCost())}</span>
+                <i class="fas fa-edit edit-icon" title="Edit"></i>
             </div>
-            <div class='sidebar-stat-line' id="baseline-nonpersonnel">
+            <div class='sidebar-stat-line nonpersonnel'>
                 <span class="stat-label">Non-personnel cost:</span> 
                 <span class="stat">${formatCurrency(fund.getNonPersonnelCost())}</span>
+                <i class="fas fa-edit edit-icon" title="Edit"></i>
             </div>
-            <div class='sidebar-stat-line' id="baseline-total">
+            <div class='sidebar-stat-line fund-total'>
                 <span class="stat-label">Fund total:</span> 
                 <span class="stat">${formatCurrency(fund.getTotal())}</span>
             </div>
             <br>`;
     },
 
+    linkEditBtns() {
+        let btns = document.querySelectorAll('.edit-icon');
+        btns.forEach((btn) => {
+            // Get the fund from the div the button is in
+            let fund = btn.closest('.fund-div').id.replace('fund_', '');
+            let page = btn.closest('.sidebar-stat-line').classList[1];
+
+            btn.addEventListener('click', function(event) {
+                CurrentFund.update(fund);
+                visitPage(page);
+            });
+        });
+    },
+
     update() {
         const baselineDiv = document.querySelector('#baseline-stats');
         baselineDiv.innerHTML = this.target_html();
 
         this.data.funds.forEach((fund) => {
             var fundDiv = document.createElement('div');
             fundDiv.id = `fund_${fund.fund}`;
+            fundDiv.classList.add('fund-div');
             fundDiv.innerHTML = this.fund_html(fund);
             baselineDiv.appendChild(fundDiv);
         });
 
         if(this.genFund.getTotal() <= Baseline.target()){
             document.querySelector('#GF-total .stat').style.color = "green";
+            document.querySelector('#fund_100 sidebar-stat-line.fund-total .stat').style.color = "green";
         } else {
             document.querySelector('#GF-total .stat').style.color = "red";
+            document.querySelector('#fund_1000 .sidebar-stat-line:last-of-type .stat').style.color = "red";
         }
+        this.linkEditBtns();
     }
 };