-
Notifications
You must be signed in to change notification settings - Fork 0
/
Home.vue
352 lines (339 loc) · 29.9 KB
/
Home.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<template>
<div id="home">
<div class="container">
<div class="row py-4">
<div class="col-xl-6 col-12">
<span class="h2">Magic: The Gathering Card Search</span>
</div>
<div class="col-xl-6 col-12">
<div class="row">
<div class="col-xl-5 col-12 search-fields">
<v-select v-on:input="submitSearch()" label="name" :options="setList" :clearable="false" v-model="params.set" class="set-select">
<template slot="option" slot-scope="option">
<img class="set-select-img" :src="option.logo"/>
{{ option.name }}
</template>
<template slot="selected-option" slot-scope="option">
<img class="set-select-img vs__selected" :src="option.logo"/>
<span class="vs__selected">{{ option.name }}</span>
</template>
</v-select>
</div>
<div class="col-xl-3 col-6 search-fields">
<v-select v-on:input="submitSearch()" label="name" :options="colorList" :clearable="false" v-model="params.color" class="color-select">
<template slot="option" slot-scope="option">
<img class="color-select-img" :src="option.logo"/>
{{ option.name }}
</template>
<template slot="selected-option" slot-scope="option">
<img class="color-select-img vs__selected" :src="option.logo"/>
<span class="vs__selected">{{ option.name }}</span>
</template>
</v-select>
</div>
<!-- <div class="col-xl-1 col-3 text-center search-fields search-button">
<button type="button" class="btn btn-light" v-on:click="submitSearch()">Submit</button>
</div> -->
<div class="col-xl-4 col-6 search-fields by-name">
<v-select placeholder="Search name" @search="fetchOptions" v-on:input="searchByName()" :options="nameList" v-model="nameSelected" :clearable="false" class="name-search">
<div slot="no-options">Enter at least two letters</div>
<template slot="selected-option" slot-scope="option">
<span class="vs__selected">{{ option.label }}</span>
</template>
</v-select>
</div>
</div>
</div>
</div>
</div>
<div v-show="loading === false">
<div v-show="cards.length > 20">
<nav aria-label="page navigation">
<ul class="pagination justify-content-center">
<li class="page-item" :class="{ disabled : page === 0 }">
<a class="page-link" v-on:click="prevPage()">Previous</a>
</li>
<li class="page-item" :class="{ disabled : thisPage === page+1 }" v-for="thisPage in Math.ceil(cards.length/24)" :key="thisPage">
<a class="page-link" v-on:click="pageLink(thisPage)">
{{ thisPage }}
</a>
</li>
<li class="page-item" :class="{ disabled : (page+1)*24 >= cards.length }">
<a class="page-link" v-on:click="nextPage()">Next</a>
</li>
</ul>
</nav>
</div>
<div class="container">
<div v-if="cards.length > 1" class="row multi-card">
<div v-for="card in cards.slice(page*24, (page+1)*24)" :key="card.id" class="col-lg-2 col-md-4 col-sm-6 col-6 px-1">
<mtg-card :card="card"></mtg-card>
</div>
</div>
<div v-if="cards.length === 1" class="row single-card justify-content-center">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-10 col-10 px-1">
<mtg-card :card="cards[0]"></mtg-card>
</div>
</div>
</div>
<div v-show="cards.length > 20">
<nav aria-label="page navigation">
<ul class="pagination justify-content-center">
<li class="page-item" :class="{ disabled : page === 0 }">
<a class="page-link" v-on:click="prevPage()">Previous</a>
</li>
<li class="page-item" :class="{ disabled : thisPage === page+1 }" v-for="thisPage in Math.ceil(cards.length/24)" :key="thisPage">
<a class="page-link" v-on:click="pageLink(thisPage)">
{{ thisPage }}
</a>
</li>
<li class="page-item" :class="{ disabled : (page+1)*24 >= cards.length }">
<a class="page-link" v-on:click="nextPage()">Next</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="container">
<div v-show="loading === true">Loading...</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import mtgCard from '@/components/mtgCard.vue'
export default {
name: 'home',
components: {
'mtg-card': mtgCard
},
data () {
return {
cards: [],
page: 0,
pageLimit: 20,
params: {
color: null,
set: null
},
loading: true,
setList: [],
colorList: [
{ id: 'red', name: 'Red', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48Y2lyY2xlIGZpbGw9 JyNFNDk5NzcnIGN4PSc1MCcgY3k9JzUwJyByPSc1MCcvPjxwYXRoIGQ9J005 MS45NjUgNjYuNjE3Yy0zLjczNiA4LjkxMi0xMS4xNiAxMy4zNjctMjIuMjc1 IDEzLjM2Ny0yLjAzNyAwLTQuMjQ2LjI1NC02LjYyMS43NjItMy41NjQuNzY0 LTUuMzQ2IDEuODI4LTUuMzQ2IDMuMTg2IDAgLjQyNC4yOTUuOTEuODkxIDEu NDYzLjU5Mi41NTMgMS4xMDQuODI2IDEuNTI3LjgyNi0yLjEyMyAwLS42OC4w NjQgNC4zMjYuMTkxIDUuMDA4LjEyNyA4LjE0OC4xOTEgOS40MjIuMTkxLTcu MzgzIDQuMzI2LTE5LjczMiA2LjMxOS0zNy4wNDMgNS45ODEtNS42ODgtLjA4 NC0xMC41NjYtMi41ODgtMTQuNjM5LTcuNTEtMy45OTItNC42NjktNS45ODQt OS44ODgtNS45ODQtMTUuNjU4IDAtNi4xMDggMi4wNTctMTEuMzA4IDYuMTc2 LTE1LjU5NSA0LjExMy00LjI4MiA5LjIyOS02LjQyNyAxNS4zMzgtNi40Mjcg MS4zNTcgMCAzLjE2LjI5NyA1LjQxLjg5MSAyLjI0OC41OTQgMy43NTYuODkx IDQuNTE4Ljg5MSAzLjEzOSAwIDcuMDQ1LTEuMjkzIDExLjcxMy0zLjg4MyA0 LjY2Ni0yLjU4OCA2Ljg3NS0zLjg4MyA2LjYyMS0zLjg4My0uODUgOC45MTIt My44MiAxNC44OTYtOC45MTQgMTcuOTQ4LTMuNjQ4IDIuMTIzLTUuNDczIDQu MjAxLTUuNDczIDYuMjM2IDAgMS4yNzMuNzY0IDIuMjkzIDIuMjkxIDMuMDU3 IDEuMTg4LjU5NSAyLjUwMi44OTIgMy45NDUuODkyIDIuMjA3IDAgNC4zNzEt MS4zNTYgNi40OTQtNC4wNzEgMi4xMTktMi43MTggMy4wNTUtNS4xNzcgMi44 MDEtNy4zODYtLjI1NC0yLjU0NS0uMDg0LTUuNjAzLjUxLTkuMTY0LjE2OC0x LjAyLjc4My0yLjI3IDEuODQ0LTMuNzU0IDEuMDYxLTEuNDg2IDIuMDE2LTIu Mzk4IDIuODY1LTIuNzM4IDAgLjc2Mi0uMjc1IDIuMDM3LS44MjggMy44MTgt LjU1MyAxLjc4MS0uODI2IDMuMS0uODI2IDMuOTQ3IDAgMS44NjcuNTA4IDMu MzA5IDEuNTI3IDQuMzI2IDEuNTI1LS41OTIgMi44ODMtMi41MDIgNC4wNzQt NS43MjkgMS4wMTYtMi40NTkgMS42MDktNC44MzYgMS43ODEtNy4xMjctMy41 NjYtLjE3LTYuOTgyLTEuNzgxLTEwLjI0OC00LjgzOC0zLjI2OC0zLjA1Ny00 LjktNi4zNjUtNC45LTkuOTI4IDAtLjU5NC4wODItMS4xODguMjU2LTEuNzgz LjUwOC43NjQgMS4yNzEgMS45NTMgMi4yODkgMy41NjQgMS40NDMgMi4xMjEg Mi41NDcgMy4xODIgMy4zMTMgMy4xODIgMS4wMTYgMCAxLjUyNS0xLjA2MSAx LjUyNS0zLjE4MiAwLTIuNzE1LS43MjMtNS4xNzYtMi4xNjQtNy4zODMtMS42 MTMtMi42MzEtMy42OTMtMy45NDctNi4yMzgtMy45NDctMS4xODkgMC0yLjk3 MS42MzctNS4zNDQgMS45MS0yLjM3OSAxLjI3MS00LjU0MyAxLjkxLTYuNDky IDEuOTEtLjU5NiAwLTMuMjI5LS43NjYtNy44OTUtMi4yOTMgOC4yMy0xLjM1 NSAxMi4zNDgtMi41ODYgMTIuMzQ4LTMuNjkxIDAtMi44ODUtNS42NDUtNC44 MzgtMTYuOTMtNS44NTUtMS4xMDUtLjA4NC0zLjE0MS0uMjU0LTYuMTExLS41 MS4zMzgtLjQyNCAyLjc1OC0uODkxIDcuMjU4LTEuNCAzLjgxOC0uNDIyIDYu NDkyLS42MzcgOC4wMTgtLjYzNyAyMC4xOTcgMCAzMy4wMTIgOS44MDUgMzgu NDQzIDI5LjQwOC45MzQtLjc3MyAxLjQwMi0yLjA2NiAxLjQwMi0zLjg3MSAw LTIuMzI0LS42OC01LjI1LTIuMDM3LTguNzc3LS41MTItMS4zNzUtMS4zMTgt My40NDEtMi40Mi02LjE5MyA2Ljk1NyA4Ljg2NyAxMC40MzkgMTcuMjcgMTAu NDM5IDI1LjE5OSAwIDQuMTc4LS45NzkgNy45NzMtMi45MyAxMS4zODEtMS4y NyAyLjMwMy0zLjY1IDUuMjQ0LTcuMTI3IDguODI2LTMuNDggMy41OC01Ljg1 NyA2LjM1Mi03LjEzMSA4LjMxMyA0LjY2OC0xLjI3MSA3LjcyNS0yLjI0OCA5 LjE2OC0yLjkyOCAzLjIyMy0xLjQ0IDYuMTUtMy42MDYgOC43ODMtNi40OTIg MCAxLjEwNi0uNDY3IDIuNzYyLTEuNCA0Ljk2N3ptLTU1LjUwMi01MC4wMjVj MCAxLjUyNS0uODUgMi41MDItMi41NDUgMi45MjZsLTMuMzExLjUxYy0xLjE4 OS41OTQtMi45MjggMi45MjgtNS4yMTkgNy0uMjU2LTEuMjcxLS42MzctMy4w NTMtMS4xNDYtNS4zNDYtLjc2NC4wODYtMi4wMzUuNzY0LTMuODE4IDIuMDM3 LS43NjQuNTk0LTEuOTk2IDEuNDg0LTMuNjkzIDIuNjcyLjUxMi0zLjA1NSAy LjIwNy02LjE0OCA1LjA5NC05LjI5MyAzLjA1NS0zLjQ3NyA2LjAyNS01LjIx NyA4LjkxLTUuMjE3IDMuODE4IDAgNS43MjggMS41NzIgNS43MjggNC43MTF6 bTIyLjE1IDExLjcwOWMwIDEuNDQzLS43ODUgMi42NTQtMi4zNTUgMy42Mjkt MS41Ny45NzctMy4xMTkgMS40NjUtNC42NDYgMS40NjUtMi4wMzcgMC0zLjg2 My0xLjE0Ni01LjQ3My0zLjQzOC0xLjk1NS0yLjgwMS0zLjk0Ny00LjYyNS01 Ljk4NC01LjQ3Ny40MjQtLjQyMi45MzQtLjYzNSAxLjUyOS0uNjM1Ljc2NCAw IDIuMDU1LjU5NCAzLjg4MSAxLjc4MSAxLjgyNCAxLjE4OSAyLjk5IDEuNzgz IDMuNTAyIDEuNzgzLjQyNCAwIDEuMTIzLS41OTQgMi4xLTEuNzgzLjk3NS0x LjE4OCAyLjA1Ny0xLjc4MSAzLjI0Ni0xLjc4MSAyLjguMDAxIDQuMiAxLjQ4 NyA0LjIgNC40NTZ6JyBmaWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'blue', name: 'Blue', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48Y2lyY2xlIGZpbGw9 JyNDMUQ3RTknIGN4PSc1MCcgY3k9JzUwJyByPSc1MCcvPjxwYXRoIGQ9J002 Ny40ODggODMuNzE5Yy00Ljc4NyA0Ljg3MS0xMC42ODQgNy4zMDctMTcuNjg4 IDcuMzA3LTcuODYxIDAtMTQuMDk4LTIuNjktMTguNzExLTguMDczLTQuMzU5 LTUuMTI3LTYuNTM3LTExLjY2Mi02LjUzNy0xOS42MDYgMC04LjU0MyAzLjcx Ny0xOC4yODYgMTEuMTUtMjkuMjI0IDYuMDY0LTguOTY5IDEzLjE5OS0xNi44 MyAyMS40MDItMjMuNTgtMS4xOTcgNS40NjktMS43OTMgOS4zNTUtMS43OTMg MTEuNjYyIDAgNS4yOTkgMS42NjQgMTAuNDY3IDQuOTk2IDE1LjUwOCA0LjEw MiA1Ljk4IDcuMjE5IDEwLjQyNiA5LjM1NyAxMy4zMjggMy4zMzIgNS4wNDMg NC45OTggOS45NTUgNC45OTggMTQuNzM3LjAwMiA3LjA5My0yLjM5MSAxMy4w NzQtNy4xNzQgMTcuOTQxem0tLjEyOS0yNy4zNjJjLTEuMjgxLTIuODYxLTIu Nzc3LTQuNzYyLTQuNDg2LTUuNzAzLjI1Ni41MTQuMzg1IDEuMjQuMzg1IDIu MTggMCAxLjc5NS0uNTEyIDQuMzU3LTEuNTM5IDcuNjg5bC0xLjY2NCA1LjEy N2MwIDIuOTkgMS40OTIgNC40ODYgNC40ODQgNC40ODYgMy4xNiAwIDQuNzQy LTIuMDk1IDQuNzQyLTYuMjgxIDAtMi4xMzQtLjY0LTQuNjMyLTEuOTIyLTcu NDk4eicgZmlsbD0nIzBEMEYwRicvPjwvZz48L3N2Zz4K' },
{ id: 'black', name: 'Black', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyB0cmFuc2Zvcm09J3RyYW5zbGF0ZSgwIC0x KScgZmlsbD0nbm9uZSc+PGNpcmNsZSBmaWxsPScjQkFCMUFCJyBjeD0nNTAn IGN5PSc1MC45OTgnIHI9JzUwJy8+PHBhdGggZD0nTTkwLjY5NSA0OS42MTlj MCA1LjUxOC0yLjAwOCA5LjI4MS02LjAyIDExLjI4Ny0xLjE3Mi41ODYtNC44 NSAxLjM3OS0xMS4wMzcgMi4zODMtNC4wMTIuNjctNi4wMTggMi4yMTctNi4w MTggNC42Mzl2MTAuMTU4YzAgLjQyMi4xMjUgMS43MTUuMzc1IDMuODg5bC4z NzcgNC4wMTRjMCAxLjI1NS0uMjkzIDMuMzA2LS44NzkgNi4xNDYtMS41ODgu MzM0LTMuNDI4LjcwOS01LjUxOCAxLjEzMi0uNjctMi41MTEtMS4wMDQtNC4y MjQtMS4wMDQtNS4xNDYgMC0uNDE2LjEwNS0xLjA0NS4zMTMtMS44ODIuMjA3 LS44MzQuMzE2LTEuNDYxLjMxNi0xLjg4MyAwLS41OC0uNTItMi4yMTMtMS41 NTktNC44ODdoLTEuOTQ1Yy0uMjU4LjQxOC0uMzQ0Ljk2MS0uMjYgMS42Mjku MzM0IDEuNDIyLjQ1OSAyLjYzMy4zNzcgMy42MzctMS40MjIgMS4wMDQtMy4z ODcgMi4zNDEtNS44OTUgNC4wMTMtLjU4Ni0uMTY2LS43OTMtLjI1LS42Mjkt LjI1di04LjkwNGMtLjE2NC0uNDE2LS41ODQtLjU4MS0xLjI1NC0uNTAyaC0x LjUwNGwtMS41MDQgMTEuNzg3Yy0xLjE3NC4wODQtMi41OTIuMDg0LTQuMjY0 IDAtLjU4OC0yLjc1OC0xLjYzMS02Ljg1My0zLjEzNS0xMi4yODloLTEuMDA0 Yy0uOTIyIDIuOTI5LTEuNDIyIDQuNTE5LTEuNTA2IDQuNzY5IDAgLjMzNC4x MDQuOTgxLjMxNCAxLjk0Mi4yMDcuOTYyLjMxMyAxLjYwOS4zMTMgMS45NDMg MCAuMjUtLjA4NC44NzctLjI1IDEuODgxbC0uMzc3IDMuMDFjLS4xNjguMTY2 LS4zNzcuMjUtLjYyNy4yNS0yLjUwOCAwLTQuMTgyLS42MjctNS4wMTYtMS44 NzktLjgzNi0xLjI1Ni0xLjE3Mi0zLjAxMi0xLjAwNC01LjI3MWwxLjAwNC0x NS4wNDdjMC0uMjUyLjA4Mi0uNTg2LjI1LTEuMDA0LjE2NC0uNDE4LjI1LS43 MTEuMjUtLjg3NyAwLS42Ny0uNzExLTIuMDA4LTIuMTMxLTQuMDE0LS4yNDgt LjA4Mi0xLjU0OS0uMzc3LTMuODg3LS44NzktMS40MjQtLjMzNC00LjIyNS0u OTE4LTguNDAyLTEuNzU2LTUuNzcxLTEuMDg0LTguNjU0LTUuNzI1LTguNjU0 LTEzLjkyIDAtMTIuMjA3IDUuMDE4LTIyLjM2NSAxNS4wNTEtMzAuNDc1LjQx NCAyLjI1OCAxLjEyNyA1LjI2NiAyLjEyOSA5LjAyOS43NTQuMTcgMi4zODUu NTQ1IDQuODkxIDEuMTI5LjUwNC4xNjggMy4wNTMgMS4wODggNy42NTIgMi43 Ni0yLjM0NC0xLjQyMi01LjM5My0zLjcxOS05LjE1Ni02Ljg5OC0xLjQyMi0x LjY3Mi0yLjEzMy00LjQ3MS0yLjEzMy04LjQgMC0uOTIgMS41OS0yLjAwOCA0 Ljc2OC0zLjI2NCAyLjg0LTEuMTcgNC45NzUtMS44MzYgNi4zOTYtMi4wMDYg NC41MTQtLjU4MiA3Ljk4NC0uODc5IDEwLjQxLS44NzkgMTAuNDQ5IDAgMTgu ODkxIDIuNjc4IDI1LjMyOCA4LjAyOS0yLjA4OCAyLjQyNi01LjY4NCA1LjAx NC0xMC43ODMgNy43NzMgMi4wMDguMDg0IDQuOTM0LS43MDcgOC43NzktMi4z ODMgMy44NDQtMS42NyA1LjQ3NS0yLjUwOCA0Ljg5MS0yLjUwOC42NjggMCAy LjAwOCAxLjM0IDQuMDE0IDQuMDE0IDEuNTA0IDIuMDA2IDIuNzE1IDMuODA3 IDMuNjM3IDUuMzkxIDIuNjc0IDQuNzY4IDQuNDcxIDkuOTA4IDUuMzkzIDE1 LjQyNiAwIDEuOTI2LjA0MSAzLjMwNS4xMjUgNC4xMzl2MS4wMDRoLjAwMnpt LTQ4LjAzMSAyLjI1OGMwLTMuNTk0LTEuNTY4LTcuMDAyLTQuNzAzLTEwLjIy My0zLjEzNy0zLjIxOS02LjUwMi00LjgyNi0xMC4wOTYtNC44MjYtMy4xNzgg MC01Ljk3NyAxLjM0OC04LjQwMiA0LjAzOS0yLjQyNiAyLjY5My0zLjYzNyA1 LjY4Mi0zLjYzNyA4Ljk2MyAwIDIuODU5IDEuMzc5IDQuNzEzIDQuMTM5IDUu NTUzIDEuNzU2LjUwNiA0LjIxOS44MDEgNy4zOTguODgzaDYuODk4YzUuNTk4 LjA4NCA4LjQwMy0xLjM3OSA4LjQwMy00LjM4OXptMTMuNjY4IDE1LjU1M3Yt My44ODljLS41ODQtMS4wODYtMS4xNy0yLjIxNS0xLjc1NC0zLjM4Ny0uNTAy LTEuNjc0LTEuNDIyLTQuMDE0LTIuNzYtNy4wMjVsLTEuMzgxIDE0LjY3NGMw IDEuMTcyLS4yNSAxLjc1Ni0uNzUyIDEuNzU2LS4zMzQgMC0uNTg0LS4wODIt Ljc1Mi0uMjQ4LS41ODYtOC44NjMtLjg3OS0xMi43MDktLjg3OS0xMS41NDF2 LTQuMzg3Yy0uMTY4LS4yNTQtLjM3NS0uMzc5LS42MjUtLjM3OS0yLjg0NCAy LjkzLTQuMjY0IDcuNjUyLTQuMjY0IDE0LjE3MiAwIDMuNTk2LjMzIDUuODEx IDEuMDAyIDYuNjQ4LjY3LS4xNjYgMS40MjItLjQ1OSAyLjI1OC0uODc3LjMz NC0uMTY4IDEuMjk1LS4yNTIgMi44ODctLjI1MiAxLjU4NCAwIDMuNTEuNTAy IDUuNzY2IDEuNTA0LjgzNiAwIDEuMjU0LTIuMjU2IDEuMjU0LTYuNzY5em0y OC4zNDQtMTcuNDc1YzAtMy4zNjctMS4yNTQtNi4zNzUtMy43NjItOS4wMjUt Mi41MS0yLjY0OC01LjM5NS0zLjk3NS04LjY1Mi0zLjk3NS0zLjUxMiAwLTYu Nzk1IDEuNjA3LTkuODQ2IDQuODI2LTMuMDUzIDMuMjE5LTQuNTc4IDYuNTg0 LTQuNTc4IDEwLjA5NiAwIDIuOTI4IDEuNDIgNC4zODkgNC4yNjQgNC4zODlo MTQuNDIyYzUuNDMzLS4wODIgOC4xNTItMi4xODYgOC4xNTItNi4zMTF6JyBm aWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'green', name: 'Green', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48cGF0aCBkPSdNMTAw IDQ5Ljk5OGMwIDI3LjYxNS0yMi4zODUgNTAuMDAyLTUwLjAwMiA1MC4wMDIt MjcuNjEzIDAtNDkuOTk4LTIyLjM4Ny00OS45OTgtNTAuMDAyIDAtMjcuNjEz IDIyLjM4NS00OS45OTggNDkuOTk4LTQ5Ljk5OCAyNy42MTcgMCA1MC4wMDIg MjIuMzg1IDUwLjAwMiA0OS45OTh6JyBpZD0nU2hhcGUnIGZpbGw9JyNBM0Mw OTUnLz48cGF0aCBkPSdNOTMuNzYyIDU2LjIyNWMwIDEuNjY4LS42NDUgMy4x NjQtMS45MzYgNC40OTgtMS4yODkgMS4zMzItMi43NyAxLjk5OC00LjQzNiAx Ljk5OC0yLjY2MiAwLTQuNjIzLTEuMjUtNS44NjktMy43NDhsLTUuODcxLS4y NWMtMS4yNTIgMC0zLjcwOS41NDMtNy4zNzEgMS42MjUtMy45MTQgMS4wODIt Ni4xNjQgMS45NTctNi43NDYgMi42MjMtLjkxNi45OTgtMS42NjQgMy4zMzIt Mi4yNDggNi45OTYtLjUwMiAyLjk5OC0uNzQ4IDUuMjA1LS43NDggNi42MjEg MCAyLjI0Ni4zNTIgMy44OTMgMS4wNjEgNC45MzQuNzA5IDEuMDQxIDIuMTY2 IDEuOTE2IDQuMzcxIDIuNjIzIDIuMjA1LjcwNyAzLjU2MSAxLjEwNCA0LjA2 MSAxLjE4Ny4zMzIgMCAuODczLS4wNDEgMS42MjUtLjEyNWgxLjQ5OGMxLjA4 IDAgMi4yMDUuMTcgMy4zNzMuNSAxLjY2Ni41IDIuMzc1IDEuMTY2IDIuMTI1 IDItMS4xNjgtLjE2Ni0zLjIwNy4wODQtNi4xMjEuNzVsMy40OTYgMS43NDhj MCAxLTEuNDE2IDEuNDk4LTQuMjQ2IDEuNDk4LS43NTIgMC0xLjc3MS0uMTY2 LTMuMDYzLS40OTgtMS4yOTEtLjMzNi0yLjE0NS0uNS0yLjU1OS0uNWgtMS42 MjVjLS4wODIuODMyLS4zMzQgMi4wOC0uNzUgMy43NDYtMS40MTgtLjA4NC0z LjA4LS45MTgtNC45OTYtMi40OTgtMS45MTgtMS41OC0zLjEyMy0yLjM3My0z LjYyMS0yLjM3My0uNTAyIDAtMS4yMTEuNzkzLTIuMTI1IDIuMzczLS45MTgg MS41OC0xLjM3NSAyLjY2NC0xLjM3NSAzLjI0OC0xLjA4Mi0uNTg0LTEuOTk2 LTEuNjY4LTIuNzUtMy4yNDgtLjMzMi0xLjA4NC0uNzA3LTIuMTY2LTEuMTIx LTMuMjQ4LS44MzIuMDg0LTIuMzc1IDEuODM0LTQuNjIxIDUuMjQ4aC0uNjI3 Yy0uMTY2LS4yNTItLjc5NS0yLTEuODczLTUuMjQ4LTIuNTgyLS44MzItNC45 OTYtMS4yNDgtNy4yNDYtMS4yNDgtMS4wODIgMC0yLjc0OC4yNS00Ljk5Ni43 NDhsLTMuNDk2LS4yNDhjLjQ5OC0uNSAxLjk1NS0xLjQ1NyA0LjM3MS0yLjg3 MyAyLjgzLTEuNjY2IDQuOTk2LTIuNSA2LjQ5Ni0yLjUuMjQ2IDAgLjU3OC4w NDMgMSAuMTI1LjQxNC4wODYuNzUuMTI1IDEgLjEyNS41NzggMCAxLjUxOC0u MzEyIDIuODA5LS45MzggMS4yOTEtLjYyMyAyLjAzOS0xLjE4NiAyLjI0Ni0x LjY4NC4yMTEtLjUwNC4zMTYtMS43OTMuMzE2LTMuODc1IDAtNC43NDYtMS4y NS04LjI4NS0zLjc1LTEwLjYxNy0yLjE2OC0yLjA4Mi01Ljc0Ni0zLjU4LTEw Ljc0NC00LjQ5OC0xLjMzMiA0Ljc0Ni01LjA4IDcuMTIzLTExLjI0IDcuMTIz LTIgMC0zLjk5OC0xLjIwNy01Ljk5Ni0zLjYyMy0xLjk5Ni0yLjQxNi0yLjk5 Ni00LjYyMy0yLjk5Ni02LjYyMSAwLTMuMDgyIDEuMjg3LTUuNjIxIDMuODY5 LTcuNjIzLTIuMDgtMi4xNjItMy4xMjEtNC4zNjktMy4xMjEtNi42MTcgMC0y LjA4NC42NDMtMy45MTQgMS45MzYtNS41IDEuMjkxLTEuNTc4IDIuOTc3LTIu NDk2IDUuMDU5LTIuNzQ4LS4xNjYtMi42NjIuNzA3LTQuNDk2IDIuNjIzLTUu NDk2LS45MTYtLjkxNC0xLjM3My0yLjUzNy0xLjM3My00Ljg2OSAwLTIuNzQ4 LjkxNi01LjAzOSAyLjc0OC02Ljg3MSAxLjgzLTEuODMyIDQuMTIxLTIuNzUg Ni44NjktMi43NSAzIDAgNS40NTcgMS4wNDUgNy4zNzEgMy4xMjUgMi40MTYt OC4yNDQgNy42MjEtMTIuMzY3IDE1LjYxMy0xMi4zNjcgNC4xNjQgMCA3Ljgy OCAxLjY2NiAxMC45OTQgNC45OTggMS4xNjYgMS4yNDggMS43NDggMS45MTYg MS43NDggMS45OTYtMSAwLS40OTgtLjE4OCAxLjUtLjU2MSAxLjk5Ni0uMzc1 IDMuNDUzLS41NjMgNC4zNzMtLjU2MyAzLjI0NiAwIDYuMTE5IDEuMjA3IDgu NjE5IDMuNjIzIDIuMTY0IDIuMTY2IDMuNjY0IDQuOTEyIDQuNDk4IDguMjQ0 LjU4LjA4NCAxLjQ5OC4zMzIgMi43NDguNzQ4IDEuODMuOTIgMi43NDggMi40 OTggMi43NDggNC43NDggMCAuNDE4LS4zMzYgMS4yMDktMSAyLjM3MyA1LjMy OCAyLjk5OCA3Ljk5NCA3LjE2MiA3Ljk5NCAxMi40OTIgMCAxLjQ5OC0uNTgy IDMuNTg0LTEuNzQ4IDYuMjQ3IDIuMTY2IDEuMjQ3IDMuMjQ2IDMuMDgxIDMu MjQ2IDUuNDk1em0tNTEuNDY3IDUuNDk2di0xLjYyM2MwLTEuOTE0LS45MzYt My42NjQtMi44MDktNS4yNDYtMS44NzUtMS41ODItMy43Ny0yLjM3My01LjY4 NC0yLjM3My0yLjMzNCAwLTQuNDk2LjU0MS02LjQ5NiAxLjYyMSA0LjQxMy0u MjQ4IDkuNDExIDIuMjkzIDE0Ljk4OSA3LjYyMXptLTIuMjQ2LTE1LjQ4OWMt MS4yNS0xLjQxOC0yLjMzMi0yLjg3NS0zLjI1LTQuMzczLTMuNDk4LjkxNi01 LjI0NiAxLjk1Ny01LjI0NiAzLjEyMSAxLS4wOCAyLjQ1Ny4xMDUgNC4zNzEu NTY0IDEuOTE0LjQ1OSAzLjI5MS42ODggNC4xMjUuNjg4em03LjYyMS0zLjg3 M3YtNS40OTZjLTItLjMzMi0zLjIxMS0uNS0zLjYyMy0uNXYxLjg3M2wzLjYy MyA0LjEyM3ptMTYuMjM4LTMuNDk4Yy0xLS40MTYtMi44NzUtMS4yNS01LjYy MS0yLjQ5OHYxMC43NDJjMy45MTItMi4yNSA1Ljc4NS00Ljk5OCA1LjYyMS04 LjI0NHptNi44NjcgMTQuNzQxbC0yLjc0Ni0zLjM3M2MtMS42NjQgMS4xNjct My4zNTIgMi4zNTQtNS4wNjEgMy41NjEtMS43MDkgMS4yMDctMy4xODYgMi41 NjMtNC40MzIgNC4wNiAzLjc0Ny0yLjAwMiA3LjgyOS0zLjQxNCAxMi4yMzkt NC4yNDh6JyBmaWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'white', name: 'White', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48Y2lyY2xlIGZpbGw9 JyNGOEY2RDgnIGN4PSc1MCcgY3k9JzUwJyByPSc1MCcvPjxwYXRoIGQ9J005 Ny42OTEgNTcuMDY0Yy02LjU2MS0zLjY5OS0xMC43NjgtNS41NTEtMTIuNjE3 LTUuNTUxLTEuMzQ0IDAtMi4zOTUgMS4wMzItMy4xNTQgMy4wOTItLjc1OCAy LjA2My0yLjI3IDMuMDktNC41NDEgMy4wOS0uOTI2IDAtMi44MTgtLjMzNi01 LjY3OC0xLjAwOC0xLjU5OCAyLjQ0LTIuMzk4IDMuOTk2LTIuMzk4IDQuNjY4 IDAgLjkyNi42ODkgMi4wMTYgMi4wNjQgMy4yODEgMS4zNzUgMS4yNjIgMi41 MzUgMS44OTEgMy40ODIgMS44OTEuNjAyIDAgMS40MTYtLjEyNSAyLjQ0OS0u Mzc5IDEuMDMxLS4yNSAxLjcyMS0uMzc3IDIuMDY0LS4zNzcgMS4wMzMgMCAx LjU0NyAxLjg5MyAxLjU0NyA1LjY3OCAwIDMuNjE3LS44NCA5LjE2OC0yLjUy MyAxNi42NTQtMi4xODgtOC41OC00LjUtMTIuODcxLTYuOTM4LTEyLjg3MS0u MzM4IDAtMS4wMzEuMjUyLTIuMDgyLjc2LTEuMDUzLjUwMi0xLjgzLjc1NC0y LjMzNC43NTQtMi40MzggMC00LjYyNS0yLjIyNy02LjU2MS02LjY4OC0zLjg2 OS41OS01LjgwNSAyLjU2Ny01LjgwNSA1LjkzNCAwIDEuNjg0Ljc3NyAzLjAy NyAyLjMzNiA0LjAzNSAxLjU1MyAxLjAwOCAyLjMzNCAxLjcyNyAyLjMzNCAy LjE0NSAwIDIuMjczLTMuMzI0IDUuNzY0LTkuOTY5IDEwLjQ3My0zLjUzMSAy LjUyMy01Ljk3MyA0LjI4OS03LjMxNiA1LjI5NyAxLjE3NC0xLjUxMiAyLjM1 Mi0zLjQ4NyAzLjUzMy01LjkyOCAxLjM0NC0yLjc3NSAyLjAxOC00LjkyIDIu MDE4LTYuNDM2IDAtLjg0LS45NjctMi4wMi0yLjkwMi0zLjUzMy0xLjkzNi0x LjUxMi0yLjktMy4xMTEtMi45LTQuNzkzIDAtMS40MjguNTAyLTMuMTkzIDEu NTEyLTUuMjk5LTEuMDk0LTEuMjYyLTIuMzk1LTEuODk1LTMuOTEtMS44OTUt My4zNjUgMC01LjA0NSAxLjA5Ni01LjA0NSAzLjI4djMuNDA2Yy4wODIgMi43 NzYtMi4wMiA0LjE2NC02LjMxMSA0LjE2NC0zLjI3OSAwLTguNzkxLS43NTkt MTYuNTI3LTIuMjcxIDguNzQ4LTIuMTg4IDEzLjEyMS00LjcxMSAxMy4xMjEt Ny41NyAwIC4zMzYtLjE2OC0uNjcyLS41MDQtMy4wMjgtLjMzOC0yLjYwNCAx LjUxNC00Ljk2MSA1LjU1MS03LjA2My0uNzU4LTMuODY3LTIuNzczLTUuODA2 LTYuMDU3LTUuODA2LS41MDQgMC0xLjQzMi44ODQtMi43NzUgMi42NDctMS4z NDYgMS43NzEtMi42MDcgMi42NTItMy43ODMgMi42NTItMi4wMiAwLTQuNjI5 LTIuMTg2LTcuODIyLTYuNTYzLTEuNTE2LTIuMTg0LTMuODMtNS40MjQtNi45 NDEtOS43MTUgMS45MzQgMS4wMTIgMy44NjkgMi4wMiA1LjgwNSAzLjAzMSAy LjUyMyAxLjE3NiA0LjU0MSAxLjc2NiA2LjA1NyAxLjc2NiAxLjE3OCAwIDIu MzM0LTEuMDMxIDMuNDY5LTMuMDkyIDEuMTM1LTIuMDYxIDIuNjI5LTMuMDky IDQuNDc5LTMuMDkyLjI1NCAwIDEuOTM2LjUwNCA1LjA0NyAxLjUxNiAxLjU5 Ni0yLjQzOSAyLjM5OC00LjI0OCAyLjM5OC01LjQyNiAwLTEuMDEtLjYxMS0y LjE2Ni0xLjgzLTMuNDcxLTEuMjIxLTEuMzAzLTIuMzM0LTEuOTU1LTMuMzQ0 LTEuOTU1LS40MjIgMC0xLjA3Mi4xMjUtMS45NTcuMzc5LS44ODEuMjUyLTEu NTMzLjM3OS0xLjk1My4zNzktMS41MTYgMC0yLjI3My0xLjg5My0yLjI3My01 LjY3OCAwLTEuMDEuOTY5LTYuNzcgMi45MDQtMTcuMjg1LS4wODYgMS4yNi40 NjEgMy42MTcgMS42MzkgNy4wNjQgMS40MyA0LjIwNyAzLjExMSA2LjMwOSA1 LjA0OSA2LjMwOS4zMzQgMCAxLjAwOC0uMjUyIDIuMDE4LS43NTggMS4wMDgt LjUwNCAxLjgwNy0uNzU0IDIuMzk2LS43NTQgMS45MzQgMCAzLjUzMSAxLjA5 NCA0Ljc5NSAzLjI3N2wxLjg5MyAzLjQwNmMxLjc2NiAwIDMuMjM4LS42Mjkg NC40MTQtMS44OTEgMS4xNzgtMS4yNjIgMS43NjgtMi43NzcgMS43NjgtNC41 NDMgMC0xLjg1LS43NzctMy4yNi0yLjMzNC00LjIyNy0xLjU1OS0uOTY3LTIu MzM2LTEuNzAzLTIuMzM2LTIuMjA3IDAtMS43NjggMi43NzctNC43NTIgOC4z MjgtOC45NTggNC40NTctMy4zNjMgNy4zNTktNS4zNCA4LjcwNy01LjkzLTMu NjE3IDQuODc5LTUuNDI2IDguNDUxLTUuNDI2IDEwLjcyNCAwIDEuMTc4Ljcx MyAyLjQ0MSAyLjE0NSAzLjc4NSAxLjc2NiAxLjU5OCAyLjc3NSAyLjczNCAz LjAyNyAzLjQwNi44NCAxLjkzOC43NTYgNC41ODYtLjI1MiA3Ljk0OSAyLjI3 MSAxLjYgMy45OTQgMi4zOTYgNS4xNzQgMi4zOTYgMi40MzYgMCAzLjY1OC0x LjI2NCAzLjY1OC0zLjc4NSAwLS4yNTItLjEwNS0xLjA1MS0uMzE0LTIuMzk2 LS4yMTMtMS4zNDQtLjI3My0yLjEwMi0uMTkxLTIuMjcxLjMzNi0xLjE3OCAy LjY1LTEuNzY4IDYuOTM5LTEuNzY4IDIuNjkxIDAgOC4yODMuNzU4IDE2Ljc4 MSAyLjI3My0xLjg1Mi41MDQtNC42MjcgMS4yNi04LjMyNiAyLjI3LTMuMzY1 IDEuMDEtNS4wNDkgMi4xNDUtNS4wNDkgMy40MDYgMCAuNTkuMjA5IDEuNTk4 LjYzMSAzLjAyNy40MiAxLjQzMi42MzMgMi40OC42MzMgMy4xNTYgMCAxLjE3 Ni0uNzU4IDIuMjctMi4yNzEgMy4yNzdsLTQuMjkxIDMuMDMxYzEuMDEgMS44 NTIgMS42ODIgMi45NDUgMi4wMiAzLjI3OS44NCAxLjAwOCAxLjk3NSAxLjUx NCAzLjQwNiAxLjUxNCAxLjAxIDAgMS45MzQtLjg4MyAyLjc3NS0yLjY0OC44 NC0xLjc2OCAyLjE4OC0yLjY1IDQuMDM3LTIuNjUgMi4yNyAwIDQuODM4IDIu MTA0IDcuNjk3IDYuMzExIDEuNTkzIDIuMzYgNC4wNzUgNS45MzMgNy40NCAx MC43Mjd6bS0yOC4wMDctNy4zMTZjMC01LjM4MS0xLjk3OS0xMC4wNTEtNS45 MzItMTQuMDA2LTMuOTUzLTMuOTUzLTguNjIxLTUuOTMtMTQuMDA0LTUuOTMt NS40NjkgMC0xMC4xOCAxLjk1Ny0xNC4xMzEgNS44NjktMy45NTMgMy45MS01 Ljk3MyA4LjYtNi4wNTUgMTQuMDY2LS4wODYgNS4zODMgMS45MTIgMTAuMDMg NS45OTIgMTMuOTM4IDQuMDggMy45MTIgOC44MTEgNS44NjkgMTQuMTkzIDUu ODY5IDUuNzE5IDAgMTAuNDkyLTEuODczIDE0LjMxOC01LjYxNSAzLjgzLTMu NzQgNS43MDEtOC40NyA1LjYxOS0xNC4xOTF6bS0xLjg5MyAwYzAgNS4xMzEt MS43MjUgOS4zODEtNS4xNzQgMTIuNzQtMy40NTEgMy4zNjctNy43NCA1LjA0 OS0xMi44NjkgNS4wNDktNC45NjMgMC05LjIxMS0xLjcyMy0xMi43NDItNS4x NzQtMy41MzEtMy40NDUtNS4yOTktNy42NTItNS4yOTktMTIuNjE1IDAtNC44 NzcgMS43ODUtOS4wNjQgNS4zNTktMTIuNTUzIDMuNTc4LTMuNDkgNy44MDMt NS4yMzggMTIuNjgyLTUuMjM4IDQuODc3IDAgOS4xMDQgMS43NjYgMTIuNjgg NS4zMDEgMy41NzQgMy41MzMgNS4zNjMgNy42OTUgNS4zNjMgMTIuNDl6JyBm aWxsPScjMEQwRjBGJy8+PC9nPjwvc3ZnPgo=' },
{ id: 'all', name: 'All', logo: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdC b3g9JzAgMCAxMDAgMTAwJz48ZyBmaWxsPSdub25lJz48cGF0aCBkPSdNMTAw IDUwYzAgMjcuNjA5LTIyLjM4MiA1MC01MCA1MHMtNTAtMjIuMzkxLTUwLTUw IDIyLjM4Mi01MCA1MC01MCA1MCAyMi4zOTEgNTAgNTB6JyBpZD0nU2hhcGUn IGZpbGw9JyNDQUM1QzAnLz48cGF0aCBkPSdNNDkuNjg3IDEyLjAyNmMyLjQ3 NSA0Ljk2OCA1LjUwNCA5Ljc5MyA5LjA5NiAxNC40NzUgMS41MjggMS45NjYg My4yNzkgNC4wMjEgNS4yNTQgNi4xNDcgMS45NDggMi4xMjYgNC4xMSA0LjI1 MyA2LjQ1MSA2LjM0NCAyLjM1OSAyLjA5MSA0Ljk0MSA0LjA3NCA3Ljc1NiA1 Ljk1MSAyLjgxNSAxLjg3NiA1Ljg0MyAzLjU5MiA5LjA5NiA1LjEyOS00Ljc4 IDIuNTU2LTkuNTE2IDUuNjY1LTE0LjIyNSA5LjM0Ni0xLjk1NiAxLjUzNy00 LjAwMyAzLjMwNi02LjE0NyA1LjMyNS0yLjEyNiAyLjAwMi00LjIxNyA0LjIt Ni4yNjMgNi41NzYtMi4wNDYgMi40MTItNC4wMTIgNS4wMDQtNS44OTcgNy44 MjctMS44NzcgMi44MDYtMy41ODMgNS43OS01LjEyIDguOTUzLTIuMzk1LTQu Ny01LjM3OS05LjM0Ni04Ljk2Mi0xMy45NTYtMy4wNzQtMy45MzEtNi45Ni04 LjA1OS0xMS42Ni0xMi40Mi00LjY5MS00LjM2LTEwLjM3My04LjIzOC0xNy4w My0xMS42NTEgNC43ODktMi40ODQgOS41MjUtNS41NTcgMTQuMjI0LTkuMjIx IDQuMDEyLTMuMTYzIDguMTQ5LTcuMTEyIDEyLjQxMS0xMS44NDggNC4yNy00 LjczNiA3LjkzMy0xMC4zODMgMTEuMDE2LTE2Ljk3N3ptLTUuNTA0IDUyLjg5 NWMyLjIyNSAyLjgyNCA0LjA1NiA1LjY4MyA1LjUwNCA4LjU3OCAxLjg4NS00 LjAyMSA0LjE0Ni03LjQ3IDYuNzgxLTEwLjM2NSAyLjY0NS0yLjkxMyA1LjIx OC01LjM0MyA3LjY5My03LjMwOSAyLjgxNC0yLjE5OCA1Ljc1NC00LjEyOCA4 LjgzNy01Ljc3Mi00LjEwMS0xLjg1OS03LjU4Ni00LjEyOC0xMC40MzYtNi43 NzMtMi44NjgtMi42NDUtNS4yODEtNS4yLTcuMjM3LTcuNjg0LTIuMjI1LTIu ODA1LTQuMTEtNS43OS01LjYzOC04Ljk1My0xLjg3NiA0LjA5Mi00LjEyOCA3 LjU5NS02LjcxOSAxMC40OS0yLjYwOSAyLjkxMy01LjE0NiA1LjMyNS03LjYy MiA3LjMwOS0yLjgyMyAyLjIxNi01Ljc2MyA0LjA3NC04LjgzNyA1LjYyOSA0 LjEwMSAyLjEyNyA3LjU5NSA0LjUyMSAxMC40OTkgNy4xNjYgMi45MDQgMi42 NDUgNS4yOTkgNS4yMTggNy4xNzUgNy42ODR6JyBmaWxsPScjMDAwJy8+PC9n Pjwvc3ZnPgo=' }
],
nameList: [],
nameSelected: null
}
},
mounted () {
this.pullSets().then(() => {
this.setInitialParams()
if (this.nameSelected) {
this.searchByName(this.$route.query.name)
} else {
this.pullCards(this.params.set.id, this.params.color.id)
}
})
},
methods: {
pullSets () {
return axios
.get('https://api.scryfall.com/sets', {}
)
.then((response) => {
this.sets = response.data.data
for (var i = 0; i < this.sets.length; i++) {
if (this.sets[i].set_type === 'core' || this.sets[i].set_type === 'expansion') {
if (!(this.sets[i].parent_set_code)) {
this.setList.push(
{ id: this.sets[i].code, name: this.sets[i].name, logo: this.sets[i].icon_svg_uri }
)
}
}
}
})
},
setInitialParams () {
console.log('before params set...', this.$route.query)
if (this.$route.query.name) {
this.nameSelected = this.$route.query.name
}
if (this.$route.query.color && this.$route.query.set) {
if (this.$route.query.page) {
this.page = this.$route.query.page - 1
} else {
this.page = 0
}
for (let i = 0; i < this.colorList.length; i++) {
if (this.$route.query.color === this.colorList[i].id) {
this.params.color = this.colorList[i]
}
}
for (let i = 0; i < this.setList.length; i++) {
if (this.$route.query.set === this.setList[i].id) {
this.params.set = this.setList[i]
}
}
} else {
let randomColorIndex = Math.floor(Math.random() * Math.floor(4))
this.params.color = this.colorList[randomColorIndex]
let randomSetIndex = Math.floor(Math.random() * Math.floor(16))
this.params.set = this.setList[randomSetIndex]
console.log('after initial random params set...', this.params.color.name, this.params.set.name)
}
},
async pullCards (setId, colorId) {
if (this.nameSelected) {
this.nameSelected = null
}
let params = null
this.loading = true
if (colorId === 'all') {
params = { q: 'set:' + setId }
} else {
params = { q: 'set:' + setId + ' c:' + colorId }
}
let response = await axios.get('https://api.scryfall.com/cards/search?order=cmc&', { params })
this.cards = response.data.data
while (response.data.has_more === true) {
response = await axios.get(response.data.next_page)
this.cards.push(...response.data.data)
}
setTimeout(() => { this.loading = false }, 150)
},
submitSearch () {
this.page = 0
var setId = this.params.set.id
var colorId = this.params.color.id
this.$router.push({ query: { 'color': colorId, 'set': setId, 'page': this.page + 1 } })
this.pullCards(setId, colorId)
},
fetchOptions (search, loading) {
console.log('fetchOptions...', search)
if (!search || (search && search.length < 2)) {
console.log('search is empty')
this.nameList = []
return
}
loading(true)
return axios
.get('https://api.scryfall.com/cards/autocomplete?', {
params: { q: search }
})
.then((response) => {
this.nameList = response.data.data
loading(false)
})
},
searchByName () {
this.loading = true
console.log('search by name function...', this.nameSelected)
return axios
.get('https://api.scryfall.com/cards/named?', {
params: { fuzzy: this.nameSelected }
})
.then((response) => {
this.cards = [response.data]
if (this.$route.query.name !== this.cards[0].name) {
this.$router.push({ query: { 'name': this.cards[0].name } })
}
console.log('add card name to query string...', this.cards[0].name)
console.log('return searched by name card... ', this.cards)
this.loading = false
})
},
nextPage () {
this.page = this.page + 1
this.$router.push({ query: { 'color': this.params.color.id, 'set': this.params.set.id, 'page': this.page + 1 } })
window.scrollTo(0, 0)
},
prevPage () {
this.page = this.page - 1
this.$router.push({ query: { 'color': this.params.color.id, 'set': this.params.set.id, 'page': this.page + 1 } })
window.scrollTo(0, 0)
},
pageLink (thisPage) {
this.page = thisPage - 1
this.$router.push({ query: { 'color': this.params.color.id, 'set': this.params.set.id, 'page': this.page + 1 } })
window.scrollTo(0, 0)
},
alertDescription (card) {
console.log(card)
alert(card.type_line)
}
}
}
</script>
<style lang="scss">
.single-card {
padding-top: 30px;
}
.search-fields {
padding: 10px 5px;
}
@media screen and (min-width: 1200px) {
.search-fields {
padding: 0px 5px;
}
}
.vs__selected-options {
max-height: 28px;
}
.color-select-img {
height: 20px;
width: 20px;
}
.set-select-img {
height: 20px;
width: 20px;
}
/* THIS IS A BIG HACK: We need to have .vs__selected on all of our elements
within the selected option slot for the dropdown to work. So we need to remove
the styles on these nested vs__selected elements else we get double margins/padding/etc */
.vs__selected .vs__selected {
border: none;
margin: 0;
padding: 0;
display: inline;
}
.vs--open .vs__selected .vs__selected {
position: static;
opacity: 1;
}
/* Ellipsis for selected option */
.vs__selected-options, .vs__selected {
min-width: 0;
}
.vs__selected span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.vs__selected .color-select-img {
height: 20px;
width: 20px;
margin: 0 10px 0 10px;
}
.vs__selected .set-select-img {
height: 20px;
width: 20px;
margin: 0 10px 0 10px;
}
.pagination .page-item {
cursor: pointer;
}
.pagination .page-item.disabled {
cursor: auto;
}
.page-buttons a {
cursor: pointer;
}
.page-buttons a.disabled {
cursor: auto;
}
</style>