endret feilhåndtering

src/components/Article.vue

 <template>
-  <article v-show="article.lemmas.length || article.error" :class="dictionary">
+  <article v-if="article" :class="dictionary">
     <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
-    <section v-if="! article.error && article.body.pronunciation && article.body.pronunciation.length">
+    <section v-if="article.body.pronunciation && article.body.pronunciation.length">
       <h3>Uttale</h3>
         <ul>
           <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
         </ul>
     </section>
-    <section v-if="! article.error && article.body.etymology && article.body.etymology.length">
+    <section v-if="article.body.etymology && article.body.etymology.length">
       <h3>Etymologi</h3>
         <ul>
           <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
         </ul>
     </section>
-    <section v-if="! article.error">
+    <section>
       <h3>Definisjoner</h3>
       <ol>
         <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
       </ol>
     </section>
-    <section v-if="article.error">
-      <h1>Ooops...</h1>
-      <p>{{article.error}}</p>
-    </section>
   </article>
 </template>
 

src/components/DictionaryView.vue

 <template>
-  <main :class="(article.error || article.lemmas.length || search_results.length || waiting) ? '' : 'welcome  '">
+  <main :class="(article || waiting || error) ? '' : 'welcome  '">
     <div class="search_container">
       <div class="lang_select_container">
         <v-radio-group row v-model="lang">
@@ -13,12 +13,12 @@
           </v-radio>
           <v-radio value="bob" color="secondary">
             <template v-slot:label>
-              <span>bokmål</span>
+              <span><span class="verbose">bokmål (</span>bm<span class="verbose">)</span></span>
             </template>
           </v-radio>
           <v-radio value="nob" color="secondary">
             <template v-slot:label>
-              <span>nynorsk</span>
+              <span><span class="verbose">nynorsk (</span>nn<span class="verbose">)</span></span>
             </template>
           </v-radio>
         </v-radio-group>
@@ -26,14 +26,14 @@
       <Autocomplete @submit="select_result" :endpoint="api_pref">
       </Autocomplete>
     </div>
-    <div id="spinner">
-      <v-progress-circular indeterminate color="secondary" size="120" v-show="waiting"></v-progress-circular>
+    <div id="spinner" v-if="waiting">
+      <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
     </div>
-    <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-show="! waiting" />
-    <div id="single_article_container">
+    <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-if="! waiting" />
+    <div id="single_article_container" v-if="article">
       <Article :key="article_key" :article="article" @article-click="article_link_click" />
     </div>
-    <div class="welcome" v-show="! (article.error || article.lemmas.length || search_results.length || waiting)">
+    <div class="welcome" v-if="! (article || error || search_results.length || waiting)">
       <div class="monthly">
         <div>
           <Article :article="monthly_bm" @article-click="article_link_click" />
@@ -43,6 +43,10 @@
         </div>
       </div>
     </div>
+    <div class="error" v-if="error">
+      <h1>Oooops...</h1>
+      {{error}}
+    </div>
   </main>
 </template>
 
@@ -67,24 +71,19 @@ function navigate_to_article(self, source) {
   .then(function(response){
     self.article = Object.assign(response.data, {'dictionary': self.$route.params.lang})
     self.search_results = []
+    self.error = null
   })
   .catch(function(error){
     if (error.response && error.response.status == 404) {
-      self.article = {
-        lemmas: [],
-        error: "Vi har ingen artikkel med id " + self.$route.params.id
-      }
+      self.error = "Vi har ingen artikkel med id " + self.$route.params.id
     } else {
-      self.article = {
-        lemmas: [],
-        error: "Noe gikk galt..."
-      }
+      self.error = "Noe gikk galt..."
       console.log(error)
     }
   })
   .then(function(response){
     self.waiting_for_articles = false
-    history.replaceState({article: self.article, search_results: [], lang: self.lang}, '')
+    history.replaceState({article: self.article, search_results: [], lang: self.lang, error: self.error}, '')
     if (source) {
       self.$plausible.trackEvent('internal link incoming', {props: {origin: source}})
     }
@@ -96,33 +95,23 @@ function navigate_to_search(self, query) {
   .then(function(response){
     self.search_results = response.data
     if (! self.search_results.length) {
-      self.article = {
-        lemmas: [],
-        error: "Vi fant ingen resultater for '" + decodeURIComponent(query) + "'. (Søkeforlag kommer i en senere oppatering av Ordbøkene)"
-      }
+      self.error = "Vi fant ingen resultater for '" + decodeURIComponent(query) + "'. (Søkeforlag kommer i en senere oppatering av Ordbøkene)"
+    } else {
+      self.error = null
     }
   })
   .catch(function(error){
     if (error.response && error.response.status == 400) {
-      self.article = {
-        lemmas: [],
-        error: "Søkeuttrykket inneholder feil"
-      }
+      self.error = "Søkeuttrykket inneholder feil"
     } else if (error.response) {
-      self.article = {
-        lemmas: [],
-        error: "Noe gikk galt på serversiden"
-      }
+      self.error = "Noe gikk galt på serversiden"
     } else {
-      self.article = {
-        lemmas: [],
-        error: "Nettverksproblemer, prøv igjen"
-      }
+      self.error = "Nettverksproblemer, prøv igjen"
     }
   })
   .then(function(_){
     self.waiting_for_articles = false
-    history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
+    history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang, error: self.error}, '')
   })
 }
 
@@ -131,28 +120,21 @@ function navigate_to_word(self, word) {
   .then(function(response){
     self.search_results = response.data.filter(result => result.match.length == word.length)
     if (! self.search_results.length) {
-      self.article = {
-        lemmas: [],
-        error: "Ordet '" + decodeURIComponent(word) + "' finnes ikke i ordbøkene"
-      }
+      self.error = "Ordet '" + decodeURIComponent(word) + "' finnes ikke i ordbøkene"
+    } else {
+      self.error = null
     }
   })
   .catch(function(error){
     if (error.response) {
-      self.article = {
-        lemmas: [],
-        error: "Noe gikk galt på serversiden"
-      }
+      self.error = "Noe gikk galt på serversiden"
     } else {
-      self.article = {
-        lemmas: [],
-        error: "Nettverksproblemer, prøv igjen"
-      }
+      self.error = "Nettverksproblemer, prøv igjen"
     }
   })
   .then(function(_){
     self.waiting_for_articles = false
-    history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
+    history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang, error: self.error}, '')
   })
 }
 
