Retrieved and display list of footrix.club_player id & name at /players

backend/src/main/java/com/sg/backend/config/SecurityConfiguration.java

@@ -18,7 +18,7 @@ public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
         http.cors().and().csrf().disable().antMatcher("/**")
                 .authorizeRequests()
                 .antMatchers("/login", "/error", "/auth/google/callback",
-                        "/login/oauth2/code/github","/login/oauth/access_token","/login/oauth/access_token?code=", "/token", "/contact","/club/squad")
+                        "/login/oauth2/code/github","/login/oauth/access_token","/login/oauth/access_token?code=", "/token", "/contact","/club/squad","/players")
                 .permitAll()
                 .anyRequest()
                 .authenticated()

backend/src/main/java/com/sg/backend/controllers/PlayerController.java

@@ -0,0 +1,32 @@
+package com.sg.backend.controllers;
+
+import java.util.List;
+
+import javax.servlet.http.HttpSession;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.CrossOrigin;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import com.sg.backend.models.PlayerSQL;
+import com.sg.backend.repositories.ClubRepository;
+
+
+@RestController
+@RequestMapping
+@CrossOrigin(origins = "*", allowedHeaders = "*")
+public class PlayerController {
+
+    @Autowired
+    private ClubRepository clubRepo;
+
+    // use this to retrieve from SQL
+    @GetMapping(path = "/players")
+    @CrossOrigin(origins = "*", allowedHeaders = "*")
+    public List<PlayerSQL> getPlayerList(HttpSession sess){
+       List<PlayerSQL> players = clubRepo.getPlayerList();
+        return players;
+    }
+}

backend/src/main/java/com/sg/backend/models/PlayerSQL.java

@@ -0,0 +1,28 @@
+package com.sg.backend.models;
+
+public class PlayerSQL {
+    private String id;
+    private String name;
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    @Override
+    public String toString() {
+        return "PlayerSQL [id=" + id + ", name=" + name + "]";
+    }
+
+}

backend/src/main/java/com/sg/backend/repositories/ClubRepository.java

@@ -1,12 +1,16 @@
 package com.sg.backend.repositories;
 
+import java.sql.ResultSet;
+import java.sql.SQLException;
 import java.util.List;
 
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.jdbc.core.RowMapper;
 import org.springframework.stereotype.Repository;
 
 import com.sg.backend.models.Club;
+import com.sg.backend.models.PlayerSQL;
 
 @Repository
 public class ClubRepository {
@@ -38,4 +42,16 @@ public List<String> getPlayerIds() {
         List<String> ids = template.queryForList(Queries.SQL_ID_CLUB_PLAYER, String.class);
         return ids;
     }
+
+    public List<PlayerSQL> getPlayerList() {
+        List<PlayerSQL> players = template.query(Queries.SQL_VIEW_ALL_CLUB_PLAYER, new RowMapper<PlayerSQL>() {
+            public PlayerSQL mapRow(ResultSet rs, int rowNum) throws SQLException {
+                PlayerSQL player = new PlayerSQL();
+                player.setId(rs.getString("id"));
+                player.setName(rs.getString("name"));
+                return player;
+            }
+        });
+        return players;
+    }
 }

backend/src/main/java/com/sg/backend/repositories/Queries.java

@@ -5,4 +5,5 @@ public class Queries {
     public static String SQL_VIEW_ALL_CONTACT = "select * from contact";
     public static String SQL_INSERT_CLUB_PLAYER = "insert into club_player(id, name) values (?, ?)";
     public static String SQL_ID_CLUB_PLAYER = "select id from club_player";
+    public static String SQL_VIEW_ALL_CLUB_PLAYER = "select * from club_player";
 }

frontend/src/app/app.module.ts

@@ -24,6 +24,8 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { ClubsComponent } from './components/clubs.component';
 import { ClubService } from './clubs.service';
