Compare commits
No commits in common. 'master' and 'question-7' have entirely different histories.
master
...
question-7
@ -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,76 @@
|
|||||||
export default{
|
export default{
|
||||||
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.lenght==0) {
|
||||||
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.id='';
|
||||||
this.teams.push(team);
|
this.name='';
|
||||||
this.name='';
|
this.description='';
|
||||||
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(){
|
|
||||||
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:
|
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>
|
</div>
|
||||||
<div v-if="homeClicked">
|
<form @submit.prevent v-if="clicked">
|
||||||
<news-card v-for="info in news"
|
<br>
|
||||||
:title="info.title"
|
<label>{{errMessage}}</label><br/>
|
||||||
:date="info.publishedAt"/>
|
<div>
|
||||||
</div>
|
<label>id</label><br/>
|
||||||
<div id="Teams" v-if="teamClicked">
|
<input type="number" v-model="id"/>
|
||||||
<form @submit.prevent>
|
|
||||||
<br>
|
|
||||||
<label>{{errMessage}}</label><br/>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<label>Name</label><br/>
|
|
||||||
<input id="name" 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>Name</label><br/>
|
||||||
|
<input type="text" v-model="name"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label>Description</label><br/>
|
||||||
|
<textarea v-model="description"></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div v-if="resultsClicked">
|
<input type="submit" value="Submit" v-on:click="checkFields"/>
|
||||||
<label>{{errMessageMatch}}</label><br/>
|
</form>
|
||||||
<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 +0,0 @@
|
|||||||
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))
|
|
||||||
}
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<br>
|
|
||||||
<div id="teamCard">
|
|
||||||
<span>{{id}} {{nom}} description: {{description}}</span>
|
|
||||||
<span @click="edit" style="cursor: pointer"> - éditer</span>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue