From 8a058ac45e6ef5a4c7cd7141332b7951bc01f49c Mon Sep 17 00:00:00 2001
From: jwansek <eddie.atten.ea29@gmail.com>
Date: Fri, 5 May 2023 15:58:07 +0100
Subject: Finished search bar, started adding <div>s for chart content

---
 app.py                     | 34 +++++++++++++++++++++++++++++++++-
 charts.json                | 20 ++++++++++++++++++++
 database.py                |  3 +--
 static/scripts.js          |  4 +++-
 static/style.css           | 31 +++++++++++++++++++++++++++++++
 templates/index.html.j2    | 13 ++++++++++++-
 templates/search.html.j2   | 16 ++++++++++++++++
 templates/template.html.j2 |  8 ++++----
 8 files changed, 120 insertions(+), 9 deletions(-)
 create mode 100644 charts.json
 create mode 100644 templates/search.html.j2

diff --git a/app.py b/app.py
index ecb4426..2d6d8ec 100644
--- a/app.py
+++ b/app.py
@@ -1,14 +1,46 @@
 import database
+import urllib.parse
 import flask
+import json
+import os
 
 app = flask.Flask(__name__)
 
+if not os.path.exists(".docker"):
+    import dotenv
+    dotenv.load_dotenv(dotenv_path = "db.env")
+    host = "srv.home"
+else:
+    host = "db" 
+
 @app.route("/")
 def serve_index():
+    with open("charts.json", "r") as f:
+        charts = json.load(f)
+
     return flask.render_template(
         "index.html.j2",
-        title = "UK Gender Pay Gap"
+        title = "UK Gender Pay Gap",
+        charts = charts["index"]
     )
 
+@app.route("/search_click", methods = ["POST"])
+def search_redirect():
+    return flask.redirect("/search?s=%s" % urllib.parse.quote_plus(dict(flask.request.form)["search"]))
+
+@app.route("/search")
+def search():
+    with database.PayGapDatabase(host = host) as db:
+        search_text = flask.request.args.get("s")
+        companies = db.search_company(search_text)
+        if len(companies) == 1:
+            return flask.redirect("/company/%s" % companies[0][1])
+
+        return flask.render_template(
+            "search.html.j2",
+            title = "Search",
+            companies = companies
+        )
+
 if __name__ == "__main__":
     app.run("0.0.0.0", port = 5005, debug = True)
\ No newline at end of file
diff --git a/charts.json b/charts.json
new file mode 100644
index 0000000..45a5111
--- /dev/null
+++ b/charts.json
@@ -0,0 +1,20 @@
+{
+    "index": [
+        {
+            "title": "Median Hourly Pay Difference",
+            "url": "/plot/medianhourly"
+        },
+        {
+            "title": "Median Bonus Pay Difference",
+            "url": "/plot/medianbonus"
+        },
+        {
+            "title": "Pay Difference by SIC Section REallt LONNNNNNNNNNNNNNNNNNNNNNNGGGGGGGGGGGGG",
+            "url": "/plot/sic-section"
+        },
+        {
+            "title": "Pay Gay by Company Size",
+            "url": "/plot/company-size"   
+        }
+    ]
+}
\ No newline at end of file
diff --git a/database.py b/database.py
index 53d755e..e368d02 100644
--- a/database.py
+++ b/database.py
@@ -212,8 +212,7 @@ class PayGapDatabase:
         with self.__connection.cursor() as cursor:
             cursor.execute("""
             SELECT name, company_number FROM employer 
-            WHERE name LIKE '%s' OR current_name LIKE '%s'
-            LIMIT 10;
+            WHERE name LIKE '%s' OR current_name LIKE '%s';
             """ % (
                 self._wrap_percent(company_prefix),
                 self._wrap_percent(company_prefix)
diff --git a/static/scripts.js b/static/scripts.js
index c6c3320..dc43112 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -1 +1,3 @@
-console.log("foo!")
\ No newline at end of file
+$(document).ready(function() {
+    console.log("ready!")
+});
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index c527b3a..66e5829 100644
--- a/static/style.css
+++ b/static/style.css
@@ -16,6 +16,11 @@ a {
     color: black;
     font-weight: bold;
     padding-top: 1px;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
 }
 
 aside {
@@ -49,6 +54,32 @@ aside form input[type=submit] {
     padding-right: 2.5;
 }
 
+/* #multicharts ul {
+    
+} */
+
+#multicharts ul li {
+    list-style-type: none;
+    width: 25%;
+    display: inline-block;
+    background-color: pink;
+    min-height: 250px;
+    margin-bottom: 7px;
+}
+
+.chart_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.minichart {
+    min-height: 220px;
+    width: 95%;
+    background-color: red;
+}
+
 footer {
     padding-left: 10%;
     padding-right: 10%;
diff --git a/templates/index.html.j2 b/templates/index.html.j2
index 91f314e..40ff005 100644
--- a/templates/index.html.j2
+++ b/templates/index.html.j2
@@ -1,4 +1,15 @@
 {% extends "template.html.j2" %}
 {% block content %}
-    <p>foo</p>
+    <div id="multicharts">
+        <ul>
+            {% for elem in charts %}
+                <li>
+                    <div class="chart_container">
+                        <div class="minichart" id="/minichart{{ elem['url'] }}">
+                        <a href="{{ elem['url'] }}">{{ elem['title'] }}</a>
+                    </div>
+                </li>
+            {% endfor %}
+        </ul>
+    </div>  
 {% endblock %}
\ No newline at end of file
diff --git a/templates/search.html.j2 b/templates/search.html.j2
new file mode 100644
index 0000000..4de432c
--- /dev/null
+++ b/templates/search.html.j2
@@ -0,0 +1,16 @@
+{% extends "template.html.j2" %}
+{% block content %}
+    <div id="search">
+        {% if companies == [] %}
+            <a>There were no results for that search. Please refine your search.</a>
+        {% else %}
+            <ul>
+                {% for name, id_ in companies %}
+                    <li>
+                        <a href="{{ '/company/%s' % id_ }}">{{ name }}</a>
+                    </li>  
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/template.html.j2 b/templates/template.html.j2
index 89539d2..4c08853 100644
--- a/templates/template.html.j2
+++ b/templates/template.html.j2
@@ -25,14 +25,14 @@
 
 <body>
     <header>
-        <h1>{{ title }}</h1>
+        <a href="/"><h1>{{ title }}</h1></a>
         <p>Data provided by the <a href="https://gender-pay-gap.service.gov.uk/">UK Government</a></p>
     </header>
 
     <aside>
-        <form id="searchform">
-            <input type="search" value="Search...">
-            <input type="submit" value="Search">
+        <form id="searchform" action="/search_click" method="POST">
+            <input type="search" id="search_entry" name="search" required>
+            <input type="submit" value="Search" id="search_btn">
         </form>
         <h4>Filter...</h4>
     </aside>
-- 
cgit v1.2.3