Navbar menu

frontend/app/package-lock.json

@@ -3268,6 +3268,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
+      "integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
+    },
     "date-now": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",

frontend/app/package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "date-fns": "^1.30.1",
     "vue": "^2.5.21",
     "vue-router": "^3.0.1",
     "vuetify": "^1.3.0"

frontend/app/src/App.vue

@@ -1,34 +1,18 @@
 <template>
-  <v-app>
+  <v-app class="grey lighten-2">
-    <v-toolbar app>
+    <Navbar />
-      <v-toolbar-title class="headline text-uppercase">
+    <v-content class="mx-4 mp-4">
-        <span>Vuetify</span>
+      <router-view></router-view>
-        <span class="font-weight-light">MATERIAL DESIGN</span>
-      </v-toolbar-title>
-      <v-spacer></v-spacer>
-      <v-btn
-        flat
-        href="https://github.com/vuetifyjs/vuetify/releases/latest"
-        target="_blank"
-      >
-        <span class="mr-2">Latest Release</span>
-      </v-btn>
-    </v-toolbar>
-
-    <v-content>
-      <HelloWorld/>
     </v-content>
+
   </v-app>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld'
+import Navbar from '@/components/Navbar'
-
 export default {
   name: 'App',
-  components: {
+  components: {Navbar},
-    HelloWorld
-  },
   data () {
     return {
       //

frontend/app/src/components/HelloWorld.vue

@@ -1,147 +0,0 @@
-<template>
-  <v-container>
-    <v-layout
-      text-xs-center
-      wrap
-    >
-      <v-flex xs12>
-        <v-img
-          :src="require('../assets/logo.svg')"
-          class="my-3"
-          contain
-          height="200"
-        ></v-img>
-      </v-flex>
-
-      <v-flex mb-4>
-        <h1 class="display-2 font-weight-bold mb-3">
-          Welcome to Vuetify
-        </h1>
-        <p class="subheading font-weight-regular">
-          For help and collaboration with other Vuetify developers,
-          <br>please join our online
-          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
-        </p>
-      </v-flex>
-
-      <v-flex
-        mb-5
-        xs12
-      >
-        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(next, i) in whatsNext"
-            :key="i"
-            :href="next.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ next.text }}
-          </a>
-        </v-layout>
-      </v-flex>
-
-      <v-flex
-        xs12
-        mb-5
-      >
-        <h2 class="headline font-weight-bold mb-3">Important Links</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(link, i) in importantLinks"
-            :key="i"
-            :href="link.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ link.text }}
-          </a>
-        </v-layout>
-      </v-flex>
-
-      <v-flex
-        xs12
-        mb-5
-      >
-        <h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
-
-        <v-layout justify-center>
-          <a
-            v-for="(eco, i) in ecosystem"
-            :key="i"
-            :href="eco.href"
-            class="subheading mx-3"
-            target="_blank"
-          >
-            {{ eco.text }}
-          </a>
-        </v-layout>
-      </v-flex>
-    </v-layout>
-  </v-container>
-</template>
-
-<script>
-  export default {
-    data: () => ({
-      ecosystem: [
-        {
-          text: 'vuetify-loader',
-          href: 'https://github.com/vuetifyjs/vuetify-loader'
-        },
-        {
-          text: 'github',
-          href: 'https://github.com/vuetifyjs/vuetify'
-        },
-        {
-          text: 'awesome-vuetify',
-          href: 'https://github.com/vuetifyjs/awesome-vuetify'
-        }
-      ],
-      importantLinks: [
-        {
-          text: 'Documentation',
-          href: 'https://vuetifyjs.com'
-        },
-        {
-          text: 'Chat',
-          href: 'https://community.vuetifyjs.com'
-        },
-        {
-          text: 'Made with Vuetify',
-          href: 'https://madewithvuetifyjs.com'
-        },
-        {
-          text: 'Twitter',
-          href: 'https://twitter.com/vuetifyjs'
-        },
-        {
-          text: 'Articles',
-          href: 'https://medium.com/vuetify'
-        }
-      ],
-      whatsNext: [
-        {
-          text: 'Explore components',
-          href: 'https://vuetifyjs.com/components/api-explorer'
-        },
-        {
-          text: 'Select a layout',
-          href: 'https://vuetifyjs.com/layout/pre-defined'
-        },
-        {
-          text: 'Frequently Asked Questions',
-          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions'
-        }
-
-      ]
-    })
-  }
-</script>
-
-<style>
-
-</style>

frontend/app/src/components/Navbar.vue

@@ -0,0 +1,94 @@
+<template>
+    <nav>
+        <v-snackbar v-model="snackbar" :timeout="4000" top color="success">
+            <span>Awesome! You added a new project</span>
+            <v-btn flat color="white" @click="snackbar = false">Close</v-btn>
+        </v-snackbar>
+
+        <v-toolbar flat app>
+            <v-toolbar-side-icon class="grey--text" @click="drawer = !drawer">
+                <!-- burger menu icon, color zmieniony jak na ten tekstu -->
+            </v-toolbar-side-icon>
+
+            <v-toolbar-title class="text-uppercase grey--text">
+                <span class="font-weight-light">Karty</span>
+                <span> Edżentelmenów</span>
+            </v-toolbar-title>
+            <!-- tag <v-spacer> - to co nad nim bedzie do lewej 
+            a to co po nim do prawej wcisniete -->
+            <v-spacer></v-spacer> 
+
+            <!-- dropdown menu -->
+            <v-menu offset-y>
+                <v-btn flat slot="activator" color="grey">
+                    <v-icon left>expand_more</v-icon>
+                    <span>menu</span>
+                </v-btn>
+                <v-list>
+                    <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
+                        <v-list-tile-title>{{ link.text }}</v-list-tile-title>
+                    </v-list-tile>
+                </v-list>
+            </v-menu>
+
+            <v-btn flat color="grey" @click="userLogout">
+                <span>Sign Out</span>
+                <v-icon right>exit_to_app</v-icon>
+            </v-btn>
+        </v-toolbar>
+
+    <!-- bez app nie dziala ladnie   -->
+    <!-- na malych ekranach zaslania cale gorne menu, na duzych ladnie przsuwa kontent strony -->
+        <v-navigation-drawer v-model="drawer" app class="primary">
+            
+            <v-layout column align-center>
+                <v-flex class="mt-5">
+                    <v-avatar size ="100" color="white">
+                        <img src="/cylinder-okragly.png">
+                    </v-avatar>
+                    <p class="white--text mt-3 subheading">Edżentelmen</p>
+                </v-flex>
+                <v-flex class="mb-3">
+                    <Popup @projectAdded="snackbar = true"/>
+                </v-flex>
+            </v-layout>
+
+            <v-list>
+                <v-list-tile v-for="link in links" :key="link.text" router :to="link.route">
+                    <v-list-tile-action>
+                        <v-icon class="white--text">{{ link.icon }}</v-icon>
+                    </v-list-tile-action>
+                    <v-list-tile-content>
+                        <v-list-tile-title class="white--text">{{ link.text }}</v-list-tile-title>
+                    </v-list-tile-content>
+                </v-list-tile>
+
+            </v-list>
+        </v-navigation-drawer>
+    </nav>
+</template>
+
+<script>
+import Popup from './Popup'
+export default {
+    components: { Popup },
+    data(){
+        return{
+            drawer: false, //niepokazywac na poczatku
+            links: [
+                { icon: 'dashboard', text: 'Rozgrywka', route: '/'},
+                { icon: "folder", text: 'Karty', route: '/projects'},
+                { icon: 'person', text: 'Dżentelmani', route: '/team'}
+            ],
+            snackbar: false
+        }
+    },
+    methods:{
+        userLogout(){
+            //wylogowanie
+            console.log("wylogowano")
+        }
+    }
+    
+}
+</script>

frontend/app/src/components/Popup.vue

@@ -0,0 +1,59 @@
+<template>
+    <v-dialog max-width="600px" v-model="dialog">
+        <!-- to widac na przycisku -->
+        <v-btn flat slot="activator" class="grey lighten-2" >Dodaj Nową Kartę</v-btn>
+        <v-card>
+            <v-card-title>
+                <!-- to widac w wyswietlanym oknie -->
+                <h2>Nowa karta</h2>
+            </v-card-title>
+            <v-card-text>
+                <v-form class="px-3" ref="form">
+                    <v-text-field label="title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field>
+                    <v-textarea label="Information" v-model="content" prepend-icon="edit" :rules="inputRules"></v-textarea>
+                    
+                    <v-menu>
+                        <v-text-field  :rules="inputRules" :value="formattedDate" slot="activator" label="Due data" prepend-icon="date_range"></v-text-field>
+                        <v-date-picker v-model="due"></v-date-picker>
+                    </v-menu>
+                    <v-spacer></v-spacer>
+                    
+                    <v-btn flat class="success mx-0 mt-3" @click="submit" :loading="loading">Add Project</v-btn>
+                </v-form>
+            </v-card-text>
+            
+        </v-card>
+    </v-dialog>
+</template>
+
+<script>
+import format from 'date-fns/format'
+export default {
+    data(){
+        return{
+            title: '',
+            content: '',
+            due: null,
+            inputRules: [
+                v => v.length >= 3 || 'Minimum length is 3 characters'
+            ],//array of diferent rules
+            loading: false,
+            dialog: false
+        }
+    },
+    methods:{
+        submit(){
+            if (this.$refs.form.validate()){ //valinnaj JS
+                this.loading = true;
+                console.log("Dodanie do bazy")
+
+            }
+        }
+    },
+    computed:{
+        formattedDate(){
+            return this.due ? format(this.due, 'Do MMM YYYY') : ''
+        }
+    }
+}
+</script>

frontend/app/src/plugins/vuetify.js

@@ -4,4 +4,11 @@ import 'vuetify/src/stylus/app.styl'
 
 Vue.use(Vuetify, {
   iconfont: 'md',
+  theme: { //nadpisanie słów kluczowych
+    primary: '#212121',
+    success: '#EEEEEE',
+    info: '#ffaa2c',
+    error: '#f83e70',
+    myTheme: '#483D8B'
+  }
 })

frontend/app/src/router.js

@@ -1,6 +1,13 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import Users from '@/views/Users'
+import Game from '@/views/Game'
+import Cards from '@/views/Cards'
+import Login from '@/views/Login'
+import Logout from '@/views/Logout'
+import Register from '@/views/Register'
+
+
 
 Vue.use(Router)
 
@@ -10,16 +17,33 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'game',
-      component: Home
+      component: Game
     },
     {
-      path: '/about',
+      path: '/dzentelmani',
-      name: 'about',
+      name: 'users',
-      // route level code-splitting
+      component: Users
-      // this generates a separate chunk (about.[hash].js) for this route
+    },
-      // which is lazy-loaded when the route is visited.
+    {
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+      path: '/karty',
+      name: 'cards',
+      component: Cards
+    },
+    {
+      path: '/register',
+      name: 'register',
+      component: Register
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },
+    {
+      path: '/logout',
+      name: 'logout',
+      component: Logout
     }
   ]
 })

frontend/app/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

frontend/app/src/views/Home.vue

@@ -1,13 +0,0 @@
-<template>
-  <HelloWorld />
-</template>
-
-<script>
-  import HelloWorld from '../components/HelloWorld'
-
-  export default {
-    components: {
-      HelloWorld
-    }
-  }
-</script>