Frontend indikator za strojni prevod

nuxt/components/Pojem.vue

@@ -69,7 +69,7 @@ onUpdated(() => {
     <div v-if="pojem" class="pojem">
       <h2>
         {{ naslov }}
-        <span v-if="pojem.strojni_prevod">strojni prevod</span>
+        <StrojniPrevod v-if="pojem.strojni_prevod" />
       </h2>
       <div class="tekst" v-html="pojem.tekst" />
     </div>

nuxt/components/StrojniPrevod.vue

@@ -0,0 +1,15 @@
+<template>
+  <span alt="Ikona za strojni prevod" :title="$t('strojni prevod')" />
+</template>
+
+<style scoped>
+  span {
+    background-image: url('/images/Strojni prevod.png');
+    height: 24px;
+    width: 24px;
+    display: inline-block;
+    position: relative;
+    top: 2px;
+    left: 2px;
+  }
+</style>

nuxt/pages/manifest/index.vue

@@ -30,7 +30,10 @@ onMounted(() => {
     :naslov="pojem"
     :to="localePath({ name: 'pojem_poglej', params: { naslov: pojem }})"
     class="okvir">
-    <h2>{{ pojem }}</h2>
+    <h2>
+      {{ pojem }}
+      <StrojniPrevod v-if="store.pojmi[pojem].strojni_prevod" />
+    </h2>
   </NuxtLink>
 </template>
 
@@ -47,4 +50,7 @@ onMounted(() => {
     padding-right: 2rem;
     text-align: center;
   }
+
+  .strojni-prevod {
+  }
 </style>

nuxt/stores/pojmi.js

@@ -11,7 +11,8 @@ export const usePojmiStore = defineStore('pojmi', {
         id: s.id,
         naslov: s.title,
         tekst: s.body ? s.body.processed : '',
-        media: s.field_media
+        media: s.fieldMedia,
+        strojni_prevod: s.fieldStrojniPrevod
       }), 'naslov')
     },
 
@@ -28,7 +29,6 @@ export const usePojmiStore = defineStore('pojmi', {
       })
 
       const resp = await req.json()
-      console.log('nov pojem?', resp)
     }
   }
 })

nuxt/stores/strani.js

@@ -10,7 +10,7 @@ export const useStraniStore = defineStore('strani', {
       this.strani = await deserialize(data, s => ({
         id: s.id,
         naslov: s.title,
-        tekst: s.body.processed
+        tekst: s.body ? s.body.processed : ''
       }), 'naslov')
     }
   }