Features.vue 3.17 KB
Newer Older
1
2
3
4
5
6
7
<template>
<v-container grid-list-md>
  <v-layout row wrap>
    <v-flex xs12>
      <h3>{{header}}</h3>
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
8
9
10
11
12
13
14
15
16
17
    <!-- <v-flex xs12> -->
    <!--   <v-select -->
    <!--     v-bind:items="letters" -->
    <!--     v-model="e1" -->
    <!--     label="Select" -->
    <!--     single-line -->
    <!--     bottom -->
    <!--     prepend-icon="local_post_office" -->
    <!--     ></v-select> -->
    <!-- </v-flex> -->
18
19

    <v-flex xs12 sm4>
20
21
22
23
24
      <v-text-field
        v-model="feature_category"
        type="text" label="Category"
        @keyup.enter.native="find">
      </v-text-field>
25
26
    </v-flex>
    <v-flex xs12 sm4>
27
28
29
30
31
32
      <v-text-field
        v-model="feature_type"
        type="text"
        label="Type"
        @keyup.enter.native="find">
      </v-text-field>
33
34
    </v-flex>
    <v-flex xs12 sm4>
35
36
37
38
39
40
      <v-text-field
        v-model="feature_subtype"
        type="text"
        label="Subtype"
        @keyup.enter.native="find">
      </v-text-field>
41
42
43
    </v-flex>

    <v-flex xs12>
Markus Opolka's avatar
Markus Opolka committed
44
      <v-btn @click="find" color="blue darken-4" class="white--text">Search</v-btn>
45
46
47
48
49
50
51
52
      <v-btn @click="clear" color="blue darken-4" class="white--text">Clear</v-btn>
    </v-flex>

    <!-- Progress Bar -->
    <v-flex xs12 v-if="searching">
      <v-progress-linear indeterminate color="primary"></v-progress-linear>
    </v-flex>

53
54
55
56
57
58
59
60
    <v-flex xs12 v-if="results">
      <v-card color="blue-grey lighten-1" class="white--text">
        <v-card-text>
          Results: {{results.length}} letter(s)
        </v-card-text>
      </v-card>
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
61
62
63
    <v-flex xs12 v-if="results">
      <v-card v-for="letter in results" v-bind:key="letter.url">
        <v-card-title primary-title>
64
          <div class="title"> {{letter.name}} - {{letter.collection}} </div>
Markus Opolka's avatar
Markus Opolka committed
65
66
        </v-card-title>
        <v-card-text>
67
          <p>Count: 12</p>
Markus Opolka's avatar
Markus Opolka committed
68
69
70
71
72
          <ul>
            <li v-for="hit in letter.results">{{hit}}</li>
          </ul>
        </v-card-text>
        <v-card-actions>
73
          <v-btn :href="letter.url" flat>View</v-btn>
Markus Opolka's avatar
Markus Opolka committed
74
75
76
77
        </v-card-actions>
      </v-card>
    </v-flex>

78
79
80
81
82
83
84
85
86
87
88
89
90
  </v-layout>
 </v-container>
</template>

<script>
export default {
  data () {
    return {
      header: 'Feature Search',
      searching: false,
      feature_category: null,
      feature_type: null,
      feature_subtype: null,
Markus Opolka's avatar
Markus Opolka committed
91
      results: null,
92
93
94
95
96
97
98
99
100
101
      letters: [
        { text: 'All' }
      ]
    }
  },
  methods: {
    clear () {
      this.feature_category = null
      this.feature_type = null
      this.feature_subtype = null
Markus Opolka's avatar
Markus Opolka committed
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
    },
    find () {
      var params = {
        category: this.feature_category,
        type: this.feature_type,
        subtype: this.feature_subtype
      }

      // Remove undefined values
      Object.keys(params).forEach((key) => (params[key] == null) && delete params[key])
      this.searching = true
      this.$http.get('http://localhost:3000/api/feature/', {params: params}).then(function (data) {
        this.results = data.body
        this.searching = false
      })
117
    }
Markus Opolka's avatar
Markus Opolka committed
118

119
120
121
122
123
124
125
126
127
128
  },
  created () {
    this.$http.get('http://localhost:3000/api/letters').then(function (data) {
      for (var value of data.body) {
        this.letters.push({text: value.name})
      }
    })
  }
}
</script>