merge

index.html

@@ -42,27 +42,9 @@
                 }
             },
             methods:{
-                addTeam: function(equipe){
+
-                    if(!this.edit){//adding a team
-                        this.teams.push(equipe);
-                    }
-                    else{//editing a team
-                        this.teams.forEach((e,idx) => {
-                            if(e.id==this.newTeam.id&&e.name==this.newTeam.name&&e.description==this.newTeam.description){
-                                this.teams[idx]=equipe;
-                            }
-                        });
-                        this.edit=false;
-                        this.newTeam=null;
-                    }
-                },
-                editTeam: function (team) {
-                    this.newTeam=team;
-                    this.edit=!this.edit;
-                }
             }
         });
-
         app.component('NavBar', NavBar);
         app.component('TeamCard', TeamCard);
         app.component('NewsCard',NewsCard);

src/class/api-service.js

@@ -1,7 +1,7 @@
 class ApiService{
     constructor(){}
-    async get(id){
+    async get(link){
-        const baseUrl = `https://newsapi.org/v2/everything?q=esport&apiKey=${KEYAPI}`;//edit
+        const baseUrl = `${link}`;//edit
         const headers = {
             method: 'GET'
         };
@@ -11,8 +11,8 @@ class ApiService{
         console.log("responseJson",responseJson)
         return responseJson;
     }
-    async post(){
+    async post(link){
-        const baseUrl = `https://jsonplaceholder.typicode.com/posts/`;//edit
+        const baseUrl = `${link}`;//edit
         const headers = {
             method: 'POST',
             headers: {

src/view/nav-bar.js

@@ -2,19 +2,35 @@ export default{
     emits: ['addTeam'],
 	data : function(){
 		return {
-			Home: '',
+			teams:[],
-			Teams: '',
-			Results: '',
 			id:'',
 			name:'',
 			description:'',
-			clicked: false,
+			teamClicked: false,
-			errMessage:''
+			homeClicked: false,
+			errMessage:'',
+			edit:false,
+			idxEdit:null
 		}
 	},
 	methods: {
-		myfun: function() {
+		clickTeams: function() {
-			this.clicked=!this.clicked;
+			if(!this.teamClicked){
+				this.teamClicked=true;
+				this.homeClicked=false;
+			}
+			else{
+				this.teamClicked=false;
+			}
+		},
+		clickHome: function() {
+			if(!this.homeClicked){
+				this.homeClicked=true;
+				this.teamClicked=false;
+			}
+			else{
+				this.homeClicked=false;
+			}
 		},
 		checkFields: function() {
 			this.errMessage="";
@@ -28,7 +44,7 @@ export default{
 					document.querySelector("#id").setAttribute("style","border: 1px solid #d66");
 				}
 				if(this.name===""){
-					this.errMessage+="  name";
+					this.errMessage+=" name";
 					document.querySelector("#name").setAttribute("style","border: 1px solid #d66");
 				}
 				if(this.description===""){
@@ -49,44 +65,83 @@ export default{
 				this.addTeam();
 			}
 		},
-		addTeam: function() {
+		addTeam: function(){
 			let team = new Team(this.id, this.name, this.description);
 			console.log(team);
-            this.$emit("addTeam",team);
+			if(!this.edit){//adding a team
-			this.id='';
+				this.teams.push(team);
-			this.name='';
+				this.id='';
-			this.description='';
+				this.name='';
+				this.description='';
+			}
+			else{//editing a team
+				this.teams[this.idxEdit]=team;
+				this.id='';
+				this.name='';
+				this.description='';
+				this.edit=false;
+			}
 		},
-        myfun: function() {
+		editTeam: function (team) {
-			this.clicked=!this.clicked;
+			this.edit=!this.edit;
+			this.teams.forEach((e,idx) => {
+				if(e.id==team.id&&e.name==team.name&&e.description==team.description){
+					this.idxEdit=idx;
+				}
+			});
+			if(this.edit){
+				this.id=team.id;
+				this.name=team.name	;
+				this.description=team.description;
+			}
+			else{
+				this.id='';
+				this.name='';
+				this.description='';
+			}
+		},
+		Export:function(){
+			console.log(JSON.stringify(this.teams))
 		}
 	},
 	template: 
 		`
 			<div>
-				<span>Home</span>
+				<span @click="clickHome" style="cursor: pointer">Home</span>
-				<span @click="myfun" style="cursor: pointer">Teams</span>
+				<span @click="clickTeams" style="cursor: pointer">Teams</span>
 				<span>Results</span>
 			</div>
-			<form @submit.prevent v-if="clicked">
+			<div id="Home" v-if="homeClicked">
-			<br>
+				<h2>Homeee</h2>
-			<label>{{errMessage}}</label><br/>
-			<div>
-				<label>id</label><br/>
-				<input id="id" type="number" v-model="id"/>
-			</div>
-			
-			<div>
-				<label>Name</label><br/>
-				<input id="name" type="text" v-model="name"/>
 			</div>
 
-			<div>
+			<div id="Teams" v-if="teamClicked">
-				<label>Description</label><br/>
+				<form @submit.prevent>
-				<textarea id="desc" v-model="description"></textarea>
+				<br>
-			</div>
+				<label>{{errMessage}}</label><br/>
+				<div>
+					<label>id</label><br/>
+					<input id="id" type="number" v-model="id"/>
+				</div>
+				
+				<div>
+					<label>Name</label><br/>
+					<input id="name" type="text" v-model="name"/>
+				</div>
 
-			<input type="submit" value="Submit" v-on:click="checkFields"/>
+				<div>
-			</form>
+					<label>Description</label><br/>
+					<textarea id="desc" v-model="description"></textarea>
+				</div>
+
+				<input type="submit" value="Submit" v-on:click="checkFields"/>
+				</form>
+				<team-card @edit-team="editTeam" v-for="team in teams"
+					:id="team.id"
+					:nom="team.name"
+					:description="team.description">
+	 			</team-card>
+				<input type="submit" value="Export" v-if="teams.length>0" v-on:click="Export" />
+			</div>
 		`
 }