getBible/app
4
2
Fork 0
mirror of https://github.com/getbible/app.git synced 2024-06-01 02:10:48 +00:00
Code

Merge pull request #6 from getbible/staging

Browse Source 
New Layout, Also able to save to db
This commit is contained in:
Erastus Amunwe 2021-01-08 17:25:50 +02:00 committed by GitHub
commit c88d16efbf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 974 additions and 744 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/App.vue
View File

@ -1,44 +1,37 @@
<template> <template>
<div class="secondary-lighten3"> <div class="secondary-lighten3">
<!-- <div v-if="loading" class="uk-overlay-default uk-position-cover">
<div class="uk-position-center">
<h1>Loading... Please wait...</h1>
</div>
</div> -->
<navbar /> <navbar />
<div class="uk-container uk-animation-slide-bottom uk-margin-top"> <div class="uk-container uk-animation-slide-bottom uk-margin-top">
<selections /> <selections />
<div class="uk-container uk-container-small"> <div class="uk-container uk-container-small">
<verses /> <verses />
<options /> <options />
</div> </div>
</div> </div>
<div v-if="loading" id="overlay"> <div v-if="loading" id="overlay">
<div class="uk-position-center less-opacity"> <div class="uk-position-center">
<h1>Loading... Please wait.</h1> <span uk-spinner="ratio: 3"></span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// import _ from 'lodash'; // import _ from 'lodash';
import UIkit from 'uikit'; import UIkit from "uikit";
import Icons from 'uikit/dist/js/uikit-icons'; import Icons from "uikit/dist/js/uikit-icons";
import {mapGetters} from 'vuex'; import { mapGetters } from "vuex";
import navbar from './components/NavBar.vue'; import navbar from "./components/NavBar.vue";
import options from './components/Options.vue'; import options from "./components/Options.vue";
import Selections from './components/Selection.vue' import Selections from "./components/Selection.vue";
import Verses from './components/Verses.vue' import Verses from "./components/Verses.vue";
UIkit.use(Icons); UIkit.use(Icons);
export default { export default {
name: 'App', name: "App",
components: { components: {
navbar, navbar,
options, options,
@ -46,21 +39,20 @@ export default {
Verses, Verses,
}, },
computed: { computed: {
...mapGetters(['loading']) ...mapGetters(["loading"]),
}, },
created() { created() {
this.$store.dispatch("initialise");
this.$store.dispatch('initialise') console.log("Initialising");
console.log('Initialising');
console.log(JSON.parse(JSON.stringify(this.$store.state))); console.log(JSON.parse(JSON.stringify(this.$store.state)));
} },
} };
</script> </script>
<style lang="less"> <style lang="less">
@import "../node_modules/uikit/src/less/uikit.less"; @import "../node_modules/uikit/src/less/uikit.less";
@import "../node_modules/uikit/src/less/uikit.theme.less"; @import "../node_modules/uikit/src/less/uikit.theme.less";
@global-link-color: #DA7D02; @global-link-color: #da7d02;
@global-background: #f5f4f4; @global-background: #f5f4f4;
@primary: #55828b; @primary: #55828b;
@secondary: #fed18c; @secondary: #fed18c;
@ -74,10 +66,10 @@ export default {
} }
.disabled { .disabled {
cursor: not-allowed; cursor: not-allowed;
color: gray color: gray;
} }
.disabled:hover { .disabled:hover {
color:gray color: gray;
} }
#overlay { #overlay {
position: fixed; position: fixed;

2
src/api/getbible_v2_api.js
View File

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

95
src/api/idb.js
View File

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

85
src/components/NavBar.vue
View File

