index.html

@@ -10,43 +10,29 @@
     <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('TeamCard', TeamCard);
-        app.component('NewsCard',NewsCard);
         app.component('NavBar', NavBar);
+        app.component('TeamCard', TeamCard);
 
         app.mount('#app');
     </script>

main.js

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

package.json

@@ -4,12 +4,8 @@
   "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",
-  "keywords": [
-    "JavaScript"
-  ]
+  "license": "ISC"
 }

src/class/api-service.js

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

src/class/news-service.js

@@ -1,15 +0,0 @@
-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

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

src/view/nav-bar.js

@@ -1,62 +1,32 @@
 export default{
+    emits: ['addTeam'],
 	data : function(){
 		return {
 			teams:[],
-      news: [],
-			id: 1,
+			id:'',
 			name:'',
 			description:'',
 			teamClicked: false,
-			homeClicked: false,
-      resultsClicked: false,
 			errMessage:'',
-      errMessageMatch: '',
 			edit:false,
 			idxEdit:null
 		}
 	},
 	methods: {
-		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
-      }
+		myfun: function() {
+			this.teamClicked=!this.teamClicked;
 		},
 		checkFields: function() {
 			this.errMessage="";
+			document.querySelector("#id").removeAttribute("style");
 			document.querySelector("#name").removeAttribute("style");
 			document.querySelector("#desc").removeAttribute("style");
-			if(this.name===""||this.description===""){
+			if(this.id===""||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");
@@ -80,18 +50,17 @@ export default{
 			}
 		},
 		addTeam: function(){
-			if(!this.edit){//adding a team
 			let team = new Team(this.id, this.name, this.description);
 			console.log(team);
+			if(!this.edit){//adding a 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;
@@ -105,70 +74,35 @@ 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 @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"/>
+				<span>Home</span>
+				<span @click="myfun" style="cursor: pointer">Teams</span>
+				<span>Results</span>
 			</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/>
@@ -189,32 +123,5 @@ 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

@@ -1,12 +0,0 @@
-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>
-    `
-}