Update beta site (#150)

* outline of code for filter resets * add ability to reset filters * #102 reset filters on adding new job * #116 fix filter bug * #102 correctly resets filters when adding new position * fix issue with filter reset post new job addition * expand filter reset after all new row additions * attempting to mark new row * #102 add code to enable green row highlight and smooth fade out * #102 move fade effect to new row addition; fix async function error * make accordion wider * add ability to set filters from storage * record approp and cc from summary page * fix filter reset * need to fix approp and cc saving from summary to make sure the name saves, not the number * remove trace and log * correctly sets filter values in dropdown but doesnt filter table * #86 direct to filtered view from summary page * #130 remove nav buttons on summary page * start to build logic for return to summary page * move return to summary logic to view_class * disable last from new inits page * #129 disable last from fund selector page * fix return to summary css * correctly hide back button * remove console messages * separate determining page names from visiting those pages for navigation * add descriptors to nav buttons; need to make names nicer * renamed nav buttons nicely * add button for skipping to summary * #132 fix notes section * #126 fix rev total col name * #134 make total expenditures for new inits mandatory * rephrase new init question * #135 edit revenue prompt * #131 fix empty table new row bug * #139 remove all but total for new inits in sidebar * #138 * #140 add arrow to show current page * revert back to recover resetFilter() method in Table.Filters * #119 start to implement, but need to deal with duplicate event listeners * #119 fix duplicate event listeners; row highlights correctly in sidebar * #119 add highlighting for total row on sidebar when changed * fix no appropriation error; remove log * remove confusing totals at top of baseline and supp accordions * #123 delete top line top code from accordion * #145 created final page and auto-download for finish button * update final page * fix bug with job code * make personnel job title more clearly not editable * #125 remove revenue from supps --------- Co-authored-by: Katrina Wheelan <[email protected]>
CityOfDetroit · Oct 2, 2024 · 75227b3 · 75227b3
1 parent 1c6aa69
commit 75227b3
Show file tree

Hide file tree

Showing 33 changed files with 476 additions and 192 deletions.
diff --git a/src/index.html b/src/index.html
@@ -50,24 +50,10 @@ <h3 id="prompt"></h3>
 
     <!-- Welcome page buttons -->
     <div id="welcome-page">
-        <!-- <button class="btn step" id="step-upload">
-            1. Upload your Excel data
-        </button>
-        <button class="btn step" id="step-revenue">
-            2. Complete your baseline request
-        </button>
-        <button class="btn step" id="step-initiatives">
-            3. Propose new initiatives
-        </button>
-        <button class="btn step" id="step-finish">
-            4. Review and download submission
-        </button> -->
         <button class="btn step" id="step-upload">
             Start by uploading your Excel data >>
         </button>
     </div>
-
-    <!-- Table -->
 
     <!-- Filter Dropdowns for table content -->
     <div id="filter-container"></div>
@@ -86,19 +72,36 @@ <h3 id="prompt"></h3>
         </div>
     </div>
 
+    <!-- Navigation buttons -->
+    <div class="row">
+        <div class="col-md-12">
+            <div id="nav-btns">
+                <button class="btn" id="btn-last">
+                    <strong>&lt;&lt; Previous</strong>
+                </button>
+                <button class="btn" id="btn-next">
+                    <strong>Continue &gt;&gt;</strong>
+                </button>
+                <button class="btn" id="return-to-summary">
+                    <strong>Return to Summary</strong>
+                </button>
+            </div>
+        </div>
+    </div>
+
     <!-- Summary page accordion -->
     <div id='accordion-div'>
         <div id='baseline-accordion' class="summary-container">
             <h3 id="baseline-title" class="accordion-title">
                 Baseline
-                <span class="top-line-amount cost"></span>
+                <!-- <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
-                <span class="top-line-amount cost"></span>
+                <!-- <span class="top-line-amount cost"></span> -->
             </h3>
             <div class="accordion summary-accordion"></div>
         </div>
@@ -107,20 +110,6 @@ <h3 id="supp-title" class="accordion-title">
         </div>        
     </div>
 
-    <!-- Navigation buttons -->
-    <div class="row">
-        <div class="col-md-12">
-            <div id="nav-btns">
-                <button class="btn" id="btn-last">
-                    <strong>&lt;&lt; Previous</strong>
-                </button>
-                <button class="btn" id="btn-next">
-                    <strong>Continue &gt;&gt;</strong>
-                </button>
-            </div>
-        </div>
-    </div>
-
     <!-- Placeholder for progress wheel -->
     <div id="upload-spinner" class="spinner" style="display: none;"></div>
 
@@ -131,6 +120,9 @@ <h3 id="supp-title" class="accordion-title">
     <div class="sidebar-content">
         <br>
         <h4 id="sidebar-title">Summary</h4>
+        <button id="summary-btn-sidebar" class="btn">
+            Skip to final summary page
+        </button>
         <br>
         <h5 class="section-header"><strong>Baseline</strong></h5>
         <div id="baseline-stats"></div>

diff --git a/src/js/components/accordion/accordion.css b/src/js/components/accordion/accordion.css
@@ -1,10 +1,10 @@
 .summary-accordion {
-    width: 60%;
+    width: 70%;
     margin: auto;
 }
 
 .accordion-title {
-    margin-left: 20%;
+    margin-left: 15%;
     font-weight: bold;
     /* font-size: 20px; */
     padding-bottom: 10px;
@@ -79,5 +79,5 @@ span.top-line-amount {
     font-weight: bold;
     position: absolute;
     right: 0;
-    margin-right: calc(20vw + 20px);
+    margin-right: calc(15vw + 20px);
 }
diff --git a/src/js/components/accordion/accordion.js b/src/js/components/accordion/accordion.js
@@ -5,8 +5,10 @@ import {Baseline, CurrentFund, Fund, Supplemental, FundLookupTable} from '../../
 import { formatCurrency, cleanString } from "../../utils/common_utils.js";
 import Table from "../table/table.js";
 import { visitPage } from '../../views/view_logic.js';
+import { Appropriation, CostCenter } from '../../models/fund.js';
 
 function redirectForEdit(){
+    // action taken when user clicks on any of the edit buttons in the accordion
     const row = document.querySelector(`.active-editing`);
     const table = row.parentElement;
     const section = table.closest('.summary-container');
@@ -17,10 +19,16 @@ function redirectForEdit(){
     else {
         // Split the string into parts using '-' as the delimiter; retain fund as 1st numeric segment
         const fund = table.id.split('-')[1]
-
+        // record the fund
         CurrentFund.update(fund);
-        const lineItem = row.querySelector('.line-item').textContent;
+        // record the appropriation and cost center
+        let approp = new Appropriation(fund, table.id.split('-')[2]);
+        let cc = new CostCenter(fund, table.id.split('-')[2], table.id.split('-')[3]);
+        localStorage.setItem('filter-approp-name', approp.name());
+        localStorage.setItem('filter-cc-name', cc.getName());
+
         // visit the correct page for editing
+        const lineItem = row.querySelector('.line-item').textContent;
         switch(lineItem){
             case 'Personnel Expenditures':
                 visitPage('personnel');
@@ -66,8 +74,8 @@ const ExpenseTable = {
         this.createNewCell(formatCurrency(number), new_row, 'cost');
         // create Edit button 
         var button = '';
-        if (row_name != 'Net Expenditures (Revenues)'){
-            button = Table.Buttons.Edit.html;
+        if (row_name != 'Total Expenditures'){
+            button = Table.Buttons.Edit.html(`Edit in table`);
         }
         this.createNewCell(button, new_row);
     },
@@ -108,7 +116,7 @@ const ExpenseTable = {
         this.addRow(ccObj.accountString(), 'Overtime Expenditures', ccObj.getOvertimeCost());
         this.addRow(ccObj.accountString(), 'Non-Personnel Expenditures', ccObj.getNonPersonnelCost());
         this.addRow(ccObj.accountString(), 'Revenues', ccObj.getRevenue());
-        this.addRow(ccObj.accountString(), 'Net Expenditures (Revenues)', ccObj.getTotal());
+        this.addRow(ccObj.accountString(), 'Total Expenditures', ccObj.getTotal());
     },
     fillFromInit(program) {
         // Fill out info for each supplemental init
@@ -204,25 +212,12 @@ export const Accordion = {
             Item.updateHeader(program.name, program.id(), program.total());
         });
     },
-    updateTopLines() {
-        // adjuse baseline
-        // const baseline = new 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());
-
-    },
     build() {
         this.createBaseline();
         this.createSupp();
         // initialize edit buttons
         Table.Buttons.Edit.init(redirectForEdit);
         this.AddInitButton.init();
-        this.updateTopLines();
     }
 }
 

diff --git a/src/js/components/body/body.js b/src/js/components/body/body.js
@@ -16,6 +16,7 @@ function resetPage() {
     Modal.clear();
     Modal.hide();
     NavButtons.hide();
+    NavButtons.ReturnToSummary.hide();
     Prompt.hide();
     Table.hide();
     Sidebar.hide();

diff --git a/src/js/components/modal/modal.css b/src/js/components/modal/modal.css
@@ -0,0 +1,6 @@
+#job-name {
+    margin-left: 5%;
+    width: 95%;
+    border: 0px;
+    font-weight: bold;
+}
diff --git a/src/js/components/nav_buttons/nav_buttons.css b/src/js/components/nav_buttons/nav_buttons.css
@@ -7,11 +7,11 @@
     /* top: 100px; Distance from the top of the viewport or the closest positioned ancestor */
 }
 
-#btn-next, #btn-last {
+#btn-next, #btn-last, #return-to-summary {
     background-color: var(--darkGray);
 }
 
-#btn-next:hover, #btn-last:hover {
+#btn-next:hover, #btn-last:hover, #return-to-summary:hover {
     background-color: var(--yellow);
     color: var(--darkGray);
 }

diff --git a/src/js/components/nav_buttons/nav_buttons.js b/src/js/components/nav_buttons/nav_buttons.js
@@ -1,6 +1,6 @@
 // nav_buttons.js
 import './nav_buttons.css';
-import { nextPage, lastPage } from '../../views/view_logic.js';
+import { nextPage, lastPage, visitPage, lastPageLabel, nextPageLabel } from '../../views/view_logic.js';
 
 function initializeNavButtons() {
     // initialize last button
@@ -32,23 +32,57 @@ const Next = {
     removeAction: function(fn) {
         document.querySelector(`#btn-next`).removeEventListener('click', fn);
     },
+    hide() {
+        document.querySelector(`#btn-next`).style.display = 'none';
+    },
+    show() {
+        const btn =  document.querySelector(`#btn-next`);
+        btn.textContent = `Continue to ${nextPageLabel()} >>`;
+        btn.style.display = '';
+    }
 };
 
 const Last = {
     disable: function() { disable('btn-last'); },
     enable: function() { enable('btn-last'); },
+    hide() {
+        document.querySelector(`#btn-last`).style.display = 'none';
+    },
+    show() {
+        const btn =  document.querySelector(`#btn-last`);
+        btn.textContent = `<< Return to ${lastPageLabel()}`;
+        btn.style.display = '';
+    }
+};
+
+function visitSummaryPage() { visitPage('summary') }
+
+const ReturnToSummary = {
+    show: function() { 
+        const btn = document.getElementById('return-to-summary')
+        btn.style.display = '';
+        btn.addEventListener('click', visitSummaryPage);
+    },
+    hide: function() {
+        const btn = document.getElementById('return-to-summary')
+        btn.style.display = 'none';
+        btn.removeEventListener('click', visitSummaryPage);
+    }
 };
 
 export const NavButtons = {
     hide: function() {
-        document.getElementById('nav-btns').style.display = 'none';
+        Next.hide();
+        Last.hide();
     },
     show: function() {
-        document.getElementById('nav-btns').style.display = 'block';
+        Next.show();
+        Last.show();;
         initializeNavButtons();
     },
     Next: Next,
     Last: Last,
+    ReturnToSummary: ReturnToSummary
 };
 
 export default NavButtons;
diff --git a/src/js/components/sidebar/sidebar.css b/src/js/components/sidebar/sidebar.css
@@ -62,6 +62,8 @@ h6 {
   justify-content: space-between; /* Distribute space between children */
   padding: 2px;
   border-bottom: 1px solid #ddd;
+  /* Ensures fade when indicating a change */
+  transition: background-color 0.5s ease;
 }
 
 .edit-icon, .edit-supp {
@@ -85,4 +87,43 @@ h6 {
 
 .sidebar-stat-line.fund-total .stat {
   margin-right: 05px; /* 25px lines up with lines above (with edit symbol) */
+}
+
+#summary-btn-sidebar{
+  margin-bottom: 10px;
+  text-align: center;
+  margin-left: 10%;
+  width: 80%;
+  background-color: var(--mediumGray);
+  color: black;
+  /* border: 1px black; */
+  border-radius: 5px;
+  border-width: 1px;
+  border-color: black;
+}
+
+#summary-btn-sidebar:hover{
+  background-color: var(--darkGray);
+  color: white;
+}
+
+.arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--spiritgreen); /* Or any color you want */
+  left: 5px; /* Adjust for desired position */
+  margin-top: -5px;
+  transition: top 0.3s ease; /* Smooth transition */
+}
+
+/* Optional: Add arrow tip styling */
+.arrow::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -10px; /* Adjust as needed */
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent transparent var(--spiritgreen);
 }