LAST COMMIT I HOPE

index.html

@@ -10,29 +10,43 @@
     <div id="app">
         <h1>TP-noté</h1>
         <nav-bar></nav-bar>
+
+        <team-card @edit-team="editTeam" 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/class/api-service.js"></script>
+    <script src="src/class/news-service.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';
+        import NewsCard from '/src/view/news-card.js';
+
         const app = createApp({
             created(){},
             data(){
                 return{
+                    teams: [],
+                    edit:false,
+                    newTeam:null,
+                    news: []
                 }
             },
             methods:{
 
             }
         });
-        app.component('NavBar', NavBar);
         app.component('TeamCard', TeamCard);
+        app.component('NewsCard',NewsCard);
+        app.component('NavBar', NavBar);
 
         app.mount('#app');
     </script>

main.js

@@ -1,6 +1,3 @@
 let linkService = new LinkService();
 linkService.getLinks();
 
-
-let api = new ApiService()
-console.log("api get",api.get(2))

package.json

@@ -4,8 +4,12 @@
   "description": "2a tp note js",
   "main": "main.js",
   "scripts": {
+    "serve": "npx serv",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "jault aurian & jacquelin bastien",
-  "license": "ISC"
+  "license": "ISC",
+  "keywords": [
+    "JavaScript"
+  ]
 }

src/class/api-service.js

@@ -6,11 +6,10 @@ class ApiService{
             method: 'GET'
         };
         let response = await fetch(baseUrl, headers);
-        console.log("response",response)
         let responseJson = await response.json()
-        console.log("responseJson",responseJson)
+        return responseJson
     }
