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

fixed merge conflict

Browse Source
This commit is contained in:
Erastus Amunwe 2021-01-08 17:09:02 +02:00
commit 61a053df2f
9 changed files with 1157 additions and 1145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1585
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
src/App.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div class="secondary-lighten3"> <div class="secondary-lighten3">
<!-- <div v-if="loading" class="uk-overlay-default uk-position-cover">
<div class="uk-position-center">
<h1>Loading... Please wait...</h1>
</div>
</div> -->
<navbar/> <navbar/>
<div class="uk-container uk-animation-slide-bottom uk-margin-top"> <div class="uk-container uk-animation-slide-bottom uk-margin-top">
<selections/> <selections/>
@ -15,8 +10,8 @@
</div> </div>
</div> </div>
<div v-if="loading" id="overlay"> <div v-if="loading" id="overlay">
<div class="uk-position-center less-opacity"> <div class="uk-position-center">
<h1>Loading... Please wait.</h1> <span uk-spinner="ratio: 3"></span>
</div> </div>
</div> </div>
</div> </div>

2
src/api/getbible_v2_api.js
View File

@ -4,6 +4,8 @@
let BASE_URL = 'https://getbible.net'; let BASE_URL = 'https://getbible.net';
let API_VERSION = 'v2'; let API_VERSION = 'v2';
export { BASE_URL, API_VERSION };
export default { export default {
get_translations(){ get_translations(){

91
src/api/idb.js
View File

@ -27,6 +27,21 @@ export default {
let db = e.target.result; let db = e.target.result;
db.createObjectStore("saved_translations", { keyPath:'abbreviation' }); db.createObjectStore("saved_translations", { keyPath:'abbreviation' });
db.createObjectStore("translations", { keyPath:'abbreviation' }); db.createObjectStore("translations", { keyPath:'abbreviation' });
// let index = translations.createIndex('book_idx', 'name');
// let transaction = db.transaction("books"); // readonly
// let books = transaction.objectStore("books");
// let bookIndex = translations.index("book_idx");
// let request = bookIndex.getAll("Genesis");
// request.onsuccess = function() {
// if (request.result !== undefined) {
// console.log("Books", request.result); // array of books with name="Genesis"
// } else {
// console.log("No such books");
// }
// }
}; };
}); });
}, },
@ -134,50 +149,50 @@ export default {
}); });
}, },
async search(name, keyPath) { // async search(name, keyPath) {
let db = await this.getDb(); // let db = await this.getDb();
return new Promise((resolve, reject) => { // return new Promise((resolve, reject) => {
let trans = db.transaction([name],'readonly'); // let trans = db.transaction([name],'readonly');
trans.oncomplete = () => { // trans.oncomplete = () => {
resolve(tr); // resolve(tr);
}; // };
let store = trans.objectStore(name); // let store = trans.objectStore(name);
let tr = {}; // let tr = {};
store.openCursor().onsuccess = e => { // store.openCursor().onsuccess = e => {
let cursor = e.target.result; // let cursor = e.target.result;
if (cursor) { // if (cursor) {
if (keyPath == cursor.value.keyPath){ // if (keyPath == cursor.value.keyPath){
tr = cursor.value // tr = cursor.value
for (const book in cursor.value.books) { // for (const book in cursor.value.books) {
for (const chapters in book) { // for (const chapters in book) {
for (const verses in chapters) { // for (const verses in chapters) {
for (const verse in verses) { // for (const verse in verses) {
if(verse.text.includes(keyPath)){ // if(verse.text.includes(keyPath)){
console.log("We found a row with value: " + JSON.stringify(verse.text)); // console.log("We found a row with value: " + JSON.stringify(verse.text));
} // }
} // }
} // }
} // }
} // }
} // }
cursor.continue(); // cursor.continue();
} // }
}; // };
trans.onerror = e => { // trans.onerror = e => {
reject(e) // reject(e)
} // }
trans.onabort = e => { // trans.onabort = e => {
reject(e) // reject(e)
} // }
trans.commit(); // trans.commit();
}); // });
}, // },
} }

