Sync project

database/seeds/DatabaseSeeder.php

@@ -12,5 +12,6 @@ class DatabaseSeeder extends Seeder
     public function run()
     {
          $this->call(UsersTableSeeder::class);
+         $this->call(RolesSeeder::class);
     }
 }

package-lock.json

@@ -7223,6 +7223,11 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
+    "vee-validate": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-2.1.7.tgz",
+      "integrity": "sha512-IyPDTTvIRY6o9y14jXlgfY76Qv+hmvYDwNaMn9JY5KbQN8a1tJAu7H/+a/+EdHg1w8Zl9tsdG8lndGqY1lyMzQ=="
+    },
     "vendors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "vee-validate": "^2.1.7",
     "vue": "^2.5.11",
     "vue-router": "^3.0.2",
     "vuex": "^3.1.0"

public/App.vue

@@ -6,6 +6,8 @@
         <router-link to="/counter">Counter</router-link>
         <router-link to="/users">Users</router-link>
         <router-link to="/chat">Chat</router-link>
+        <router-link to="/validate">Validate</router-link>
+        <router-link to="/game">Game</router-link>
         |
         <router-link v-if="isAuth" to="/logout">Logout</router-link>
         <router-link v-if="!isAuth" to="/login">Login</router-link>
@@ -26,9 +28,11 @@ export default {
       isAuth: null
     }
   },
+
   created () {
     this.isAuth = store.getters.isAuth
   },
+
   updated()
   {
     this.isAuth = store.getters.isAuth

public/pages/Counter.vue

@@ -12,11 +12,13 @@ export default {
     data() {
         return {}
     },
+
     computed: {
         counter() {
             return this.$store.state.counter
         }
     },
+
     methods: {
         incCounter(num) {
             return this.$store.state.counter += num

public/pages/Home.vue

@@ -10,6 +10,7 @@ export default {
     data() {
         return {}
     },
+
     computed: {
         counter() {
             return this.$store.state.counter

public/pages/game/Game.vue

+<template>
+  <div id="board" ref="board">
+    <span id="ball" ref="ball"></span>
+    <p id="rocket" ref="rocket"></p>
+  </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            ball: {
+                el: null,
+                size: 10,
+                stepX: 0,
+                stepY: 1
+            },
+            rocket: {
+                el: null,
+                width: 50
+            },
+            board: {
+              el: null
+            }
+        }
+    },
+
+    created() {
+        let handle = this.handle;
+        let $this = this;
+
+        /** Handle game. */
+        // setInterval(() => {
+        //     handle($this)
+        // }, 2000);
+    },
+
+    methods: {
+        handle: ($this) => {
+            let ballStepX = $this.ball.stepX;
+            let ballStepY = $this.ball.stepY;
+
+            let positionBallX = $this.ball.el.style.left;
+            let positionBallY = $this.ball.el.style.top;
+
+            if(parseInt(positionBallX) >= parseInt($this.board.el.style.width)) {
+                ballStepX = -ballStepX;
+            }
+            if(parseInt(positionBallY) >= parseInt($this.board.el.style.height)) {
+                ballStepY = -ballStepY;
+            }
+
+            $this.ball.el.style.left = (($this.ball.el.offsetLeft) + ballStepX) + 'px';
+            $this.ball.el.style.top = (($this.ball.el.offsetTop) + ballStepY) + 'px';
+        }
+    },
+
+    mounted() {
+        /** Declare element to data. */
+        this.ball.el   = this.$refs.ball;
+        this.rocket.el = this.$refs.rocket;
+        this.board.el  = this.$refs.board;
+
+        /** Set initial width of rocket. */
+        this.rocket.el.style.width = this.rocket.width + 'px'
+    },
+
+    component: {
+    },
+}
+</script>
+
+<style>
+  #board {
+    background-color: #D3CCFF;
+    width: 95vw;
+    height: 85vh;
+    border: saddlebrown solid 5px;
+  }
+  #ball {
+    position: absolute;
+    height: 10px;
+    width: 10px;
+    margin: 1em auto;
+    border: 1px solid black;
+    background: #91ff63;
+    border-radius: 50%;
+  }
+  #rocket {
+    background: #1c7430;
+    position: relative;
+    height: 5px;
+    width: 50px;
+    top: 80vh;
+    left: calc(42.5vw - 25px);
+  }
+</style>

public/pages/users/UserCreate.vue

@@ -23,9 +23,11 @@ export default {
             errors: {}
         }
     },
