dorian.hodin
/
TP_JavaScript
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Question 13 presque fonctionnelle, il manque que l'ajout des Teams dans le choix déroulant

Browse Source
master
dohodin 2 years ago
parent a166676ac3
commit 403dc7a295
12 changed files with 267 additions and 36 deletions
Show Stats Download Patch File Download Diff File

32
css/style.css
Unescape View File

@ -4,6 +4,15 @@
cursor: pointer; cursor: pointer;
} }
.col-6 {
width: 50%;
display: inline-block;
}
.text-center {
text-align: center;
}
/* Onglet */ /* Onglet */
@ -35,12 +44,18 @@ form input {
display: block; display: block;
} }
.input-group {
margin-bottom: 10px;
}
/* CARD */ /* CARD */
.team-card { .card {
border: #000000 1px solid; border: #000000 1px solid;
border-radius: 5px; border-radius: 5px;
margin: 5px;
padding: 5px;
} }
@ -52,4 +67,17 @@ form input {
.box-error { .box-error {
border: 1px solid red; border: 1px solid red;
} }
#FIRST {
left:0;
position: fixed;
}
#SECOND {
top: 0;
left:25%;
right: 0;
position: fixed;
overflow-y: scroll;
}

BIN
favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

98
index.html
Unescape View File

@ -5,26 +5,91 @@
<head> <head>
<title>My awesome team</title> <title>My awesome team</title>
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/style.css" /> <link rel="stylesheet" href="/css/style.css" />
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<navbar></navbar> <div id="FIRST">
<div class="team"> <navbar></navbar>
<team-add @add-team="addTeam"></team-add>
</div> </div>
<teamcard v-for="team in allTeam"
:id="team.id" <div id="SECOND" style="overflow-y: scroll; height:100%;">
:name="team.name"
:description="team.description"> <div id="HOME" style="display: none">
</teamcard>
<div id="newsList"></div>
<!-- <newscard v-for="news in this.allNews"
:title="news.title"
:publishedAt="news.publishedAt">
</newscard> -->
</div>
<div id="TEAM" style="display: none">
<div class="team">
<team-add @add-team="addTeam"></team-add>
</div>
<teamcard v-for="team in allTeam"
:id="team.id"
:name="team.name"
:description="team.description">
</teamcard>
<button @click="exportTeam">Export</button>
</div>
<div id="RESULTS" style="display: none">
<team-fight v-bind:allTeam="allTeam"></team-fight>
</div>
</div>
</div> </div>
<script src="./src/misc/constant.js"></script> <script src="./src/misc/constant.js"></script>
<script src="./src/error/required_field_error.js"></script> <script src="./src/error/required_field_error.js"></script>
<script src="./src/error/connection_error.js"></script>
<script src="./src/service/api_service.js"></script>
<script src="./src/service/news-service.js"></script>
<script>
function showHome(){
document.getElementById("TEAM").style.display="none";
document.getElementById("RESULTS").style.display="none";
document.getElementById("HOME").style.display="block";
}
function showTeam(){
document.getElementById("TEAM").style.display="block";
document.getElementById("RESULTS").style.display="none";
document.getElementById("HOME").style.display="none";
}
function showResults(){
document.getElementById("TEAM").style.display="none";
document.getElementById("RESULTS").style.display="block";
document.getElementById("HOME").style.display="none";
}
const newsService = new NewsService();
newsService.getNews().then(news => {
news.forEach(n => {
const newsArticle = document.createElement('article');
const span = document.createElement('span');
const p = document.createElement('p');
span.innerText = n.title;
p.innerText = new Date(n.publishedAt).toLocaleString('fr-FR',{day: '2-digit',month: '2-digit',year: 'numeric',hour: '2-digit',minute: '2-digit',hour12: false});
newsArticle.appendChild(span);
newsArticle.appendChild(p);
newsArticle.setAttribute("class","card");
document.querySelector('#newsList').appendChild(newsArticle);
});
})
.catch(error => {
console.error(error);
});
</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';
@ -32,23 +97,32 @@
import Navbar from '/src/view/navbar.js'; import Navbar from '/src/view/navbar.js';
import TeamAdd from '/src/view/team_add.js'; import TeamAdd from '/src/view/team_add.js';
import Teamcard from '/src/view/teamcard.js'; import Teamcard from '/src/view/teamcard.js';
import Newscard from '/src/view/newscard.js';
import TeamFight from '/src/view/team-fight.js';
const app = createApp({ const app = createApp({
data() { data() {
return { return {
allTeam: [] allTeam: [],
allNews: new NewsService().getNews()
} }
}, },
methods:{ methods:{
addTeam: function(team){ addTeam: function(team){
console.log('index.addTeam',team);
this.allTeam.push(team); this.allTeam.push(team);
},
exportTeam: function(){
console.log("Team to JSON :")
console.log(JSON.stringify(this.allTeam));
} }
} }
}) })
app.component('Navbar', Navbar) app.component('Navbar', Navbar)
.component('TeamAdd', TeamAdd) .component('TeamAdd', TeamAdd)
.component('Teamcard',Teamcard); .component('Teamcard',Teamcard)
.component('TeamFight',TeamFight)
.component('Newscard',Newscard);
app.mount('#app'); app.mount('#app');
</script> </script>
</body> </body>

