getBible/app
4
2
Fork 0
mirror of https://github.com/getbible/app.git synced 2024-12-22 07:48:55 +00:00
Code

Added Chapter pagination

Browse Source
This commit is contained in:
Erastus Amunwe 2020-11-05 17:28:42 +02:00
parent 87ead214dd
commit 7da83bdeea
1 changed files with 14 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Options.vue
View File

@ -1,77 +1,26 @@
<template> <template>
<div class="uk-container"> <div class="uk-container">
<!-- <div class="uk-flex uk-flex-around">
<div class="input-group mb-3 cols-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01"><h4>Translation</h4> </label>
</div>
<select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01">
<option
class="uk-animation-slide-bottom uk-animation-15" v-for="(tr,i) in translations"
:key="i"
:value="tr.abbreviation"
>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}
</option>
</select>
</div>
<div class="input-group mb-3 cols-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01"><h4>Book</h4> </label>
</div>
<select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01">
<option
v-for="(bk,i) in Object.keys(books)"
:key="i"
:value="books[bk]['nr']"
>{{books[bk]['name']}}
</option>
</select>
</div>
<div class="input-group mb-3 cols-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01"><h4>Chapter</h4></label>
</div>
<select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01">
<option
v-for="(ch,i) in Object.keys(chapters)"
:key="i"
:value="chapters[ch]['chapter']"
>{{chapters[ch]['chapter']}}
</option>
</select>
</div>
</div> -->
<div class="uk-margin"> <div class="uk-margin">
<ul class="uk-pagination"> <ul class="uk-pagination">
<li><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li> <li @click="prev"><a href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
<li class="uk-margin-auto-left"><a href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li> <li class="uk-margin-auto-left" @click="next"><a href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import _ from 'lodash'; import _ from 'lodash';
import {mapGetters} from 'vuex'
export default { export default {
components:{ components:{
}, },
data: function(){ data: function(){
return { return {
translation: 'akjv',
// translations: {},
chapter: 1,
chapter_num: 1,
chapters:{},
book: 1,
books: {},
progress: 0, progress: 0,
loading: false, loading: false,
links: null,
search: '',
message: 'Loading...'
}}, }},
computed: { computed: {
translations(){ translations(){
@ -81,6 +30,7 @@ export default {
console.log(this.$store.state.saved_translations); console.log(this.$store.state.saved_translations);
return this.$store.state.saved_translations return this.$store.state.saved_translations
}, },
...mapGetters(['chapters', 'chapter']),
fchapters: function (){ fchapters: function (){
if(!this.search) if(!this.search)
return this.chapter.verses return this.chapter.verses
@ -98,6 +48,14 @@ export default {
t(i){ t(i){
return this.translations.find(t => t.abbreviation === i) return this.translations.find(t => t.abbreviation === i)
}, },
next(){
if(this.chapter<this.chapters.length)
this.$store.dispatch('set_chapter', this.chapter + 1)
},
prev(){
if(this.chapter>1)
this.$store.dispatch('set_chapter', this.chapter - 1)
},
async update_chapter() { async update_chapter() {
// this.loading = true // this.loading = true
this.progress = 95 this.progress = 95