Features.vue 5.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>

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

Markus Opolka's avatar
Markus Opolka committed
20
    <!-- Input Fields for Search -->
21
    <v-flex xs12 md3>
22
23
24
      <v-text-field
        v-model="feature_category"
        type="text" label="Category"
25
        @keyup.enter.native="validate">
26
      </v-text-field>
27
    </v-flex>
28
    <v-flex xs12 md3>
29
30
31
32
      <v-text-field
        v-model="feature_type"
        type="text"
        label="Type"
33
        @keyup.enter.native="validate">
34
      </v-text-field>
35
    </v-flex>
36
    <v-flex xs12 md3>
37
38
39
40
      <v-text-field
        v-model="feature_subtype"
        type="text"
        label="Subtype"
41
        @keyup.enter.native="validate">
42
      </v-text-field>
43
44
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
45
    <!-- Search Buttons -->
46
47
48
49
50
    <v-flex xs12 md3>
      <v-btn @click="validate" color="blue-grey darken-2" class="white--text">Search</v-btn>
      <v-btn @click="clear" color="blue-grey darken-2" class="white--text">Clear</v-btn>
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
51
    <!-- Invalid Search Warning -->
52
    <v-flex xs12>
53
54
55
      <v-alert outline color="lime darken-2" icon="warning" :value="invalid">
        Invalid Search - Please enter at least one parameter
      </v-alert>
56
57
58
59
60
61
62
    </v-flex>

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

Markus Opolka's avatar
Markus Opolka committed
63
    <!-- Search Results Meta -->
64
65
66
    <v-flex xs12 v-if="results">
      <v-card color="blue-grey lighten-1" class="white--text">
        <v-card-text>
67
          Results: {{results.length}} letter(s) - {{countedHits}} hit(s)
68
69
70
71
        </v-card-text>
      </v-card>
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
72
    <!-- Search Results -->
Markus Opolka's avatar
Markus Opolka committed
73
74
75
    <v-flex xs12 v-if="results">
      <v-card v-for="letter in results" v-bind:key="letter.url">
        <v-card-title primary-title>
76
          {{letter.name}} <v-chip label color="lime accent-4">{{letter.collection}}</v-chip>
77
78
79
80
          <v-chip color="indigo" text-color="white">
            <v-avatar class="indigo darken-4">{{letter.count}}</v-avatar>
            Hits
          </v-chip>
Markus Opolka's avatar
Markus Opolka committed
81
82
        </v-card-title>
        <v-card-text>
83
          <ul style="list-style-type:none;">
Markus Opolka's avatar
Markus Opolka committed
84
85
            <li v-for="hit in letter.results">
               <v-chip outline small color="secondary">{{hit._text}}</v-chip>
86
87
88
89
90
91
92
               <v-chip label small>
                 <span v-if="hit._attributes.category">Category: {{(hit._attributes.category)}}</span>
                 <span v-if="hit._attributes.type">, Type: {{(hit._attributes.type)}}</span>
                 <span v-if="hit._attributes.subtype">, Subtype: {{(hit._attributes.subtype)}}</span>
               </v-chip>

               <v-chip label small text-color="white" color="deep-orange darken-4" v-if="hit._attributes.ref">Line: {{(hit._attributes.ref)}}</v-chip>
Markus Opolka's avatar
Markus Opolka committed
93
            </li>
Markus Opolka's avatar
Markus Opolka committed
94
95
96
          </ul>
        </v-card-text>
        <v-card-actions>
97
          <v-btn :to="letter.link" flat>View</v-btn>
Markus Opolka's avatar
Markus Opolka committed
98
99
100
101
        </v-card-actions>
      </v-card>
    </v-flex>

102
103
104
105
106
107
108
  </v-layout>
 </v-container>
</template>

<script>
export default {
  data () {
Markus Opolka's avatar
Markus Opolka committed
109
    // Search for Features in Letters
110
111
    return {
      header: 'Feature Search',
112
      invalid: false,
113
      searching: false,
114
115
116
      feature_category: '',
      feature_type: '',
      feature_subtype: '',
Markus Opolka's avatar
Markus Opolka committed
117
      results: null,
118
119
      letters: [
        { text: 'All' }
120
121
      ],
      selected: { text: 'All' }
122
123
124
125
    }
  },
  methods: {
    clear () {
Markus Opolka's avatar
Markus Opolka committed
126
      // Clears the search input fields
127
128
129
      this.feature_category = null
      this.feature_type = null
      this.feature_subtype = null
Markus Opolka's avatar
Markus Opolka committed
130
131
    },
    find () {
Markus Opolka's avatar
Markus Opolka committed
132
      // Call feature search API with parameters
133
134
135
136
137
138
139
140
141
      this.searching = true

      let url = 'http://localhost:3000/api/features/'
      // TODO: this is a bit silly
      if (this.selected.text !== 'All') {
        url = url + this.selected.text.replace(/ /g, '_') + '/'
      }

      let params = {
Markus Opolka's avatar
Markus Opolka committed
142
143
144
145
146
147
148
        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])
149
      this.$http.get(url, {params: params}).then(function (data) {
Markus Opolka's avatar
Markus Opolka committed
150
151
152
        this.results = data.body
        this.searching = false
      })
153
154
    },
    validate () {
Markus Opolka's avatar
Markus Opolka committed
155
      // Validate input fields and call find()
156
      const invalid = this.feature_category.length === 0 && this.feature_type.length === 0 && this.feature_subtype.length === 0
157
158
159
160
161
162
      if (invalid) {
        this.invalid = true
      } else {
        this.invalid = false
        this.find()
      }
163
164
    }
  },
165
166
  computed: {
    countedHits: function () {
Markus Opolka's avatar
Markus Opolka committed
167
      // Sums up all hits in all letters
168
169
      let hits = 0
      for (let value of this.results) {
170
171
172
173
174
        hits = hits + value.count
      }
      return hits
    }
  },
175
  created () {
Markus Opolka's avatar
Markus Opolka committed
176
    // Create list of all letters
177
    this.$http.get('http://localhost:3000/api/letters').then(function (data) {
178
      for (let value of data.body) {
179
180
181
182
183
184
        this.letters.push({text: value.name})
      }
    })
  }
}
</script>