+import { StatsService } from './stats.service';
+import { StatsComponent } from './components/stats.component';
 
 const appRoutes: Routes = [
   { path: '', component: MainComponent },
@@ -35,6 +37,8 @@ const appRoutes: Routes = [
   { path: 'contact', component: ContactComponent },
   { path: 'club', component: ClubsComponent },
   { path: 'club/squad', component: ClubsComponent },
+  { path: 'players/stats', component: StatsComponent},
+  { path: 'players', component: StatsComponent},
   { path: '**', redirectTo: '/', pathMatch: 'full' },
 ];
 
@@ -48,6 +52,7 @@ const appRoutes: Routes = [
     Googleoauth2Component,
     ContactComponent,
     ClubsComponent,
+    StatsComponent,
   ],
   imports: [
     FormsModule,
@@ -67,7 +72,7 @@ const appRoutes: Routes = [
     MatFormFieldModule
 
   ],
-  providers: [UserService,ContactService,ClubService],
+  providers: [UserService,ContactService,ClubService,StatsService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

frontend/src/app/components/stats.component.css

@@ -0,0 +1,81 @@
+/* Toolbar */
+.black-toolbar {
+    background-color: #716b6b;
+    position: relative;
+  }
+
+  .black-toolbar::before,
+  .black-toolbar::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 50%;
+    height: 100%;
+    background-color: inherit;
+    z-index: -1;
+  }
+
+  .black-toolbar::before {
+    left: 0;
+    border-radius: 10px 0 0 10px;
+  }
+
+  .black-toolbar::after {
+    right: 0;
+    border-radius: 0 10px 10px 0;
+  }
+
+  .logo {
+    height: 50px;
+    margin-right: 20px;
+    z-index: 9999;
+  }
+
+  .button-anim {
+    transition: transform 0.3s;
+  }
+
+  .button-anim:hover {
+    transform: translateY(-3px);
+  }
+
+  .mat-menu-panel {
+    background-color: #424242;
+  }
+
+  .mat-menu-item:hover {
+    background-color: #757575;
+  }
+
+  .mat-menu-trigger:hover {
+    cursor: pointer;
+  }
+
+
+  .button-anim span {
+      position: relative;
+      z-index: 1;
+  }
+  /* Player list */
+  .player-table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  .player-table th,
+  .player-table td {
+    padding: 8px;
+    text-align: left;
+    font-size: 14px;
+    border-bottom: 1px solid #ddd;
+  }
+
+  .player-table th {
+    background-color: #f2f2f2;
+    font-weight: bold;
+  }
+
+  .player-table tr:hover {
+    background-color: #f5f5f5;
+  }
+

frontend/src/app/components/stats.component.html

@@ -0,0 +1,35 @@
+<mat-toolbar color="primary" class="black-toolbar">
+    <div style="display: flex; align-items: center;">
+        <button mat-button routerLink="/" class="button-anim">
+            <img src="../../assets/premier-league.svg" alt="Logo" style="height: 50px; margin-right: 20px;">
+        </button>
+        <div style="flex: 1;">
+            <button mat-button [matMenuTriggerFor]="dashboardMenu" matMenuTriggerHover class="button-anim">Dashboard
+                <mat-icon matSuffix>arrow_drop_down</mat-icon></button>
+            <mat-menu #dashboardMenu="matMenu">
+                <button mat-menu-item routerLink="/analytics">Analytics</button>
+                <button mat-menu-item routerLink="/matches">Matches</button>
+                <button mat-menu-item routerLink="/players">Players</button>
+                <button mat-menu-item routerLink="/club">Clubs</button>
+            </mat-menu>
+            <button mat-button routerLink="/account" class="button-anim">Account</button>
+            <button mat-button routerLink="/contact" class="button-anim">Contact</button>
+            <button mat-button routerLink="/about" class="button-anim">About Us</button>
+        </div>
+    </div>
+</mat-toolbar>
+
+<table class="player-table">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Name</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let p of playerSQL | async">
+            <td>{{ p.id }}</td>
+            <td>{{ p.name }}</td>
+        </tr>
+    </tbody>
+</table>

frontend/src/app/components/stats.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { PlayerSQL, Stats } from '../models';
+import { StatsService } from '../stats.service';
+
+@Component({
+  selector: 'app-stats',
+  templateUrl: './stats.component.html',
+  styleUrls: ['./stats.component.css']
+})
+export class StatsComponent {
+  stats: Observable<Stats[]> | undefined;
+  playerSQL: Observable<PlayerSQL[]> | undefined;
+
+  constructor(private statService: StatsService) { }
+
+  ngOnInit() {
+    this.getListFromSQL();
+  }
+
+  getListFromSQL() {
+    console.log("fetching from list of players from MySQL")
+    this.playerSQL = this.statService.getListFromSQL();
+  }
+}

frontend/src/app/models.ts

@@ -24,3 +24,23 @@ export interface Club {
     id: string;
     heroImage: string;
 }
+
+export interface Stats {
+    ownGoals: string;
+    yellowCards: string;
+    redCards: string;
+    minutesPlayed: string;
+    matches: string;
+    goals: string;
+    assists: string;
+    // clean sheet = toNil
+    // will need to hide this stats if player is not a goalkeeper
+    toNil: string;
+    concededGoals : string;
+    isGoalkeeper : boolean;
+}
+
+export interface PlayerSQL {
+    id: string;
+    name: string;
+}

frontend/src/app/stats.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { PlayerSQL, Stats } from "./models";
+
+@Injectable()
+export class StatsService {
+
+    constructor(private http: HttpClient) { }
+
+    getStats(id: String) {
+        const url = `http://localhost:8080/player/stats?id=${id}`;
+        console.log("url", url)
+        return this.http.get<Stats[]>(url);
+    }
+
+    getListFromSQL() {
+        const url = `http://localhost:8080/players`;
+        console.log("url", url)
+        return this.http.get<PlayerSQL[]>(url);
+    }
+}

schema.sql

@@ -22,3 +22,18 @@ CREATE TABLE `club_player` (
   UNIQUE(`id`),
   PRIMARY KEY (`id`)
 );
+
+CREATE TABLE `player_stats` (
+  `id` INT NOT NULL AUTO_INCREMENT,
+  `club_player_id` CHAR(8) NOT NULL,
+  `goals` INT,
+  `assists` INT,
+  `yellowCards` INT,
+  `redCards` INT,
+  `cleanSheets` INT,
+  `concededGoals` INT,
+  `isGoalkeeper` BOOLEAN,
+  UNIQUE(`id`),
+  PRIMARY KEY (`id`),
+  FOREIGN KEY (`club_player_id`) REFERENCES `club_player`(`id`)
+);