Compare commits
38 Commits
@ -1,2 +1,3 @@
|
|||||||
let linkService = new LinkService();
|
let linkService = new LinkService();
|
||||||
linkService.getLinks();
|
linkService.getLinks();
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,29 @@
|
|||||||
|
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.');
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
const KEYAPI = "1639059dc5a942089bd2d29db40ee7e7"
|
||||||
@ -1,82 +1,220 @@
|
|||||||
export default{
|
export default{
|
||||||
emits: ['addTeam'],
|
|
||||||
data : function(){
|
data : function(){
|
||||||
return {
|
return {
|
||||||
Home: '',
|
teams:[],
|
||||||
Teams: '',
|
news: [],
|
||||||
Results: '',
|
id: 1,
|
||||||
id:'',
|
|
||||||
name:'',
|
name:'',
|
||||||
description:'',
|
description:'',
|
||||||
clicked: false,
|
teamClicked: false,
|
||||||
errMessage:''
|
homeClicked: false,
|
||||||
|
resultsClicked: false,
|
||||||
|
errMessage:'',
|
||||||
|
errMessageMatch: '',
|
||||||
|
edit:false,
|
||||||
|
idxEdit:null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
myfun: function() {
|
clickTeams: function() {
|
||||||
this.clicked=!this.clicked;
|
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() {
|
checkFields: function() {
|
||||||
if(this.id===""){
|
this.errMessage="";
|
||||||
this.errMessage+="The id field must be required "
|
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");
|
||||||
}
|
}
|
||||||
else if(this.name===""){
|
if(this.description===""){
|
||||||
this.errMessage+="The name field must be required "
|
this.errMessage+=" description";
|
||||||
|
document.querySelector("#desc").setAttribute("style","border: 1px solid #d66");
|
||||||
}
|
}
|
||||||
else if(this.description===""){
|
this.errMessage+=" field must be required ";
|
||||||
this.errMessage+="The description 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.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.name='';
|
||||||
|
this.description='';
|
||||||
|
this.edit=false;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
myfun: function() {
|
editTeam: function (team) {
|
||||||
console.log("gngn");
|
this.edit=!this.edit;
|
||||||
this.clicked=!this.clicked;
|
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>Home</span>
|
<span @click="clickHome" style="cursor: pointer">Home</span>
|
||||||
<span @click="myfun" style="cursor: pointer">Teams</span>
|
<span @click="clickTeams" style="cursor: pointer">Teams</span>
|
||||||
<span>Results</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>
|
||||||
<form @submit.prevent v-if="clicked">
|
<div id="Teams" v-if="teamClicked">
|
||||||
|
<form @submit.prevent>
|
||||||
<br>
|
<br>
|
||||||
<label>{{errMessage}}</label><br/>
|
<label>{{errMessage}}</label><br/>
|
||||||
<div>
|
|
||||||
<label>id</label><br/>
|
|
||||||
<input type="number" v-model="id"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label>Name</label><br/>
|
<label>Name</label><br/>
|
||||||
<input type="text" v-model="name"/>
|
<input id="name" type="text" v-model="name"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label>Description</label><br/>
|
<label>Description</label><br/>
|
||||||
<textarea v-model="description"></textarea>
|
<textarea id="desc" v-model="description"></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="submit" value="Submit" v-on:click="checkFields"/>
|
<input type="submit" value="Submit" v-on:click="checkFields"/>
|
||||||
</form>
|
</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>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
|
`
|
||||||
|
}
|
||||||
@ -1,14 +1,20 @@
|
|||||||
export default{
|
export default{
|
||||||
|
emits: ['editTeam'],
|
||||||
props: {
|
props: {
|
||||||
id: Number,
|
id: Number,
|
||||||
nom: String,
|
nom: String,
|
||||||
description: String
|
description: String
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
edit: function() {
|
||||||
|
this.$emit("editTeam", new Team(this.id,this.nom,this.description))
|
||||||
|
}
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
|
<br>
|
||||||
<div id="teamCard">
|
<div id="teamCard">
|
||||||
<span>{{id}} {{nom}} description: {{description}}</span>
|
<span>{{id}} {{nom}} description: {{description}}</span>
|
||||||
|
<span @click="edit" style="cursor: pointer"> - éditer</span>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue