Features.vue 5.05 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
    <v-flex xs12>
Markus Opolka's avatar
Markus Opolka committed
9
10
11
12
13
14
15
16
17
      <p>
        les caractéristiques sont les propriétés de chaque lettre. Elles disposent d'une catégorie, d'un type et d'un sous-type organisés de manière hierarchique.
      </p>

      <p>
        La 'Recherche de caractéristique' facilite la recherche rapipde de toute sorte de traits propres aux lettres.

        La 'Recherche de caractéristique' soutient également les expressions régulières et peut être restreinte à une seule lettre.
      </p>
18

Markus Opolka's avatar
Markus Opolka committed
19
20
    </v-flex>

21
22
23
24
25
26
27
28
29
30
    <!-- Select Letter -->
    <v-flex xs12>
      <v-select
        v-bind:items="letters"
        v-model="selected"
        label="Select"
        single-line
        prepend-icon="local_post_office"
        ></v-select>
    </v-flex>
31

Markus Opolka's avatar
Markus Opolka committed
32
    <!-- Input Fields for Search -->
33
    <v-flex xs12 md3>
34
      <v-autocomplete
35
        v-model="feature_category"
36
37
38
39
40
        :items="feature_categories_glossary"
        label="Category"
        @keyup.enter.native="validate"
        >
    </v-autocomplete>
41
    </v-flex>
42
    <v-flex xs12 md3>
43
      <v-autocomplete
44
        v-model="feature_type"
45
46
47
48
49
        :items="feature_types_glossary"
        label="Types"
        @keyup.enter.native="validate"
        >
      </v-autocomplete>
50
    </v-flex>
51
    <v-flex xs12 md3>
52
      <v-autocomplete
53
        v-model="feature_subtype"
54
55
56
57
58
        :items="feature_subtypes_glossary"
        label="Subtypes"
        @keyup.enter.native="validate"
        >
    </v-autocomplete>
59
60
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
61
    <!-- Search Buttons -->
62
    <v-flex xs12 md3>
Markus Opolka's avatar
Markus Opolka committed
63
64
      <v-btn @click="validate" color="blue-grey darken-2" class="white--text">Rechercher</v-btn>
      <v-btn @click="clear" color="blue-grey darken-2" class="white--text">Supprimer</v-btn>
65
66
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
67
    <!-- Invalid Search Warning -->
68
    <v-flex xs12>
69
70
71
      <v-alert outline color="lime darken-2" icon="warning" :value="invalid">
        Invalid Search - Please enter at least one parameter
      </v-alert>
72
73
74
75
76
77
78
    </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
79
    <!-- Search Results Meta -->
80
81
82
    <v-flex xs12 v-if="results">
      <v-card color="blue-grey lighten-1" class="white--text">
        <v-card-text>
Markus Opolka's avatar
Markus Opolka committed
83
          Lettre(s): {{results.length}} dont résultat(s): {{countedHits}}
84
85
86
87
        </v-card-text>
      </v-card>
    </v-flex>

Markus Opolka's avatar
Markus Opolka committed
88
    <!-- Search Results -->
Markus Opolka's avatar
Markus Opolka committed
89
    <v-flex xs12 v-if="results">
90
      <result :letter="letter" v-for="letter in results" v-bind:key="letter.url" />
Markus Opolka's avatar
Markus Opolka committed
91
92
    </v-flex>

93
94
95
96
97
98
99
  </v-layout>
 </v-container>
</template>

<script>
export default {
  data () {
Markus Opolka's avatar
Markus Opolka committed
100
    // Search for Features in Letters
101
    return {
Markus Opolka's avatar
Markus Opolka committed
102
      header: 'Recherche de caractéristiques',
103
      invalid: false,
104
      searching: false,
105
106
107
      feature_categories_glossary: [],
      feature_types_glossary: [],
      feature_subtypes_glossary: [],
108
109
110
      feature_category: '',
      feature_type: '',
      feature_subtype: '',
Markus Opolka's avatar
Markus Opolka committed
111
      results: null,
112
      letters: [
Markus Opolka's avatar
Markus Opolka committed
113
        { text: 'Toutes' }
114
      ],
Markus Opolka's avatar
Markus Opolka committed
115
      selected: 'Toutes'
116
117
118
119
    }
  },
  methods: {
    clear () {
Markus Opolka's avatar
Markus Opolka committed
120
      // Clears the search input fields
121
122
123
      this.feature_category = ''
      this.feature_type = ''
      this.feature_subtype = ''
Markus Opolka's avatar
Markus Opolka committed
124
125
    },
    find () {
Markus Opolka's avatar
Markus Opolka committed
126
      // Call feature search API with parameters
127
128
129
      this.searching = true

      let url = 'http://localhost:3000/api/features/'
Markus Opolka's avatar
Markus Opolka committed
130
      // Adding the lettername to the API endpoint
Markus Opolka's avatar
Markus Opolka committed
131
      if (this.selected !== 'Toutes') {
132
        url = url + this.selected
133
134
135
      }

      let params = {
Markus Opolka's avatar
Markus Opolka committed
136
137
138
139
140
141
142
        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])
143
      this.$http.get(url, {params: params}).then(function (data) {
Markus Opolka's avatar
Markus Opolka committed
144
145
146
        this.results = data.body
        this.searching = false
      })
147
148
    },
    validate () {
Markus Opolka's avatar
Markus Opolka committed
149
      // Validate input fields and call find()
150
      const invalid = this.feature_category.length === 0 && this.feature_type.length === 0 && this.feature_subtype.length === 0
151
152
153
154
155
156
      if (invalid) {
        this.invalid = true
      } else {
        this.invalid = false
        this.find()
      }
157
158
    }
  },
159
160
  computed: {
    countedHits: function () {
Markus Opolka's avatar
Markus Opolka committed
161
      // Sums up all hits in all letters
162
163
      let hits = 0
      for (let value of this.results) {
164
        hits = hits + value.hits
165
166
167
168
      }
      return hits
    }
  },
169
  created () {
Markus Opolka's avatar
Markus Opolka committed
170
    // Get feature glossary
171
172
173
174
    this.$http.get('http://localhost:3000/api/glossary/features').then(function (data) {
      this.feature_categories_glossary = data.body.categories
      this.feature_types_glossary = data.body.types
      this.feature_subtypes_glossary = data.body.subtypes
Markus Opolka's avatar
Markus Opolka committed
175
176
    })

Markus Opolka's avatar
Markus Opolka committed
177
    // Create list of all letters
178
179
    this.$http.get('http://localhost:3000/api/metadata/table').then(function (data) {
      for (let letter of data.body) {
180
181
182
        if (letter.valid) {
          this.letters.push({text: letter.title})
        }
183
184
185
186
187
      }
    })
  }
}
</script>