mirror of https://github.com/getbible/app.git
128 lines
3.8 KiB
Vue
128 lines
3.8 KiB
Vue
<template>
|
|
<div
|
|
id="selection"
|
|
class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body rounded"
|
|
uk-margin
|
|
>
|
|
<div class="" v-if="!saved_translations.length > 0">
|
|
No translations added. <br />Please click
|
|
<a @click="open_settings">HERE</a> to Open Settings
|
|
</div>
|
|
<div v-else>
|
|
<ul
|
|
class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1"
|
|
uk-nav="multiple: false"
|
|
>
|
|
<li class="uk-parent uk-witdth-1-1">
|
|
<a class="text-secondary">Translation</a>
|
|
<ul
|
|
class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination"
|
|
uk-margin
|
|
>
|
|
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
|
|
<li
|
|
class="uk-card uk-card-hover text-secondary rounded"
|
|
v-for="(tr, i) in saved_translations"
|
|
@click="set_translation(tr.abbreviation)"
|
|
:key="i"
|
|
>
|
|
<a class="text-secondary" href="#"
|
|
>{{ tr["language"] ? `(${tr["language"]})` : null }}
|
|
{{ tr["translation"] }}</a
|
|
>
|
|
</li>
|
|
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
|
</ul>
|
|
</li>
|
|
<li class="uk-nav-divider uk-witdth-1-1"></li>
|
|
<li v-if="translation" class="uk-parent uk-witdth-1-1">
|
|
<a class="text-secondary">Books</a>
|
|
<ul
|
|
class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination"
|
|
uk-margin
|
|
>
|
|
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
|
|
<li
|
|
class="uk-card uk-card-hover text-secondary"
|
|
v-for="(bk, i) in books"
|
|
@click="set_book(bk['nr'])"
|
|
:key="i"
|
|
>
|
|
<a href="#" class="text-secondary">{{ bk["name"] }}</a>
|
|
</li>
|
|
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
|
</ul>
|
|
</li>
|
|
<li class="uk-nav-divider uk-witdth-1-1"></li>
|
|
<li v-if="book_nr" class="uk-parent uk-witdth-1-1">
|
|
<a class="text-secondary">Chapters</a>
|
|
<ul
|
|
class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination"
|
|
uk-margin
|
|
>
|
|
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
|
|
<li
|
|
class="uk-card uk-card-hover"
|
|
v-for="(ch, i) in chapters"
|
|
@click="set_chapter(ch['chapter'])"
|
|
:key="i"
|
|
>
|
|
<a href="#selection" class="text-secondary" uk-toggle>{{
|
|
ch["chapter"]
|
|
}}</a>
|
|
</li>
|
|
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import _ from 'lodash';
|
|
import UIkit from "uikit";
|
|
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
components: {
|
|
// verses
|
|
},
|
|
data: function () {
|
|
return {
|
|
// translation: 'akjv',
|
|
};
|
|
},
|
|
computed: {
|
|
// translations(){
|
|
// // console.log(this.$store.state.saved_translations);
|
|
// return this.$store.getters.saved_translations;
|
|
// },
|
|
...mapGetters([
|
|
"chapters",
|
|
"books",
|
|
"translation",
|
|
"book_nr",
|
|
"saved_translations",
|
|
]),
|
|
},
|
|
methods: {
|
|
t(i) {
|
|
return this.translations.find((t) => t.abbreviation === i);
|
|
},
|
|
set_translation(a) {
|
|
console.log("Hello");
|
|
this.$store.dispatch("set_translation", { selected_translation: a });
|
|
},
|
|
set_book(b) {
|
|
this.$store.dispatch("set_book", b);
|
|
},
|
|
set_chapter(c) {
|
|
this.$store.dispatch("set_chapter", c);
|
|
},
|
|
open_settings() {
|
|
UIkit.modal("#modal-sections").show();
|
|
},
|
|
},
|
|
created() {},
|
|
};
|
|
</script> |