Form for Team and component Navbar working, link are not bind now

2 years ago · 7ea12f3c89
parent 2866d4bf0a
commit 7ea12f3c89
5 changed files with 55 additions and 5 deletions
--- a/index.html
+++ b/index.html
@ -11,11 +11,16 @@
 <body>
    <div id="app">
        <navbar></navbar>
+        <team-card></team-card>
    </div>
+
+    <script src="/src/misc/constant.js"></script>
+
    <script type="module">
        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';
      
        const app = createApp({
            data(){
@ -24,7 +29,8 @@
                }
            }
        })
-        app.component('NavBar', NavBar);
+        app.component('Navbar', Navbar)
+           .component('TeamCard', TeamCard)
        app.mount('#app');
      </script>
 </body>
--- a/src/misc/constant.js
+++ b/src/misc/constant.js
@ -0,0 +1 @@
+const ERROR_COLOR = 'red';
--- a/src/view/link_service.js
+++ b/src/view/link_service.js
@ -2,9 +2,10 @@ export default class LinkService{

    getLinks(){
        return [
-        'https://www.google.com',
+        '',
        'https://www.youtube.com',
        'https://www.github.com',
        ];
    }
+    
 }
--- a/src/view/navbar.js
+++ b/src/view/navbar.js
@ -1,11 +1,11 @@
 export default {
    template:`
-    <div>
+    <section>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Teams</a></li>
            <li><a href="#">Results</a></li>
        </ul>
-    </div>
+    </section>
    `
 };
--- a/src/view/team_add.js
+++ b/src/view/team_add.js
@ -0,0 +1,42 @@
+export default {
+    data: function() {
+        return {
+            id: '',
+            name: '',
+            errorMessage: '',
+            errorColor: ERROR_COLOR
+        }
+    },
+    methods: {
+        addTeam: function() {
+            this.errorMessage = '';
+            if (!this.id || !this.name) {
+                this.errorMessage = 'ID and Name are required !';
+                return;
+            }
+
+            const team = { id: this.id, name: this.name};
+            console.log('form.addTeam', team);
+
+            this.$emit('addTeam', team);
+
+            this.id = '';
+            this.name = '';
+        }
+    },
+    template: `<section>
+                <h2>News form</h2>
+                <form @submit.prevent>
+                    <div v-bind:style="{ color: errorColor}">{{ errorMessage }}</div>
+                    <div>
+                        <label>ID</label><br/>
+                        <input type="text" v-model="id"/>
+                    </div>
+                    <div>
+                        <label>Name</label><br/>
+                        <input type="text" v-model="name"/>
+                    </div>
+                    <input type="submit" value="Create Team" @click="addTeam"/>
+                </form>
+            </section>`
+}