@ -1,50 +1,95 @@
<template> <template>
<div
<div class="secondary" uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"> class="secondary"
uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky"
<nav class="uk-navbar-container primary text-secondary uk-margin-small" uk-navbar> >
<nav
class="uk-navbar-container primary text-secondary uk-margin-small"
uk-navbar
>
<div class="uk-navbar-left"> <div class="uk-navbar-left">
<!-- <a class="uk-navbar-item uk-logo" href="#">GetBible</a> --> <!-- <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="#selection"
class="uk-navbar-item uk-search uk-search-default primary text-secondary"
uk-toggle
><span
class="primary text-secondary"
uk-icon="icon: album; ratio:2"
></span
>{{ book_name }} {{ chapter }}</a
>
<a href="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default primary text-secondary" uk-toggle><span class="primary text-secondary" uk-icon="icon: search; ratio:2"></span>Search</a> <a
href="#offcanvas-slide"
class="uk-navbar-item uk-search uk-search-default primary text-secondary"
uk-toggle
><span
class="primary text-secondary"
uk-icon="icon: search; ratio:2"
></span
>Search</a
>
<search /> <search />
<!-- <span class="uk-label uk-label-primary"><span class="uk-badge uk-badge-danger">{{ num_of_tr}} </span>Translations Available</span> --> <!-- <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> <a class="uk-navbar-item" href="#" uk-toggle
><span
class="primary text-secondary"
uk-icon="icon: history; ratio:2"
></span
></a>
</div> </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
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 component -->
<settings /> <settings />
</nav> </nav>
<div class="uk-position-fixed uk-position-bottom-left"> <div class="uk-position-fixed uk-position-bottom-left">
<ul class="uk-list"> <ul class="uk-list">
<li> <li>
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="github"></a> <a
href="#"
class="uk-icon-button primary uk-margin-small-left primary text-secondary"
uk-icon="github"
></a>
</li> </li>
<li> <li>
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="facebook"></a> <a
href="#"
class="uk-icon-button primary uk-margin-small-left primary text-secondary"
uk-icon="facebook"
></a>
</li> </li>
<li> <li>
<a href="#" class="uk-icon-button primary uk-margin-small-left primary text-secondary" uk-icon="world"></a> <a
href="#"
class="uk-icon-button primary uk-margin-small-left primary text-secondary"
uk-icon="world"
></a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Search from './Search.vue'; import Search from "./Search.vue";
import Settings from './Settings.vue'; import Settings from "./Settings.vue";
// import Picker from "./Picker.vue";
export default { export default {
components: { components: {
Search, Search,
Settings Settings,
} // Picker,
} },
};
</script> </script>

161
src/components/Options.vue
View File

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

38
src/components/Picker.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div>
<!-- <a href="" uk-marker>
<input v-model="primary" type="color" name="" id="">
</a>
<a href="" uk-marker>
<input v-model="secondary" type="color" name="" id="">
</a> -->
<label for="primary">Primary Color: </label>
<input v-model="primary" type="color" name="primary" id="primary" />
<br />
<label for="secondary">Secondary Color: </label>
<input v-model="secondary" type="color" name="secondary" id="secondary" />
</div>
</template>
<script>
import { dispatch } from "vuex";
export default {
data() {
return {
primary: "#55828b",
secondary: "#fed18c",
};
},
methods: {
updatePrimary() {
dispatch("primary", this.primary);
},
updateSecondary() {
dispatch("secondary", this.secondary);
},
},
};
</script>
<style>
</style>

131
src/components/Search.vue
View File

@ -1,58 +1,139 @@
<template> <template>
<div id="offcanvas-slide" uk-offcanvas> <div id="offcanvas-slide" uk-offcanvas>
<div class="uk-offcanvas-bar secondary text-secondary"> <div class="uk-offcanvas-bar secondary text-secondary">
<div class="uk-nav uk-nav-default"> <div class="uk-nav uk-nav-default">
<div class="uk-margin"> <div class="uk-margin">
<form class="uk-search uk-search-default" action="javascript:void(0)"> <form class="uk-search uk-search-default" action="javascript:void(0)">
<!-- <span uk-search-icon></span> --> <!-- <span uk-search-icon></span> -->
<input class="uk-search-input text-secondary primary rounded" v-model="search" type="search" placeholder="Search Words..."> <input
class="uk-search-input text-secondary primary rounded"
v-model="search_text"
type="search"
placeholder="Search Words..."
/>
<div class="uk-margin"> <div class="uk-margin">
<button class="uk-button uk-button-default uk-button-small text-secondary primary rounded">Search</button> <button
class="uk-button uk-button-default uk-button-small text-secondary primary rounded"
>
Search
</button>
</div> </div>
</form> </form>
</div> </div>
<div class="uk-margin"> <div class="uk-margin">
<div class="uk-margin"> <div class="uk-margin">
<div class="uk-button-group text-primary"> <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
<button class="uk-button uk-button-default uk-button-small text-secondary primary">ANY WORDS</button> class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
<button class="uk-button uk-button-default uk-button-small text-secondary primary">PHRASE</button> >
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> </div>
<div class="uk-margin"> <div class="uk-margin">
<div class="uk-button-group"> <div class="uk-button-group">
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">BIBLE</button> <button
<button class="uk-button uk-button-default uk-button-small text-secondary primary">OT</button> class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
<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> 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-button-group" data-uk-button-radio>
<label class="uk-button primary">
<input
class="primary"
type="radio"
checked="checked"
v-model="gender"
value="0"
style="display: none"
/>
Male
</label>
<label class="uk-button primary">
<input
type="radio"
v-model="gender"
value="1"
style="display: none"
/>
Female
</label>
</div>
{{ gender }}
<!-- <input type="color" name="theme" id=""> -->
<div class="uk-margin">
<div class="uk-button-group">
<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> </div>
<div class="uk-margin"> <div class="uk-margin">
<div class="uk-button-group"> <div class="uk-button-group">
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">EXACT MATCH</button> <button
<button class="uk-button uk-button-default uk-button-small text-secondary primary">PARTIAL MATCH</button> class="uk-button uk-button-default uk-button-small text-secondary primary uk-active"
</div> >
</div> CASE INSENSITIVE
<div class="uk-margin"> </button>
<div class="uk-button-group"> <button
<button class="uk-button uk-button-default uk-button-small text-secondary primary uk-active">CASE INSENSITIVE</button> class="uk-button uk-button-default uk-button-small text-secondary primary"
<button class="uk-button uk-button-default uk-button-small text-secondary primary">CASE SENSITIVE</button> >
CASE SENSITIVE
</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() {
} return {
search_text: "",
search_area: "",
match: "",
sensitivity: "",
words: "",
gender: "",
};
},
methods: {},
};
</script> </script>

