From 85a5567d08ab8e9e65c1f07f9720f194b04096aa Mon Sep 17 00:00:00 2001
From: Markus Opolka <markus@martialblog.de>
Date: Fri, 12 Jan 2018 21:31:27 +0100
Subject: [PATCH] Add comments to templates
---
src/components/Feature.vue | 1 +
src/components/Features.vue | 11 +++++++++++
src/components/Index.vue | 2 ++
src/components/Letter.vue | 4 ++++
src/components/Letters.vue | 1 +
src/components/Search.vue | 29 ++++++++++++++++++++---------
6 files changed, 39 insertions(+), 9 deletions(-)
diff --git a/src/components/Feature.vue b/src/components/Feature.vue
index dc3b7d1..742d81e 100644
--- a/src/components/Feature.vue
+++ b/src/components/Feature.vue
@@ -9,6 +9,7 @@
<script>
export default {
+ // Recursive Component for Features in a Letter
data () {
return {
data: null
diff --git a/src/components/Features.vue b/src/components/Features.vue
index 7b4a74b..e1ee774 100644
--- a/src/components/Features.vue
+++ b/src/components/Features.vue
@@ -16,6 +16,7 @@
<!-- ></v-select> -->
<!-- </v-flex> -->
+ <!-- Input Fields for Search -->
<v-flex xs12 md3>
<v-text-field
v-model="feature_category"
@@ -40,11 +41,13 @@
</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
@@ -56,6 +59,7 @@
<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>
@@ -64,6 +68,7 @@
</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>
@@ -93,6 +98,7 @@
<script>
export default {
data () {
+ // Search for Features in Letters
return {
header: 'Feature Search',
invalid: false,
@@ -108,11 +114,13 @@ export default {
},
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
var params = {
category: this.feature_category,
type: this.feature_type,
@@ -128,6 +136,7 @@ export default {
})
},
validate () {
+ // Validate input fields and call find()
var invalid = this.feature_category.length === 0 && this.feature_type.length === 0 && this.feature_subtype.length === 0
if (invalid) {
this.invalid = true
@@ -139,6 +148,7 @@ export default {
},
computed: {
countedHits: function () {
+ // Sums up all hits in all letters
var hits = 0
for (var value of this.results) {
hits = hits + value.count
@@ -147,6 +157,7 @@ export default {
}
},
created () {
+ // Create list of all letters
this.$http.get('http://localhost:3000/api/letters').then(function (data) {
for (var value of data.body) {
this.letters.push({text: value.name})
diff --git a/src/components/Index.vue b/src/components/Index.vue
index bc01032..500d0e9 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -9,6 +9,7 @@
<p>Ce projet des <i>pétitions des bagnards et leurs proches</i>, commencé en février 2016, réunit des textes des personnes dites ‘peu-lettrés’ réalisés entre 1854 et 1896. Ces correspondances font preuve d’un écartement de la norme du français standard dans maints domaines: relations graphie-phonie, morphosyntaxe, lexique ou traditions discursives.</p>
</v-flex>
+ <!-- Index Image -->
<v-flex xs12>
<v-parallax src="/static/index.png" height="200"></v-parallax>
</v-flex>
@@ -44,6 +45,7 @@
<script>
export default {
+ // Index Page Component
name: 'Index',
data () {
return {
diff --git a/src/components/Letter.vue b/src/components/Letter.vue
index 59b7ad9..dd08da3 100644
--- a/src/components/Letter.vue
+++ b/src/components/Letter.vue
@@ -111,6 +111,7 @@
<script>
export default {
+ // Single Letter Component
name: 'Letter',
data () {
return {
@@ -121,9 +122,12 @@ export default {
},
methods: {
capitalize: function (word) {
+ // Capitalize first letter of a String
return word.charAt(0).toUpperCase() + word.slice(1)
},
imgfolder: function (img) {
+ // Add static image folder to path
+ // TODO: Do with path?
return '/static/' + img
}
},
diff --git a/src/components/Letters.vue b/src/components/Letters.vue
index aab0045..c89290e 100644
--- a/src/components/Letters.vue
+++ b/src/components/Letters.vue
@@ -5,6 +5,7 @@
<h3>{{header}}</h3>
</v-flex>
+ <!-- List of all Letters -->
<v-flex xs12 v-if="letters">
<v-list>
<template v-for="letter in letters">
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 4f17484..28eb1eb 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -5,8 +5,8 @@
<h3>{{header}}</h3>
</v-flex>
+ <!-- Search Help -->
<v-flex xs12>
-
<v-expansion-panel>
<v-expansion-panel-content>
<div slot="header">Toggle Syntax Help</div>
@@ -21,21 +21,24 @@
</v-expansion-panel>
</v-flex>
+ <!-- Main Input Field -->
<v-flex xs12 md9>
- <v-text-field
- v-model="search"
- label="Query"
- data-vv-search="search"
- required
- @keyup.enter.native="validate"
- ></v-text-field>
+ <v-text-field
+ v-model="search"
+ label="Query"
+ data-vv-search="search"
+ required
+ @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 Query
@@ -47,6 +50,7 @@
<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>
@@ -55,6 +59,7 @@
</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>
@@ -77,6 +82,7 @@
<script>
export default {
+ // General Search Component
name: 'Search',
data () {
return {
@@ -93,6 +99,7 @@ export default {
},
methods: {
find: function () {
+ // Parse input field and call search API
var match = ''
var regex = ''
var params = {
@@ -102,7 +109,7 @@ export default {
value: undefined
}
- // TODO - Refactor this
+ // TODO - Refactor this or put in function
if (this.search.indexOf('@') > 0) {
regex = new RegExp(this.pattern[0])
match = regex.exec(this.search)
@@ -126,6 +133,7 @@ export default {
})
},
validate () {
+ // Validate input field
this.search.toLowerCase()
var validator = new RegExp(this.pattern.join('|'))
@@ -137,14 +145,17 @@ export default {
}
},
clear () {
+ // Clear input field
this.invalid = false
this.search = ''
},
getValue (obj) {
+ // Get value of unknown key in object
var key = Object.keys(obj)[0]
return obj[key].substr(0, 25)
},
getKey (obj) {
+ // Get unknown first key from object
var key = Object.keys(obj)[0]
key = key.replace('teiHeader.xenoData.', '')
// key = key.replace(/.[0-9]._text/, '')
--
GitLab