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>
<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/>
<div class="uk-container uk-animation-slide-bottom uk-margin-top">
<selections/>
@ -15,8 +10,8 @@
</div>
</div>
<div v-if="loading" id="overlay">
<div class="uk-position-center less-opacity">
<h1>Loading... Please wait.</h1>
<div class="uk-position-center">
<span uk-spinner="ratio: 3"></span>
</div>
</div>
</div>

2
src/api/getbible_v2_api.js
View File

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

91
src/api/idb.js
View File

@ -27,6 +27,21 @@ export default {
let db = e.target.result;
db.createObjectStore("saved_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');
trans.oncomplete = () => {
resolve(tr);
};
// let trans = db.transaction([name],'readonly');
// trans.oncomplete = () => {
// resolve(tr);
// };
let store = trans.objectStore(name);
let tr = {};
// let store = trans.objectStore(name);
// let tr = {};
store.openCursor().onsuccess = e => {
let cursor = e.target.result;
if (cursor) {
if (keyPath == cursor.value.keyPath){
tr = cursor.value
for (const book in cursor.value.books) {
for (const chapters in book) {
for (const verses in chapters) {
for (const verse in verses) {
if(verse.text.includes(keyPath)){
console.log("We found a row with value: " + JSON.stringify(verse.text));
}
}
}
}
}
// store.openCursor().onsuccess = e => {
// let cursor = e.target.result;
// if (cursor) {
// if (keyPath == cursor.value.keyPath){
// tr = cursor.value
// for (const book in cursor.value.books) {
// for (const chapters in book) {
// for (const verses in chapters) {
// for (const verse in verses) {
// if(verse.text.includes(keyPath)){
// console.log("We found a row with value: " + JSON.stringify(verse.text));
// }
// }
// }
// }
// }
}
cursor.continue();
}
};
trans.onerror = e => {
reject(e)
}
trans.onabort = e => {
reject(e)
}
trans.commit();
// }
// cursor.continue();
// }
// };
// trans.onerror = e => {
// reject(e)
// }
// trans.onabort = e => {
// reject(e)
// }
// trans.commit();
});
},
// });
// },
}

246
src/components/NavBar.vue
View File

@ -1,167 +1,95 @@
<template>
<div 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">
<!-- <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>
<div
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">
<!-- <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/>
<!-- <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>
<search />
<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>
<hr>
<h3 class="text-secondary">Theme</h3>
<div>
<picker/>
</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>
<!-- <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>
<!-- Settings component -->
<settings />
</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>
<script>
import UIkit from 'uikit';
import {mapGetters} from 'vuex';
import Search from './Search.vue';
import getbible from '../api/getbible_v2_api'
import Picker from './Picker.vue'
import Search from "./Search.vue";
import Settings from "./Settings.vue";
import Picker from "./Picker.vue";
export default {
components: {
Search,
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
}
}
components: {
Search,
Settings,
Picker,
},
};
</script>

213
src/components/Options.vue
View File

@ -11,126 +11,127 @@
</template>
<script>
import _ from 'lodash';
import {mapGetters} from 'vuex'
import { mapGetters } from 'vuex'
import { BASE_URL, API_VERSION } from '../api/getbible_v2_api'
export default {
components:{
},
data: function(){
},
data: function(){
return {
progress: 0,
loading: false,
}},
computed: {
translations(){
return this.$store.state.saved_translations;
},
saved_translations(){
console.log(this.$store.state.saved_translations);
return this.$store.state.saved_translations
},
...mapGetters(['chapters', 'chapter']),
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');
},
computed: {
translations(){
return this.$store.state.saved_translations;
},
saved_translations(){
console.log(this.$store.state.saved_translations);
return this.$store.state.saved_translations
},
...mapGetters(['chapters', 'chapter']),
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:{
t(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() {
// this.loading = true
this.progress = 95
let config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
},
methods:{
t(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() {
// this.loading = true
this.progress = 95
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
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'
})
let response = await fetch(url, config).catch(function(err) {
this.chapter = err
this.loading =false
if (!data) return;
this.message = 'Error'
});
this.chapter = data
this.progress =0
if (!response) return;
},
async update_tr(){
},
async update_bk(){
let config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
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'
});
this.progress = 99
let data = await response.json().catch(err => {
this.chapter = err
this.loading =false
this.message = 'Error'
})
this.loading =false
},
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'
});
}
},
if (!data) return;
this.chapter = data
this.progress =0
},
async update_tr(){
},
async update_bk(){
let config = {
headers: {'Access-Control-Allow-Origin': '*'}
};
this.loading =true
this.progress =25
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>

6
src/components/Selection.vue
View File

@ -1,6 +1,6 @@
<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 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>
<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){
return this.translations.find(t => t.abbreviation === i)
},
set_translation(a) {
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){
set_chapter(c){
this.$store.dispatch('set_chapter', c)
},
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 {
add_translation (state, payload ) {
// payload = {
// translation:{
// name: 'translation',
// putObj: {}
// },
// saved_translations:{
// name: 'saved_translation',
// putObj: {}
// }
// }
state.saved_translations.push(payload.saved_translations.putObj)
},
REMOVE_TRANSLATION (state, payload ) {
// payload example
// payload = {
// translation:{
// name: 'translation',
// keyPath: 'aksjv'
// },
// saved_translations:{
// name: 'saved_translation',
// keyPath: "askjv"
// }
// }
const {keyPath} = payload.saved_translations;