-    async post(link){
+    async post(link,value){
         const baseUrl = `${link}`;//edit
         const headers = {
             method: 'POST',
@@ -18,9 +17,7 @@ class ApiService{
                 'Accept': 'application/json',
                 'Content-Type': 'application/json'
             },
-            body: JSON.stringify({
-                word:"yessss"
-            })
+            body: JSON.stringify(value)
         };
         fetch(baseUrl, headers).then( (response) => { 
             if (response.ok)

src/class/news-service.js

@@ -0,0 +1,15 @@
+class NewsService{
+    constructor(){}
+
+    async getNews(){
+        const url = "https://newsapi.org/v2/everything?q=esport&apiKey=1639059dc5a942089bd2d29db40ee7e7";
+        const api = new ApiService()
+        let response = await api.get(url);
+        let tab = []
+        for (let i = 0; i < 5; i++) {
+            tab.push(response.articles[i]); 
+        }
+        return tab;
+    }
+
+}

src/misc/const.js

@@ -0,0 +1 @@
+const KEYAPI = "1639059dc5a942089bd2d29db40ee7e7"

src/view/nav-bar.js

@@ -1,32 +1,62 @@
 export default{
-    emits: ['addTeam'],
 	data : function(){
 		return {
 			teams:[],
-			id:'',
+      news: [],
+			id: 1,
 			name:'',
 			description:'',
 			teamClicked: false,
+			homeClicked: false,
+      resultsClicked: false,
 			errMessage:'',
+      errMessageMatch: '',
 			edit:false,
 			idxEdit:null
 		}
 	},
 	methods: {
-		myfun: function() {
-			this.teamClicked=!this.teamClicked;
+		clickTeams: function() {
+			if(!this.teamClicked){
+				this.teamClicked=true;
+				this.homeClicked=false;
+				this.resultsClicked=false;
+			}
+			else{
+				this.teamClicked=false;
+			}
+		},
+		clickHome: async function() {
+			if(!this.homeClicked){
+        const api = new NewsService();
+				let infos = await api.getNews();
+        this.news = infos
+        this.homeClicked=true;
+        this.teamClicked=false;
+        this.resultsClicked=false;
+                
+			}
+			else{
+				this.homeClicked=false;
+			}
 		},
+    clickResults: function(){
+      if(!this.resultsClicked)
+      {
+        this.resultsClicked = true;
+        this.teamClicked=false;
+        this.homeClicked=false;
+      }
+      else{
+        this.resultsClicked = false
+      }
+    },
 		checkFields: function() {
 			this.errMessage="";
-			document.querySelector("#id").removeAttribute("style");
 			document.querySelector("#name").removeAttribute("style");
 			document.querySelector("#desc").removeAttribute("style");
-			if(this.id===""||this.name===""||this.description===""){
+			if(this.name===""||this.description===""){
 				this.errMessage+="The";
-				if(this.id===""){
-					this.errMessage+=" id";
-					document.querySelector("#id").setAttribute("style","border: 1px solid #d66");
-				}
 				if(this.name===""){
 					this.errMessage+=" name";
 					document.querySelector("#name").setAttribute("style","border: 1px solid #d66");
@@ -50,17 +80,18 @@ export default{
 			}
 		},
 		addTeam: function(){
-			let team = new Team(this.id, this.name, this.description);
-			console.log(team);
 			if(!this.edit){//adding a team
+				let team = new Team(this.id, this.name, this.description);
+				console.log(team);
 				this.teams.push(team);
-				this.id='';
 				this.name='';
 				this.description='';
+				this.id=this.id+1
 			}
 			else{//editing a team
+				let team = new Team(this.teams[this.idxEdit].id, this.name, this.description);
+				console.log(team);
 				this.teams[this.idxEdit]=team;
-				this.id='';
 				this.name='';
 				this.description='';
 				this.edit=false;
@@ -74,35 +105,70 @@ export default{
 				}
 			});
 			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))
-		}
+		},
+    Match: function(){
+      this.errMessageMatch=""
+      const equipe1 = document.querySelector("#equipe1").value
+      const equipe2 = document.querySelector("#equipe2").value
+
+      const stringEquipe1Score = document.querySelector("#equipe1Score").value
+      const stringEquipe2Score = document.querySelector("#equipe2Score").value
+
+      const equipe1Score = parseInt(stringEquipe1Score);
+      const equipe2Score = parseInt(stringEquipe2Score);
+      
+      const res = this.teams.filter(item =>  item.name === equipe1)
+
+      const res2 = this.teams.filter(item => item.name === equipe2)
+
+      console.log(res)
+      console.log(res2)
+
+      let tab = [res,res2]
+
+      if (equipe1Score=="" || equipe2Score=="") {
+        this.errMessageMatch="Veuillez rentrer le score de TOUTES les equipes";
+        return;
+      }
+      if (equipe1Score < 0 || equipe2Score < 0) {
+        this.errMessageMatch = "Veuilez rentre un score positif";
+        return
+      }
+      
+      try {
+        const api = ApiService();
+        api.post("http://www.post-result.com",tab)
+      } catch (Error) {
+        this.errMessageMatch="Une erreur sur la requette POST"
+      }
+    }
 	},
 	template: 
 		`
 			<div>
-				<span>Home</span>
-				<span @click="myfun" style="cursor: pointer">Teams</span>
-				<span>Results</span>
+				<span @click="clickHome" style="cursor: pointer">Home</span>
+				<span @click="clickTeams" style="cursor: pointer">Teams</span>
+				<span @click="clickResults" style="cursor: pointer">Results</span>
 			</div>
+      <div v-if="homeClicked">
+      <news-card v-for="info in news" 
+          :title="info.title"
+          :date="info.publishedAt"/>
+      </div>
 			<div id="Teams" v-if="teamClicked">
 				<form @submit.prevent>
 				<br>
 				<label>{{errMessage}}</label><br/>
-				<div>
-					<label>id</label><br/>
-					<input id="id" type="number" v-model="id"/>
-				</div>
 			
 				<div>
 					<label>Name</label><br/>
@@ -123,5 +189,32 @@ export default{
 	 			</team-card>
 				<input type="submit" value="Export" v-if="teams.length>0" v-on:click="Export" />
 			</div>
+
+
+
+      <div v-if="resultsClicked">
+				<label>{{errMessageMatch}}</label><br/>
+         <form @submit.prevent>
+          <label for="equipe1">Choose a Team1:</label>
+          <select name="equipe1" id="equipe1">
+            <option v-for="team in teams"
+              :value="team.name" 
+              :label="team.name"/>
+          </select>
+          <span>Entre le score de l'équipe</span>
+          <input type="number" id="equipe1Score">
+          <br><br>
+          <label for="equipe2">Choose a Team2:</label>
+          <select name="equipe2" id="equipe2">
+            <option v-for="team in teams"
+              :value="team.name" 
+              :label="team.name"/>
+          </select>
+          <span>Entre le score de l'équipe</span>
+          <input type="number" id="equipe2Score">
+          <br><br>
+          <input type="submit" value="Submit" v-on:click="Match">
+        </form> 
+      </div>
 		`
 }

src/view/news-card.js

@@ -0,0 +1,12 @@
+export default{
+    props: {
+        title: String,
+        date: String
+    },
+    template: `
+        <article>
+            <span>{{title}}</span>
+            <p>{{date.replace(/-/gi, "/").replace("Z", "").replace("T"," ").replace(":","h").split(":")[0]}}</p>
+        </article>
+    `
+}