JavaScript-TP_note
/
Projet-note
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: JavaScript-TP_note:master
Branches Tags
JavaScript-TP_note:master
JavaScript-TP_note:question-12
JavaScript-TP_note:Teamcard
JavaScript-TP_note:question-7
JavaScript-TP_note:question-5
JavaScript-TP_note:question-3
..
compare: JavaScript-TP_note:Teamcard
Branches Tags
JavaScript-TP_note:master
JavaScript-TP_note:question-12
JavaScript-TP_note:Teamcard
JavaScript-TP_note:question-7
JavaScript-TP_note:question-5
JavaScript-TP_note:question-3

2 Commits
master ... Teamcard

Author SHA1 Message Date
Aurian JAULT 2921e151c7 Ajout description
2 years ago
Aurian JAULT 52be120b85 show only 20 first charact
2 years ago
9 changed files with 63 additions and 268 deletions
Show Stats

22
index.html
Unescape View File

@ -9,9 +9,9 @@
<body> <body>
<div id="app"> <div id="app">
<h1>TP-noté</h1> <h1>TP-noté</h1>
<nav-bar></nav-bar> <nav-bar @add-team="addTeam"></nav-bar>
<team-card @edit-team="editTeam" v-for="team in teams" <team-card v-for="team in teams"
:id="team.id" :id="team.id"
:nom="team.name" :nom="team.name"
:description="team.description"> :description="team.description">
@ -20,33 +20,29 @@
<script src="src/service/link-service.js"></script> <script src="src/service/link-service.js"></script>
<script src="src/class/team.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="src/misc/const.js"></script>
<script src="main.js"></script> <script src="main.js"></script>
<script type="module"> <script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'; import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
import NavBar from '/src/view/nav-bar.js'; import NavBar from '/src/view/nav-bar.js';
import TeamCard from '/src/view/team-card.js'; import TeamCard from '/src/view/team-card.js';
import NewsCard from '/src/view/news-card.js';
const app = createApp({ const app = createApp({
created(){}, created(){},
data(){ data(){
return{ return{
teams: [], teams: []
edit:false,
newTeam:null,
news: []
} }
}, },
methods:{ methods:{
addTeam: function(equipe){
console.log(equipe);
this.teams.push(equipe);
}
} }
}); });
app.component('TeamCard', TeamCard);
app.component('NewsCard',NewsCard);
app.component('NavBar', NavBar); app.component('NavBar', NavBar);
app.component('TeamCard', TeamCard);
app.mount('#app'); app.mount('#app');
</script> </script>

1
main.js
Unescape View File

@ -1,3 +1,2 @@
let linkService = new LinkService(); let linkService = new LinkService();
linkService.getLinks(); linkService.getLinks();

6
package.json
Unescape View File

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

29
src/class/api-service.js
Unescape View File

@ -1,29 +0,0 @@
class ApiService{
constructor(){}
async get(link){
const baseUrl = `${link}`;//edit
const headers = {
method: 'GET'
};
let response = await fetch(baseUrl, headers);
let responseJson = await response.json()
return responseJson
}
async post(link,value){
const baseUrl = `${link}`;//edit
const headers = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(value)
};
fetch(baseUrl, headers).then( (response) => {
if (response.ok)
console.log("Posted")
else
throw new Error('Une erreur est survenue durant l\'appel HTTP.');
})
}
}

15
src/class/news-service.js
Unescape View File

@ -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;
}
}

1
src/misc/const.js
Unescape View File

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

234
src/view/nav-bar.js
Unescape View File

