fully functional

@@ -8,41 +8,96 @@
       <div class="assist">
       <div class="assist">
         <b-button v-b-toggle.collapse-predict variant="outline-primary">Pick Assistant</b-button>
         <b-button v-b-toggle.collapse-predict variant="outline-primary">Pick Assistant</b-button>
         <b-collapse id="collapse-predict">
         <b-collapse id="collapse-predict">
-          <h1>the world of sound</h1>          
-          <span v-for="champion in championList">
-            <img v-bind:src="splashLoader(champion)">
-          </span>
+
+          <b-button v-b-toggle.collapse-team variant="outline-primary">Team</b-button>
+          <b-collapse id="collapse-team">
+          <h1>Team Combination</h1>
+          <h1 v-if="teamData">{{ teamData }}</h1>
+            <span v-for="championId in championList">
+              <button v-on:click="inputTeamData(championId)">
+                <img v-bind:src="splashLoader(championId)">
+              </button>
+            </span>
+          </b-collapse>
+
+          <b-button v-b-toggle.collapse-enemy variant="outline-primary">Enemy</b-button>
+          <b-collapse id="collapse-enemy">
+          <h1>Enemy Combination</h1>
+          <h1 v-if="enemyData">{{ enemyData }}</h1>
+            <span v-for="championId in championList">
+              <button v-on:click="inputEnemyData(championId)">
+                <img v-bind:src="splashLoader(championId)">
+              </button>
+            </span>
+          </b-collapse>
+
+          <b-button v-on:click="makePredict(userPk)">Predict</b-button>
+          <div v-for="result in predictResult">
+            <b-card :title="nameTranslator(result['champion'])" :img-src="splashLoader(result['champion'])"></b-card>
+          </div>
+
         </b-collapse>
         </b-collapse>
       </div>    
       </div>    
 
 
-      <div class="team">
-        <div class="team_summary">
-          <div class="team_best">
-            <h1>Best : {{ nameTranslator(inference_team[0]['id']) }}</h1>
-            <img v-bind:src="splashLoader(inference_team[0]['id'])">
+      <b-button v-b-toggle.collapse-team_combination variant="outline-primary">Best Team Combination</b-button>
+      <b-collapse id="collapse-team_combination">
+        <div class="team">
+          <div class="team_summary">
+            <div class="team_best">
+              <h1>Best : {{ nameTranslator(inference_team[0]['id']) }}</h1>
+              <img v-bind:src="splashLoader(inference_team[0]['id'])">
+            </div>
+            <div class="team_worst">
+              <h1>Worst {{ nameTranslator(inference_team[inference_team.length - 1]['id']) }}</h1>
+              <img v-bind:src="splashLoader(inference_team[inference_team.length - 1]['id'])">          
+            </div>
           </div>
           </div>
-          <div class="team_worst">
-            <h1>Worst {{ nameTranslator(inference_team[inference_team.length - 1]['id']) }}</h1>
-            <img v-bind:src="splashLoader(inference_team[inference_team.length - 1]['id'])">          
+          <b-button v-b-toggle.collapse-1 variant="primary">More</b-button>
+          <b-collapse id="collapse-1">
+            <b-container fluid class="wrap">
+              <b-row class="items flex-row flex-nowrap">
+                <template v-for="team, index in inference_team">
+                  <b-card class="card">
+                    <img v-bind:src="splashLoader(team['id'])">
+                    <h3>{{ index + 1 }}. {{ nameTranslator(team['id']) }}</h3>
+                  </b-card>
+                </template>
+              </b-row>
+            </b-container>
+          </b-collapse>
+        </div>
+      </b-collapse>
+
+      <b-button v-b-toggle.collapse-enemy_combination variant="outline-primary">Best Enemy Counterpart</b-button>
+      <b-collapse id="collapse-enemy_combination">
+        <div class="enemy">
+          <div class="enemy_summary">
+            <div class="enemy_best">
+              <h1>Best : {{ nameTranslator(inference_enemy[0]['id']) }}</h1>
+              <img v-bind:src="splashLoader(inference_enemy[0]['id'])">
+            </div>
+            <div class="enemy_worst">
+              <h1>Worst {{ nameTranslator(inference_enemy[inference_enemy.length - 1]['id']) }}</h1>
+              <img v-bind:src="splashLoader(inference_enemy[inference_enemy.length - 1]['id'])">          
+            </div>
           </div>
           </div>
+          <b-button v-b-toggle.collapse-1 variant="primary">More</b-button>
+          <b-collapse id="collapse-1">
+            <b-container fluid class="wrap">
+              <b-row class="items flex-row flex-nowrap">
+                <template v-for="enemy, index in inference_enemy">
+                  <b-card class="card">
+                    <img v-bind:src="splashLoader(enemy['id'])">
+                    <h3>{{ index + 1 }}. {{ nameTranslator(enemy['id']) }}</h3>
+                  </b-card>
+                </template>
+              </b-row>
+            </b-container>
+          </b-collapse>
         </div>
         </div>
-        <b-button v-b-toggle.collapse-1 variant="primary">More</b-button>
-        <b-collapse id="collapse-1">
-          <b-container fluid class="wrap">
-            <b-row class="items flex-row flex-nowrap">
-              <template v-for="team, index in inference_team">
-                <b-card class="card">
-                  <img v-bind:src="splashLoader(team['id'])">
-                  <h3>{{ index + 1 }}. {{ nameTranslator(team['id']) }}</h3>
-                </b-card>
-              </template>
-            </b-row>
-          </b-container>
-        </b-collapse>
-      </div>
+      </b-collapse>
+
 
 
-      <div class="myPick">
-      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -61,7 +116,10 @@ export default {
       inference_secondary: [],
       inference_secondary: [],
       myPick: [],
       myPick: [],
       splash: [],
       splash: [],
-      championList: Array.from(Array(145).keys())
+      championList: Array.from(Array(145).keys()),
+      teamData: [],
+      enemyData: [],
+      predictResult: {}
     }
     }
   },
   },
   created () {
   created () {
@@ -97,6 +155,15 @@ export default {
     splashLoader: function (championId) {
     splashLoader: function (championId) {
       const path = require('../assets/splash/' + String(championId) + '.png')
       const path = require('../assets/splash/' + String(championId) + '.png')
       return path
       return path
+    },
+    inputTeamData: function (championId) { this.teamData.push(championId) },
+    inputEnemyData: function (championId) { this.enemyData.push(championId) },
+    makePredict: function (pk) {
+      this.axios.post('http://127.0.0.1:8000/GameData/' + String(pk) + '/predict/', { team: this.teamData, enemy: this.enemyData })
+      .then((response) => {
+        console.log(response.data)
+        this.predictResult = response.data
+      })
     }
     }
   }
   }
 }
 }