Select Git revision
Features.vue
Features.vue 5.53 KiB
<template>
<v-container grid-list-md>
<v-layout row wrap>
<v-flex xs12>
<h3>{{header}}</h3>
</v-flex>
<!-- 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>
<!-- Input Fields for Search -->
<v-flex xs12 md3>
<v-text-field
v-model="feature_category"
type="text" label="Category"
@keyup.enter.native="validate">
</v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-text-field
v-model="feature_type"
type="text"
label="Type"
@keyup.enter.native="validate">
</v-text-field>
</v-flex>
<v-flex xs12 md3>
<v-text-field
v-model="feature_subtype"
type="text"
label="Subtype"
@keyup.enter.native="validate">
</v-text-field>
</v-flex>
<!-- Search Buttons -->
<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>
<!-- Invalid Search Warning -->
<v-flex xs12>
<v-alert outline color="lime darken-2" icon="warning" :value="invalid">
Invalid Search - Please enter at least one parameter
</v-alert>
</v-flex>
<!-- Progress Bar -->
<v-flex xs12 v-if="searching">
<v-progress-linear indeterminate color="primary"></v-progress-linear>
</v-flex>
<!-- Search Results Meta -->
<v-flex xs12 v-if="results">
<v-card color="blue-grey lighten-1" class="white--text">
<v-card-text>
Results: {{results.length}} letter(s) - {{countedHits}} hit(s)
</v-card-text>
</v-card>
</v-flex>
<!-- Search Results -->
<v-flex xs12 v-if="results">
<v-card v-for="letter in results" v-bind:key="letter.url">
<v-card-title primary-title>
{{letter.name}} <v-chip label color="lime accent-4">{{letter.collection}}</v-chip>
<v-chip color="indigo" text-color="white">
<v-avatar class="indigo darken-4">{{letter.count}}</v-avatar>
Hits
</v-chip>
</v-card-title>
<v-card-text>
<ul style="list-style-type:none;">
<li v-for="hit in letter.results">
<v-chip outline small color="secondary">{{hit._text}}</v-chip>
<!-- <v-chip label small v-if="hit._attributes.category">Category: {{(hit._attributes.category)}}</v-chip> -->
<!-- <v-chip label small v-if="hit._attributes.type">Type: {{(hit._attributes.type)}}</v-chip> -->
<!-- <v-chip label small v-if="hit._attributes.subtype">Subtype: {{(hit._attributes.subtype)}}</v-chip> -->
<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>
</li>
</ul>
</v-card-text>
<v-card-actions>
<v-btn :to="letter.link" flat>View</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data () {
// Search for Features in Letters
return {
header: 'Feature Search',
invalid: false,
searching: false,
feature_category: '',
feature_type: '',
feature_subtype: '',
results: null,
letters: [
{ text: 'All' }
],
selected: { text: 'All' }
}
},
methods: {
clear () {
// Clears the search input fields
this.feature_category = null
this.feature_type = null
this.feature_subtype = null
},
find () {
// Call feature search API with parameters
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 = {
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.$http.get(url, {params: params}).then(function (data) {
this.results = data.body
this.searching = false
})
},
validate () {
// Validate input fields and call find()
const invalid = this.feature_category.length === 0 && this.feature_type.length === 0 && this.feature_subtype.length === 0
if (invalid) {
this.invalid = true
} else {
this.invalid = false
this.find()
}
}
},
computed: {
countedHits: function () {
// Sums up all hits in all letters
let hits = 0
for (let value of this.results) {
hits = hits + value.count
}
return hits
}
},
created () {
// Create list of all letters
this.$http.get('http://localhost:3000/api/letters').then(function (data) {
for (let value of data.body) {
this.letters.push({text: value.name})
}
})
}
}
</script>