TEAM-CARD

1 year ago · 78cd2388c7
parent 7999cb5639
commit 78cd2388c7
4 changed files with 32 additions and 24 deletions
--- a/index.html
+++ b/index.html
@ -9,29 +9,41 @@
 <body>
    <div id="app">
        <h1>TP-noté</h1>
-        <nav-bar></nav-bar>
+        <nav-bar @add-teams="addTeam"></nav-bar>
+
+        <team-card v-for="team in teams"
+                   :id="team.id"
+                   :nom="team.name">
+        </team-card>
    </div>

    <script src="src/service/link-service.js"></script>
    <script src="src/class/team.js"></script>
    <script src="src/misc/const.js"></script>
    <script src="main.js"></script>
-
    <script type="module">
-
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        import NavBar from '/src/view/nav-bar.js';
        import TeamCard from '/src/view/team-card.js';
        const app = createApp({
            created(){},
            data(){
-                return{}
+                return{
+                    teams: []
+                }
            },
-            methods:{}
+            methods:{
+                addTeam: function(equipe){
+                    console.log(equipe);
+                    this.teams.push(equipe);
+                }
+            }
        });
+
        app.component('NavBar', NavBar);
        app.component('TeamCard', TeamCard);
+
        app.mount('#app');
    </script>
 </body>
-</html>
+</html>
--- a/main.js
+++ b/main.js
@ -1,4 +1,2 @@
 let linkService = new LinkService();
 linkService.getLinks();
-
-let players = [{nom:"romain",prenom:"albert"},{nom:"romain",prenom:"albert"}];
--- a/src/view/nav-bar.js
+++ b/src/view/nav-bar.js
@ -1,4 +1,5 @@
 export default{
+    emits: ['addTeams'],
 	data : function(){
 		return {
 			Home: '',
@ -10,16 +11,18 @@ export default{
 		}
 	},
 	methods: {
-		myfun: function() {
-			console.log("gngn");
-			this.clicked=!this.clicked;
-		},
-		addTeam: function() {
+	    pushTeam: function() {
 			let team = new Team(this.id, this.name);
-			console.log(team);
+            this.$emit('addTeams',team);
 			this.id='';
 			this.name='';
+
+		},
+        myfun: function() {
+			console.log("gngn");
+			this.clicked=!this.clicked;
 		}
+		
 	},
 	template: 
 		`
@ -40,7 +43,7 @@ export default{
 				<input type="text" v-model="name"/>
 			</div>

-			<input type="submit" value="Submit" @click="addTeam"/>
+			<input type="submit" value="Submit" @click="pushTeam"/>
 			</form>
 		`
 }
--- a/src/view/team-card.js
+++ b/src/view/team-card.js
@ -1,18 +1,13 @@
 export default{
    props: {
-        players: Array,
-    },
-    data : function(){
-        return{
-            id: 0,
-            name: 'Empty'
-        }
+        id: Number,
+        nom: String
    },
    methods: {
 	},
    template: `
-        <div id="teamCard" v-for="player in players">
-            <span>{{player.nom}}    {{player.prenom}}</span>
+        <div id="teamCard">
+            <span>{{id}}    {{nom}}</span>
        </div>
    `
 }