18
package.json
Unescape View File

@ -0,0 +1,18 @@
{
"name": "tp_javascript",
"version": "1.0.0",
"description": "Développeurs: HODIN Dorian , LACOTE Raphaël",
"main": "index.js",
"scripts": {
"serve": "serve"
},
"repository": {
"type": "git",
"url": "https://codefirst.iut.uca.fr/git/dorian.hodin/TP_JavaScript.git"
},
"author": "",
"license": "ISC",
"devDependencies": {
"serve": "^14.2.0"
}
}

5
src/error/connection_error.js
Unescape View File

@ -0,0 +1,5 @@
class ConnectionError extends Error {
constructor(message) {
super('Impossible de se connecter à l\'API, erreur :'+message);
}
}

15
src/service/api_service.js
Unescape View File

@ -0,0 +1,15 @@
class ApiService{
async loadFromApi(url,method) {
const headers = {
method: method,
};
let a = await fetch(url, headers).then(response => {
if (!response.ok){
throw new Error('Une erreur est survenue durant l\'appel HTTP');
}
return response.json();
});
return a;
}
}

11
src/service/news-service.js
Unescape View File

@ -0,0 +1,11 @@
class NewsService{
async getNews(){
let final= [];
let url = 'https://newsapi.org/v2/everything?apiKey=3376164320df42a38acb0fd04878aac3&q=esport&searchIn=title&sortBy=publishedAt';
let res = await new ApiService().loadFromApi(url,'GET');
for (let i = 0; i <= 4; i++){
final.push(res['articles'][i]);
}
return final;
}
}

20
src/view/navbar.js
Unescape View File

@ -6,28 +6,18 @@ export default {
}, },
linkTeam:{ linkTeam:{
type: String, type: String,
default: '' default: '#'
}, },
linkResults: { linkResults: {
type: String, type: String,
default: 'https://www.github.com' default: '#'
}
},
methods:{
toggleDiv: function(){
let div = document.getElementById("team");
if (div.classList.contains("hide")) {
div.classList.remove("hide");
} else {
div.classList.add("hide");
}
} }
}, },
template:` template:`
<ul> <ul>
<li><a :href="linkHome">Home</a></li> <li onclick="showHome()"><a :href="linkHome">Home</a></li>
<li @click="toggleDiv"><a :href="linkTeam">Team</a></li> <li onclick="showTeam()"><a :href="linkTeam">Team</a></li>
<li><a target="_blank" :href="linkResults">Results</a></li> <li onclick="showResults()"><a :href="linkResults">Results</a></li>
</ul> </ul>
` `

19
src/view/newscard.js
Unescape View File

