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

Merge branch 'dorian'

Browse Source 
# Conflicts:
#	README.md
master
dorian.hodin 2 years ago
parent 4857b82a87 a166676ac3
commit 837559978f
8 changed files with 150 additions and 28 deletions
Show Stats Download Patch File Download Diff File

2
README.md
Unescape View File

@ -1,3 +1,3 @@
# TP_JavaScript # TP_JavaScript
HODIN Dorian / LACOTE Raphaël Développeurs: HODIN Dorian , LACOTE Raphaël

20
css/style.css
Unescape View File

@ -1,3 +1,10 @@
/* Global */
.pointer {
cursor: pointer;
}
/* Onglet */ /* Onglet */
.menu-pannel { .menu-pannel {
@ -32,6 +39,17 @@ form input {
/* CARD */ /* CARD */
.team-card { .team-card {
border: #000000 1px; border: #000000 1px solid;
border-radius: 5px; border-radius: 5px;
}
/* Erreur */
.text-error {
color: red;
}
.box-error {
border: 1px solid red;
} }

32
index.html
Unescape View File

@ -10,29 +10,47 @@
<body> <body>
<div id="app"> <div id="app">
<navbar></navbar> <navbar></navbar>
<team-card></team-card> <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>
</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 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';
import Navbar from '/src/view/navbar.js'; import Navbar from '/src/view/navbar.js';
import TeamCard from '/src/view/team_add.js'; import TeamAdd from '/src/view/team_add.js';
import Teamcard from '/src/view/teamcard.js';
const app = createApp({ const app = createApp({
data(){ data() {
return { return {
message: 'Bonjour App' allTeam: []
}
},
methods:{
addTeam: function(team){
console.log('index.addTeam',team);
this.allTeam.push(team);
} }
} }
}) })
app.component('Navbar', Navbar) app.component('Navbar', Navbar)
.component('TeamCard', TeamCard) .component('TeamAdd', TeamAdd)
.component('Teamcard',Teamcard);
app.mount('#app'); app.mount('#app');
</script> </script>
</body> </body>
</html> </html>

5
src/error/required_field_error.js
Unescape View File

@ -0,0 +1,5 @@
class RequiredFieldError extends Error {
constructor(field) {
super('Le champ '+field+' est obligatoire !');
}
}

5
src/view/link_service.js
Unescape View File

@ -2,10 +2,9 @@ export default class LinkService{
getLinks(){ getLinks(){
return [ return [
'', '#',
'https://www.youtube.com', '#',
'https://www.github.com', 'https://www.github.com',
]; ];
} }
} }

33
src/view/navbar.js
Unescape View File

@ -1,11 +1,34 @@
export default { export default {
props: {
linkHome: {
type: String,
default: '#'
},
linkTeam:{
type: String,
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");
}
}
},
template:` template:`
<section>
<ul> <ul>
<li><a href="#">Home</a></li> <li><a :href="linkHome">Home</a></li>
<li><a href="#">Teams</a></li> <li @click="toggleDiv"><a :href="linkTeam">Team</a></li>
<li><a href="#">Results</a></li> <li><a target="_blank" :href="linkResults">Results</a></li>
</ul> </ul>
</section>
` `
}; };

49
src/view/team_add.js
Unescape View File

@ -3,25 +3,48 @@ export default {
return { return {
id: '', id: '',
name: '', name: '',
description: '',
errorMessage: '', errorMessage: '',
errorColor: ERROR_COLOR errorColor: ERROR_COLOR
} }
}, },
methods: { methods: {
addTeam: function() { addTeam: function () {
this.errorMessage = ''; try {
if (!this.id || !this.name) { this.errorMessage = '';
this.errorMessage = 'ID and Name are required !'; if (!this.id) {
return; 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);
const team = { id: this.id, name: this.name}; this.$emit('addTeam', team);
console.log('form.addTeam', team);
this.$emit('addTeam', team); this.id = '';
this.name = '';
this.description = '';
this.id = ''; } catch (error) {
this.name = ''; if (error instanceof RequiredFieldError) {
this.errorMessage=error
}
return null;
}
} }
}, },
template: `<section> template: `<section>
@ -36,6 +59,10 @@ export default {
<label>Name</label><br/> <label>Name</label><br/>
<input type="text" v-model="name"/> <input type="text" v-model="name"/>
</div> </div>
<div>
<label>Description</label><br/>
<textarea v-model="description"></textarea>
</div>
<input type="submit" value="Create Team" @click="addTeam"/> <input type="submit" value="Create Team" @click="addTeam"/>
</form> </form>
</section>` </section>`

32
src/view/teamcard.js
Unescape View File

@ -0,0 +1,32 @@
export default {
props: {
id: {
type :String,
require : true
},
name: {
type :String,
require : true
},
description: {
type :String,
require : true
}
},
computed: {
description20(){
if (this.description.length > 20) {
return this.description.substring(0, 20) + '...';
} else {
return this.description;
}
}
},
template: `
<div class="team-card">
<span>ID of the Team : {{ id }}</span>
<p>Name : {{ name }}</p>
<p>Description : {{ description20 }}</p>
</div>
`
}
Write Preview
Loading…
Cancel
Save