#17 added top line amounts to summary -- color coded baseline

CityOfDetroit · Jul 18, 2024 · 4f2a9d9 · 4f2a9d9
1 parent e27fb08
commit 4f2a9d9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 7 deletions.
diff --git a/src/index.html b/src/index.html
@@ -51,15 +51,22 @@ <h2 id="subtitle"></h2>
     <!-- Summary page accordion -->
     <div id='accordion-div'>
         <div id='baseline-accordion' class="summary-container">
-            <h3 id="baseline-title" class="accordion-title">Baseline</h3>
+            <h3 id="baseline-title" class="accordion-title">
+                Baseline
+                <span class="top-line-amount cost"></span>
+            </h3>
             <div class="accordion summary-accordion"></div>
         </div>
         <div id="supp-accordion" class="summary-container">
-            <h3 id="supp-title" class="accordion-title">Suplemental
-                <button class="btn btn-add-init">Add another initiative</button>
+            <h3 id="supp-title" class="accordion-title">
+                Suplemental
+                <span class="top-line-amount cost"></span>
             </h3>
             <div class="accordion summary-accordion"></div>
         </div>
+        <div class="add-init-btn-div">
+            <button class="btn btn-add-init">Add another initiative</button>
+        </div>        
     </div>
 
     <!-- Space for an initial prompt and response buttons -->

diff --git a/src/js/components/accordion/accordion.css b/src/js/components/accordion/accordion.css
@@ -55,10 +55,11 @@ span.amount {
 .btn-add-init {
     background-color: var(--spiritgreen);
     border-color: var(--citygreen);
-    position: absolute;
+    /* position: absolute; */
     right: 0;
-    margin-right: calc(20vw + 15px);
-    margin-top: -8px;
+    /* margin-left: 20px; */
+    /* margin-right: calc(20vw + 15px); */
+    margin-top: 15px;
 }
 
 #supp-title {
@@ -67,4 +68,14 @@ span.amount {
 
 .btn-add-init:hover {
     background-color: var(--palegreen);
+}
+.add-init-btn-div{
+    text-align: center;
+}
+
+span.top-line-amount {
+    font-weight: bold;
+    position: absolute;
+    right: 0;
+    margin-right: calc(20vw + 20px);
 }
diff --git a/src/js/components/accordion/accordion.js b/src/js/components/accordion/accordion.js
@@ -1,10 +1,11 @@
 import './accordion.css'
 
-import { CurrentFund, Fund, Supplemental } from "../../utils/data_utils/local_storage_handlers.js";
+import { Baseline, CurrentFund, Fund, Supplemental } from "../../utils/data_utils/local_storage_handlers.js";
 import { formatCurrency, cleanString } from "../../utils/common_utils.js";
 import Table from "../table/table.js";
 import { FundLookupTable } from "../../utils/data_utils/budget_data_handlers.js";
 import { visitPage } from '../../views/view_logic.js';
+import { TARGET } from '../../init.js';
 
 function redirectForEdit(){
     const row = document.querySelector(`.active-editing`);
@@ -150,12 +151,29 @@ export const Accordion = {
             Item.updateHeader(program.name, program.name, program.net());
         });
     },
+    updateTopLines() {
+        // adjuse baseline
+        const baseline = new Baseline;
+        const baselineAmount = document.querySelector('#baseline-title .top-line-amount')
+        baselineAmount.textContent = formatCurrency(baseline.total());
+        // adjust supplementals
+        const supp = new Supplemental;
+        const suppAmount = document.querySelector('#supp-title .top-line-amount')
+        suppAmount.textContent = formatCurrency(supp.total());
+        // color-code baseline
+        if (baseline.total() <= TARGET){
+            baselineAmount.style.color = 'green';
+        } else {
+            baselineAmount.style.color = 'red';
+        }
+    },
     build() {
         this.createBaseline();
         this.createSupp();
         // initialize edit buttons
         Table.Buttons.Edit.init(redirectForEdit);
         this.AddInitButton.init();
+        this.updateTopLines();
     }
 }