@ -0,0 +1,19 @@
export default {
props: {
title: {
type :String,
require : true
},
publishedAt: {
type :Date,
require : true
}
},
template: `
<div class="card">
<h1>OUI</h1>
<span>Title : {{ title }}</span>
<p>Published At : {{ publishedAt }}</p>
</div>
`
}

75
src/view/team-fight.js
Unescape View File

@ -0,0 +1,75 @@
export default {
data: function(){
return {
homeTeam: null,
homeScore: 0,
awayTeam: null,
awayScore: 0,
allTeam: [],
errorMessage: '',
errorColor: ERROR_COLOR
}
},
methods: {
sendResults: function () {
try{
fetch("http://www.post-result.com", {
method: "POST",
body: JSON.stringify({
homeTeam: this.homeTeam,
homeScore: this.homeScore,
awayTeam: this.awayTeam,
awayScore: this.awayScore
})
}).then(response =>{
if (!response.ok){
throw new ConnectionError(error.message);
}
console.log("Ok, data send successfully");
}).catch(error => {
this.errorMessage=error
return null;
});
}catch (error) {
}
},
},
template: `
<div>
<h2>Match :</h2>
<form @submit.prevent>
<div>
<label for="home-team">Home team:</label>
<select id="home-team" v-model="homeTeam">
<option selected disabled >Select a Team</option>
<option v-for="team in allTeam"
:name="team.name">{{ name }}
</option>
</select>
</div>
<div>
<label for="home-score">Home score:</label>
<input type="number" id="home-score" v-model="homeScore" min="0" required>
</div>
<div>
<label for="away-team">Away team:</label>
<select id="away-team" v-model="awayTeam">
<option selected disabled>Select a Team</option>
<option v-for="team in allTeam"
:name="team.name">{{ name }}
</option>
</select>
</div>
<div>
<label for="away-score">Away score:</label>
<input type="number" id="away-score" v-model="awayScore" min="0" required>
</div>
<input type="submit" value="Send result" @click="sendResults"/>
<div v-bind:style="{ color: errorColor}">{{ errorMessage }}</div>
</form>
</div>
`
}

8
src/view/team_add.js
Unescape View File

@ -16,22 +16,18 @@ export default {
this.name = ''; this.name = '';
this.description= ''; this.description= '';
throw new RequiredFieldError("ID"); throw new RequiredFieldError("ID");
return;
} }
if (!this.name) { if (!this.name) {
this.id = ''; this.id = '';
this.description= ''; this.description= '';
throw new RequiredFieldError("Name"); throw new RequiredFieldError("Name");
return;
} }
if (!this.description){ if (!this.description){
this.id = ''; this.id = '';
this.name = ''; this.name = '';
throw new RequiredFieldError("Description"); throw new RequiredFieldError("Description");
return;
} }
const team = { id: this.id, name: this.name, description: this.description}; const team = { id: this.id, name: this.name, description: this.description};
console.log('form.addTeam', team);
this.$emit('addTeam', team); this.$emit('addTeam', team);
@ -39,13 +35,13 @@ export default {
this.name = ''; this.name = '';
this.description = ''; this.description = '';
} catch (error) { }catch (error) {
if (error instanceof RequiredFieldError) { if (error instanceof RequiredFieldError) {
this.errorMessage=error this.errorMessage=error
} }
return null; return null;
} }
} },
}, },
template: `<section> template: `<section>
<h2>News form</h2> <h2>News form</h2>

2
src/view/teamcard.js
Unescape View File

@ -23,7 +23,7 @@ export default {
} }
}, },
template: ` template: `
<div class="team-card"> <div class="card">
<span>ID of the Team : {{ id }}</span> <span>ID of the Team : {{ id }}</span>
<p>Name : {{ name }}</p> <p>Name : {{ name }}</p>
<p>Description : {{ description20 }}</p> <p>Description : {{ description20 }}</p>

Write Preview
Loading…
Cancel
Save