From 8d7196fed1790fd6acb65dc93792477930b37528 Mon Sep 17 00:00:00 2001
From: pawlaczyk <pawlaczyk@g.pl>
Date: Sat, 5 Jan 2019 20:08:00 +0100
Subject: [PATCH] Dodanie widoku wszystkich kard

---
 frontend/app/public/cylinder11.jpg            | Bin 10213 -> 0 bytes
 frontend/app/public/moustache.png             | Bin 2217 -> 0 bytes
 frontend/app/public/user-cylinder.jpg         | Bin 11706 -> 0 bytes
 .../public/{test.png => user-cylinder.png}    | Bin
 frontend/app/src/components/Popup.vue         |   7 +-
 frontend/app/src/views/Cards.vue              | 198 +++++++++---------
 frontend/app/src/views/Game.vue               | 126 ++++++++++-
 frontend/app/src/views/Users.vue              |   5 +-
 8 files changed, 223 insertions(+), 113 deletions(-)
 delete mode 100644 frontend/app/public/cylinder11.jpg
 delete mode 100644 frontend/app/public/moustache.png
 delete mode 100644 frontend/app/public/user-cylinder.jpg
 rename frontend/app/public/{test.png => user-cylinder.png} (100%)

diff --git a/frontend/app/public/cylinder11.jpg b/frontend/app/public/cylinder11.jpg
deleted file mode 100644
index 6e45971f3796237b0fac800b5e7c45c2b36828f8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 10213
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
K3ilqKy!bCg?+6+I

