Merge pull request 'Teamcard' (#1) from Teamcard into master

Reviewed-on: #1
1 year ago · 3735137d42
parent cac64b0978 5f9c2fb1f6
commit 3735137d42
4 changed files with 44 additions and 11 deletions
--- a/index.html
+++ b/index.html
@ -9,28 +9,42 @@
 <body>
    <div id="app">
        <h1>TP-noté</h1>
-        <nav-bar></nav-bar>
+        <nav-bar @add-team="addTeam"></nav-bar>
+
+        <team-card v-for="team in teams"
+                   :id="team.id"
+                   :nom="team.name"
+                   :description="team.description">
+        </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,3 +1,2 @@
 let linkService = new LinkService();
 linkService.getLinks();
-
--- a/src/view/nav-bar.js
+++ b/src/view/nav-bar.js
@ -1,4 +1,5 @@
 export default{
+    emits: ['addTeam'],
 	data : function(){
 		return {
 			Home: '',
@ -33,16 +34,21 @@ export default{
 					this.description+="The description must have at least 20 caracters "
 				}
 			}
-			if (this.errMessage.lenght==0) {
+			if(this.errMessage.length===0){
+                console.log("jappelle la fonction")
 				this.addTeam();
 			}
 		},
 		addTeam: function() {
 			let team = new Team(this.id, this.name, this.description);
 			console.log(team);
+            this.$emit("addTeam",team);
 			this.id='';
 			this.name='';
-			this.description='';
+		},
+        myfun: function() {
+			console.log("gngn");
+			this.clicked=!this.clicked;
 		}
 	},
 	template: 
@ -73,4 +79,4 @@ export default{
 			<input type="submit" value="Submit" v-on:click="checkFields"/>
 			</form>
 		`
-}
+}
--- a/src/view/team-card.js
+++ b/src/view/team-card.js
@ -0,0 +1,14 @@
+export default{
+    props: {
+        id: Number,
+        nom: String,
+        description: String
+    },
+    methods: {
+	},
+    template: `
+        <div id="teamCard">
+            <span>{{id}}    {{nom}}    description: {{description}}</span>
+        </div>
+    `
+}