diff --git a/src/App.vue b/src/App.vue index 18cd4fc7b9ba1b4d1fab3c4b362ecd102859d681..5236e6c6a77b0b9a65c7d9f99f83b79621604117 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,9 @@ <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <div class=""> - <autocomplete auto-select="true" :search="search" :get-result-value="result_view" @submit="select_result" placeholder="søk..."></autocomplete> + <form class="" action="search" method="get"> + <input placeholder="Søk..." name="q" /> + </form> </div> <SearchResults :hits="search_results" /> <Article :article="article" /> @@ -13,17 +15,10 @@ import axios from "axios" import Article from './components/Article.vue' import SearchResults from './components/SearchResults.vue' -import Autocomplete from '@trevoreyre/autocomplete-vue' +//import Autocomplete from '@trevoreyre/autocomplete-vue' import '@trevoreyre/autocomplete-vue/dist/style.css' -window.onpopstate = function (event) { - if (event.state) { - console.log(event) - app.__vue__._data.article = event.state - } else { - console.log(event) - } -} +var api_endpoint = 'https://ordbok-dev.aws.uib.no/api/dict/nob/article' export default { name: 'app', @@ -32,10 +27,10 @@ export default { article_id: parseInt(window.location.href.split("/").pop()), search_query: window.location.href.split("?q=")[1], search_results: [], - article: {lemmas: []}, + article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}, search: function(q) { return new Promise(resolve => { - return axios.post('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_search/', + return axios.post(api_endpoint + '_search/', { "suggest": { "suggest" : { @@ -62,7 +57,7 @@ export default { }, components: { Article, - Autocomplete, + //Autocomplete, SearchResults }, methods: { @@ -70,7 +65,6 @@ export default { if(event._source){ this.search_results = [] this.article = event._source - history.pushState(this.article, this.article.lemmas.map(x => x.word).join(', '), event._id) }else{ window.location.href="search?q=" + event.q } @@ -79,17 +73,16 @@ export default { mounted: function(){ var self = this; if(this.search_query) { - axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_search?q=' + self.search_query) + axios.get(api_endpoint + '?expand_lemmas=true&lemma_text=' + self.search_query) .then(function(response){ - self.search_results = response.data.hits.hits + self.search_results = response.data }) } else { - axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id) + axios.get(api_endpoint + '/' + self.article_id + '?expand_lemmas=true&expand_refs=true') .then(function(response){ - self.article = response.data._source - history.replaceState(self.article, self.article.lemmas.map(x => x.word).join(', ')) + self.article = response.data }) } } diff --git a/src/components/Article.vue b/src/components/Article.vue index a9b1aca55c310ed78cc43e37daf59c67ebc08bea..188655b8a1159f1660efec7595223d8445436dd2 100644 --- a/src/components/Article.vue +++ b/src/components/Article.vue @@ -1,22 +1,22 @@ <template> <div class="article" v-show="article.lemmas.length"> <Header :lemmas="article.lemmas" /> - <div class="" v-if="article.pronounciation.length"> + <div class="" v-if="article.body.pronunciation.length"> <h3>Uttale</h3> <ul> - <DefElement v-for="(element, index) in article.pronounciation" :key="index" :body='element' v-if="element.content" /> + <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' v-if="element.content" /> </ul> </div> - <div class="" v-if="article.etymology"> + <div class="" v-if="article.body.etymology"> <h3>Etymologi</h3> <ul> - <DefElement v-for="(element, index) in article.etymology" :key="index" :body='element' v-if="element.content" /> + <DefElement v-for="(element, index) in article.body.etymology" :key="index" :body='element' v-if="element.content" /> </ul> </div> <div class=""> <h3>Definisjoner</h3> <ol> - <Definition v-for="(definition, index) in article.definitions" :key="index" :body='definition' /> + <Definition v-for="(definition, index) in definitions" :key="index" :body='definition' /> </ol> </div> </div> @@ -37,6 +37,18 @@ export default { DefElement, Definition, Header + }, + computed: { + definitions: function() { + let defs = this.article.body.definitions + if (defs.length == 1) { + let types = defs[0].elements.reduce((acc, toAdd)=>acc.add(toAdd.type_), new Set()) + if (types.size == 1 && types.has('definition')) { + return defs[0].elements + } + } + return defs + } } } </script> diff --git a/src/components/CompoundList.vue b/src/components/CompoundList.vue new file mode 100644 index 0000000000000000000000000000000000000000..3bb9c75a5569ede4a10145979d85ccf5eeeb289c --- /dev/null +++ b/src/components/CompoundList.vue @@ -0,0 +1,29 @@ +<template> + <li class="compound_list"> + <ul> + <DefElement :body="body.intro" v-if="body.intro" /> + <li :key="index" v-for="(item, index) in body.elements"> + <a :href="item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"> {{item.lemmas.join(',')}};</a> + </li> + </ul> + </li> +</template> + +<script> +import DefElement from './DefElement.vue' + +export default { + name: 'CompoundList', + props: { + body: Object + }, + components: { + DefElement + } +} +</script> +<style scoped> + li.compound_list ul li { + display: inline; + } +</style> diff --git a/src/components/DefElement.vue b/src/components/DefElement.vue index 8a2d3c7b42bdc57ca5f75f226fe6709cac152431..d4f0fa30404fec13c3ae83ab40f994b95c133da4 100644 --- a/src/components/DefElement.vue +++ b/src/components/DefElement.vue @@ -1,6 +1,6 @@ <template> - <li :class="body.type"> - <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span> + <li :class="body.type_"> + <span v-for="(item, index) in assemble_text" :class="item.type_" :key="index" v-html="item.html"></span> </li> </template> @@ -17,11 +17,11 @@ export default { unparsed: function(){ return this.body.items.map( function(item){ - if (item.type == 'usage') return {type: item.type, html: item.text} - else if (item.type == 'article_ref') return {type: item.type, html: `<a href="${item.article_id}${item.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`} - else if (item.type == 'pronounciation') return {type: item.type, html: item.string} - else if (item.id) return {type: item.type, html: entities[item.id] || languages[item.id] || item.id} - else return {type: item.type || 'plain', html: item} + if (item.type_ == 'usage') return {type: item.type_, html: item.text} + else if (item.type_ == 'article_ref') return {type: item.type_, html: `<a href="${item.article_id}${item.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`} + else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string} + else if (item.id) return {type: item.type_, html: entities[item.id] || languages[item.id] || item.id} + else return {type: item.type_ || 'plain', html: item} } ) }, @@ -44,7 +44,7 @@ export default { <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> -span.usage, span.pronounciation { +span.usage, span.pronunciation { font-style: italic; } diff --git a/src/components/Definition.vue b/src/components/Definition.vue index 73d9e1553807081cf75da6fad0b4d93bbb3d757d..1f4cf320bf44de525c8a4f9a625b3e75785dce1f 100644 --- a/src/components/Definition.vue +++ b/src/components/Definition.vue @@ -10,6 +10,7 @@ import DefElement from './DefElement.vue' import Example from './Example.vue' import SubArticle from './SubArticle.vue' +import CompoundList from './CompoundList.vue' var Definition = { name: 'Definition', @@ -20,7 +21,8 @@ var Definition = { DefElement, Definition, Example, - SubArticle + SubArticle, + CompoundList }, computed: { template_name_added: function(){ @@ -31,8 +33,9 @@ var Definition = { 'explanation': 'DefElement', 'definition': 'Definition', 'example': 'Example', - 'sub_article': 'SubArticle' - }[element.type] || 'li', + 'sub_article': 'SubArticle', + 'compound_list': 'CompoundList' + }[element.type_] || 'li', 'element': element } }) diff --git a/src/components/Header.vue b/src/components/Header.vue index f31b9e63c58f01a39e8e0ce227c7c1a342e673e2..bbb731817ae5624081002f704d35f07b5c9ea621 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -33,7 +33,7 @@ export default { header_text: function() { return this.lemmas.map( function(item){ - return item.word + return item.lemma } ).join(', ') }, diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue index fe2b4356e0efcdff8c724bf9e93c7b22ea66c978..637115b063d6a5a68a56b1361988e37d5eab0894 100644 --- a/src/components/SearchResults.vue +++ b/src/components/SearchResults.vue @@ -21,10 +21,9 @@ export default { return this.hits.map( function(hit){ return { - id: hit._id, - label: hit._source.lemmas.map(x => x.word).join(', '), - article: hit._source, - classification: helpers.group_list(hit._source.lemmas) + id: hit.article_id, + label: hit.lemmas.map(x => x.lemma).join(', '), + classification: helpers.group_list(hit.lemmas) } }) } diff --git a/src/components/SubArticle.vue b/src/components/SubArticle.vue index c2a1a1620be72e44f34cccca7388a193126f398d..642d7e2d34c54ebc6f2adcf77bc8aa4cbf161695 100644 --- a/src/components/SubArticle.vue +++ b/src/components/SubArticle.vue @@ -1,15 +1,14 @@ <template> <li class="sub_article"> - <span class="sub_article_header"><a :href="body.article_id">{{article.lemmas[0]['word']}}</a></span> + <span class="sub_article_header"><a :href="body.article_id">{{body.lemmas[0]}}</a></span> <ul> <DefElement :body="body.intro" v-if="body.intro" /> - <Definition :body="article.definitions[0]" /> + <Definition :body="body.article.body.definitions[0]" /> </ul> </li> </template> <script> -import axios from "axios"; import DefElement from './DefElement.vue' export default { @@ -17,21 +16,8 @@ export default { props: { body: Object }, - data: function(){ - return { - article: { - lemmas: [{word: ''}], - definitions: [{ - elements: [] - }] - } - } - }, - components: {DefElement}, - mounted: function(){ - var self = this; - axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.body.article_id) - .then(response => self.article = response.data._source) + components: { + DefElement }, beforeCreate: function () { this.$options.components.Definition = require('./Definition.vue').default diff --git a/src/utils/helpers.js b/src/utils/helpers.js index 460db5eb187c1635b8405fa1e4cb6a5381e79054..f40ede559b9deb6aac5068043080e087f248d108 100644 --- a/src/utils/helpers.js +++ b/src/utils/helpers.js @@ -1,11 +1,11 @@ var group_list = function(grps) { var grp_collection = new Set() grps.forEach(function(lemma){ - lemma.inflection_groups.forEach(function(grp){ - grp_collection.add(grp.group_designation) + lemma.standardisations.forEach(function(grp){ + grp_collection.add(grp.tags[0] == 'subst' ? grp.tags[0] + ',' + grp.tags[1] : grp.tags[0]) }) }) - return Array.from(grp_collection).join(';') + return Array.from(grp_collection).join('; ') } export default { group_list}