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;
}
.col-6 {
width: 50%;
display: inline-block;
}
.text-center {
text-align: center;
}
/* Onglet */
@ -35,12 +44,18 @@ form input {
display: block;
}
.input-group {
margin-bottom: 10px;
}
/* CARD */
.team-card {
.card {
border: #000000 1px solid;
border-radius: 5px;
margin: 5px;
padding: 5px;
}
@ -52,4 +67,17 @@ form input {
.box-error {
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>
<title>My awesome team</title>
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<div id="app">
<navbar></navbar>
<div class="team">
<team-add @add-team="addTeam"></team-add>
<div id="FIRST">
<navbar></navbar>
</div>
<teamcard v-for="team in allTeam"
:id="team.id"
:name="team.name"
:description="team.description">
</teamcard>
<div id="SECOND" style="overflow-y: scroll; height:100%;">
<div id="HOME" style="display: none">
<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>
<script src="./src/misc/constant.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">
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 TeamAdd from '/src/view/team_add.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({
data() {
return {
allTeam: []
allTeam: [],
allNews: new NewsService().getNews()
}
},
methods:{
addTeam: function(team){
console.log('index.addTeam',team);
this.allTeam.push(team);
},
exportTeam: function(){
console.log("Team to JSON :")
console.log(JSON.stringify(this.allTeam));
}
}
})
app.component('Navbar', Navbar)
.component('TeamAdd', TeamAdd)
.component('Teamcard',Teamcard);
.component('Teamcard',Teamcard)
.component('TeamFight',TeamFight)
.component('Newscard',Newscard);
app.mount('#app');
</script>
</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:{
type: String,
default: ''
default: '#'
},
linkResults: {
type: String,
default: 'https://www.github.com'
}
},
methods:{
toggleDiv: function(){
let div = document.getElementById("team");
if (div.classList.contains("hide")) {
div.classList.remove("hide");
} else {
div.classList.add("hide");
}
default: '#'
}
},
template:`
<ul>
<li><a :href="linkHome">Home</a></li>
<li @click="toggleDiv"><a :href="linkTeam">Team</a></li>
<li><a target="_blank" :href="linkResults">Results</a></li>
<li onclick="showHome()"><a :href="linkHome">Home</a></li>
<li onclick="showTeam()"><a :href="linkTeam">Team</a></li>
<li onclick="showResults()"><a :href="linkResults">Results</a></li>
</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.description= '';
throw new RequiredFieldError("ID");
return;
}
if (!this.name) {
this.id = '';
this.description= '';
throw new RequiredFieldError("Name");
return;
}
if (!this.description){
this.id = '';
this.name = '';
throw new RequiredFieldError("Description");
return;
}
const team = { id: this.id, name: this.name, description: this.description};
console.log('form.addTeam', team);
this.$emit('addTeam', team);
@ -39,13 +35,13 @@ export default {
this.name = '';
this.description = '';
} catch (error) {
}catch (error) {
if (error instanceof RequiredFieldError) {
this.errorMessage=error
}
return null;
}
}
},
},
template: `<section>
<h2>News form</h2>

2
src/view/teamcard.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save