From 7f44c61a32d259e69944feaf0cda8f522cbb29a3 Mon Sep 17 00:00:00 2001 From: George Nicholson Date: Mon, 1 May 2023 19:04:58 +1000 Subject: [PATCH 1/5] added comments for clarity added comments for clarity to make sure the code is readable for future take over --- frontend/app.py | 29 +++++++++++++++++++---------- frontend/application.py | 18 +++++++++++++----- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/frontend/app.py b/frontend/app.py index 8104401..89f3627 100644 --- a/frontend/app.py +++ b/frontend/app.py @@ -1,29 +1,38 @@ +# Import necessary modules import dash import dash_bootstrap_components as dbc from flask_caching import Cache from utils.external_assets import FONT_AWSOME, CUSTOM_STYLE from layout.layout import layout +# Set up the Dash app with Flask server app = dash.Dash( - __name__, - # server=application, - suppress_callback_exceptions=True, - external_stylesheets=[ - dbc.themes.BOOTSTRAP, - FONT_AWSOME, - CUSTOM_STYLE + __name__, # Name of the application + suppress_callback_exceptions=True, # Suppress callback exceptions if True + external_stylesheets=[ # List of external stylesheets + dbc.themes.BOOTSTRAP, # Use the Bootstrap theme + FONT_AWSOME, # Use Font Awesome + CUSTOM_STYLE # Use a custom stylesheet ], - meta_tags=[ + meta_tags=[ # List of meta tags to include in the HTML head {"name": "viewport", "content": "width=device-width, initial-scale=1, maximum-scale=1.2, minimum-scale=0.9"} ] ) -application = app.server # define flask application.server +# Define the Flask server instance and assign it to a variable named 'application' +application = app.server + +# Set up a cache instance using Flask-Caching to cache the app's computed data cache = Cache(app.server, config={ 'CACHE_TYPE': 'FileSystemCache', 'CACHE_DIR': 'cache-directory' }) +# Set the app's title to 'DolFin' app.title = 'DolFin' + +# Log a message to the app's logger for testing purposes app.logger.info('testing log') -app.layout = layout \ No newline at end of file + +# Set the app's layout to the 'layout' variable defined in another file +app.layout = layout diff --git a/frontend/application.py b/frontend/application.py index d1d99b4..e89ce15 100644 --- a/frontend/application.py +++ b/frontend/application.py @@ -1,27 +1,33 @@ +# Import necessary modules from app import app, application 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 +# Import the various pages of the web app 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 +# Import callback functions for the sidebar from layout.sidebar.sidebar_callbacks import toggle_collapse, toggle_classname +# Define a callback function that determines the appropriate page layout based on the current URL pathname @app.callback( - Output("page-content", "children"), - Input("url", "pathname"), - State("url", "pathname") + Output("page-content", "children"), # Output is the "page-content" div and its children + Input("url", "pathname"), # Input is the current URL pathname + State("url", "pathname") # State is the current URL pathname ) - def render_page_content(pathname, state_path): + # If the current URL pathname is the login page, return the login layout if pathname == login_location: return login.layout + # If the user is authenticated... if Auth.is_authenticated(): + # Check the current URL pathname and return the appropriate layout for each page if pathname == home_page_location: return home.layout if pathname == dashboard_location: @@ -31,7 +37,9 @@ def render_page_content(pathname, state_path): if pathname == news_location: return news.layout else: + # If the user is not authenticated, return a message prompting them to authenticate and redirecting them to the login page return dcc.Link("Oh Dear, Appears you need to Authenticate, Click this to head back to login..", href=login_location) +# Run the Flask application if __name__ == "__main__": - application.run(port=8080, debug=True, load_dotenv=True) + application.run(port=8080, debug=True, load_dotenv=True) \ No newline at end of file From 3d22db87b2c6c6796c771c8412adefbb16cdc745 Mon Sep 17 00:00:00 2001 From: George Nicholson Date: Sun, 14 May 2023 15:30:02 +1000 Subject: [PATCH 2/5] changes made to include the functionality for when the chatbot is ready to be linked These are changes to app.py, layout.py and additions to sidebar callbacks to facilitate responsiveness when clicking with new files custom.css which is the code to change the chatbox visually with ease --- frontend/app.py | 3 +- frontend/assets/custom.css | 36 ++++++++++++++++++++ frontend/layout/layout.py | 32 ++++++++++++++++- frontend/layout/sidebar/sidebar_callbacks.py | 22 +++++++++++- 4 files changed, 90 insertions(+), 3 deletions(-) create mode 100644 frontend/assets/custom.css diff --git a/frontend/app.py b/frontend/app.py index 89f3627..64f87ef 100644 --- a/frontend/app.py +++ b/frontend/app.py @@ -12,7 +12,8 @@ external_stylesheets=[ # List of external stylesheets dbc.themes.BOOTSTRAP, # Use the Bootstrap theme FONT_AWSOME, # Use Font Awesome - CUSTOM_STYLE # Use a custom stylesheet + CUSTOM_STYLE, # Use a custom stylesheet + 'assets/custom.css' # use for Chatbot ], meta_tags=[ # List of meta tags to include in the HTML head {"name": "viewport", "content": "width=device-width, initial-scale=1, maximum-scale=1.2, minimum-scale=0.9"} diff --git a/frontend/assets/custom.css b/frontend/assets/custom.css new file mode 100644 index 0000000..3ba9e3d --- /dev/null +++ b/frontend/assets/custom.css @@ -0,0 +1,36 @@ +.chat-wrapper { + position: fixed; + bottom: 5px; + right: 20px; +} + +.chat-button { + background-color: #007BFF; + color: white; + padding: 2px; /* Increase padding horizontally for a wider button */ + cursor: pointer; + border: none; + outline: none; + width: 200px; /* Set a specific width for the button */ + height: 40px; +} + +.chat-container { + display: none; + background-color: #F8F9FA; + padding: 10px; + border: 1px solid #CED4DA; +} + +.chat-messages { + max-height: 200px; + overflow-y: scroll; +} + +.chat-input { + margin-top: 10px; + width: 100%; + padding: 5px; + border: 1px solid #CED4DA; + border-radius: 3px; +} diff --git a/frontend/layout/layout.py b/frontend/layout/layout.py index 3f5ec8b..18eec5e 100644 --- a/frontend/layout/layout.py +++ b/frontend/layout/layout.py @@ -7,14 +7,44 @@ content = html.Div(id="page-content", className="content-container") -# Wrap the content, sidebar, and footer inside a new div with the "page-container" class +# Define the chatbox component with unique IDs +chatbox = html.Div( + [ + html.Button( + "Chat with me!", + id="chat-button-unique", + className="chat-button" + ), + html.Div( + id="chat-container-unique", + className="chat-container", + children=[ + html.Div( + id="chat-messages-unique", + className="chat-messages" + ), + dcc.Input( + id="chat-input-unique", + className="chat-input", + placeholder="Type your message..." + ), + ], + ), + ], + className="chat-wrapper" +) + +# Wrap the content, sidebar, chatbox, and footer inside a new div with the "page-container" class page_container = html.Div( [ sidebar, content, + chatbox, # Added the chatbox component + #Footer(), # Add the Footer component ], className="page-container", ) +# Define the top-level layout with chatbox included layout = html.Div([dcc.Location(id="url"), navbar, logo, page_container]) diff --git a/frontend/layout/sidebar/sidebar_callbacks.py b/frontend/layout/sidebar/sidebar_callbacks.py index 34a9e6e..a405b2d 100644 --- a/frontend/layout/sidebar/sidebar_callbacks.py +++ b/frontend/layout/sidebar/sidebar_callbacks.py @@ -22,4 +22,24 @@ def toggle_classname(n, classname): def toggle_collapse(n, is_open): if n: return not is_open - return is_open \ No newline at end of file + return is_open + + +@app.callback( + [Output("chat-container-unique", "style"), Output("chat-messages-unique", "children")], + [Input("chat-button-unique", "n_clicks")], + [State("chat-container-unique", "style")] +) +def toggle_chatbox(n_clicks, chat_container_style): + if not chat_container_style: + chat_container_style = {"display": "none"} + + if n_clicks and n_clicks % 2 != 0: + chat_container_style["display"] = "block" + else: + chat_container_style["display"] = "none" + + # Add any additional logic for handling chat messages + + return chat_container_style, None + From 3982c0298bd97b8ef399b98bbf4082ce187f204c Mon Sep 17 00:00:00 2001 From: George Nicholson Date: Tue, 16 May 2023 15:50:07 +1000 Subject: [PATCH 3/5] updated code for the chatbox css and functionality added more code to the custom.css for the chatbox and layout.py and sidebar callbacks in all to optimise the functionality of the required specifications, namely logo and callbacks, to accommodate the changes in layout.py --- frontend/assets/custom.css | 14 +++++++++++++- frontend/layout/layout.py | 11 +++++++++-- frontend/layout/sidebar/sidebar_callbacks.py | 5 ----- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/frontend/assets/custom.css b/frontend/assets/custom.css index 3ba9e3d..343e4f5 100644 --- a/frontend/assets/custom.css +++ b/frontend/assets/custom.css @@ -1,3 +1,4 @@ +/* Chatbox Styles */ .chat-wrapper { position: fixed; bottom: 5px; @@ -7,7 +8,7 @@ .chat-button { background-color: #007BFF; color: white; - padding: 2px; /* Increase padding horizontally for a wider button */ + padding: 2px 10px; /* Increase padding horizontally for a wider button */ cursor: pointer; border: none; outline: none; @@ -34,3 +35,14 @@ border: 1px solid #CED4DA; border-radius: 3px; } + +.logo-image { + height: 20px; + width: auto; + margin-right: 5px; +} + +.chat-title { + font-size: 14px; + font-weight: bold; +} diff --git a/frontend/layout/layout.py b/frontend/layout/layout.py index 18eec5e..e4f0df1 100644 --- a/frontend/layout/layout.py +++ b/frontend/layout/layout.py @@ -10,8 +10,14 @@ # Define the chatbox component with unique IDs chatbox = html.Div( [ - html.Button( - "Chat with me!", + html.Div( + [ + html.Img( + src="assets/images/logo_small.png", + className="logo-image" + ), + html.Span("Chat with me", className="chat-title") + ], id="chat-button-unique", className="chat-button" ), @@ -34,6 +40,7 @@ className="chat-wrapper" ) + # Wrap the content, sidebar, chatbox, and footer inside a new div with the "page-container" class page_container = html.Div( [ diff --git a/frontend/layout/sidebar/sidebar_callbacks.py b/frontend/layout/sidebar/sidebar_callbacks.py index a405b2d..bfe52c7 100644 --- a/frontend/layout/sidebar/sidebar_callbacks.py +++ b/frontend/layout/sidebar/sidebar_callbacks.py @@ -1,8 +1,6 @@ from dash.dependencies import Input, Output, State - from app import app - @app.callback( Output("sidebar", "className"), [Input("sidebar-toggle", "n_clicks")], @@ -13,7 +11,6 @@ def toggle_classname(n, classname): return "collapsed" return "" - @app.callback( Output("collapse", "is_open"), [Input("navbar-toggle", "n_clicks")], @@ -24,7 +21,6 @@ def toggle_collapse(n, is_open): return not is_open return is_open - @app.callback( [Output("chat-container-unique", "style"), Output("chat-messages-unique", "children")], [Input("chat-button-unique", "n_clicks")], @@ -42,4 +38,3 @@ def toggle_chatbox(n_clicks, chat_container_style): # Add any additional logic for handling chat messages return chat_container_style, None - From 4752055227c5eed67d89cd545b1973453a7b6bdb Mon Sep 17 00:00:00 2001 From: George Nicholson Date: Fri, 19 May 2023 05:39:45 +1000 Subject: [PATCH 4/5] latest changes for the chatbot visually --- frontend/assets/custom.css | 14 +------------- frontend/chatbot.py | 0 frontend/layout/layout.py | 11 ++--------- frontend/layout/sidebar/sidebar_callbacks.py | 5 +++++ 4 files changed, 8 insertions(+), 22 deletions(-) create mode 100644 frontend/chatbot.py diff --git a/frontend/assets/custom.css b/frontend/assets/custom.css index 343e4f5..3ba9e3d 100644 --- a/frontend/assets/custom.css +++ b/frontend/assets/custom.css @@ -1,4 +1,3 @@ -/* Chatbox Styles */ .chat-wrapper { position: fixed; bottom: 5px; @@ -8,7 +7,7 @@ .chat-button { background-color: #007BFF; color: white; - padding: 2px 10px; /* Increase padding horizontally for a wider button */ + padding: 2px; /* Increase padding horizontally for a wider button */ cursor: pointer; border: none; outline: none; @@ -35,14 +34,3 @@ border: 1px solid #CED4DA; border-radius: 3px; } - -.logo-image { - height: 20px; - width: auto; - margin-right: 5px; -} - -.chat-title { - font-size: 14px; - font-weight: bold; -} diff --git a/frontend/chatbot.py b/frontend/chatbot.py new file mode 100644 index 0000000..e69de29 diff --git a/frontend/layout/layout.py b/frontend/layout/layout.py index e4f0df1..18eec5e 100644 --- a/frontend/layout/layout.py +++ b/frontend/layout/layout.py @@ -10,14 +10,8 @@ # Define the chatbox component with unique IDs chatbox = html.Div( [ - html.Div( - [ - html.Img( - src="assets/images/logo_small.png", - className="logo-image" - ), - html.Span("Chat with me", className="chat-title") - ], + html.Button( + "Chat with me!", id="chat-button-unique", className="chat-button" ), @@ -40,7 +34,6 @@ className="chat-wrapper" ) - # Wrap the content, sidebar, chatbox, and footer inside a new div with the "page-container" class page_container = html.Div( [ diff --git a/frontend/layout/sidebar/sidebar_callbacks.py b/frontend/layout/sidebar/sidebar_callbacks.py index bfe52c7..a405b2d 100644 --- a/frontend/layout/sidebar/sidebar_callbacks.py +++ b/frontend/layout/sidebar/sidebar_callbacks.py @@ -1,6 +1,8 @@ from dash.dependencies import Input, Output, State + from app import app + @app.callback( Output("sidebar", "className"), [Input("sidebar-toggle", "n_clicks")], @@ -11,6 +13,7 @@ def toggle_classname(n, classname): return "collapsed" return "" + @app.callback( Output("collapse", "is_open"), [Input("navbar-toggle", "n_clicks")], @@ -21,6 +24,7 @@ def toggle_collapse(n, is_open): return not is_open return is_open + @app.callback( [Output("chat-container-unique", "style"), Output("chat-messages-unique", "children")], [Input("chat-button-unique", "n_clicks")], @@ -38,3 +42,4 @@ def toggle_chatbox(n_clicks, chat_container_style): # Add any additional logic for handling chat messages return chat_container_style, None + From d19c1616de23cc0376d234195c6a6c793f22c877 Mon Sep 17 00:00:00 2001 From: George Nicholson Date: Fri, 19 May 2023 05:40:09 +1000 Subject: [PATCH 5/5] Revert "latest changes for the chatbot visually" This reverts commit 4752055227c5eed67d89cd545b1973453a7b6bdb. --- frontend/assets/custom.css | 14 +++++++++++++- frontend/chatbot.py | 0 frontend/layout/layout.py | 11 +++++++++-- frontend/layout/sidebar/sidebar_callbacks.py | 5 ----- 4 files changed, 22 insertions(+), 8 deletions(-) delete mode 100644 frontend/chatbot.py diff --git a/frontend/assets/custom.css b/frontend/assets/custom.css index 3ba9e3d..343e4f5 100644 --- a/frontend/assets/custom.css +++ b/frontend/assets/custom.css @@ -1,3 +1,4 @@ +/* Chatbox Styles */ .chat-wrapper { position: fixed; bottom: 5px; @@ -7,7 +8,7 @@ .chat-button { background-color: #007BFF; color: white; - padding: 2px; /* Increase padding horizontally for a wider button */ + padding: 2px 10px; /* Increase padding horizontally for a wider button */ cursor: pointer; border: none; outline: none; @@ -34,3 +35,14 @@ border: 1px solid #CED4DA; border-radius: 3px; } + +.logo-image { + height: 20px; + width: auto; + margin-right: 5px; +} + +.chat-title { + font-size: 14px; + font-weight: bold; +} diff --git a/frontend/chatbot.py b/frontend/chatbot.py deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/layout/layout.py b/frontend/layout/layout.py index 18eec5e..e4f0df1 100644 --- a/frontend/layout/layout.py +++ b/frontend/layout/layout.py @@ -10,8 +10,14 @@ # Define the chatbox component with unique IDs chatbox = html.Div( [ - html.Button( - "Chat with me!", + html.Div( + [ + html.Img( + src="assets/images/logo_small.png", + className="logo-image" + ), + html.Span("Chat with me", className="chat-title") + ], id="chat-button-unique", className="chat-button" ), @@ -34,6 +40,7 @@ className="chat-wrapper" ) + # Wrap the content, sidebar, chatbox, and footer inside a new div with the "page-container" class page_container = html.Div( [ diff --git a/frontend/layout/sidebar/sidebar_callbacks.py b/frontend/layout/sidebar/sidebar_callbacks.py index a405b2d..bfe52c7 100644 --- a/frontend/layout/sidebar/sidebar_callbacks.py +++ b/frontend/layout/sidebar/sidebar_callbacks.py @@ -1,8 +1,6 @@ from dash.dependencies import Input, Output, State - from app import app - @app.callback( Output("sidebar", "className"), [Input("sidebar-toggle", "n_clicks")], @@ -13,7 +11,6 @@ def toggle_classname(n, classname): return "collapsed" return "" - @app.callback( Output("collapse", "is_open"), [Input("navbar-toggle", "n_clicks")], @@ -24,7 +21,6 @@ def toggle_collapse(n, is_open): return not is_open return is_open - @app.callback( [Output("chat-container-unique", "style"), Output("chat-messages-unique", "children")], [Input("chat-button-unique", "n_clicks")], @@ -42,4 +38,3 @@ def toggle_chatbox(n_clicks, chat_container_style): # Add any additional logic for handling chat messages return chat_container_style, None -