From e06776cdb69aee8701f1ce2862c9777316ca8c2e Mon Sep 17 00:00:00 2001 From: Katrina Wheelan Date: Thu, 18 Jul 2024 15:45:49 -0400 Subject: [PATCH] #31 added option to disable prompt buttons; move prompt above accordion; disable download and display message if above target --- src/index.html | 44 ++++++++++--------- src/js/components/prompt/prompt.css | 8 ++++ .../prompt/subcomponents/buttons.js | 16 ++++++- src/js/views/08_summary/helpers.js | 38 +++++++++++----- 4 files changed, 72 insertions(+), 34 deletions(-) diff --git a/src/index.html b/src/index.html index 765396e..4eb97e9 100644 --- a/src/index.html +++ b/src/index.html @@ -48,27 +48,6 @@

- -
-
-

- Baseline - -

-
-
-
-

- Suplemental - -

-
-
-
- -
-
-

@@ -97,6 +76,29 @@

+ + +
+
+

+ Baseline + +

+
+
+
+

+ Suplemental + +

+
+
+
+ +
+
+ +
diff --git a/src/js/components/prompt/prompt.css b/src/js/components/prompt/prompt.css index dc917c5..7f4d617 100644 --- 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 index 88b564a..a9bbac3 100644 --- a/src/js/components/prompt/subcomponents/buttons.js +++ b/src/js/components/prompt/subcomponents/buttons.js @@ -34,12 +34,22 @@ 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 = { @@ -47,7 +57,9 @@ export const Right = { 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 index 719dd15..933e034 100644 --- a/src/js/views/08_summary/helpers.js +++ b/src/js/views/08_summary/helpers.js @@ -5,7 +5,9 @@ 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(); @@ -13,22 +15,36 @@ export function summaryView(){ 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); } \ No newline at end of file