mirror of
https://github.com/getbible/app.git
synced 2024-12-22 07:48:55 +00:00
fixed merge conflict
This commit is contained in:
Erastus Amunwe
commit
61a053df2f
1585
package-lock.json
generated
1585
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
let BASE_URL = 'https://getbible.net';
|
||||
let API_VERSION = 'v2';
|
||||
|
||||
export { BASE_URL, API_VERSION };
|
||||
|
||||
|
||||
export default {
|
||||
get_translations(){
|
||||
|
||||
@ -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();
|
||||
|
||||
});
|
||||
},
|
||||
// });
|
||||
// },
|
||||
|
||||
}
|
||||
@ -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">
|
||||
<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
|
||||
>
|
||||
|
||||
<nav class="uk-navbar-container primary text-secondary uk-margin-small" uk-navbar>
|
||||
<div class="uk-navbar-left">
|
||||
<search />
|
||||
|
||||
<!-- <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>
|
||||
<!-- <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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
@ -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 = `https://getbible.net/v2/${this.translation}/${this.book}/${this.chapter_num}.json`
|
||||
let url = `${BASE_URL}/${API_VERSION}/${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
|
||||
this.message = 'Error'
|
||||
|
||||
if (!data) return;
|
||||
});
|
||||
|
||||
this.chapter = data
|
||||
this.progress =0
|
||||
if (!response) return;
|
||||
|
||||
},
|
||||
async update_tr(){
|
||||
this.progress = 99
|
||||
let data = await response.json().catch(err => {
|
||||
this.chapter = err
|
||||
this.loading =false
|
||||
this.message = 'Error'
|
||||
})
|
||||
this.loading =false
|
||||
|
||||
},
|
||||
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'
|
||||
});
|
||||
if (!data) return;
|
||||
|
||||
},
|
||||
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'
|
||||
});
|
||||
}
|
||||
},
|
||||
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>
|
||||
@ -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
126
src/components/Settings.vue
Normal 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>
|
||||
@ -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;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user