mirror of
https://github.com/getbible/app.git
synced 2024-12-22 07:48:55 +00:00
Merge branch 'app-staging' into main
This commit is contained in:
commit
92585dcad2
@ -6,7 +6,7 @@ npm install
|
||||
```
|
||||
# run electron server
|
||||
```
|
||||
npm run electron:serve
|
||||
npm run getbible:serve
|
||||
```
|
||||
# serve with hot reload at localhost:8080
|
||||
```
|
||||
|
||||
1749
package-lock.json
generated
1749
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -3,7 +3,7 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"serve": "npm run lint && vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint --fix",
|
||||
"getbible:build": "vue-cli-service electron:build",
|
||||
@ -17,6 +17,7 @@
|
||||
"lodash": "^4.17.20",
|
||||
"uikit": "^3.5.9",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^3.4.9",
|
||||
"vuex": "^4.0.0-beta.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
81
src/App.vue
81
src/App.vue
@ -1,16 +1,22 @@
|
||||
<template>
|
||||
<div >
|
||||
<!-- <div class="uk-overlay-default uk-position-cover">
|
||||
<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 ">
|
||||
<div class="uk-container uk-animation-slide-bottom uk-margin-top">
|
||||
<selections/>
|
||||
<div class="uk-container uk-container-small">
|
||||
|
||||
<verses/>
|
||||
<options/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" id="overlay">
|
||||
<div class="uk-position-center less-opacity">
|
||||
<h1>Loading... Please wait.</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -22,10 +28,12 @@
|
||||
|
||||
import UIkit from 'uikit';
|
||||
import Icons from 'uikit/dist/js/uikit-icons';
|
||||
import {mapGetters} from 'vuex';
|
||||
|
||||
import navbar from './components/NavBar.vue';
|
||||
import options from './components/Options.vue';
|
||||
import Selections from './components/Selection.vue'
|
||||
import Verses from './components/Verses.vue'
|
||||
|
||||
UIkit.use(Icons);
|
||||
|
||||
@ -35,17 +43,27 @@ export default {
|
||||
navbar,
|
||||
options,
|
||||
Selections,
|
||||
Verses,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['loading'])
|
||||
},
|
||||
created(){
|
||||
|
||||
this.$store.dispatch('initialise')
|
||||
// console.log(JSON.parse(JSON.stringify(this.$store.state)));
|
||||
console.log('Initialising');
|
||||
console.log(JSON.parse(JSON.stringify(this.$store.state)));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "../node_modules/uikit/src/less/uikit.less";
|
||||
@import "../node_modules/uikit/src/less/uikit.theme.less";
|
||||
@global-link-color: #DA7D02;
|
||||
@global-background: #f5f4f4;
|
||||
@primary:#55828b;
|
||||
@secondary: #fed18c;
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -61,4 +79,57 @@ export default {
|
||||
.disabled:hover {
|
||||
color:gray
|
||||
}
|
||||
#overlay {
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(255,255,255,0.7);
|
||||
z-index: 20000;
|
||||
cursor: pointer;
|
||||
}
|
||||
.less-opacity{
|
||||
background-color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.primary {
|
||||
// background-color: #813405 !important;
|
||||
// background-color: #55828b !important;
|
||||
background-color: @primary !important;
|
||||
}
|
||||
.secondary {
|
||||
// background-color: #f9a03f !important;
|
||||
// background-color: #87bba2 !important;
|
||||
// background-color: #fed18c !important;
|
||||
background-color: @secondary !important;
|
||||
}
|
||||
.tertiary {
|
||||
background-color: #d45113;
|
||||
}
|
||||
.secondary-lighten3 {
|
||||
background-color: rgba(224, 222, 221, 1);
|
||||
}
|
||||
.text-primary {
|
||||
// color: #813405 !important;
|
||||
color: #55828b !important;
|
||||
}
|
||||
.text-secondary {
|
||||
// color: #f9a03f !important;
|
||||
// color: #87bba2 !important;
|
||||
color: #fed18c !important;
|
||||
}
|
||||
.text-tertiary {
|
||||
color: #d45113;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.rounded-bottom {
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -42,18 +42,22 @@ export default {
|
||||
};
|
||||
|
||||
let store = trans.objectStore(delInfo.name);
|
||||
console.log("deleting "+ delInfo.keyPath+ " from "+delInfo.name);
|
||||
let request = store.delete([delInfo.keyPath]);
|
||||
request.onerror= err => reject(err)
|
||||
// request.onsuccess = e => console.log(e);
|
||||
store.openCursor().onsuccess = e => {
|
||||
let cursor = e.target.result;
|
||||
if (cursor) {
|
||||
if(delInfo.keyPath == cursor.value['abbreviation']){
|
||||
let request =cursor.delete()
|
||||
request.onsuccess = e => console.log(e);}
|
||||
|
||||
cursor.continue();
|
||||
}
|
||||
};
|
||||
trans.onerror = e => {
|
||||
reject(e)
|
||||
}
|
||||
trans.onabort = e => {
|
||||
reject(e)
|
||||
}
|
||||
trans.commit();
|
||||
|
||||
});
|
||||
},
|
||||
@ -116,7 +120,7 @@ export default {
|
||||
store.openCursor().onsuccess = e => {
|
||||
let cursor = e.target.result;
|
||||
if (cursor) {
|
||||
if(keyPath == cursor.value.keyPath)
|
||||
if(keyPath == cursor.value['abbreviation'])
|
||||
tr = cursor.value
|
||||
cursor.continue();
|
||||
}
|
||||
@ -127,6 +131,50 @@ export default {
|
||||
trans.onabort = e => {
|
||||
reject(e)
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
async search(name, keyPath) {
|
||||
|
||||
let db = await this.getDb();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
let trans = db.transaction([name],'readonly');
|
||||
trans.oncomplete = () => {
|
||||
resolve(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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
cursor.continue();
|
||||
}
|
||||
};
|
||||
trans.onerror = e => {
|
||||
reject(e)
|
||||
}
|
||||
trans.onabort = e => {
|
||||
reject(e)
|
||||
}
|
||||
trans.commit();
|
||||
|
||||
});
|
||||
|
||||
@ -1,158 +1,50 @@
|
||||
<template>
|
||||
|
||||
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
||||
<div class="secondary" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
|
||||
|
||||
<nav class="uk-navbar-container uk-na
|
||||
vbar-transparent uk-margin-small" uk-navbar>
|
||||
<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" uk-toggle><span 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 uk-icon="icon: history; ratio:2"></span></a>
|
||||
<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" href="#modal-sections" uk-toggle><span uk-icon="icon: cog; ratio:2"></span></a>
|
||||
<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">
|
||||
<button class="uk-modal-close-default" type="button" uk-close></button>
|
||||
<div class="uk-modal-header">
|
||||
<h2 class="uk-modal-title">Settings</h2>
|
||||
</div>
|
||||
<div class="uk-modal-body">
|
||||
<div class="uk-margin">
|
||||
<h3>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">No saved translation</li>
|
||||
|
||||
<li><b>Add: </b>
|
||||
<div uk-form-custom="target: > * > span:first-child">
|
||||
<select v-model="translation">
|
||||
<option selected value="Add Translation...">Add Translation...</option>
|
||||
<option
|
||||
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>
|
||||
<!-- Settings component -->
|
||||
<settings/>
|
||||
|
||||
</nav>
|
||||
<div class="uk-position-fixed uk-position-bottom-left">
|
||||
<ul class="uk-list">
|
||||
<li>
|
||||
<a href="https://github.com/getbible" class="uk-icon-button uk-margin-small-left" uk-icon="github"></a>
|
||||
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="github"></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://www.facebook.com/TheHolyScriptures" class="uk-icon-button uk-margin-small-left" uk-icon="facebook"></a>
|
||||
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="facebook"></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://truechristian.church/whybible" class="uk-icon-button uk-margin-small-left" uk-icon="world"></a>
|
||||
<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 Search from './Search.vue';
|
||||
import getbible from '../api/getbible_v2_api'
|
||||
import Settings from './Settings.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Search
|
||||
},
|
||||
data: () => {
|
||||
return {
|
||||
translation: 'Add Translation...',
|
||||
translations:{}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
saved_translations() {
|
||||
console.log(this.$store.state.saved_translations[0]);
|
||||
return this.$store.state.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
|
||||
|
||||
|
||||
}
|
||||
Search,
|
||||
Settings
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,79 +1,26 @@
|
||||
<template>
|
||||
<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">
|
||||
<ul class="uk-pagination">
|
||||
<li><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>
|
||||
<div class="uk-margin" uk-margin>
|
||||
<ul class="uk-pagination" v-if="chapter">
|
||||
<li @click="prev"><a class="text-primary" href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
|
||||
<li class="uk-margin-auto-left" @click="next"><a class="text-primary" href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import verses from './Verses.vue';
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
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: {
|
||||
translations(){
|
||||
@ -83,6 +30,7 @@ export default {
|
||||
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
|
||||
@ -100,6 +48,14 @@ export default {
|
||||
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
|
||||
@ -175,9 +131,6 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
|
||||
<div id="offcanvas-slide" uk-offcanvas>
|
||||
<div class="uk-offcanvas-bar">
|
||||
<div class="uk-offcanvas-bar secondary text-secondary">
|
||||
|
||||
<div class="uk-nav uk-nav-default">
|
||||
<div class="uk-margin">
|
||||
<form class="uk-search uk-search-default" action="javascript:void(0)">
|
||||
<!-- <span uk-search-icon></span> -->
|
||||
<input class="uk-search-input" v-model="search" type="search" placeholder="Search Words...">
|
||||
<input class="uk-search-input text-secondary primary rounded" v-model="search" type="search" placeholder="Search Words...">
|
||||
<div class="uk-margin">
|
||||
<button class="uk-button uk-button-default uk-button-small">Search</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary rounded">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -18,30 +18,30 @@
|
||||
<div class="uk-margin">
|
||||
|
||||
<div class="uk-margin">
|
||||
<div class="uk-button-group">
|
||||
<button class="uk-button uk-button-default uk-button-small uk-active">ALL WORDS</button>
|
||||
<button class="uk-button uk-button-default uk-button-small">ANY WORDS</button>
|
||||
<button class="uk-button uk-button-default uk-button-small">PHRASE</button>
|
||||
<div class="uk-button-group text-primary ">
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">ALL WORDS</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary">ANY WORDS</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary">PHRASE</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<div class="uk-button-group">
|
||||
<button class="uk-button uk-button-default uk-button-small uk-active">BIBLE</button>
|
||||
<button class="uk-button uk-button-default uk-button-small">OT</button>
|
||||
<button class="uk-button uk-button-default uk-button-small">NT</button>
|
||||
<button class="uk-button uk-button-default uk-button-small">CHAPTER</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">BIBLE</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary">OT</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary">NT</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary">CHAPTER</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<div class="uk-button-group">
|
||||
<button class="uk-button uk-button-default uk-button-small uk-active">EXACT MATCH</button>
|
||||
<button class="uk-button uk-button-default uk-button-small">PARTIAL MATCH</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">EXACT MATCH</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary">PARTIAL MATCH</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<div class="uk-button-group">
|
||||
<button class="uk-button uk-button-default uk-button-small uk-active">CASE INSENSITIVE</button>
|
||||
<button class="uk-button uk-button-default uk-button-small">CASE SENSITIVE</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">CASE INSENSITIVE</button>
|
||||
<button class="uk-button uk-button-default uk-button-small text-secondary primary">CASE SENSITIVE</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,206 +1,94 @@
|
||||
<template>
|
||||
<div class=" uk-width-1-1">
|
||||
<ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav>
|
||||
<li class="uk-parent uk-witdth-1-1"><a>Translation</a>
|
||||
<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 v-else>
|
||||
|
||||
<ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" >
|
||||
<li class="uk-parent uk-witdth-1-1"><a class="text-secondary">Translation</a>
|
||||
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
|
||||
|
||||
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
|
||||
<li
|
||||
v-for="(tr,i) in translations"
|
||||
@change="update_bk(tr.abbreviation)"
|
||||
class="uk-card uk-card-hover text-secondary rounded"
|
||||
v-for="(tr,i) in saved_translations"
|
||||
@click="set_translation(tr.abbreviation)"
|
||||
:key="i"
|
||||
:value="tr.abbreviation"
|
||||
><a href="#">{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</a></li>
|
||||
><a class="text-secondary" href="#">{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</a></li>
|
||||
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="uk-nav-divider uk-witdth-1-1"></li>
|
||||
<li class="uk-parent uk-witdth-1-1"><a>Books</a>
|
||||
<li v-if="translation" class="uk-parent uk-witdth-1-1"><a class="text-secondary">Books</a>
|
||||
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
|
||||
|
||||
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
|
||||
<li class="uk-card uk-card-hover "
|
||||
v-for="(bk,i) in Object.keys(books)"
|
||||
@change="update_ch(books[bk]['nr'])"
|
||||
<li class="uk-card uk-card-hover text-secondary"
|
||||
v-for="(bk,i) in books"
|
||||
@click="set_book(bk['nr'])"
|
||||
:key="i"
|
||||
:value="books[bk]['nr']"
|
||||
><a href="#">{{books[bk]['name']}}</a></li>
|
||||
><a href="#" class="text-secondary">{{bk['name']}}</a></li>
|
||||
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
<li class="uk-nav-divider uk-witdth-1-1"></li>
|
||||
<li class="uk-parent uk-witdth-1-1 "><a>Chapters</a>
|
||||
<li v-if="book_nr" class="uk-parent uk-witdth-1-1 "><a class="text-secondary">Chapters</a>
|
||||
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin>
|
||||
<li><a href="#"><span uk-pagination-previous></span></a></li>
|
||||
<!-- <li><a href="#"><span uk-pagination-previous></span></a></li> -->
|
||||
<li
|
||||
v-for="(ch,i) in Object.keys(chapters)"
|
||||
@change="update_chapter(chapters[ch]['chapter'])"
|
||||
class="uk-card uk-card-hover "
|
||||
v-for="(ch,i) in chapters"
|
||||
@click="set_chapter(ch['chapter'])"
|
||||
:key="i"
|
||||
><a >{{chapters[ch]['chapter']}}</a></li>
|
||||
<li><a href="#"><span uk-pagination-next></span></a></li>
|
||||
><a href="#selection" class="text-secondary" uk-toggle>{{ch['chapter']}}</a></li>
|
||||
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
// import verses from './Verses.vue';
|
||||
// import _ from 'lodash';
|
||||
import UIkit from 'uikit';
|
||||
|
||||
import {mapGetters} from 'vuex';
|
||||
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...'
|
||||
// translation: 'akjv',
|
||||
|
||||
}},
|
||||
computed: {
|
||||
translations(){
|
||||
return this.$store.state.saved_translations;
|
||||
},
|
||||
// translations(){
|
||||
// // console.log(this.$store.state.saved_translations);
|
||||
// return this.$store.getters.saved_translations;
|
||||
// },
|
||||
...mapGetters(['chapters', 'books', 'translation', 'book_nr', 'saved_translations']),
|
||||
|
||||
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)
|
||||
},
|
||||
async update_chapter(c) {
|
||||
console.log(c);
|
||||
this.chapter_num = c
|
||||
// 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 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
|
||||
|
||||
if (!data) return;
|
||||
|
||||
this.chapter = data
|
||||
this.progress =0
|
||||
|
||||
set_translation(a) {
|
||||
console.log("Hello");
|
||||
this.$store.dispatch('set_translation', {selected_translation:a})
|
||||
},
|
||||
async update_tr(){
|
||||
|
||||
set_book(b){
|
||||
this.$store.dispatch('set_book', b)
|
||||
},
|
||||
async update_bk(a){
|
||||
this.translation = a
|
||||
console.log(a);
|
||||
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(this.book);
|
||||
}).catch(function(err) {
|
||||
this.chapter = err
|
||||
this.loading =false
|
||||
this.message = 'Error'
|
||||
});
|
||||
|
||||
set_chapter(c){
|
||||
this.$store.dispatch('set_chapter', c)
|
||||
},
|
||||
async update_ch(b){
|
||||
this.book = b
|
||||
console.log(b);
|
||||
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(this.chapter_num);
|
||||
}).catch(function(err) {
|
||||
this.chapter = err
|
||||
this.loading =false
|
||||
this.message = 'Error'
|
||||
});
|
||||
open_settings(){
|
||||
UIkit.modal('#modal-sections').show()
|
||||
}
|
||||
},
|
||||
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(this.book);
|
||||
}).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>
|
||||
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>
|
||||
@ -1,38 +1,95 @@
|
||||
<template>
|
||||
<template >
|
||||
<div v-if="verses.length" >
|
||||
<!-- {{search.toLowerCase() + fverses.length}} -->
|
||||
<br />
|
||||
<div class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded">
|
||||
<ul :dir="dir"
|
||||
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
|
||||
<li v-for="(verse, i) in verses" :key="i"
|
||||
:class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`">
|
||||
<li v-for="(verse, i) in pverses" :key="i"
|
||||
:class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`"
|
||||
>
|
||||
|
||||
<h5 class=" uk-primary">
|
||||
<span class="uk-heading-bullet"> {{book_name}} </span>
|
||||
<span class="uk-badge badge-light">
|
||||
<h5 class=" uk-primary text-secondary">
|
||||
<span class="uk-heading-bullet"> {{book_name+' '}} </span>
|
||||
<span class="uk-badge secondary text-primary badge-light">
|
||||
{{verse.chapter}}:{{verse.verse}}
|
||||
</span>
|
||||
</h5>
|
||||
{{verse.text}} <br/>
|
||||
<span class="text-secondary">
|
||||
{{verse.text}}
|
||||
</span>
|
||||
<br/>
|
||||
<p></p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="uk-position-small uk-position-center-left uk-overlay ">
|
||||
<span @click="prevV" class="uk-icon-button primary text-secondary" uk-icon="icon:chevron-left; ratio:2"></span>
|
||||
</div>
|
||||
<div class="uk-position-small uk-position-center-right uk-overlay ">
|
||||
<span @click="nextV" class="uk-icon-button primary text-secondary" uk-icon="icon:chevron-right; ratio:2"></span>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- <ul class="uk-pagination" uk-margin>
|
||||
<li><a href="#"><span uk-pagination-previous></span></a></li>
|
||||
<li><a href="#">1</a></li>
|
||||
<li class="uk-disabled"><span>...</span></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
<li><a href="#">6</a></li>
|
||||
<li class="uk-active"><span>7</span></li>
|
||||
<li><a href="#">8</a></li>
|
||||
<li><a href="#">9</a></li>
|
||||
<li><a href="#">10</a></li>
|
||||
<li class="uk-disabled"><span>...</span></li>
|
||||
<li><a href="#">20</a></li>
|
||||
<li><a href="#"><span uk-pagination-next></span></a></li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import {mapGetters} from 'vuex';
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
// dir: ''
|
||||
// book_name: ''
|
||||
// chapter:''
|
||||
prev: 0,
|
||||
next:5
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
verses(){
|
||||
return this.$store.getters.verses;
|
||||
...mapGetters(['verses', 'dir', 'book_name', 'search']),
|
||||
pverses(){
|
||||
return this.fverses.slice(this.prev, this.next)
|
||||
},
|
||||
fverses: function (){
|
||||
console.log(this.search);
|
||||
if(!this.search)
|
||||
return this.verses
|
||||
return this.filteredVerses
|
||||
},
|
||||
filteredVerses() {
|
||||
return _.orderBy(this.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: {
|
||||
nextV(){
|
||||
if(this.next> this.fverses.length) return;
|
||||
this.next = this.next + 5
|
||||
this.prev = this.prev+ 5
|
||||
// console.log(this.next, this.prev);
|
||||
},
|
||||
dir(){
|
||||
return this.$store.getters.dir;
|
||||
},
|
||||
book_name(){
|
||||
return this.$store.getters.book_name;
|
||||
prevV(){
|
||||
if(this.prev<1)
|
||||
return;
|
||||
this.next -=5
|
||||
this.prev -=5
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
12
src/router/router.js
Normal file
12
src/router/router.js
Normal file
@ -0,0 +1,12 @@
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
@ -11,6 +11,7 @@ export default {
|
||||
// putObj: {}
|
||||
// }
|
||||
// }
|
||||
commit('toggle_loading', true)
|
||||
const response = await getbible.get_translation(payload.abbreviation).catch(err => console.log(err))
|
||||
// console.log(response);
|
||||
if(!response) return;
|
||||
@ -39,6 +40,7 @@ export default {
|
||||
if(!success) return;
|
||||
|
||||
commit('add_translation', payload);
|
||||
commit('toggle_loading', false)
|
||||
},
|
||||
async remove({commit}, payload){
|
||||
// payload example
|
||||
@ -52,6 +54,7 @@ export default {
|
||||
// keyPath: "askjv"
|
||||
// }
|
||||
// }
|
||||
commit('toggle_loading', true)
|
||||
const {translation, saved_translations} = payload
|
||||
let success = false
|
||||
//save translation in indexdb
|
||||
@ -67,10 +70,14 @@ export default {
|
||||
if(!success) return;
|
||||
|
||||
commit('REMOVE_TRANSLATION', payload);
|
||||
setTimeout(()=>{
|
||||
commit('toggle_loading', false)
|
||||
}, 1200)
|
||||
},
|
||||
async initialise({commit}){
|
||||
commit('toggle_loading', true)
|
||||
let saved_translations = await idb.getAll('saved_translations').catch(err => console.log(err));
|
||||
|
||||
console.log(saved_translations);
|
||||
if(!saved_translations) saved_translations = [];
|
||||
|
||||
|
||||
@ -80,20 +87,31 @@ export default {
|
||||
|
||||
commit('initialise', {saved_translations, translation: translations[0]})
|
||||
|
||||
|
||||
commit('toggle_loading', false)
|
||||
|
||||
},
|
||||
set_chapter({commit}, payload) {
|
||||
commit('set_chapter', payload)
|
||||
},
|
||||
message({commit}, payload){
|
||||
commit('message', payload)
|
||||
},
|
||||
set_book({commit}, payload) {
|
||||
commit('set_book', payload)
|
||||
},
|
||||
async set_translation({commit}, payload){
|
||||
let translation = await idb.get('translations', payload.selectedTranslation).catch(err => console.log(err));
|
||||
commit('toggle_loading', true)
|
||||
let translation = await idb.get('translations', payload.selected_translation).catch(err => console.log(err));
|
||||
|
||||
if(!translation) return;
|
||||
payload.translation = translation
|
||||
commit('set_translation', payload)
|
||||
// console.log("from acitons", payload);
|
||||
setTimeout(()=>{
|
||||
commit('toggle_loading', false)
|
||||
}, 2500)
|
||||
},
|
||||
search({commit}, payload){
|
||||
commit('search', payload)
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
/* eslint-disable no-debugger */
|
||||
|
||||
export default {
|
||||
|
||||
chapter : (state) =>{
|
||||
@ -7,39 +9,56 @@ export default {
|
||||
book_nr : (state) =>{
|
||||
return state.selected.book
|
||||
},
|
||||
|
||||
loading: (state) =>{
|
||||
return state.loading;
|
||||
},
|
||||
book_name:(state, getters)=> {
|
||||
return getters.books.find(book => book.nr === getters.book_nr).name
|
||||
if(!getters.books.length) return null
|
||||
let book = getters.books.find(book => book.nr === getters.book_nr)
|
||||
if(!book) return null;
|
||||
return book.name;
|
||||
},
|
||||
|
||||
translation: (state)=>{
|
||||
return state.selected.translation;
|
||||
},
|
||||
|
||||
saved_translations: (state)=>{
|
||||
return state.saved_translations;
|
||||
},
|
||||
in_memory_translation : (state) =>{
|
||||
// console.log("from ", state.in_memory_translation );
|
||||
return state.in_memory_translation
|
||||
},
|
||||
|
||||
books : (state)=>{
|
||||
if(!state.in_memory_translation.books)
|
||||
books : (state, getters)=>{
|
||||
if(!getters.in_memory_translation.books)
|
||||
return []
|
||||
|
||||
return state.in_memory_translation.books.map(book => ({nr: book.nr, name: book.name}))
|
||||
debugger;
|
||||
return getters.in_memory_translation.books.map(book => ({nr: book.nr, name: book.name}))
|
||||
},
|
||||
|
||||
dir:(state, getters)=>{
|
||||
if(getters.in_memory_translation.dir)
|
||||
return getters.in_memory_translation.dir.toLowerCase();
|
||||
// console.log(getters.in_memory_translation);
|
||||
if(!getters.in_memory_translation.direction)
|
||||
return 'ltr'
|
||||
return getters.in_memory_translation.direction.toLowerCase();
|
||||
},
|
||||
search: (state)=>{
|
||||
console.log(state.search);
|
||||
debugger;
|
||||
return state.search;
|
||||
},
|
||||
|
||||
chapters : (state, getters) =>{
|
||||
if(!getters.book) return [];
|
||||
const book = getters.books.find(book => book.nr === getters.book)
|
||||
console.log(getters.book_nr);
|
||||
debugger;
|
||||
if(!getters.book_nr) return [];
|
||||
const book = getters.in_memory_translation.books.find(book => book.nr == getters.book_nr)
|
||||
console.log("Found the book",book);
|
||||
return book.chapters
|
||||
},
|
||||
|
||||
verses: (state, getters) => {
|
||||
// console.log("Searching for chapter", getters.chapter);
|
||||
if(!getters.chapter)
|
||||
return []
|
||||
const chapter = getters.chapters.find(chapter => chapter.chapter === getters.chapter)
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
|
||||
|
||||
export default {
|
||||
add_translation (state, payload ) {
|
||||
|
||||
@ -44,25 +46,35 @@ export default {
|
||||
}
|
||||
|
||||
},
|
||||
// save_settings(state, settings){
|
||||
// state.settings = settings;
|
||||
// localStorage.setItem('settings', JSON.stringify(settings))
|
||||
// },
|
||||
// add_search(state, search){
|
||||
// state.search = search
|
||||
// }
|
||||
save_settings(state, settings){
|
||||
state.settings = settings;
|
||||
localStorage.setItem('settings', JSON.stringify(settings))
|
||||
},
|
||||
add_search(state, search){
|
||||
state.search = search
|
||||
},
|
||||
initialise(state, payload){
|
||||
state.saved_translations = payload.saved_translations
|
||||
state.in_memory_translation = payload.translation
|
||||
state.saved_translations = payload.saved_translations
|
||||
state.in_memory_translation = payload.translation
|
||||
console.log(state.saved_translations);
|
||||
},
|
||||
set_chapter(state, payload){
|
||||
state.selected.chapter = payload;
|
||||
state.selected.chapter = payload;
|
||||
},
|
||||
set_book(state, payload){
|
||||
state.selected.book = payload;
|
||||
state.selected.chapter = null;
|
||||
state.selected.book = payload;
|
||||
},
|
||||
set_translation(state, payload){
|
||||
state.selected.translation = payload.selectedTranslation;
|
||||
state.in_memory_translation = payload.translation;
|
||||
state.selected.book = null
|
||||
state.selected.chapter = null
|
||||
state.selected.translation = payload.selected_translation;
|
||||
state.in_memory_translation = payload.translation;
|
||||
},
|
||||
toggle_loading(state, payload){
|
||||
state.loading = payload;
|
||||
},
|
||||
search(state, payload){
|
||||
state.search = payload;
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,11 @@
|
||||
export default {
|
||||
saved_translations: [],
|
||||
// test: (()=>(['Hello', 'Wold']))()
|
||||
// ,
|
||||
selected:{
|
||||
translation: null,
|
||||
book: null,
|
||||
chapter: null
|
||||
},
|
||||
loading: false,
|
||||
in_memory_translation:{},
|
||||
search: '',
|
||||
}
|
||||
58
utils/index.js
Normal file
58
utils/index.js
Normal file
@ -0,0 +1,58 @@
|
||||
export const isArray = function(a) {
|
||||
return (!!a) && (a.constructor === Array);
|
||||
};
|
||||
|
||||
export const isObject = function(a) {
|
||||
return (!!a) && (a.constructor === Object);
|
||||
};
|
||||
|
||||
export const isDate = function(o) {
|
||||
return o instanceof Object && o.constructor === Date;
|
||||
}
|
||||
|
||||
export const has = function(o,p){
|
||||
let has = true
|
||||
for (const prop of p) {
|
||||
has = o.hasOwnProperty(prop)
|
||||
if(!has) break;
|
||||
}
|
||||
return has;
|
||||
}
|
||||
export const querablePromise = function(promise) {
|
||||
// Don't modify any promise that has been already modified.
|
||||
if (promise.isPending) return promise;
|
||||
|
||||
// Setup our initial state.
|
||||
const state = {
|
||||
isPending: true,
|
||||
isRejected: false,
|
||||
isResolved: false,
|
||||
|
||||
// Specified so that we'll generate accessor functions for them.
|
||||
err: undefined,
|
||||
val: undefined,
|
||||
};
|
||||
|
||||
// We must actually wait for the promise to either resolve or reject,
|
||||
// wrap that value, then let it continue on.
|
||||
const result = promise.then(
|
||||
function(val) {
|
||||
state.isResolved = true;
|
||||
state.isPending = false;
|
||||
state.val = val;
|
||||
return val;
|
||||
},
|
||||
function(err) {
|
||||
state.isRejected = true;
|
||||
state.isPending = false;
|
||||
state.err = err;
|
||||
throw err;
|
||||
}
|
||||
);
|
||||
|
||||
for (const val of Object.keys(state)) {
|
||||
result[val] = function() { return state[val]; };
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user