+
     created() {
         this.users = this.$store.getters.getUsers;
     },
+
     methods: {
         submitForm: function(user) {
           // Save new user to DB.
@@ -48,6 +50,7 @@ export default {
             });
         }
     },
+
     component: {
         userForm: UserForm
     },

public/pages/users/UserEdit.vue

@@ -21,9 +21,11 @@ export default {
             user: {}
         }
     },
+
     created() {
         this.getUserById();
     },
+
     methods: {
         getUserById(){
             axios({

public/pages/users/UserForm.vue

@@ -23,11 +23,13 @@ export default {
         errors: Object,
         user: Object
     },
+
     data () {
         return {
             userId: this.$route.params.id
         }
     },
+
     methods: {
         formSubmit(event) {
             event.preventDefault();

public/pages/users/UsersIndex.vue

@@ -39,6 +39,7 @@ export default {
             users: {}
         }
     },
+
     created () {
         axios(this.$store.state.host + '/api/users', {
             method: 'GET',
@@ -49,6 +50,7 @@ export default {
             }
         });
     },
+
     methods: {
         deleteUser (userId) {
             this.removeUserFromDB(userId);

public/pages/validate/Validate.vue

+<template>
+  <form @submit="submit">
+    <label for="form-email" :class="{ errors: this.errors.has('email') }">Email</label>
+    <input type="text" name="email" id="form-email" v-validate="'required|email'" v-model="form.email">
+
+    <label for="form-phone" :class="{ errors: this.errors.has('phone') }">Phone</label>
+    <input type="text" name="phone" id="form-phone" v-validate="'required'" v-model="form.phone">
+
+    <label for="form-name" :class="{ errors: this.errors.has('name') }">Name</label>
+    <input type="text" name="name" id="form-name" v-validate="'required|min:3|max:10'" v-model="form.name">
+
+    <label for="form-age" :class="{ errors: this.errors.has('age') }">Age</label>
+    <input type="number" name="age" id="form-age" v-validate="'required|integer'" v-model="form.age">
+
+    <input type="submit">
+  </form>
+</template>
+
+<script>
+import Vue from 'vue'
+import VeeValidate from 'vee-validate'
+
+Vue.use(VeeValidate);
+
+export default {
+    data () {
+        return {
+            form: {},
+        }
+    },
+
+    watch: {
+        form: function () {
+            console.log(this.errors.has('email'))
+        }
+    },
+
+    computed: {
+        //
+    },
+
+    created () {
+        //
+    },
+
+    methods: {
+        submit: function (event) {
+            event.preventDefault();
+
+            this.$validator.validate()
+                .then(() => {
+                    if (this.$validator.errors.items.length === 0) {
+                        this.sendRequest(event);
+                    }
+                });
+        },
+        sendRequest: function (data) {
+            console.log(data)
+        }
+    }
+}
+</script>
+
+<style>
+  .errors {
+    color: red;
+  }
+</style>
\ No newline at end of file

public/router/index.js

@@ -11,6 +11,8 @@ import AdminHome  from "../pages/admin/Home";
 import UsersIndex from './../pages/users/UsersIndex';
 import UserCreate from './../pages/users/UserCreate';
 import UserEdit   from './../pages/users/UserEdit';
+import Validate   from './../pages/validate/Validate';
+import Game       from './../pages/game/Game';
 
 Vue.use(VueRouter);
 
@@ -64,6 +66,20 @@ export default new VueRouter({
             name: 'chat',
         },
 
+        /** Validate. */
+        {
+            path: '/validate',
+            component: Validate,
+            name: 'validate',
+        },
+
+        /** Game. */
+        {
+            path: '/game',
+            component: Game,
+            name: 'game',
+        },
+
         /** Auth. */
         {
             path: '/login',