prof-rossetti · s2t2 · Apr 18, 2023 · Apr 18, 2023 · Apr 18, 2023 · Apr 20, 2023
diff --git a/requirements.txt b/requirements.txt
@@ -11,3 +11,6 @@ Flask
 # for testing:
 pytest
 beautifulsoup4
+
+# for the production server:
+gunicorn
diff --git a/web_app/routes/dashboard_routes.py b/web_app/routes/dashboard_routes.py
@@ -38,3 +38,23 @@ def stocks_dashboard():
         print("ERROR", err)
         #flash("OOPS", "warning")
         return redirect("/stocks/form")
+
+
+
+@dashboard_routes.route("/unemployment/dashboard")
+def unemployment_dashboard():
+    print("UNEMPLOYMENT DASHBOARD...")
+
+    try:
+        alpha = AlphavantageService()
+        df = alpha.fetch_unemployment()
+        if not df.empty:
+            data = df.to_dict("records") # convert data to list of dictionaries (JSON stucture)
+            return render_template("unemployment_dashboard.html", data=data)
+        else:
+            #flash("OOPS", "warning")
+            return redirect("/")
+    except Exception as err:
+        print("ERROR", err)
+        #flash("OOPS", "warning")
+        return redirect("/")
diff --git a/web_app/routes/home_routes.py b/web_app/routes/home_routes.py
@@ -7,14 +7,14 @@
 @home_routes.route("/home")
 def index():
     print("HOME...")
-    return "Welcome Home"
-    #return render_template("home.html")
+    #return "Welcome Home"
+    return render_template("home.html")
 
 @home_routes.route("/about")
 def about():
     print("ABOUT...")
-    return "About Me"
-    #return render_template("about.html")
+    #return "About Me"
+    return render_template("about.html")
 
 @home_routes.route("/hello")
 def hello_world():
@@ -27,5 +27,5 @@ def hello_world():
     name = url_params.get("name") or "World"
     message = f"Hello, {name}!"
 
-    return message
-    #return render_template("hello.html", message=message)
+    #return message
+    return render_template("hello.html", message=message, other="YEAH", x=5)
diff --git a/web_app/services/alpha.py b/web_app/services/alpha.py
@@ -44,6 +44,17 @@ def fetch_stocks_daily(self, symbol="MSFT"):
         else:
             return df
 
+    def fetch_unemployment(self):
+        """
+            Fetches unemployment data.
+            Returns the data, or an empty DataFrame if none is available.
+        """
+        request_url = f"https://www.alphavantage.co/query?function=UNEMPLOYMENT&apikey={self.api_key}&datatype=csv"
+        df = read_csv(request_url) #> pandas.DataFrame
+        if "timestamp" not in df.columns:
+            return DataFrame()
+        else:
+            return df
 
 
 

diff --git a/web_app/templates/about.html b/web_app/templates/about.html
@@ -1,8 +1,9 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "about" %}
 
 {% block content %}
 
-    <h2>About Me<</h2>
+    <h2>About Me</h2>
 
     <p class="lead">This is the about page</p>
 

diff --git a/web_app/templates/bootstrap_5_layout.html b/web_app/templates/bootstrap_5_layout.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+
+    <title>Hello, world!</title>
+</head>
+<body>
+
+    <!--
+        FLASH MESSAGING
+        https://flask.palletsprojects.com/en/1.1.x/patterns/flashing/
+        https://getbootstrap.com/docs/4.3/components/alerts/
+    -->
+    {% with messages = get_flashed_messages(with_categories=true) %}
+      {% if messages %}
+        {% for category, message in messages %}
+            <!--
+                BOOTSTRAP ALERTS
+                https://getbootstrap.com/docs/5.0/components/alerts/#dismissing
+            -->
+            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert" style="margin-bottom:0;">
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                {{ message }}
+            </div>
+        {% endfor %}
+      {% endif %}
+    {% endwith %}
+
+    <!--
+        SITE NAVIGATION & BOOTSTRAP NAV
+        https://jinja.palletsprojects.com/en/2.11.x/tricks/
+        https://getbootstrap.com/docs/5.0/components/navbar/
+    -->
+    {% set nav_links = [
+      ('/about', 'about', 'About'),
+      ('/hello', 'hello', 'Hello'),
+      ('/stocks/form', 'stocks_form', 'Stocks Form'),
+      ('/unemployment/dashboard', 'unemployment_dashboard', 'Unemployment Dashboard')
+    ] -%}
+    {% set active_page = active_page|default('home') -%}
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">My Web App</a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                {% for href, page_id, link_text in nav_links %}
+                    {% if page_id == active_page %}
+                        {% set is_active = "active" -%}
+                    {% else %}
+                        {% set is_active = "" -%}
+                    {% endif %}
+
+                    <li class="nav-item">
+                        <a class="nav-link {{ is_active }}" href="{{href}}">{{link_text}}</a>
+                    </li>
+                {% endfor %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container" style="margin-top:2em;">
+
+        <!--
+            PAGE CONTENTS
+        -->
+        <div id="content">
+            {% block content %}
+            {% endblock %}
+        </div>
+
+        <footer style="margin-top:2em; margin-bottom:2em;">
+        <hr>
+            &copy; Copyright 2023 [Your Name Here] |
+            <a href="https://github.com/prof-rossetti/intro-to-python/blob/main/exercises/web-app/README.md">Source</a>
+        </footer>
+    </div>
+
+    <!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
+    <script type="text/javascript">
+
+        console.log("Thanks for the page visit!")
+
+    </script>
+</body>
+</html>
diff --git a/web_app/templates/hello.html b/web_app/templates/hello.html
@@ -1,9 +1,15 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "hello" %}
+
 
 {% block content %}
 
     <h2>{{ message }}</h2>
 
     <p>This is a paragraph on the "hello" page.</p>
 
