Compare commits
2 Commits
| Author | SHA1 | Date |
|---|---|---|
 Aurian JAULT
|
2921e151c7 | 2 years ago |
|
Aurian JAULT
|
52be120b85 | 2 years ago |
@ -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.');
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -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 +0,0 @@
|
||||
const KEYAPI = "1639059dc5a942089bd2d29db40ee7e7"
|
||||
@ -1,220 +1,82 @@
|
||||
export default{
|
||||
emits: ['addTeam'],
|
||||
data : function(){
|
||||
return {
|
||||
teams:[],
|
||||
news: [],
|
||||
id: 1,
|
||||
Home: '',
|
||||
Teams: '',
|
||||
Results: '',
|
||||
id:'',
|
||||
name:'',
|
||||
description:'',
|
||||
teamClicked: false,
|
||||
homeClicked: false,
|
||||
resultsClicked: false,
|
||||
errMessage:'',
|
||||
errMessageMatch: '',
|
||||
edit:false,
|
||||
idxEdit:null
|
||||
clicked: false,
|
||||
errMessage:''
|
||||
}
|
||||
},
|
||||
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.clicked=!this.clicked;
|
||||
},
|
||||
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.id===""){
|
||||
this.errMessage+="The id field must be required "
|
||||
}
|
||||
if(this.description===""){
|
||||
this.errMessage+=" description";
|
||||
document.querySelector("#desc").setAttribute("style","border: 1px solid #d66");
|
||||
else if(this.name===""){
|
||||
this.errMessage+="The name field must be required "
|
||||
}
|
||||
this.errMessage+=" field must be required ";
|
||||
else if(this.description===""){
|
||||
this.errMessage+="The description field must be required "
|
||||
}
|
||||
else{
|
||||
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){
|
||||
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){
|
||||
console.log("jappelle la fonction")
|
||||
this.addTeam();
|
||||
}
|
||||
},
|
||||
addTeam: function() {
|
||||
if(!this.edit){//adding a team
|
||||
let team = new Team(this.id, this.name, this.description);
|
||||
console.log(team);
|
||||
this.teams.push(team);
|
||||
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.$emit("addTeam",team);
|
||||
this.id='';
|
||||
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(){
|
||||
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"
|
||||
}
|
||||
myfun: function() {
|
||||
console.log("gngn");
|
||||
this.clicked=!this.clicked;
|
||||
}
|
||||
},
|
||||
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>
|
||||
<form @submit.prevent v-if="clicked">
|
||||
<br>
|
||||
<label>{{errMessage}}</label><br/>
|
||||
<div>
|
||||
<label>id</label><br/>
|
||||
<input type="number" v-model="id"/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<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>
|
||||
<textarea 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 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>
|
||||
`
|
||||
}
|
||||
|
||||
@ -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>
|
||||
`
|
||||
}
|
||||
@ -1,20 +1,19 @@
|
||||
export default{
|
||||
emits: ['editTeam'],
|
||||
props: {
|
||||
id: Number,
|
||||
nom: String,
|
||||
description: String
|
||||
},
|
||||
methods: {
|
||||
edit: function() {
|
||||
this.$emit("editTeam", new Team(this.id,this.nom,this.description))
|
||||
test: function(){
|
||||
console.log("test")
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<br>
|
||||
<div id="teamCard">
|
||||
<span>{{id}} {{nom}} description: {{description}}</span>
|
||||
<span @click="edit" style="cursor: pointer"> - éditer</span>
|
||||
<span>{{id}} {{nom}} description: {{description.slice(0,20)}}</span>
|
||||
<br>
|
||||
<span v-on:click="test">Editer</span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue