diff --git a/app/__init__.py b/app/__init__.py
index 65fef6ef12738a78c8dd180605b99ebfe1e569d9..0639bb76fc5164757f413c43c886d3b647ce5768 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -1,10 +1,12 @@
# Flask init for the web app.
from flask import Flask
-from database import db
+from data import db
from dotenv import load_dotenv
import os
# Jago Gardiner (21009267)
+
+
class Config(object):
TEMPLATES_AUTO_RELOAD = True
DEBUG = True
diff --git a/app/api.py b/app/api.py
new file mode 100644
index 0000000000000000000000000000000000000000..e009624a18d2790fb3b3e180e28314bc37d46a6f
--- /dev/null
+++ b/app/api.py
@@ -0,0 +1,12 @@
+# Routes for API endpoints
+# Fetching data from CSV
+from data.csv import get_data
+from flask import jsonify, request
+from .main import app
+
+
+@app.route("/api/fetch_player", methods=["POST"])
+def fetch_player():
+ data = request.get_json()
+ player = data["player"]
+ return jsonify(get_data(player))
diff --git a/app/routes.py b/app/routes.py
index 91dcef4dff6a2a90dd42abff5f9bd6c06d51746c..b3c48dfcceddd8577eb876686ba312deb6f03048 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -9,11 +9,16 @@ def home():
return render_template("home.html")
-@app.route("/index")
-def index():
- return render_template("index.html")
+@app.route("/test")
+def test():
+ return render_template("template.html")
-@app.route("/about")
-def about():
- return render_template("about.html")
+@app.route("/header")
+def header():
+ return render_template("header.html")
+
+
+@app.route("/footer")
+def footer():
+ return render_template("footer.html")
diff --git a/app/static/css/style.css b/app/static/css/style.css
index 78fd506a3e918a636457b0032045082d63ea30c3..ad7b97484fc82e085e32f68da1d6327db83d09ea 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -20,13 +20,28 @@
}
-.main {
- border: solid blueviolet;
- border-radius: 12px;
- padding: 12px;
- margin: auto;
+main>.container {
+ padding: 60px 20px 0;
+}
+
+.navbar {
+ background-color: #ffffff;
+ opacity: 0.95;
+ filter: alpha(opacity=50);
+}
+
+/* Styling for the "logo" used across the site, this is just Inter bold */
+.logo {
+ font-size: 25px;
+ font-weight: bold;
+}
+
+.logo-footer {
+ font-size: large;
+ font-weight: bold;
}
+
.main table {
margin: auto;
border: solid black 1px;
@@ -46,52 +61,50 @@
/*border: solid black 1px;*/
}
-.title
-{
+.title {
text-align: center;
}
-.main1
-{
+
+.main1 {
margin: auto;
width: 90%;
border: solid 1px;
border-radius: 6px;
padding: 12px;
}
-.display
-{
+
+.display {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
-h3
-{
+
+h3 {
border-top: solid 0.5px;
border-bottom: solid 0.5px;
}
-.playerName
-{
+.playerName {
text-align: center;
margin-right: 12px;
margin-left: 12px;
border-bottom: solid 0.5px;
}
-.marketValue
-{
+
+.marketValue {
text-align: center;
margin-right: 12px;
margin-left: 12px;
border-bottom: solid 0.5px;
}
-.starValue
-{
+
+.starValue {
text-align: center;
margin-right: 12px;
margin-left: 12px;
border-bottom: solid 0.5px;
}
-.salary
-{
+
+.salary {
text-align: center;
margin-right: 12px;
margin-left: 12px;
@@ -104,4 +117,3 @@ h3
body {
font-family: 'Inter', sans-serif;
}
-
diff --git a/app/static/js/tools.js b/app/static/js/tools.js
new file mode 100644
index 0000000000000000000000000000000000000000..561996054e197cd185b85d211fd7b54cdcd97896
--- /dev/null
+++ b/app/static/js/tools.js
@@ -0,0 +1,17 @@
+/* Jago Gardiner 21009267 */
+/**
+ * Function to load header and footer using jQuery.
+ * Uses a callback so elements inside these HTML files can be
+ * modified on the fly.
+ * @param {Function} callback Callback used to make header elements active.
+ */
+function loadTemplate(callback) {
+ // Load header
+ $('#header').load('/header', () => {
+ if (typeof callback === 'function') {
+ callback()
+ }
+ })
+ // Load footer
+ $('#footer').load('/footer')
+}
diff --git a/app/templates/about.html b/app/templates/about.html
deleted file mode 100644
index 4edcbfd07f09aa8b56e6b6b0ed511a80dfea1a1a..0000000000000000000000000000000000000000
--- a/app/templates/about.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- quick landing page -->
-<div class="container">
- <div class="row">
- <div class="col-md-12">
- <h1>Example</h1>
- <p class="lead">hello</p>
- </div>
- </div>
-</div>
diff --git a/app/templates/footer.html b/app/templates/footer.html
new file mode 100644
index 0000000000000000000000000000000000000000..30deb095d8b6a63105a30114571ecf244ea26c17
--- /dev/null
+++ b/app/templates/footer.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!-- Jago Gardiner 21009267 -->
+
+<div class="py-5"></div>
+<footer class="footer mt-auto py-3 bg-light fixed-bottom border text-center">
+ <div class="container">
+ <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1 logo-footer">
+ Site Name
+ </a>
+ <span class="text-muted">2023 | <span id="heart">♥</span></span>
+ </div>
+ <script>
+ var heart = document.getElementById('heart');
+ heart.addEventListener('click', function () {
+ heart.classList.toggle('heart-red');
+ });
+ </script>
+</footer>
diff --git a/app/templates/header.html b/app/templates/header.html
new file mode 100644
index 0000000000000000000000000000000000000000..29441494401ed5d5f9d1d77bdf51fafa0816d767
--- /dev/null
+++ b/app/templates/header.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- Jago Gardiner 21009267 -->
+
+<header id="header">
+ <nav class="navbar fixed-top navbar-expand-md navbar-light bg-light shadow-sm border">
+ <div class="container">
+ <a class="navbar-brand logo" href="/">Site Name</a>
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
+ aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
+ <div class="collapse navbar-collapse" id="navbarCollapse">
+ <ul class="navbar-nav me-auto mb-2 mb-md-0">
+ <li class="nav-item">
+ <a class="nav-link" id="home" aria-current="page" href="/">Players</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="locations" href="/teams">Teams</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" id="locations" href="/matches">Matches</a>
+ </li>
+ </ul>
+ <div class="text-end">
+ <a class="nav-link" id="locations" href="/empty">empty</a>
+ </div>
+ </div>
+ </div>
+ </nav>
+</header>
+<div class="mb-5"></div>
diff --git a/app/templates/home.html b/app/templates/home.html
index 379774ba6ce5b56b4b06e2012cdebc36aaa76602..c38ec0f5acb2b0c36d3f4f11b23003860abfeba7 100644
--- a/app/templates/home.html
+++ b/app/templates/home.html
@@ -1,53 +1,74 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
<head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Template</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="../static/css/style.css" rel="stylesheet" />
</head>
<body>
- <div class="title">
- <h1>Title</h1>
- <p>At some point lets figure this out plz</p>
- </div>
-
- <div class="main1">
-
- <label for="filter">Filter By</label>
- <select name="filter">
- <option value="Star Rating">Star Rating</option>
- <option value="Market Value">Market Value</option>
- <option value="Salary">Salary</option>
- </select>
-
- <div class="display">
- <div class="playerName">
- <h3>Player Name</h3>
- <p>{Import Data}</p>
- <p>name1</p>
- </div>
+ <div id="header"></div>
- <div class="marketValue">
- <h3>Market Value</h3>
- <p>{Back-Process}</p>
- <p>£</p>
- </div>
+ <main role="main">
+ <div class="container">
+ <div class="main1">
- <div class="starValue">
- <h3>Star Value</h3>
- <p>{Back-Process}</p>
- <p>*****</p>
- </div>
+ <label for="filter">Filter By</label>
+ <select name="filter">
+ <option value="Star Rating">Star Rating</option>
+ <option value="Market Value">Market Value</option>
+ <option value="Salary">Salary</option>
+ </select>
+
+ <div class="display">
+ <div class="playerName">
+ <h3>Player Name</h3>
+ <p>{Import Data}</p>
+ <p>name1</p>
+ </div>
- <div class="salary">
- <h3>Salary</h3>
- <p>{Import Data}</p>
- <p>$</p>
+ <div class="marketValue">
+ <h3>Market Value</h3>
+ <p>{Back-Process}</p>
+ <p>£</p>
+ </div>
+
+ <div class="starValue">
+ <h3>Star Value</h3>
+ <p>{Back-Process}</p>
+ <p>*****</p>
+ </div>
+
+ <div class="salary">
+ <h3>Salary</h3>
+ <p>{Import Data}</p>
+ <p>$</p>
+ </div>
+ </div>
</div>
</div>
+ </main>
+
+ <div id="footer"></div>
+ <!-- JQuery CDN -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+ integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+ crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+ <!-- Render header footer template -->
+ <script src="../static/js/tools.js"></script>
- </div>
+ <!-- Bootstrap JS -->
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
+ crossorigin="anonymous"></script>
+ <script>
+ loadTemplate(() => { })
+ </script>
</body>
</html>
diff --git a/app/templates/index.html b/app/templates/index.html
deleted file mode 100644
index 4edcbfd07f09aa8b56e6b6b0ed511a80dfea1a1a..0000000000000000000000000000000000000000
--- a/app/templates/index.html
+++ /dev/null
@@ -1,9 +0,0 @@
-<!-- quick landing page -->
-<div class="container">
- <div class="row">
- <div class="col-md-12">
- <h1>Example</h1>
- <p class="lead">hello</p>
- </div>
- </div>
-</div>
diff --git a/app/templates/template.html b/app/templates/template.html
index 9837c0f53373875532058d1b0c32b9b3ddb3a802..b3d203ce4c0bb9bf4900f455b5507538033940a5 100644
--- a/app/templates/template.html
+++ b/app/templates/template.html
@@ -1,13 +1,40 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
- <head?>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Template</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link href="../static/css/style.css" rel="stylesheet" />
- </head>
+ </head>
- <body>
- <p>Template</p>
- </body>
+ <body>
+ <div id="header"></div>
+
+ <main role="main">
+ <div class="container">
+ <p>Custom template</p>
+ </div>
+ </main>
+
+ <div id="footer"></div>
+ <!-- JQuery CDN -->
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+ integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+ crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+ <!-- Render header footer template -->
+ <script src="../static/js/tools.js"></script>
+
+ <!-- Bootstrap JS -->
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
+ crossorigin="anonymous"></script>
+ <script>
+ loadTemplate(() => { })
+ </script>
+ </body>
</html>
diff --git a/data/csv.py b/data/csv.py
index 9172300ebe20999d0e2956f9a0c76a949da731ee..97d81b9f1e281b32aeacd0eb18632ee04e1a15df 100644
--- a/data/csv.py
+++ b/data/csv.py
@@ -5,7 +5,7 @@ players = [] # List of all the players
# Could POTENTIALLY have a list for each of those below if we choose this route
-with open("as_given_to_us/playerData.csv", "r") as csv_file:
+with open("players_file.csv", "r") as csv_file:
r_csv = csv.reader(csv_file)
next(r_csv) # skips the headers
diff --git a/data/players_file.csv b/data/players_file.csv
new file mode 100644
index 0000000000000000000000000000000000000000..3e1b40cbed1d57a8152d59f277ec5cc88ac7c8db
--- /dev/null
+++ b/data/players_file.csv
@@ -0,0 +1,22 @@
+PLAYER NAME,DATE OF BIRTH,GENDER,DATE SIGNED UP,CURRENT TEAM,TEAM LOCATION,TEAM MANAGER,SALARY (�k/Week),START OF CONTRACT,CONTRACT DURATION,GAMES PLAYED THIS YEAR ,GAMES WON,FG1,FG2,FG3,FG4,FG5
+NB009,24/04/2001,M,01/01/2017,REDNORTH,LIVERPOOL,REDMAN,50,01/01/2019,5,22,11,W,W,L,W,D
+OB001,31/07/1997,M,01/01/2017,REDNORTH,LIVERPOOL,REDMAN,42,01/12/2018,5,25,17,W,D,D,W,W
+OB022,31/08/1995,M,31/03/2014,REDSOUTH,BRIGHTON,SOUTHMAN,33,01/06/2018,4,22,18,W,W,W,W,W
+OG005,22/07/1991,F,01/01/2011,LIGHTGREEN,COVENTRY,BROWN,12,01/01/2017,6,18,15,D,D,W,W,L
+NG001,17/04/1997,F,17/04/2015,DARK GREEN,LEEDS,GREENBOX,14,01/01/2020,5,14,12,D,L,L,W,D
+NG004,05/08/1999,F,01/10/2018,LIGHTRED,OXFORD,PINKMAN,15,01/12/2018,4,17,17,L,L,L,L,D
+NB004,01/01/2001,M,15/11/2018,NAVYBLUE,LONDON,POSHMAN,28,01/01/2019,4,16,16,D,W,W,L,L
+NB007,12/09/1998,M,15/12/2018,LIGHTBLUE,PRESTON,GREY,42,01/02/2019,4,22,17,L,W,W,W,D
+OG110,11/12/1996,F,01/07/2018,PINKTEAM,BRISTOL,WESTMAN,17,01/09/2020,3,24,18,W,W,L,L,L
+OB099,11/11/1999,M,01/11/2017,LIGHTBLUE,PRESTON,GREY,38,01/12/2017,5,21,11,W,D,W,W,W
+NB212,01/01/2000,M,11/11/2020,DARK KNIGHTS,NEWTOWN,BLACK,55,01/01/2021,3,22,12,W,W,W,W,W
+OB124,17/09/1995,M,15/06/2017,DARK KNIGHTS,NEWTOWN,BLACK,52,01/01/2020,4,24,13,D,D,D,L,W
+NG032,13/11/1992,F,11/01/2014,PINKTEAM,BRISTOL,WESTMAN,21,01/10/2017,5,25,12,L,L,L,D,D
+OB333,04/01/1999,M,01/06/2020,REDSOUTH,BRIGHTON,SOUTHMAN,38,01/12/2020,3,18,17,L,L,W,W,D
+OB232,01/09/1998,M,12/12/2016,REDNORTH,LIVERPOOL,REDMAN,44,01/12/2019,4,19,19,D,D,D,W,L
+NB311,22/11/1997,M,04/07/2018,LIGHTBLUE,PRESTON,GREY,59,01/12/2019,3,22,22,D,L,L,D,W
+NG210,23/02/1999,F,01/05/2019,GOLDWINGS,LONDON,BRIGHTMAN,21,01/06/2019,4,20,14,W,W,W,W,D
+NG222,01/01/2002,F,12/12/2019,DARK GREEN,LEEDS,GREENBOX,14,01/01/2020,3,21,12,W,D,W,W,D
+NB322,26/07/2000,M,01/10/2018,NAVYBLUE,LONDON,POSHMAN,29,01/01/2020,3,16,11,W,L,L,W,W
+NB320,27/10/1999,M,01/06/2016,LIGHTBLUE,PRESTON,GREY,32,01/07/2020,3,17,16,W,L,W,L,W
+NB337,12/05/1998,M,01/01/2015,LIGHTGREEN,COVENTRY,BROWN,27,01/12/2020,3,18,16,D,L,L,W,W