+    <p>Anything we want... {{ other }} </p>
+
+    <p>Also... {{ x }} </p>
+
 {% endblock %}
diff --git a/web_app/templates/home.html b/web_app/templates/home.html
@@ -1,4 +1,6 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "home" %}
+
 
 {% block content %}
 

diff --git a/web_app/templates/stocks_dashboard.html b/web_app/templates/stocks_dashboard.html
@@ -1,4 +1,5 @@
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "stocks_dashboard" %}
 
 {% block content %}
 

diff --git a/web_app/templates/stocks_form.html b/web_app/templates/stocks_form.html
@@ -1,5 +1,6 @@
 
-{% extends "layout.html" %}
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "stocks_form" %}
 
 {% block content %}
 
@@ -12,10 +13,11 @@ <h2>Stocks Form</h2>
             <option value="GOOG">Google (GOOGL)</option>
             <option value="AAPL">Apple (AAPL)</option>
             <option value="TSLA">Tesla (TSLA)</option>
+            <option value="NFLX">Netflix (NFLX)</option>
         </select>
         <br>
 
-        <button id="my-submit-btn">Go!</button>
+        <button id="my-submit-btn" class="btn btn-primary">Go!</button>
     </form>
 
 {% endblock %}
diff --git a/web_app/templates/unemployment_dashboard.html b/web_app/templates/unemployment_dashboard.html
@@ -0,0 +1,55 @@
+{% extends "bootstrap_5_layout.html" %}
+{% set active_page = "unemployment_dashboard" %}
+
+{% block content %}
+
+    <h2>Unemployment Dashboard</h2>
+
+    <div>
+        <p>Latest Date: <span id="display-latest-date">__________</span></p>
+        <p>Latest Rate: <span id="display-latest-rate">__________</span></p>
+    </div>
+
+    <div id="dataviz-container"></div>
+
+
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <script type="text/javascript">
+
+        // processing the specific JSON response data returned by the router:
+        var responseData = JSON.parse('{{data | tojson}}')
+        console.log(responseData)
+
+        var dates = [] //> an array of date keys, for the chart ["2020-01-27", "2020-01-24", "2020-01-23", etc.]
+        var rates = [] //> an array of price objects
+
+        responseData.forEach(row => {
+            dates.push(row["timestamp"])
+            rates.push(row["value"])
+        });
+
+        var latestDate = dates[0]
+        var earliestDate = dates[dates.length - 1]
+        console.log("DATE RANGE:", earliestDate, "-", latestDate)
+
+        var latestRate = rates[0]
+        var latestRatePct = latestRate + "%" // formatting the number with dollar sign and rounding to two decimal places
+        console.log("LATEST RATE:", latestRatePct)
+
+        // updating the contents of the page:
+        var displayLatestDate = document.getElementById("display-latest-date")
+        var displayLatestRate = document.getElementById("display-latest-rate")
+        displayLatestDate.innerText = latestDate
+        displayLatestRate.innerText = latestRatePct
+
+        // charting the data (see https://plotly.com/javascript/line-charts/):
+        var title = "Unemployment Rates over Time"
+        var layout = {title: title, height: 500}
+        var chartData = [
+            {x: dates, y: rates, mode: "lines+markers"}
+        ]
+        Plotly.newPlot("dataviz-container", chartData, layout, {responsive: true})
+
+    </script>
+
+{% endblock %}