Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id="app">
- <v-app>
- <v-content class="main-content">
- <v-container grid-list-md>
- <v-layout row wrap>
- <v-flex xs3>
- <v-card class="pa-3">
- <v-layout column>
- <span class="headline">
- Projektni filteri
- </span>
- <v-divider></v-divider>
- <span class="title mt-4">
- Period u kojem mogu volontirati
- </span>
- <v-layout row>
- <v-menu v-model="periodStartMenu"
- :close-on-content-click="false"
- max-width="290"
- offset-y
- full-width>
- <template v-slot:activator="{ on }">
- <v-text-field :value="periodStartFormatted"
- label="Početak perioda"
- prepend-icon="event"
- readonly
- v-on="on">
- </v-text-field>
- </template>
- <v-date-picker v-model="periodStart"
- no-title
- :max="periodEnd"
- first-day-of-week="1"
- locale="hr"
- @input="periodStartMenu = false">
- </v-date-picker>
- </v-menu>
- <v-menu v-model="periodEndMenu"
- :close-on-content-click="false"
- max-width="290"
- offset-y
- full-width>
- <template v-slot:activator="{ on }">
- <v-text-field v-model="periodEndFormatted"
- label="Kraj perioda"
- readonly
- v-on="on">
- </v-text-field>
- </template>
- <v-date-picker v-model="periodEnd"
- no-title
- first-day-of-week="1"
- locale="hr"
- :min="periodStart"
- @input="periodEndMenu = false">
- </v-date-picker>
- </v-menu>
- </v-layout>
- <v-divider></v-divider>
- <span class="title mt-4">
- Frekventnost
- </span>
- <v-select v-model="chosenType"
- :items="type">
- </v-select>
- <v-checkbox v-model="sameTerm"
- v-if="chosenType !== 'Svaki dan'"
- label="Termin je isti za svaki dan">
- </v-checkbox>
- <span class="body-2 pl-4" v-if="!sameTerm">
- {{ !!selectedItem ? selectedItem.text : 'Odaberi dan' }}
- </span>
- <v-layout row>
- <v-select v-model="sameTerm || !selectedItem ? termStart : selectedItem.start"
- :disabled="!sameTerm && !selectedItem"
- prepend-icon="access_time"
- label="Početak termina"
- :items="times">
- </v-select>
- <v-select v-model="sameTerm || !selectedItem ? termEnd : selectedItem.end"
- :disabled="!sameTerm && !selectedItem"
- label="Kraj termina"
- :items="times">
- </v-select>
- </v-layout>
- <v-select v-model="chosenDays"
- :items="weekdays"
- label="Odabrani dani"
- multiple
- v-if="chosenType === 'Neki dani u tjednu'">
- <template v-slot:selection="{ item, index }">
- <v-chip close
- small
- class="chip-hover"
- @input="removeItem(index, chosenDays)"
- @click.stop="selectedItem = item">
- <span>{{ item.text }}</span>
- </v-chip>
- </template>
- </v-select>
- <v-menu v-model="dateMenu"
- :close-on-content-click="false"
- max-width="290"
- offset-y
- full-width
- v-if="chosenType === 'Neki dani u mjesecu'">
- <template v-slot:activator="{ on }">
- <v-combobox v-model="chosenDateTimes"
- label="Odabrani dani"
- multiple
- v-on="on">
- <template v-slot:selection="{ item, index }">
- <v-chip close
- small
- class="chip-hover"
- @input="removeItem(index, chosenDates)"
- @click.stop="selectedItem = item">
- <span>{{ item.text }}</span>
- </v-chip>
- </template>
- </v-combobox>
- </template>
- <v-date-picker v-model="chosenDates"
- multiple
- no-title
- first-day-of-week="1"
- :min="periodStart"
- :max="periodEnd"
- locale="hr">
- </v-date-picker>
- </v-menu>
- </v-layout>
- </v-card>
- </v-flex>
- <v-flex xs9>
- <v-card class="pa-3">
- <span class="title">
- Projekti po kriterijima
- </span>
- </v-card>
- </v-flex>
- </v-layout>
- </v-container>
- </v-content>
- </v-app>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement