Start hooking my-team page up to the API

frontend/src/components/pages/MyTeam.component.js

@@ -1,5 +1,6 @@
 import {Component} from '../../../lib/vues6.js'
 import {GridCellRenderType} from '../Grid.component.js'
+import {api} from '../../module/api.js'
 
 const template = `
 <div class="page-my-team">
@@ -168,12 +169,12 @@ class MyTeamComponent extends Component {
     overall_column_defs = [
         {
             header: 'Name',
-            key: 'player_name',
+            key: 'name',
             type: GridCellRenderType.HTML,
             renderer: (_, data) => `
                 <div class="center">
-                    <img src="${data.image}" alt="${data.player_name}" height="50" style="border-radius: 50%">
-                    <span>${data.player_name}</span>
+                    <img src="${data.image}" alt="${data.name}" height="50" style="border-radius: 50%">
+                    <span>${data.name} (#${data.number})</span>
                 </div>
             `,
         },
@@ -192,56 +193,18 @@ class MyTeamComponent extends Component {
      * Data for the overall team grid (list of user's team players).
      * @type {object[]}
      */
-    overall_data = [
-        {
-            player_name: 'Christian McCaffrey',
-            position: 'RB1',
-            ecr: '0.0',
-            "image": "https://images.generated.photos/eGoWRgqxtahGFDAD81-l8CNxdz1oe-huz3CQ7m3v0VI/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAzNDA0NDlfMDgz/MDY1Nl8wMTk4NTI4/LmpwZw.jpg",
-        },
-        {
-            player_name: 'Ezekiel Elliott',
-            position: 'RB3',
-            ecr: '1.0',
-            "image": "https://images.generated.photos/fd8kkioB4vLw_5MGwQXdDt9Q7Ley2_Ia8Cu390zaNVM/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA0Nzg2ODEuanBn.jpg",
-        },
-        {
-            player_name: 'Dalvin Cook',
-            position: 'RB5',
-            ecr: '0.0',
-            "image": "https://images.generated.photos/PEBx5b8_iPHU_nJpJbh3geUN8cBFglHVAAR9NktzXsk/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAxODI1NzlfMDgx/MTA0OV8wNDQzOTM5/LmpwZw.jpg",
-        },
-        {
-            player_name: 'Alvin Kamara',
-            position: 'RB6',
-            ecr: '-1.0',
-            "image": "https://images.generated.photos/cb3jAo-GBziFLxs85KJGt7a8bJdhz4sSy76PYAXkeg4/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzA1ODU4MDBfMDMy/NjY2OF8wODEwNTA2/LmpwZw.jpg",
-        },
-        {
-            player_name: 'Michael Thomas',
-            position: 'WR1',
-            ecr: '3.0',
-            "image": "https://images.generated.photos/LLiy3FypH5A1suda78U82t_Kcn9AlJwZt1g3w1p5DwE/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAzODc0NjlfMDUy/MDc0NF8wNzc3NzQ5/LmpwZw.jpg",
-        },
-        {
-            player_name: 'Davante Adams',
-            position: 'WR2',
-            ecr: '4.0',
-            "image": "https://images.generated.photos/dW84LNLE4Kzp73NTTnL68U--dYuq8CCzD-dGTs76U38/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAyNjE1NjZfMDEz/NDM1NF8wMTg5MjI0/LmpwZw.jpg",
-        },
-        {
-            player_name: 'Travis Kelce',
-            position: 'TE1',
-            ecr: '-4.0',
-            "image": "https://images.generated.photos/erudOopARQnXWNaLqkIPRLLMLAVBr8m70aFC_dtYu1Y/rs:fit:128:128/Z3M6Ly9nZW5lcmF0/ZWQtcGhvdG9zL3Yz/XzAzODA5MTVfMDkx/MzIzN18wNDQxMTk4/LmpwZw.jpg",
-        },
-    ]
+    overall_data = []
 
     /**
      * Called when the component is instantiated. Initializes the bench players data.
      * @return {Promise<void>}
      */
     async vue_on_create() {
+        console.log('api', api)
+        const my_team = await api.get_my_team()
+        this.team_name = my_team.team_name
+        this.overall_data = await api.get_my_team_players()
+
         this.bench_players = this.overall_data.map(x => { x = {...x, position: 'B'}; return x })
 
         setTimeout(() => {

frontend/src/module/api.js

@@ -0,0 +1,28 @@
+class API {
+    constructor() {
+        this.base_url = APP_BASE_PATH.replace('/app/', '/api/v1/')
+    }
+
+    async get_my_team() {
+        return this.get_request('my-team')
+    }
+
+    async get_my_team_players() {
+        return this.get_request('my-team/players')
+    }
+
+    async get_request(...parts) {
+        const url = this.build_url(...parts)
+        const result = await fetch(url)
+        return (await result.json()).data
+    }
+
+    build_url(...parts) {
+        let url = parts.join('/')
+        if ( url.startsWith('/') ) url = url.slice(1)
+        return `${this.base_url}${url}`
+    }
+}
+
+const api = new API()
+export { api }