Dodanie regul i seleketa do typu karty
This commit is contained in:
pawlaczyk
parent
8d7196fed1
commit
a7aa79eb46
@ -43,7 +43,7 @@
|
||||
|
||||
<v-layout column align-center>
|
||||
<v-flex class="mt-5">
|
||||
<v-avatar size ="100" color="white">
|
||||
<v-avatar size ="100" color="white" @click="drawer=false">
|
||||
<img src="/cylinder-okragly.png">
|
||||
</v-avatar>
|
||||
<p class="white--text mt-3 subheading">Edżentelmeni</p>
|
||||
|
||||
@ -9,8 +9,15 @@
|
||||
</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-select
|
||||
:items="['pytanie', 'odpowiedź']"
|
||||
label="Typ karty*"
|
||||
required
|
||||
prepend-icon= folder
|
||||
v-model="cardType"
|
||||
:rules="cardTypeRules"
|
||||
></v-select>
|
||||
<v-textarea label="Treść*" v-model="cardText" prepend-icon="edit" :rules="inputRules"></v-textarea>
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn flat class="success mx-0 mt-3" @click="submit" :loading="loading">Add Project</v-btn>
|
||||
@ -26,12 +33,13 @@ import format from 'date-fns/format'
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
title: '',
|
||||
content: '',
|
||||
cardText: '',
|
||||
cardType: '',
|
||||
due: null,
|
||||
inputRules: [
|
||||
v => v.length >= 3 || 'Minimum length is 3 characters'
|
||||
v => v.length >= 2 || 'Treść karty musi mieć minimum 2 znaki'
|
||||
],//array of diferent rules
|
||||
cardTypeRules: [ v=> v.length > 0 || 'Typ karty jest wymagany' ],
|
||||
loading: false,
|
||||
dialog: false
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@ export const store = new Vuex.Store({
|
||||
state: {
|
||||
links:[
|
||||
{ icon: 'dashboard', text: 'Gra', route: '/'},
|
||||
{ icon: "folder", text: 'Karty', route: '/karty'},
|
||||
{ icon: 'person', text: 'Dżentelmani', route: '/dzentelmani'},
|
||||
{ icon: "folder", text: 'Wszystkie Karty', route: '/karty'},
|
||||
// { icon: 'exit_to_app', text: 'Wyloguj', route: '/logout'},
|
||||
// { icon: 'get_app', text: 'Zaloguj', route: '/login'},
|
||||
// { icon: 'account_circle', text: 'Rejestracja', route: '/register'},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<h1 class="subheading grey--text">Dashboard </h1>
|
||||
<h1 class="subheading grey--text">Wszystkie karty z bazy danych </h1>
|
||||
|
||||
<v-container fluid class="my-5">
|
||||
|
||||
|
||||
@ -21,12 +21,13 @@
|
||||
</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-flex xs12 sm6 md4 lg2 v-for="card in cards" :key="card.name">
|
||||
<v-card flat class="text-xs-center ma-1 grey lighten-2 ">
|
||||
<v-responsive class="pt-4">
|
||||
<v-card-text class="ml-5 pl-5">
|
||||
<v-card-text class="">
|
||||
|
||||
<div class="card">
|
||||
<!-- karty odpowiedzi -->
|
||||
<div class="card" @click="chosenCard">
|
||||
<div class="card-main">
|
||||
<v-avatar size ="100" color="white mb-1">
|
||||
<img src="/moustache-black.png">
|
||||
@ -34,17 +35,8 @@
|
||||
<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>
|
||||
@ -74,6 +66,11 @@ export default {
|
||||
questionCard: { text: 'Pracuje 80 godzin tygodniowo i nadal nie stać mnie na ...'},
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
chosenCard(){
|
||||
console.log("Wybrano karte")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -89,6 +86,7 @@ export default {
|
||||
|
||||
display: flex; /* Children use Flexbox */
|
||||
flex-direction: column; /* Rotate Axis */
|
||||
background: white;
|
||||
}
|
||||
|
||||
.cardQuestion{
|
||||
|
||||
@ -13,13 +13,12 @@
|
||||
</v-responsive>
|
||||
<v-card-text>
|
||||
<div class="subheading">{{ person.name }}</div>
|
||||
<div class="grey--text">{{ person.role }}</div>
|
||||
<div class="grey--text">Liczba wygranych partii</div>
|
||||
<div class="grey--text">{{ person.userDescription }}</div>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn flat color="grey">
|
||||
<v-icon small left>message</v-icon>
|
||||
<span>Message</span>
|
||||
<v-icon small left>grade</v-icon>
|
||||
<span>{{person.points}}</span>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
@ -37,11 +36,11 @@
|
||||
return{
|
||||
userAvatar: '/user-cylinder.png',
|
||||
team: [
|
||||
{ name: 'Sarenka', role: 'Web developer', avatar:'/cylinder11.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'},
|
||||
{ name: 'Sarenka', userDescription: 'Opis swoj uzytkownika', points: 100},
|
||||
{ name: 'Ksiezniczka', userDescription: 'Graphic designer', points: 100},
|
||||
{ name: 'Jeż', userDescription: 'Web developer', points: 100},
|
||||
{ name: 'Miro', userDescription: 'Social media maverick', points: 100 },
|
||||
{ name: 'Wilk', userDescription: 'Sales guru', points: 100},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user