diff --git a/frontend/app/public/moustache.png b/frontend/app/public/moustache.png
deleted file mode 100644
index a697ab73c6d24687200dd3ed26e8cd8786c20cc6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 2217
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
b*%K%;sN&^kiT>NCT?1flY-Lny;Fa`0ZV@E6

diff --git a/frontend/app/public/user-cylinder.jpg b/frontend/app/public/user-cylinder.jpg
deleted file mode 100644
index 2cea898320c0b25e23e4b610c8a241c9f6833af2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 11706
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
QIc-OL$@&Km5MlVg0Iy2+00000

diff --git a/frontend/app/public/test.png b/frontend/app/public/user-cylinder.png
similarity index 100%
rename from frontend/app/public/test.png
rename to frontend/app/public/user-cylinder.png
diff --git a/frontend/app/src/components/Popup.vue b/frontend/app/src/components/Popup.vue
index ebda978..87b65e2 100644
--- a/frontend/app/src/components/Popup.vue
+++ b/frontend/app/src/components/Popup.vue
@@ -1,7 +1,7 @@
 <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-btn flat slot="activator" class="success primary--text" >Dodaj Nową Kartę</v-btn>
         <v-card>
             <v-card-title>
                 <!-- to widac w wyswietlanym oknie -->
@@ -11,11 +11,6 @@
                 <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>
diff --git a/frontend/app/src/views/Cards.vue b/frontend/app/src/views/Cards.vue
index e5617d6..d67093c 100644
--- a/frontend/app/src/views/Cards.vue
+++ b/frontend/app/src/views/Cards.vue
@@ -1,127 +1,117 @@
-
 <template>
-  <div class="cards">
-    <v-container>
-        <!-- widok gentelmana, ktory wybiera karty -->
-        <div id="gentelmanView" v-show="gentelaman">
-            <v-layout column align-center>
-                <!-- karta pytanie na srodku -->
-                <v-flex class="mt-5">
-                    <div class="cardQuestion">
-                        <div class="card-main">
-                            <v-avatar size ="100">
-                                <img src="/moustache-white.png">
-                            </v-avatar>
-                            <p class = "pa-1 white--text text-md-center">{{ questionCard.text }}</p>
-                        </div>
-                    </div>
-                </v-flex>
-                <v-flex class="mb-3">
-                    <Popup @projectAdded="snackbar = true"/>
-                </v-flex>
-            </v-layout>
-            <v-layout row wrap>
-            <v-flex xs12 sm6 md4 lg3 v-for="card in cards" :key="card.name">
-                <v-card flat class="text-xs-center ma-3">
-                <v-responsive class="pt-4">
-                    <v-card-text class="ml-5 pl-5">
+  <div class="dashboard">
+    <h1 class="subheading grey--text">Dashboard </h1>
 
-                    <div class="card">
-                        <div class="card-main">
-                            <v-avatar size ="100" color="white mb-1">
-                                <img src="/moustache-black.png">
-                            </v-avatar>
-                            <p class = "pa-1">{{ card.text }}</p>
-                        </div>
-                    </div>
-                <!-- karty odpowiedzi  -->
-                </v-card-text>
-                </v-responsive>
-                <v-card-actions>
-                    <v-btn flat color="grey">
-                    <!-- <v-icon small left>thumb_up</v-icon> -->
-                        <!-- <v-icon small left>check</v-icon> -->
-                        <v-icon small left>thumb_up_alt</v-icon>
-                    <span>Najlepsza!</span>
-                    </v-btn>
-                </v-card-actions>
-                </v-card>
+    <v-container fluid class="my-5">
 
-            </v-flex>
-            </v-layout>
-        </div>
-        <!-- Widok gracz, ktory daje swoje karty -->
-        <div id="user_view" v-show="!gentelaman">
-            <h1>Uzytkownik</h1>
-        </div>
+      <v-layout row class="mb-3">
+        <v-tooltip top>
+          <v-btn small flat color="grey" @click="sortBy('question')" slot="activator">
+            <v-icon left small>live_help</v-icon>
+            <span class="caption text-lowercase">Karty pytania</span>
+          </v-btn>
+          <span>Sortuj według kart pytań</span>
+        </v-tooltip>
+
+        <v-tooltip top>
+          <v-btn small flat color="grey" @click="sortBy('answer')" slot="activator">
+            <v-icon left small>note</v-icon>
+            <span class="caption text-lowercase">Karty Odpowiedzi</span>
+          </v-btn>
+          <span>Sortujwedług kart Odpowiedzi</span>
+        </v-tooltip>
+      </v-layout>
+
+
+      <!-- pa-3 jest już nie potrzebne w <v-card> lepiej to wyglada jak sa koloery na samym brzegu-->
+      <v-card  flat v-for="card in cards" :key="card.text">
+        <!-- dynamiczne budowanie stringa bedącego wartością klasy - składnia z $ i ciapki ukosne -->
+        <v-layout row wrap :class="`pa-3 cardType ${card.type}`">
+          
+          <v-flex xs12 md6>
+           <div class="caption grey--text">Project title</div>
+           <div>{{card.text}}</div>
+          </v-flex>
+          
+          <v-flex xs6 sm4 md2>
+           <div class="caption grey--text">Dodana</div>
+           <div>{{card.due}}</div>
+          </v-flex>
+
+          <v-flex xs6 sm4 md2>
+            <div class="right">
+              <v-chip small :class="`${card.type} caption my-2`">{{card.type}}</v-chip>
+            </div>
+          </v-flex>
+        </v-layout>
+        <!-- Dodanie po każdym elemncie cienkiej poziomej linii oddzielajacej komponenty -->
+        <v-divider></v-divider>
+      </v-card>
+  
     </v-container>
+  
   </div>
 </template>
 
 <script>
-export default {
-    data(){
-      return{
-          gentelaman: true,
-          cards: [
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
-        ],
-        questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
 
-      }
+export default {
+  data(){
+    return{
+      cards: [
+          {due: 'data jakas', text: 'jakis tekst karta pytanie1', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie2', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie3', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie4', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie5', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie6', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie7', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie8', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie9', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie10', type:'question'},
+          {due: 'data jakas', text: 'jakis tekst karta pytanie0', type:'question'},
+
+
+
+
+        {due: 'data jakas', text: 'karta odpowiedz jakis tekst', type:'answer'}
+      ]
     }
+  },
+  methods:{
+    sortBy(prop){
+        //sortowanie po typie karty
+        console.log("prop:", prop)
+      this.cards.filter( obj => {
+          return obj.type === prop
+      })
+    }
+  },
+  created() {
+      console.log("Pobranie wszsytkich kard z bazy")
+  }
 }
 </script>
 
-
 <style>
-.card {
-  width: 200px;                 /* Set width of cards */
-  height: 300px;
-  border: 5px solid #212121;    /* Set up Border */
-  border-radius: 20px;           /* Slightly Curve edges */
-  overflow: hidden;             /* Fixes the corners
-
-  display: flex;                /* Children use Flexbox */
-  flex-direction: column;       /* Rotate Axis */
+.cardType.question{
+  border-left: 5px solid #212121;
 }
 
-.cardQuestion{
-  background: #212121;
-  width: 200px;                 /* Set width of cards */
-  height: 300px;
-  border: 5px solid black;    /* Set up Border */
-  border-radius: 20px;           /* Slightly Curve edges */
-  overflow: hidden;             /* Fixes the corners
-
-  display: flex;                /* Children use Flexbox */
-  flex-direction: column;       /* Rotate Axis */
+.v-chip.question{
+  background:#212121;
+  color: white;
 }
 
-
-.card-main {
-  display: flex;              /* Children use Flexbox */
-  flex-direction: column;     /* Rotate Axis to Vertical */
-  justify-content: center;    /* Group Children in Center */
-  align-items: center;        /* Group Children in Center (+axis) */
-  padding: 15px 0;            /* Add padding to the top/bottom */
+.cardType.answer{
+  border-left: 5px solid #B0BEC5;
 }
 
-.material-icons {
-  font-size: 36px;
-  color: #D32F2F;
-  margin-bottom: 5px;
+.v-chip.answer{
+  background: #CFD8DC;
+  color: black;
+
 }
 
-
-.main-description {
-  color: #D32F2F;
-  font-size: 12px;
-  text-align: center;
-}
 </style>
+
diff --git a/frontend/app/src/views/Game.vue b/frontend/app/src/views/Game.vue
index 86ca531..e5617d6 100644
--- a/frontend/app/src/views/Game.vue
+++ b/frontend/app/src/views/Game.vue
@@ -1,3 +1,127 @@
+
 <template>
-    <h1>Cała planasza gry z kartami</h1>
+  <div class="cards">
+    <v-container>
+        <!-- widok gentelmana, ktory wybiera karty -->
+        <div id="gentelmanView" v-show="gentelaman">
+            <v-layout column align-center>
+                <!-- karta pytanie na srodku -->
+                <v-flex class="mt-5">
+                    <div class="cardQuestion">
+                        <div class="card-main">
+                            <v-avatar size ="100">
+                                <img src="/moustache-white.png">
+                            </v-avatar>
+                            <p class = "pa-1 white--text text-md-center">{{ questionCard.text }}</p>
+                        </div>
+                    </div>
+                </v-flex>
+                <v-flex class="mb-3">
+                    <Popup @projectAdded="snackbar = true"/>
+                </v-flex>
+            </v-layout>
+            <v-layout row wrap>
+            <v-flex xs12 sm6 md4 lg3 v-for="card in cards" :key="card.name">
+                <v-card flat class="text-xs-center ma-3">
+                <v-responsive class="pt-4">
+                    <v-card-text class="ml-5 pl-5">
+
+                    <div class="card">
+                        <div class="card-main">
+                            <v-avatar size ="100" color="white mb-1">
+                                <img src="/moustache-black.png">
+                            </v-avatar>
+                            <p class = "pa-1">{{ card.text }}</p>
+                        </div>
+                    </div>
+                <!-- karty odpowiedzi  -->
+                </v-card-text>
+                </v-responsive>
+                <v-card-actions>
+                    <v-btn flat color="grey">
+                    <!-- <v-icon small left>thumb_up</v-icon> -->
+                        <!-- <v-icon small left>check</v-icon> -->
+                        <v-icon small left>thumb_up_alt</v-icon>
+                    <span>Najlepsza!</span>
+                    </v-btn>
+                </v-card-actions>
+                </v-card>
+
+            </v-flex>
+            </v-layout>
+        </div>
+        <!-- Widok gracz, ktory daje swoje karty -->
+        <div id="user_view" v-show="!gentelaman">
+            <h1>Uzytkownik</h1>
+        </div>
+    </v-container>
+  </div>
 </template>
+
+<script>
+export default {
+    data(){
+      return{
+          gentelaman: true,
+          cards: [
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+          { text: 'Te majce mniej niż 180cm wzrostu pocieszne istoty które nazywają siebie mężczyznami'},
+        ],
+        questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
+
+      }
+    }
+}
+</script>
+
+
+<style>
+.card {
+  width: 200px;                 /* Set width of cards */
+  height: 300px;
+  border: 5px solid #212121;    /* Set up Border */
+  border-radius: 20px;           /* Slightly Curve edges */
+  overflow: hidden;             /* Fixes the corners
+
+  display: flex;                /* Children use Flexbox */
+  flex-direction: column;       /* Rotate Axis */
+}
+
+.cardQuestion{
+  background: #212121;
+  width: 200px;                 /* Set width of cards */
+  height: 300px;
+  border: 5px solid black;    /* Set up Border */
+  border-radius: 20px;           /* Slightly Curve edges */
+  overflow: hidden;             /* Fixes the corners
+
+  display: flex;                /* Children use Flexbox */
+  flex-direction: column;       /* Rotate Axis */
+}
+
+
+.card-main {
+  display: flex;              /* Children use Flexbox */
+  flex-direction: column;     /* Rotate Axis to Vertical */
+  justify-content: center;    /* Group Children in Center */
+  align-items: center;        /* Group Children in Center (+axis) */
+  padding: 15px 0;            /* Add padding to the top/bottom */
+}
+
+.material-icons {
+  font-size: 36px;
+  color: #D32F2F;
+  margin-bottom: 5px;
+}
+
+
+.main-description {
+  color: #D32F2F;
+  font-size: 12px;
+  text-align: center;
+}
+</style>
diff --git a/frontend/app/src/views/Users.vue b/frontend/app/src/views/Users.vue
index 3a64b19..79bdc12 100644
--- a/frontend/app/src/views/Users.vue
+++ b/frontend/app/src/views/Users.vue
@@ -8,7 +8,7 @@
             <v-card flat class="text-xs-center ma-3">
               <v-responsive class="pt-4">
                   <v-avatar size="100" class="grey lighten-2">
-                    <img :src="person.avatar">
+                    <img :src="userAvatar">
                   </v-avatar>
               </v-responsive>
               <v-card-text>
@@ -35,9 +35,10 @@
   export default {
     data(){
       return{
+          userAvatar: '/user-cylinder.png',
           team: [
           { name: 'Sarenka', role: 'Web developer', avatar:'/cylinder11.jpg'},
-          { name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.jpg'},
+          { name: 'Ksiezniczka', role: 'Graphic designer', avatar:'/user-cylinder.png'},
           { name: 'Jeż', role: 'Web developer', avatar:'/test.png'},
           { name: 'Miro', role: 'Social media maverick', avatar:'/user-cylinder.jpg' },
           { name: 'Wilk', role: 'Sales guru', avatar:'/user-cylinder.jpg'},