diff --git a/app/routes.py b/app/routes.py
index d448d30c29e712893af7da54d92a8c66bc57e94b..671c034dd38c192e932a5d121a0e87e45ad52ecd 100644
--- a/app/routes.py
+++ b/app/routes.py
@@ -27,7 +27,7 @@ def home():
players = filter_players(data)
for player in players:
player.win_percentage = calculate_win_percentage_overall(player)
- player.transfer_value = transfer_value_overall(player)
+ player.transfer_value = "{:,}".format(transfer_value_overall(player))
player.current_form = int(
round((calculate_win_percentage_overall(player) / 100) * 5, 2)
)
@@ -80,6 +80,12 @@ def team(team_id):
wp_overall = team_win_percentage_overall(team_id)
wp_base = team_win_percentage_base(team_id)
wp_overall_rounded = round(wp_overall, -1)
+ for player in player_list:
+ player.win_percentage = calculate_win_percentage_overall(player)
+ player.transfer_value = "{:,}".format(transfer_value_overall(player))
+ player.current_form = int(
+ round((calculate_win_percentage_overall(player) / 100) * 5, 2)
+ )
for team in teams:
if team.name == team_id:
return render_template(
@@ -90,6 +96,7 @@ def team(team_id):
wp_overall=wp_overall,
wp_base=wp_base,
wp_overall_rounded=wp_overall_rounded,
+ team_win_percentage_last_5=team_win_percentage_last_5(team.name),
)
diff --git a/app/templates/team.html b/app/templates/team.html
index c43eb80d016fe547d3c9bdfe7e732f51a31d8920..7b03a723d648947c90fc7f95402aa2371f83ec9b 100644
--- a/app/templates/team.html
+++ b/app/templates/team.html
@@ -50,45 +50,61 @@
<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
- data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false"
- aria-label="Toggle navigation">
+ data-bs-target="#navbar-player-collapse" aria-controls="navbar-player-collapse"
+ aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="navbarCollapse">
+ <div class="collapse navbar-collapse" id="navbar-player-collapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
- <li class="nav-item px-2">
- <a class="nav-link" id="home" aria-current="page" href="#players">Players</a>
+ <li class="nav-item">
+ <a class="nav-link active" id="players" href="#">Players</a>
</li>
<li class="nav-item">
- <a class="nav-link" id="locations" href="#matches">Match results</a>
+ <a class="nav-link" id="matches" aria-current="page" href="#game-history">Game
+ history</a>
</li>
</ul>
</div>
</div>
</nav>
- <div class="container" id="players" style="padding-top: 60px;">
- <table class="table">
- <thead>
- <tr>
- <th scope="col">Name</th>
- <th scope="col">Team</th>
- <th scope="col">Age</th>
- <th scope="col">Salary (p/w)</th>
- <th scope="col">Contract duration (years)</th>
- </tr>
- </thead>
- <tbody>
- {% for player in players %}
- <tr>
- <td scope="row"><a href="/player/{{ player.name }}">{{ player.name }}</a></td>
- <td><a href="#">{{ player.team }}</a></td>
- <td>{{ player.dob }}</td>
- <td>£{{ player.salary }},000</td>
- <td>{{ player.contract_duration }}</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
+ <div class="container" style="padding-top: 50px;">
+ <div class="wrapper" id="container-players-summary">
+ <table class="table">
+ <thead>
+ <tr>
+ <th scope="col">Name</th>
+ <th scope="col">Team</th>
+ <th scope="col">Salary (per week)</th>
+ <th scope="col">Transfer value</th>
+ <th scope="col">Current form</th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for player in players %}
+ <tr>
+ <td scope="row"><a href="/player/{{ player.name }}">{{ player.name }}</a></td>
+ <td><a href="/team/{{ player.team }}">{{ player.team }}</a></td>
+ <td>£{{ player.salary }}</td>
+ <td>£{{ player.transfer_value }}</td>
+ <td>{% for i in range(player.current_form) %}
+ <i class="fa-solid fa-star"></i>
+ {% endfor %}
+ </td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
+ </div>
+ <div class="wrapper" id="container-game-history">
+ <div class="row" style="height: 200px;">
+ <div class="col-md-3">
+ <p class="h4">Results previous to last 5 game weeks</p>
+ </div>
+ <div class="col flex">
+ <canvas id="myChart1"></canvas>
+ </div>
+ </div>
+ </div>
</main>
@@ -105,9 +121,68 @@
<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>
+
+ <!-- Chart JS -->
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+ <!-- Font Awesome -->
+ <script src="https://kit.fontawesome.com/ce1e657943.js" crossorigin="anonymous"></script>
<script>
loadTemplate(() => { })
changeBorderColour({{ wp_overall }})
+
+ // Hide all divs except players-summary
+ $("#container-game-history").hide()
+
+ // Change div on click
+ $("#players").click(function () {
+ $("#container-game-history").hide()
+ $("#container-players-summary").show()
+ // Add active class to current button (highlight it) via JQuery
+ $(this).addClass("active")
+ $("#matches").removeClass("active")
+ })
+ $("#matches").click(function () {
+ $("#container-players-summary").hide()
+ $("#container-game-history").show()
+ // Add active class to current button (highlight it) via JQuery
+ $(this).addClass("active")
+ $("#players").removeClass("active")
+ })
+
+ // Chart
+ const ctx = document.getElementById('myChart1')
+
+ const labels = ['Total games before week', 'Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5']
+ const data = {
+ labels: labels,
+ datasets: [{
+ label: 'Team win percentage',
+ data: ["{{ team_win_percentage_last_5["fg0"] }}", "{{ team_win_percentage_last_5["fg1"] }}", "{{ team_win_percentage_last_5["fg2"] }}", "{{ team_win_percentage_last_5["fg3"] }}", "{{ team_win_percentage_last_5["fg4"] }}", "{{ team_win_percentage_last_5["fg5"] }}"],
+ fill: false,
+ borderColor: 'rgb(75, 192, 192)',
+ tension: 0.1
+ }]
+ };
+
+ const config = {
+ type: 'line',
+ data: data,
+ options: {
+ responsive: true,
+ maintainAspectRatio: false,
+ scales: {
+ y: {
+ beginAtZero: false
+ }
+ }
+ },
+ };
+
+ var myChart = new Chart(
+ ctx,
+ config
+ );
</script>
</body>