Advertisement
Guest User

Untitled

a guest
Apr 19th, 2019
128
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.40 KB | None | 0 0
  1. <div id="app">
  2. <v-app>
  3. <v-content class="main-content">
  4. <v-container grid-list-md>
  5. <v-layout row wrap>
  6. <v-flex xs3>
  7. <v-card class="pa-3">
  8. <v-layout column>
  9. <span class="headline">
  10. Projektni filteri
  11. </span>
  12. <v-divider></v-divider>
  13. <span class="title mt-4">
  14. Period u kojem mogu volontirati
  15. </span>
  16. <v-layout row>
  17. <v-menu v-model="periodStartMenu"
  18. :close-on-content-click="false"
  19. max-width="290"
  20. offset-y
  21. full-width>
  22. <template v-slot:activator="{ on }">
  23. <v-text-field :value="periodStartFormatted"
  24. label="Početak perioda"
  25. prepend-icon="event"
  26. readonly
  27. v-on="on">
  28. </v-text-field>
  29. </template>
  30. <v-date-picker v-model="periodStart"
  31. no-title
  32. :max="periodEnd"
  33. first-day-of-week="1"
  34. locale="hr"
  35. @input="periodStartMenu = false">
  36. </v-date-picker>
  37. </v-menu>
  38. <v-menu v-model="periodEndMenu"
  39. :close-on-content-click="false"
  40. max-width="290"
  41. offset-y
  42. full-width>
  43. <template v-slot:activator="{ on }">
  44. <v-text-field v-model="periodEndFormatted"
  45. label="Kraj perioda"
  46. readonly
  47. v-on="on">
  48. </v-text-field>
  49. </template>
  50. <v-date-picker v-model="periodEnd"
  51. no-title
  52. first-day-of-week="1"
  53. locale="hr"
  54. :min="periodStart"
  55. @input="periodEndMenu = false">
  56. </v-date-picker>
  57. </v-menu>
  58. </v-layout>
  59. <v-divider></v-divider>
  60. <span class="title mt-4">
  61. Frekventnost
  62. </span>
  63.  
  64. <v-select v-model="chosenType"
  65. :items="type">
  66. </v-select>
  67.  
  68. <v-checkbox v-model="sameTerm"
  69. v-if="chosenType !== 'Svaki dan'"
  70. label="Termin je isti za svaki dan">
  71. </v-checkbox>
  72.  
  73. <span class="body-2 pl-4" v-if="!sameTerm">
  74. {{ !!selectedItem ? selectedItem.text : 'Odaberi dan' }}
  75. </span>
  76.  
  77. <v-layout row>
  78. <v-select v-model="sameTerm || !selectedItem ? termStart : selectedItem.start"
  79. :disabled="!sameTerm && !selectedItem"
  80. prepend-icon="access_time"
  81. label="Početak termina"
  82. :items="times">
  83. </v-select>
  84.  
  85. <v-select v-model="sameTerm || !selectedItem ? termEnd : selectedItem.end"
  86. :disabled="!sameTerm && !selectedItem"
  87. label="Kraj termina"
  88. :items="times">
  89. </v-select>
  90. </v-layout>
  91.  
  92. <v-select v-model="chosenDays"
  93. :items="weekdays"
  94. label="Odabrani dani"
  95. multiple
  96. v-if="chosenType === 'Neki dani u tjednu'">
  97. <template v-slot:selection="{ item, index }">
  98. <v-chip close
  99. small
  100. class="chip-hover"
  101. @input="removeItem(index, chosenDays)"
  102. @click.stop="selectedItem = item">
  103. <span>{{ item.text }}</span>
  104. </v-chip>
  105. </template>
  106. </v-select>
  107.  
  108. <v-menu v-model="dateMenu"
  109. :close-on-content-click="false"
  110. max-width="290"
  111. offset-y
  112. full-width
  113. v-if="chosenType === 'Neki dani u mjesecu'">
  114. <template v-slot:activator="{ on }">
  115. <v-combobox v-model="chosenDateTimes"
  116. label="Odabrani dani"
  117. multiple
  118. v-on="on">
  119. <template v-slot:selection="{ item, index }">
  120. <v-chip close
  121. small
  122. class="chip-hover"
  123. @input="removeItem(index, chosenDates)"
  124. @click.stop="selectedItem = item">
  125. <span>{{ item.text }}</span>
  126. </v-chip>
  127. </template>
  128. </v-combobox>
  129. </template>
  130. <v-date-picker v-model="chosenDates"
  131. multiple
  132. no-title
  133. first-day-of-week="1"
  134. :min="periodStart"
  135. :max="periodEnd"
  136. locale="hr">
  137. </v-date-picker>
  138. </v-menu>
  139.  
  140. </v-layout>
  141. </v-card>
  142. </v-flex>
  143. <v-flex xs9>
  144. <v-card class="pa-3">
  145. <span class="title">
  146. Projekti po kriterijima
  147. </span>
  148. </v-card>
  149. </v-flex>
  150. </v-layout>
  151. </v-container>
  152. </v-content>
  153. </v-app>
  154. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement