diff --git a/README.md b/README.md index 2a12e8b..29b636a 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,3 @@ # TP_JavaScript -HODIN Dorian / LACOTE Raphaël \ No newline at end of file +Développeurs: HODIN Dorian , LACOTE Raphaël \ No newline at end of file diff --git a/css/style.css b/css/style.css index 73c9003..5ae2da6 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,10 @@ +/* Global */ + +.pointer { + cursor: pointer; +} + + /* Onglet */ .menu-pannel { @@ -32,6 +39,17 @@ form input { /* CARD */ .team-card { - border: #000000 1px; + border: #000000 1px solid; border-radius: 5px; +} + + +/* Erreur */ + +.text-error { + color: red; +} + +.box-error { + border: 1px solid red; } \ No newline at end of file diff --git a/index.html b/index.html index 3498712..f202fa7 100644 --- a/index.html +++ b/index.html @@ -10,29 +10,47 @@
+ - +
+ +
+ +
- + + + + \ No newline at end of file diff --git a/src/error/required_field_error.js b/src/error/required_field_error.js new file mode 100644 index 0000000..24267c5 --- /dev/null +++ b/src/error/required_field_error.js @@ -0,0 +1,5 @@ +class RequiredFieldError extends Error { + constructor(field) { + super('Le champ '+field+' est obligatoire !'); + } +} \ No newline at end of file diff --git a/src/view/link_service.js b/src/view/link_service.js index c4e1093..bfedb0e 100644 --- a/src/view/link_service.js +++ b/src/view/link_service.js @@ -2,10 +2,9 @@ export default class LinkService{ getLinks(){ return [ - '', - 'https://www.youtube.com', + '#', + '#', 'https://www.github.com', ]; } - } diff --git a/src/view/navbar.js b/src/view/navbar.js index 2074fc7..8f9f476 100644 --- a/src/view/navbar.js +++ b/src/view/navbar.js @@ -1,11 +1,34 @@ 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:` -
-
` + }; \ No newline at end of file diff --git a/src/view/team_add.js b/src/view/team_add.js index 33537fe..1ff54cd 100644 --- a/src/view/team_add.js +++ b/src/view/team_add.js @@ -3,25 +3,48 @@ export default { return { id: '', name: '', + description: '', errorMessage: '', errorColor: ERROR_COLOR } }, methods: { - addTeam: function() { - this.errorMessage = ''; - if (!this.id || !this.name) { - this.errorMessage = 'ID and Name are required !'; - return; - } + addTeam: function () { + try { + this.errorMessage = ''; + if (!this.id) { + 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}; - console.log('form.addTeam', team); + this.$emit('addTeam', team); - this.$emit('addTeam', team); + this.id = ''; + this.name = ''; + this.description = ''; - this.id = ''; - this.name = ''; + } catch (error) { + if (error instanceof RequiredFieldError) { + this.errorMessage=error + } + return null; + } } }, template: `
@@ -36,6 +59,10 @@ export default {
+
+
+ +
` diff --git a/src/view/teamcard.js b/src/view/teamcard.js new file mode 100644 index 0000000..28400e9 --- /dev/null +++ b/src/view/teamcard.js @@ -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: ` +
+ ID of the Team : {{ id }} +

Name : {{ name }}

+

Description : {{ description20 }}

+
+ ` +} \ No newline at end of file