@@ -165,9 +147,10 @@ export default {
       lang: 'bob,nob',
       waiting_for_articles: true,
       waiting_for_metadata: true,
-      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
-      monthly_bm: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
-      monthly_nn: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
+      article: null,
+      error: null,
+      monthly_bm: null,
+      monthly_nn: null
     }
   },
   computed: {
@@ -188,21 +171,22 @@ export default {
       if(event.articles){
         this.$router.push('/' + this.lang + '/w/' + event.word)
         this.search_results = event.articles
-        this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
-        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '')
+        this.article = null
+        this.error = null
+        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang, error: this.error}, '')
         this.$plausible.trackEvent('dropdown selection', {props: {query: event.label, match: event.match}})
       }else{
         this.waiting_for_articles = true
-        this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
+        this.article = null
         this.$router.push(`/${this.lang}/search/${event.q}`)
         navigate_to_search(this, event.q)
         this.$plausible.trackEvent('dropdown selection', {props: {query: event.label, match: '<fritekstsøk>'}})
       }
     },
     article_link_click: function(item) {
-      if (this.article.article_id == item.article_id){
+      if (this.article && this.article.article_id == item.article_id){
         this.article_key++
-        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '')
+        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang, error: this.error}, '')
       }else{
         this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
         this.waiting_for_articles = true
@@ -239,7 +223,7 @@ export default {
       else {
         self.lang = self.$route.params.lang || 'bob,nob'
         self.waiting_for_articles = false
-        history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
+        history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang, error: self.error}, '')
       }
 
       // words of the month
@@ -251,10 +235,7 @@ export default {
         self.monthly_nn = Object.assign(response.data, {dictionary: 'nob'})
       })
     }).catch(function(_){
-      self.article = {
-        lemmas: [],
-        error: "Et nettverksproblem hindret lasting av siden. Prøv å laste siden på nytt"
-      }
+      self.error = "Et nettverksproblem hindret lasting av siden. Prøv å laste siden på nytt"
       self.waiting_for_metadata = false
       self.waiting_for_articles = false
     })
@@ -271,6 +252,7 @@ export default {
         self.article = event.state.article
         self.search_results = event.state.search_results
         self.lang = event.state.lang
+        self.error = event.state.error
       }
     }
 
@@ -279,8 +261,6 @@ export default {
 </script>
 
 <style>
-
-
 main {
   padding-bottom: 20px;
   flex: 1 0 auto;
@@ -293,7 +273,7 @@ main.welcome {
   background-attachment: fixed;
 }
 
-#search_results, #spinner, #single_article_container, div.welcome, div.search_container {
+#search_results, #spinner, #single_article_container, div.welcome, div.search_container, .error {
   padding-left: calc((100vw - 1000px) / 2);
   padding-right: calc((100vw - 1000px) / 2);
 }
@@ -324,7 +304,7 @@ div.monthly article.nob .dict-label::before {
 
 
 .search_container {
-  max-width: 1400px;
+  max-width: 1500px;
   padding-top: 50px;
 }
 

src/plugins/vuetify.js

@@ -14,7 +14,8 @@ export default new Vuetify({
         primary: '#560027',
         secondary: '#BC477B',
         tertiary: '#FDF4F5',
-        anchor: '#560027'
+        anchor: '#560027',
+        error: '#FDF4F5'
       }
     }
    },