@ -1,220 +1,82 @@
export default{ export default{
emits: ['addTeam'],
data : function(){ data : function(){
return { return {
teams:[], Home: '',
news: [], Teams: '',
id: 1, Results: '',
id:'',
name:'', name:'',
description:'', description:'',
teamClicked: false, clicked: false,
homeClicked: false, errMessage:''
resultsClicked: false,
errMessage:'',
errMessageMatch: '',
edit:false,
idxEdit:null
} }
}, },
methods: { methods: {
clickTeams: function() { myfun: function() {
if(!this.teamClicked){ this.clicked=!this.clicked;
this.teamClicked=true;
this.homeClicked=false;
this.resultsClicked=false;
}
else{
this.teamClicked=false;
}
}, },
clickHome: async function() { checkFields: function() {
if(!this.homeClicked){ if(this.id===""){
const api = new NewsService(); this.errMessage+="The id field must be required "
let infos = await api.getNews();
this.news = infos
this.homeClicked=true;
this.teamClicked=false;
this.resultsClicked=false;
} }
else{ else if(this.name===""){
this.homeClicked=false; this.errMessage+="The name field must be required "
} }
}, else if(this.description===""){
clickResults: function(){ this.errMessage+="The description field must be required "
if(!this.resultsClicked)
{
this.resultsClicked = true;
this.teamClicked=false;
this.homeClicked=false;
}
else{
this.resultsClicked = false
}
},
checkFields: function() {
this.errMessage="";
document.querySelector("#name").removeAttribute("style");
document.querySelector("#desc").removeAttribute("style");
if(this.name===""||this.description===""){
this.errMessage+="The";
if(this.name===""){
this.errMessage+=" name";
document.querySelector("#name").setAttribute("style","border: 1px solid #d66");
}
if(this.description===""){
this.errMessage+=" description";
document.querySelector("#desc").setAttribute("style","border: 1px solid #d66");
}
this.errMessage+=" field must be required ";
} }
else{ else{
if(this.name.lenght<5){ if(this.name.lenght<5){
this.errMessage+="The name must have at least 5 caracters "; this.errMessage+="The name must have at least 5 caracters "
} }
if(this.description.lenght<20){ if(this.description.lenght<20){
this.description+="The description must have at least 20 caracters "; this.description+="The description must have at least 20 caracters "
} }
} }
if(this.errMessage.length===0){ if(this.errMessage.length===0){
console.log("jappelle la fonction")
this.addTeam(); this.addTeam();
} }
}, },
addTeam: function(){ addTeam: function() {
if(!this.edit){//adding a team let team = new Team(this.id, this.name, this.description);
let team = new Team(this.id, this.name, this.description); console.log(team);
console.log(team); this.$emit("addTeam",team);
this.teams.push(team); this.id='';
this.name=''; 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.name='';
this.description='';
this.edit=false;
}
},
editTeam: function (team) {
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.name=team.name ;
this.description=team.description;
}
else{
this.name='';
this.description='';
}
},
Export:function(){
console.log(JSON.stringify(this.teams))
}, },
Match: function(){ myfun: function() {
this.errMessageMatch="" console.log("gngn");
const equipe1 = document.querySelector("#equipe1").value this.clicked=!this.clicked;
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: template:
` `
<div> <div>
<span @click="clickHome" style="cursor: pointer">Home</span> <span>Home</span>
<span @click="clickTeams" style="cursor: pointer">Teams</span> <span @click="myfun" style="cursor: pointer">Teams</span>
<span @click="clickResults" style="cursor: pointer">Results</span> <span>Results</span>
</div>
<form @submit.prevent v-if="clicked">
<br>
<label>{{errMessage}}</label><br/>
<div>
<label>id</label><br/>
<input type="number" v-model="id"/>
</div> </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> <div>
<label>Name</label><br/> <label>Name</label><br/>
<input id="name" type="text" v-model="name"/> <input type="text" v-model="name"/>
</div>
<div>
<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> </div>
<div>
<label>Description</label><br/>
<textarea v-model="description"></textarea>
</div>
<input type="submit" value="Submit" v-on:click="checkFields"/>
<div v-if="resultsClicked"> </form>
<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>
` `
} }

12
src/view/news-card.js
Unescape View File

@ -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>
`
}

11
src/view/team-card.js
Unescape View File

@ -1,20 +1,19 @@
export default{ export default{
emits: ['editTeam'],
props: { props: {
id: Number, id: Number,
nom: String, nom: String,
description: String description: String
}, },
methods: { methods: {
edit: function() { test: function(){
this.$emit("editTeam", new Team(this.id,this.nom,this.description)) console.log("test")
} }
}, },
template: ` template: `
<br>
<div id="teamCard"> <div id="teamCard">
<span>{{id}} {{nom}} description: {{description}}</span> <span>{{id}} {{nom}} description: {{description.slice(0,20)}}</span>
<span @click="edit" style="cursor: pointer"> - éditer</span> <br>
<span v-on:click="test">Editer</span>
</div> </div>
` `
} }

Write Preview
Loading…
Cancel
Save