diff --git a/frontend/application.py b/frontend/application.py index d05d7fe..b95219a 100644 --- a/frontend/application.py +++ b/frontend/application.py @@ -2,13 +2,14 @@ from classes.auth import Auth import dash_core_components as dcc from dash.dependencies import Input, Output, State -from utils.constants import home_page_location, login_location, dashboard_location, breakdown_location, news_location +from utils.constants import home_page_location, login_location, dashboard_location, breakdown_location, news_location, faqs_location from pages.home import home from pages.login import login from pages.dashboard import dashboard from pages.breakdown import breakdown from pages.news import news +from pages.faqs import faqs from layout.sidebar.sidebar_callbacks import toggle_collapse, toggle_classname @@ -23,21 +24,26 @@ Input("url", "pathname"), State("url", "pathname") ) - def render_page_content(pathname, state_path): - if pathname == login_location: - return login.layout - if pathname == home_page_location: + if pathname in [home_page_location, login_location, faqs_location,news_location]: + if pathname == home_page_location: return home.layout - if Auth.is_authenticated(): + if pathname == login_location: + return login.layout + if pathname == faqs_location: + return faqs.layout + if pathname == news_location: + return news.layout + + elif Auth.is_authenticated(): if pathname == dashboard_location: return dashboard.layout if pathname == breakdown_location: return breakdown.layout - if pathname == news_location: - return news.layout + else: return dcc.Link("This page is only available when you are logged in. Click this to head back to login.", href=login_location, style=unauthenticatedStyle) + if __name__ == "__main__": application.run(port=8080, debug=True, load_dotenv=True) diff --git a/frontend/assets/style.css b/frontend/assets/style.css index 80e915c..dcd6508 100644 --- a/frontend/assets/style.css +++ b/frontend/assets/style.css @@ -3,6 +3,17 @@ padding: 10% 0%; } +.faq-card { + background-color: white; + border: 1px solid black; + margin-bottom: 10px; +} + +.faq-button { + width: 100%; + text-align: left; +} + .page-container { display: flex; flex-direction: column; diff --git a/frontend/layout/sidebar/sidebar.py b/frontend/layout/sidebar/sidebar.py index a4a45e7..29d012c 100644 --- a/frontend/layout/sidebar/sidebar.py +++ b/frontend/layout/sidebar/sidebar.py @@ -6,6 +6,7 @@ from utils.constants import dashboard_location from utils.constants import breakdown_location from utils.constants import news_location +from utils.constants import faqs_location # we use the Row and Col components to construct the sidebar header # it consists of a title, and a toggle, the latter is hidden on large screens @@ -70,6 +71,7 @@ dbc.NavLink("Financial Breakdown", href=breakdown_location, active="exact", className="nav-link",id="brea-link"), dbc.NavLink("News", href=news_location, active="exact", className="nav-link",id="news-link"), dbc.NavLink("Logout", href=login_location, active="exact", className="nav-link",id='logout-element-to-hide'), + dbc.NavLink("Faqs", href=faqs_location, active="exact", className="nav-link") ], vertical=True, pills=True, diff --git a/frontend/pages/faqs/faqs.py b/frontend/pages/faqs/faqs.py new file mode 100644 index 0000000..3193e24 --- /dev/null +++ b/frontend/pages/faqs/faqs.py @@ -0,0 +1,59 @@ +import dash_bootstrap_components as dbc +import dash_html_components as html +from dash.dependencies import Input, Output, State +from app import app + +def generate_collapse_card(question, answer, id): + return dbc.Card([ + dbc.CardHeader( + html.H2( + dbc.Button( + question, + color="link", + id=f"button-{id}", + style={"color": "black"}, + className="faq-button", + ) + ), + ), + dbc.Collapse( + dbc.CardBody(answer), + id=f"collapse-{id}", + ), + ], + className="faq-card", + ) + +layout = dbc.Container( + [ + dbc.Row( + [ + dbc.Col( + [ + html.Div( + html.H1("Frequently Asked Questions", id="faq_header", style={"textAlign": "center"}), + ), + html.Hr(), + generate_collapse_card("How do we interact with chatbot?", "This is the answer to question 1.", 1), + generate_collapse_card("How do I connect to my Bank Account?", "This is the answer to question 2.", 2), + # Add as many questions as you need + ], + id="faq_col", + ), + ], + id="faq", + ), + ] +) + +for i in range(1, 3): # replace 3 with the number of questions + 1 + @app.callback( + Output(f"collapse-{i}", "is_open"), + Output(f"button-{i}", "style"), + [Input(f"button-{i}", "n_clicks")], + [State(f"collapse-{i}", "is_open")], + ) + def toggle_collapse(n, is_open): + if n: + return not is_open, {"color": "white" if not is_open else "black", "background-color": "black" if not is_open else "white"} + return is_open, {"color": "black", "background-color": "white"} diff --git a/frontend/pages/news/data.py b/frontend/pages/news/data.py index 1939dce..bca8774 100644 --- a/frontend/pages/news/data.py +++ b/frontend/pages/news/data.py @@ -1,20 +1,20 @@ news_data = [ { 'id': 1, - 'title': 'First news article', - 'description': 'This is the first news article', + 'title': 'T1 DOLFIN READY TO GO', + 'description': 'The T1 DOLFIN project is fully prepared and ready to begin.', 'content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...', }, { 'id': 2, - 'title': 'Second news article', - 'description': 'This is the second news article', + 'title': 'ChatBot ready to enhance user experience', + 'description': 'Making Conversations Smarter and More Engaging', 'content': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...', }, { 'id': 3, - 'title': 'Third news article', - 'description': 'This is the third news article', + 'title': 'AI powered solution', + 'description': 'Banking made easy', 'content': '' } ] \ No newline at end of file diff --git a/frontend/utils/constants.py b/frontend/utils/constants.py index 47d2c86..8baf92a 100644 --- a/frontend/utils/constants.py +++ b/frontend/utils/constants.py @@ -6,5 +6,6 @@ dashboard_location="/dashboard" breakdown_location="/breakdown" news_location="/news" +faqs_location="/faqs" TIMEOUT = 60 \ No newline at end of file