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

addedd Config/settings component and imported component Verses into it

Browse Source
This commit is contained in:
Erastus Amunwe 2020-10-24 02:33:58 +02:00
parent 58b09ab3e7
commit d94620e595
1 changed files with 195 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/components/Options.vue Normal file
View File

@ -0,0 +1,195 @@
<template>
<div>
<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"><h3>Translation</h3> </label>
</div>
<select @change="update_bk()" v-model="translation" class="uk-select" id="inputGroupSelect01">
<!-- <option selected value="1">Choose...</option> -->
<option
class="uk-animation-slide-bottom uk-animation-15" v-for="(tr,i) in Object.keys(translations)"
:key="i"
:value="tr"
>{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[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"><h3>Book of</h3> </label>
</div>
<select @change="update_ch()" v-model="book" class="uk-select" id="inputGroupSelect01">
<!-- <option selected value="1">Choose...</option> -->
<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"><h3>Chapter</h3></label>
</div>
<select @change="update_chapter()" v-model="chapter_num" class="uk-select" id="inputGroupSelect01">
<!-- <option selected value="1">Choose...</option> -->
<option
v-for="(ch,i) in Object.keys(chapters)"
:key="i"
:value="chapters[ch]['chapter']"
>{{chapters[ch]['chapter']}}
</option>
</select>
</div>
</div>
<verses
v-if="books[book] "
:dir="translations[translation].direction.toLowerCase()"
:book_name="books[book].name"
:chapter="fchapters"
/>
</div>
</template>
<script>
import _ from 'lodash';
import verses from './Verses.vue';
export default {
components:{
verses
},
data: function(){
return {
translation: 'akjv',
translations: {},
chapter: 1,
chapter_num: 1,
chapters:{},
book: 1,
books: {},
progress: 0,
loading: false,
links: null,
search: '',
message: 'Loading...'
}},
computed: {
fchapters: function (){
if(!this.search)
return this.chapter.verses
return this.filteredChapters
},
filteredChapters() {
return _.orderBy(this.chapter.verses.filter((item) => item.verse.toString().toLowerCase()
.includes(this.search.toLowerCase())
|| item.chapter.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.name.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.text.toLowerCase().includes(this.search.toLowerCase())), 'verse');
},
},
methods:{
update_chapter() {
// this.loading = true
this.progress = 95
let config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
fetch(`https://getbible.net/v2/${this.translation}/${this.book}/${this.chapter_num}.json`, config)
.then(response => {
this.progress = 99
return response.json()})
.then(data => {
this.loading =false
// console.log(data)
this.chapter = data
this.progress =0
}).catch(function(err) {
this.chapter = err
this.loading =false
this.message = 'Error'
});
},
async update_tr(){
},
async update_bk(){
let config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
this.loading =true
this.progress =25
this.message = 'Loading...'
fetch(`https://getbible.net/v2/${this.translation}/books.json`,config)
.then(response => response.json())
.then(data => {
// console.log(data)
this.books = data
this.progress = 60
this.update_ch();
}).catch(function(err) {
this.chapter = err
this.loading =false
this.message = 'Error'
});
},
async update_ch(){
let config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
fetch(`https://getbible.net/v2/${this.translation}/${this.book}/chapters.json`,config)
.then(response => response.json())
.then(data => {
// console.log(data)
this.chapters = data
this.progress = 85
this.update_chapter();
}).catch(function(err) {
this.chapter = err
this.loading =false
this.message = 'Error'
});
}
},
created(){
let config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
fetch(`https://getbible.net/v2/translations.json`,config)
.then(response => response.json())
.then(data => {
// console.log(data)
this.translations = data
fetch(`https://getbible.net/v2/${this.translation}/books.json`, config)
.then(response => response.json())
.then(data => {
// console.log(data)
this.books = data
this.update_ch();
}).catch(function(err) {
this.chapter = err
});
}).catch(function(err) {
this.chapter = err
});
fetch(`https://getbible.net/v2/kjv/${this.book}/${this.chapter_num}.json`,config)
.then(response => response.json())
.then(data => {
console.log(data)
this.chapter = data
}).catch(function(err) {
this.chapter = err
});
}
}
</script>