4
2
mirror of https://github.com/getbible/app.git synced 2024-10-31 19:02:31 +00:00
app/src/components/Selection.vue

128 lines
3.8 KiB
Vue
Raw Permalink Normal View History

<template>
2021-01-08 15:16:47 +00:00
<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> -->
2021-01-08 15:16:47 +00:00
<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>
2021-01-08 15:16:47 +00:00
<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> -->
2021-01-08 15:16:47 +00:00
<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>
2021-01-08 15:16:47 +00:00
<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>
2021-01-08 15:16:47 +00:00
</ul>
</div>
2021-01-08 15:16:47 +00:00
</div>
</template>
<script>
// import _ from 'lodash';
2021-01-08 15:16:47 +00:00
import UIkit from "uikit";
2021-01-08 15:16:47 +00:00
import { mapGetters } from "vuex";
export default {
2021-01-08 15:16:47 +00:00
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>