246
src/components/NavBar.vue
View File

@ -1,167 +1,95 @@
<template> <template>
<div
<div class="secondary" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"> class="secondary"
uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"
<nav class="uk-navbar-container primary text-secondary uk-margin-small" uk-navbar> >
<div class="uk-navbar-left"> <nav
class="uk-navbar-container primary text-secondary uk-margin-small"
<!-- <a class="uk-navbar-item uk-logo" href="#">GetBible</a> --> uk-navbar
<a href="#selection" class="uk-navbar-item uk-search uk-search-default primary text-secondary" uk-toggle><span class="primary text-secondary" uk-icon="icon: album; ratio:2"></span>{{book_name }} {{chapter}}</a> >
<div class="uk-navbar-left">
<!-- <a class="uk-navbar-item uk-logo" href="#">GetBible</a> -->
<a
href="#selection"
class="uk-navbar-item uk-search uk-search-default primary text-secondary"
uk-toggle
><span
class="primary text-secondary"
uk-icon="icon: album; ratio:2"
></span
>{{ book_name }} {{ chapter }}</a
>
<a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default primary text-secondary" uk-toggle><span class="primary text-secondary" uk-icon="icon: search; ratio:2"></span>Search</a> <a
href="#offcanvas-slide"
class="uk-navbar-item uk-search uk-search-default primary text-secondary"
uk-toggle
><span
class="primary text-secondary"
uk-icon="icon: search; ratio:2"
></span
>Search</a
>
<search/> <search />
<!-- <span class="uk-label uk-label-primary"><span class="uk-badge uk-badge-danger">{{ num_of_tr}} </span>Translations Available</span> -->
<a class="uk-navbar-item" href="#" uk-toggle><span class="primary text-secondary" uk-icon="icon: history; ratio:2"></span></a>
</div>
<a class="uk-navbar-item uk-position-center-right primary text-secondary" href="#modal-sections" uk-toggle><span class="uk-icon-button primary text-secondary" uk-icon="icon: cog; ratio:2"></span></a>
<div id="modal-sections" uk-modal> <!-- <span class="uk-label uk-label-primary"><span class="uk-badge uk-badge-danger">{{ num_of_tr}} </span>Translations Available</span> -->
<div class="uk-modal-dialog primary text-secondary rounded-bottom"> <a class="uk-navbar-item" href="#" uk-toggle
<button class="uk-modal-close-default" type="button" uk-close></button> ><span
<div class="uk-modal-header secondary "> class="primary text-secondary"
<h2 class="uk-modal-title text-primary">Settings</h2> uk-icon="icon: history; ratio:2"
</div> ></span
<div class="uk-modal-body"> ></a>
<div class="uk-margin"> </div>
<h3 class="text-secondary">Saved Translations</h3> <a
<div> class="uk-navbar-item uk-position-center-right primary text-secondary"
<ul class="uk-list uk-list-large uk-list-divider"> href="#modal-sections"
<li uk-toggle
v-for="(tr,i) in saved_translations" ><span
:key="i" class="uk-icon-button primary text-secondary"
><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span> uk-icon="icon: cog; ratio:2"
{{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span class="uk-button uk-button-danger uk-button-small" uk-icon="icon: close;"></span></a> ></span
</div> </li> ></a>
<li v-if="!saved_translations.length>0">No saved translation</li>
<!-- Settings component -->
<li><b>Add: </b> <settings />
<div uk-form-custom="target: > * > span:first-child"> </nav>
<select class=" primary text-secondary" v-model="translation"> <div class="uk-position-fixed uk-position-bottom-left">
<option class="primary text-secondary" selected value="Add Translation...">Add Translation...</option> <ul class="uk-list">
<option <li>
class="primary text-secondary" <a
v-for="(tr,i) in Object.keys(translations)" href="#"
:key="i" class="uk-icon-button primary uk-margin-small-left primary text-secondary"
:value="tr" uk-icon="github"
>{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[tr]['translation']}} ></a>
</option> </li>
</select> <li>
<button class="uk-button uk-button-default" type="button" tabindex="-1"> <a
<span></span> href="#"
<span uk-icon="icon: chevron-down"></span> class="uk-icon-button primary uk-margin-small-left primary text-secondary"
</button> uk-icon="facebook"
</div> ></a>
<a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span class="uk-button uk-button-primary" uk-icon="icon: plus;"></span></a> </li>
</li> <li>
</ul> <a
href="#"
</div> class="uk-icon-button primary uk-margin-small-left primary text-secondary"
<hr> uk-icon="world"
<h3 class="text-secondary">Theme</h3> ></a>
<div> </li>
</ul>
<picker/> </div>
</div> </div>
</div>
</div>
<!-- <div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" @click="saveSettings()" type="button">Save</button>
</div> -->
</div>
</div>
</nav>
<div class="uk-position-fixed uk-position-bottom-left">
<ul class="uk-list">
<li>
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="github"></a>
</li>
<li>
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="facebook"></a>
</li>
<li>
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="world"></a>
</li>
</ul>
</div>
</div>
</template> </template>
<script> <script>
import UIkit from 'uikit'; import Search from "./Search.vue";
import {mapGetters} from 'vuex'; import Settings from "./Settings.vue";
import Search from './Search.vue'; import Picker from "./Picker.vue";
import getbible from '../api/getbible_v2_api'
import Picker from './Picker.vue'
export default { export default {
components: { components: {
Search, Search,
Picker Settings,
}, Picker,
data: () => { },
return { };
translation: 'Add Translation...',
translations:{}
}
},
computed: {
// saved_translations() {
// // console.log(this.$store.state.saved_translations[0]);
// return this.$store.state.saved_translations;
// },
...mapGetters(['book_name', 'chapter', 'saved_translations'])
},
methods: {
add(tr){
if(!tr) return;
let payload = {
abbreviation: tr.abbreviation,
saved_translations: {
name: 'saved_translations',
putObj: tr
}
}
this.$store.dispatch('add', payload)
},
remove(abbr){
let payload = {
translation:{
name: 'translations',
keyPath: abbr
},
saved_translations:{
name: 'saved_translations',
keyPath: abbr
}
}
this.$store.dispatch('remove', payload)
},
saveSettings(){
this.$store.commit('save_settings', this.$store.state.saved_translations)
UIkit.modal('#modal-sections').hide()
}
},
async created(){
let response = await getbible.get_translations()
.catch(function(err) { this.translations = err });
if(!response)
return;
let data = await response.json().catch(err => {console.log(err);})
if(!data)
return;
this.translations = data
}
}
</script> </script>

213
src/components/Options.vue
View File

@ -11,126 +11,127 @@
</template> </template>
<script> <script>
import _ from 'lodash'; import _ from 'lodash';
import {mapGetters} from 'vuex' import { mapGetters } from 'vuex'
import { BASE_URL, API_VERSION } from '../api/getbible_v2_api'
export default { export default {
components:{ components:{
}, },
data: function(){ data: function(){
return { return {
progress: 0, progress: 0,
loading: false, loading: false,
}}, }},
computed: { computed: {
translations(){ translations(){
return this.$store.state.saved_translations; return this.$store.state.saved_translations;
}, },
saved_translations(){ saved_translations(){
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']), ...mapGetters(['chapters', 'chapter']),
fchapters: function (){ fchapters: function (){
if(!this.search) if(!this.search)
return this.chapter.verses return this.chapter.verses
return this.filteredChapters return this.filteredChapters
}, },
filteredChapters() { filteredChapters() {
return _.orderBy(this.chapter.verses.filter((item) => return _.orderBy(this.chapter.verses.filter((item) =>
item.verse.toString().toLowerCase().includes(this.search.toLowerCase()) item.verse.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.chapter.toString().toLowerCase().includes(this.search.toLowerCase()) || item.chapter.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.name.toString().toLowerCase().includes(this.search.toLowerCase()) || item.name.toString().toLowerCase().includes(this.search.toLowerCase())
|| item.text.toLowerCase().includes(this.search.toLowerCase())), 'verse'); || item.text.toLowerCase().includes(this.search.toLowerCase())), 'verse');
},
}, },
methods:{ },
t(i){ methods:{
return this.translations.find(t => t.abbreviation === i) t(i){
}, return this.translations.find(t => t.abbreviation === i)
next(){ },
if(this.chapter<this.chapters.length) next(){
this.$store.dispatch('set_chapter', this.chapter + 1) if(this.chapter<this.chapters.length)
}, this.$store.dispatch('set_chapter', this.chapter + 1)
prev(){ },
if(this.chapter>1) prev(){
this.$store.dispatch('set_chapter', this.chapter - 1) if(this.chapter>1)
}, this.$store.dispatch('set_chapter', this.chapter - 1)
async update_chapter() { },
// this.loading = true async update_chapter() {
this.progress = 95 // this.loading = true
let config = { this.progress = 95
headers: {'Access-Control-Allow-Origin': '*'} let config = {
}; headers: {'Access-Control-Allow-Origin': '*'}
};
let url = `${BASE_URL}/${API_VERSION}/${this.translation}/${this.book}/${this.chapter_num}.json`
let url = `https://getbible.net/v2/${this.translation}/${this.book}/${this.chapter_num}.json` let response = await fetch(url, config).catch(function(err) {
this.chapter = err
let response = await fetch(url, config).catch(function(err) {
this.chapter = err
this.loading =false
this.message = 'Error'
});
if (!response) return;
this.progress = 99
let data = await response.json().catch(err => {
this.chapter = err
this.loading =false
this.message = 'Error'
})
this.loading =false this.loading =false
this.message = 'Error'
if (!data) return;
});
this.chapter = data if (!response) return;
this.progress =0
}, this.progress = 99
async update_tr(){ let data = await response.json().catch(err => {
this.chapter = err
}, this.loading =false
async update_bk(){ this.message = 'Error'
let config = { })
headers: {'Access-Control-Allow-Origin': '*'} this.loading =false
};
this.loading =true
this.progress =25
this.message = 'Loading...'
let url = `https://getbible.net/v2/${this.translation}/books.json`
fetch(url,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'
});
}, if (!data) return;
async update_ch(){
let config = { this.chapter = data
headers: {'Access-Control-Allow-Origin': '*'} this.progress =0
};
fetch(`https://getbible.net/v2/${this.translation}/${this.book}/chapters.json`,config) },
.then(response => response.json()) async update_tr(){
.then(data => {
// console.log(data) },
this.chapters = data async update_bk(){
this.progress = 85 let config = {
this.update_chapter(); headers: {'Access-Control-Allow-Origin': '*'}
}).catch(function(err) { };
this.chapter = err this.loading =true
this.loading =false this.progress =25
this.message = 'Error' this.message = 'Loading...'
}); let url = `${BASE_URL}/${API_VERSION}/${this.translation}/books.json`
} fetch(url,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(`${BASE_URL}/${API_VERSION}/${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'
});
}
},
} }
</script> </script>

6
src/components/Selection.vue
View File

@ -1,6 +1,6 @@
<template> <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 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 translation added. <br/>Please click <a @click="open_settings">HERE</a> to Open Settings</div> <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> <div v-else>
<ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" > <ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" >
@ -73,14 +73,14 @@ export default {
t(i){ t(i){
return this.translations.find(t => t.abbreviation === i) return this.translations.find(t => t.abbreviation === i)
}, },
set_translation(a) { set_translation(a) {
console.log("Hello"); console.log("Hello");
this.$store.dispatch('set_translation', {selected_translation:a}) this.$store.dispatch('set_translation', {selected_translation:a})
}, },
set_book(b){ set_book(b){
this.$store.dispatch('set_book', b) this.$store.dispatch('set_book', b)
}, },
set_chapter(c){ set_chapter(c){
this.$store.dispatch('set_chapter', c) this.$store.dispatch('set_chapter', c)
}, },
open_settings(){ open_settings(){

126
src/components/Settings.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div id="modal-sections" uk-modal>
<div class="uk-modal-dialog primary text-secondary rounded-bottom">
<button class="uk-modal-close-default" type="button" uk-close></button>
<div class="uk-modal-header secondary ">
<h2 class="uk-modal-title text-primary">Settings</h2>
</div>
<div class="uk-modal-body">
<div class="uk-margin">
<h3 class="text-secondary">Saved Translations</h3>
<div>
<ul class="uk-list uk-list-large uk-list-divider">
<li
v-for="(tr,i) in saved_translations"
:key="i"
><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span>
{{" "}}<a @click="remove(tr.abbreviation)" class="uk-position-center-right uk-position-relative"><span class="uk-button uk-button-danger uk-button-small" uk-icon="icon: close;"></span></a>
</div> </li>
<li v-if="!saved_translations.length>0">No saved translation</li>
<li><b>Add: </b>
<div uk-form-custom="target: > * > span:first-child">
<select class=" primary text-secondary" v-model="translation">
<option class="primary text-secondary" selected value="Add Translation...">Add Translation...</option>
<option
class="primary text-secondary"
v-for="(tr,i) in Object.keys(translations)"
:key="i"
:value="tr"
>{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[tr]['translation']}}
</option>
</select>
<button class="uk-button uk-button-default" type="button" tabindex="-1">
<span></span>
<span uk-icon="icon: chevron-down"></span>
</button>
</div>
<a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span class="uk-button uk-button-primary" uk-icon="icon: plus;"></span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- <div class="uk-modal-footer uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" @click="saveSettings()" type="button">Save</button>
</div> -->
</div>
</div>
</template>
<script>
import UIkit from 'uikit';
import {mapGetters} from 'vuex';
import getbible from '../api/getbible_v2_api';
export default {
data: () => {
return {
translation: 'Add Translation...',
translations:{}
}
},
computed: {
// saved_translations() {
// // console.log(this.$store.state.saved_translations[0]);
// return this.$store.state.saved_translations;
// },
...mapGetters(['book_name', 'chapter', 'saved_translations'])
},
methods: {
add(tr){
if(!tr) return;
let payload = {
abbreviation: tr.abbreviation,
saved_translations: {
name: 'saved_translations',
putObj: tr
}
}
this.$store.dispatch('add', payload)
},
remove(abbr){
let payload = {
translation:{
name: 'translations',
keyPath: abbr
},
saved_translations:{
name: 'saved_translations',
keyPath: abbr
}
}
this.$store.dispatch('remove', payload)
},
saveSettings(){
this.$store.commit('save_settings', this.$store.state.saved_translations)
UIkit.modal('#modal-sections').hide()
}
},
async created(){
let response = await getbible.get_translations()
.catch(function(err) { this.translations = err });
if(!response)
return;
let data = await response.json().catch(err => {console.log(err);})
if(!data)
return;
this.translations = data
}
}
</script>
<style lang="stylus" scoped>
</style>

24
src/store/mutations.js
View File

@ -3,34 +3,10 @@
export default { export default {
add_translation (state, payload ) { add_translation (state, payload ) {
// payload = {
// translation:{
// name: 'translation',
// putObj: {}
// },
// saved_translations:{
// name: 'saved_translation',
// putObj: {}
// }
// }
state.saved_translations.push(payload.saved_translations.putObj) state.saved_translations.push(payload.saved_translations.putObj)
}, },
REMOVE_TRANSLATION (state, payload ) { REMOVE_TRANSLATION (state, payload ) {
// payload example
// payload = {
// translation:{
// name: 'translation',
// keyPath: 'aksjv'
// },
// saved_translations:{
// name: 'saved_translation',
// keyPath: "askjv"
// }
// }
const {keyPath} = payload.saved_translations; const {keyPath} = payload.saved_translations;