#31 added option to disable prompt buttons; move prompt above accordi…

…on; disable download and display message if above target
CityOfDetroit · Jul 18, 2024 · e06776c · e06776c
1 parent 4f2a9d9
commit e06776c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 34 deletions.
diff --git a/src/index.html b/src/index.html
@@ -48,27 +48,6 @@ <h2 id="subtitle"></h2>
         </button>
     </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>
-            </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>
-            </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 -->
     <div id="prompt-div">
         <h3 id="prompt"></h3>
@@ -97,6 +76,29 @@ <h3 id="prompt"></h3>
         </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>
+            </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>
+            </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>
+
+
     <!-- Navigation buttons -->
     <div class="row">
         <div class="col-md-12">

diff --git a/src/js/components/prompt/prompt.css b/src/js/components/prompt/prompt.css
@@ -29,3 +29,11 @@ h3#prompt {
     color: white;
     border-width: 3;
 }
+
+#option1.disabled, #option2.disabled, #option1.disabled:hover, #option2.disabled:hover {
+    background-color: lightgray;
+    color: gray;
+    pointer-events: none;
+    border-color: gray;
+}
+
diff --git a/src/js/components/prompt/subcomponents/buttons.js b/src/js/components/prompt/subcomponents/buttons.js
@@ -34,20 +34,32 @@ function removePromptButtonAction(button_id, action_fn){
     document.getElementById(button_id).removeEventListener('click', action_fn);
 }
 
+function disable(button_id){
+    document.querySelector(`#${button_id}`).classList.add('disabled');
+}
+
+function enable(button_id){
+    document.querySelector(`#${button_id}`).classList.remove('disabled');
+}
+
 export const Left = {
     show : function() { showPromptButton('option1') },
     hide : function() { hidePromptButton('option1') },
     updateText : function(text) { updatePromptButton('option1', text) },
     addAction : function(action_fn) { addPromptButtonAction('option1', action_fn) },
-    removeAction : function(action_fn) { removePromptButtonAction('option1', action_fn) }
+    removeAction : function(action_fn) { removePromptButtonAction('option1', action_fn) },
+    disable : function() { disable('option1') },
+    enable : function() { enable('option1') }
 }
 
 export const Right = {
     show : function() { showPromptButton('option2') },
     hide : function() { hidePromptButton('option2') },
     updateText : function(text) { updatePromptButton('option2', text) },
     addAction : function(action_fn) { addPromptButtonAction('option2', action_fn) },
-    removeAction : function(action_fn) { removePromptButtonAction('option2', action_fn) }
+    removeAction : function(action_fn) { removePromptButtonAction('option2', action_fn) },
+    disable : function() { disable('option2') },
+    enable : function() { enable('option2') }
 }
 
 export const Buttons = {

diff --git a/src/js/views/08_summary/helpers.js b/src/js/views/08_summary/helpers.js
@@ -5,30 +5,46 @@ import Subtitle from "../../components/header/header.js";
 import { visitPage } from "../view_logic.js";
 import { Accordion } from "../../components/accordion/accordion.js";
 import { downloadXLSX } from "../../utils/data_utils/XLSX_handlers.js";
-import Table from '../../components/table/table.js';
+import { Baseline } from '../../utils/data_utils/local_storage_handlers.js';
+import { TARGET } from '../../init.js';
+import { formatCurrency } from '../../utils/common_utils.js';
 
 export function summaryView(){
     Body.reset();
     Accordion.build();
     Accordion.show();
 
     // prompt buttons
-    Prompt.Text.update('');
-    Prompt.show();
-    Prompt.Buttons.Left.updateText('Download Excel');
-    Prompt.Buttons.Right.updateText('Go back to home');
+    Prompt.Buttons.Right.updateText('Download Excel');
+    Prompt.Buttons.Left.updateText('Go back to home');
+    // add button links
+    Prompt.Buttons.Left.addAction(returnToWelcome);
+    Prompt.Buttons.Right.addAction(downloadXLSX);
 
     // update page text
     Subtitle.update('Summary');
-    // add button links
-    Prompt.Buttons.Right.addAction(returnToWelcome);
-    Prompt.Buttons.Left.addAction(downloadXLSX);
-
+
+    compareToTarget()
+}
+
+function compareToTarget(){
+    const baseline = new Baseline;
+    if (baseline.total() <= TARGET){
+        Prompt.Text.update(`Congrats! Your budget is below your target! 
+            Edit any line items below or download your completed Excel.`);
+        Prompt.show();
+    } else {
+        Prompt.Text.update(`Your budget is above your target of ${formatCurrency(TARGET)}. 
+            Please expand the summary table below and edit line items until you meet your target. 
+            When you meet the target, you will be able to download the Excel sheet.`);
+        Prompt.Buttons.Right.disable();
+        Prompt.show();
+    }
 }
 
 const returnToWelcome = () => {visitPage('welcome')}
 
 export function disablePromptButtons(){
-    Prompt.Buttons.Right.removeAction(returnToWelcome);
-    Prompt.Buttons.Left.removeAction(downloadXLSX);
+    Prompt.Buttons.Left.removeAction(returnToWelcome);
+    Prompt.Buttons.Right.removeAction(downloadXLSX);
 }