98
src/components/Selection.vue
View File

@ -1,45 +1,76 @@
<template> <template>
<div id="selection" class="primary text-secondary uk-animation-slide-bottom uk-width-1-1 uk-card uk-card-default uk-card-body rounded" uk-margin> <div
<div class="" v-if="!saved_translations.length>0">No translation added. <br/>Please click <a @click="open_settings">HERE</a> to Open Settings</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 translations added. <br />Please click
<a @click="open_settings">HERE</a> to Open Settings
</div>
<div v-else> <div v-else>
<ul
<ul class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1 " uk-nav="multiple: false" > class="uk-nav-default uk-nav-parent-icon uk-witdth-1-1"
<li class="uk-parent uk-witdth-1-1"><a class="text-secondary">Translation</a> uk-nav="multiple: false"
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin> >
<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><a href="#"><span uk-pagination-previous></span></a></li> -->
<li <li
class="uk-card uk-card-hover text-secondary rounded" class="uk-card uk-card-hover text-secondary rounded"
v-for="(tr, i) in saved_translations" v-for="(tr, i) in saved_translations"
@click="set_translation(tr.abbreviation)" @click="set_translation(tr.abbreviation)"
:key="i" :key="i"
><a class="text-secondary" 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> --> <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
</ul> </ul>
</li> </li>
<li class="uk-nav-divider uk-witdth-1-1"></li> <li class="uk-nav-divider uk-witdth-1-1"></li>
<li v-if="translation" class="uk-parent uk-witdth-1-1"><a class="text-secondary">Books</a> <li v-if="translation" class="uk-parent uk-witdth-1-1">
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin> <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><a href="#"><span uk-pagination-previous></span></a></li> -->
<li class="uk-card uk-card-hover text-secondary" <li
class="uk-card uk-card-hover text-secondary"
v-for="(bk, i) in books" v-for="(bk, i) in books"
@click="set_book(bk['nr'])" @click="set_book(bk['nr'])"
:key="i" :key="i"
><a href="#" class="text-secondary">{{bk['name']}}</a></li> >
<a href="#" class="text-secondary">{{ bk["name"] }}</a>
</li>
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> --> <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
</ul> </ul>
</li> </li>
<li class="uk-nav-divider uk-witdth-1-1"></li> <li class="uk-nav-divider uk-witdth-1-1"></li>
<li v-if="book_nr" class="uk-parent uk-witdth-1-1 "><a class="text-secondary">Chapters</a> <li v-if="book_nr" class="uk-parent uk-witdth-1-1">
<ul class="uk-nav-sub uk-subnav uk-subnav-pill uk-pagination" uk-margin> <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 <li
class="uk-card uk-card-hover" class="uk-card uk-card-hover"
v-for="(ch, i) in chapters" v-for="(ch, i) in chapters"
@click="set_chapter(ch['chapter'])" @click="set_chapter(ch['chapter'])"
:key="i" :key="i"
><a href="#selection" class="text-secondary" uk-toggle>{{ch['chapter']}}</a></li> >
<a href="#selection" class="text-secondary" uk-toggle>{{
ch["chapter"]
}}</a>
</li>
<!-- <li><a href="#"><span uk-pagination-next></span></a></li> --> <!-- <li><a href="#"><span uk-pagination-next></span></a></li> -->
</ul> </ul>
</li> </li>
@ -49,9 +80,9 @@
</template> </template>
<script> <script>
// import _ from 'lodash'; // import _ from 'lodash';
import UIkit from 'uikit'; import UIkit from "uikit";
import {mapGetters} from 'vuex'; import { mapGetters } from "vuex";
export default { export default {
components: { components: {
// verses // verses
@ -59,36 +90,39 @@ export default {
data: function () { data: function () {
return { return {
// translation: 'akjv', // translation: 'akjv',
};
}}, },
computed: { computed: {
// translations(){ // translations(){
// // console.log(this.$store.state.saved_translations); // // console.log(this.$store.state.saved_translations);
// return this.$store.getters.saved_translations; // return this.$store.getters.saved_translations;
// }, // },
...mapGetters(['chapters', 'books', 'translation', 'book_nr', 'saved_translations']), ...mapGetters([
"chapters",
"books",
"translation",
"book_nr",
"saved_translations",
]),
}, },
methods: { methods: {
t(i) { t(i) {
return this.translations.find(t => t.abbreviation === i) return this.translations.find((t) => t.abbreviation === i);
}, },
set_translation(a) { set_translation(a) {
console.log("Hello"); console.log("Hello");
this.$store.dispatch('set_translation', {selected_translation:a}) this.$store.dispatch("set_translation", { selected_translation: a });
}, },
set_book(b) { set_book(b) {
this.$store.dispatch('set_book', b) this.$store.dispatch("set_book", b);
}, },
set_chapter(c) { set_chapter(c) {
this.$store.dispatch('set_chapter', c) this.$store.dispatch("set_chapter", c);
}, },
open_settings() { open_settings() {
UIkit.modal('#modal-sections').show() UIkit.modal("#modal-sections").show();
}
}, },
created(){ },
created() {},
} };
}
</script> </script>

88
src/components/Verses.vue
View File

@ -2,15 +2,20 @@
<div v-if="verses.length"> <div v-if="verses.length">
<!-- {{search.toLowerCase() + fverses.length}} --> <!-- {{search.toLowerCase() + fverses.length}} -->
<br /> <br />
<div class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded"> <div
<ul :dir="dir" class="uk-card uk-card-default primary uk-card-body uk-width-1-1 rounded"
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover"> >
<li v-for="(verse, i) in pverses" :key="i" <ul
:dir="dir"
class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover"
>
<li
v-for="(verse, i) in pverses"
:key="i"
:class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`" :class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`"
> >
<h5 class="uk-primary text-secondary"> <h5 class="uk-primary text-secondary">
<span class="uk-heading-bullet"> {{book_name+' '}} </span> <span class="uk-heading-bullet"> {{ book_name + " " }} </span>
<span class="uk-badge secondary text-primary badge-light"> <span class="uk-badge secondary text-primary badge-light">
{{ verse.chapter }}:{{ verse.verse }} {{ verse.chapter }}:{{ verse.verse }}
</span> </span>
@ -24,11 +29,18 @@
</ul> </ul>
</div> </div>
<div class="uk-position-small uk-position-center-left uk-overlay"> <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> <span
@click="prevV"
class="uk-icon-button primary text-secondary"
uk-icon="icon:chevron-left; ratio:2"
></span>
</div> </div>
<div class="uk-position-small uk-position-center-right uk-overlay"> <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> <span
@click="nextV"
class="uk-icon-button primary text-secondary"
uk-icon="icon:chevron-right; ratio:2"
></span>
</div> </div>
<!-- <ul class="uk-pagination" uk-margin> <!-- <ul class="uk-pagination" uk-margin>
@ -49,48 +61,60 @@
</div> </div>
</template> </template>
<script> <script>
import _ from 'lodash'; import _ from "lodash";
import {mapGetters} from 'vuex'; import { mapGetters } from "vuex";
export default { export default {
data: () => { data: () => {
return { return {
// dir: '' // dir: ''
prev: 0, prev: 0,
next:5 next: 5,
} };
}, },
computed: { computed: {
...mapGetters(['verses', 'dir', 'book_name', 'search']), ...mapGetters(["verses", "dir", "book_name", "search"]),
pverses() { pverses() {
return this.fverses.slice(this.prev, this.next) return this.fverses.slice(this.prev, this.next);
}, },
fverses: function () { fverses: function () {
console.log(this.search); console.log(this.search);
if(!this.search) if (!this.search) return this.verses;
return this.verses return this.filteredVerses;
return this.filteredVerses
}, },
filteredVerses() { filteredVerses() {
return _.orderBy(this.verses.filter((item) => return _.orderBy(
item.verse.toString().toLowerCase().includes(this.search.toLowerCase()) this.verses.filter(
|| item.chapter.toString().toLowerCase().includes(this.search.toLowerCase()) (item) =>
|| item.name.toString().toLowerCase().includes(this.search.toLowerCase()) item.verse
|| item.text.toLowerCase().includes(this.search.toLowerCase())), '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: { methods: {
nextV() { nextV() {
if (this.next > this.fverses.length) return; if (this.next > this.fverses.length) return;
this.next = this.next + 5 this.next = this.next + 5;
this.prev = this.prev+ 5 this.prev = this.prev + 5;
// console.log(this.next, this.prev); // console.log(this.next, this.prev);
}, },
prevV() { prevV() {
if(this.prev<1) if (this.prev < 1) return;
return; this.next -= 5;
this.next -=5 this.prev -= 5;
this.prev -=5 },
} },
} };
}
</script> </script>

24
src/store/mutations.js
View File

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