2020-10-24 00:32:55 +00:00
|
|
|
<template>
|
2020-10-27 19:46:27 +00:00
|
|
|
<div class="uk-margin uk-container">
|
|
|
|
|
<div class="uk-margin uk-align-right">
|
2020-10-26 14:50:29 +00:00
|
|
|
|
2020-10-27 19:46:27 +00:00
|
|
|
<a href="https://github.com/getbible" class="uk-icon-button uk-margin-small-left" uk-icon="github"></a>
|
|
|
|
|
<a href="https://www.facebook.com/TheHolyScriptures" class="uk-icon-button uk-margin-small-left" uk-icon="facebook"></a>
|
|
|
|
|
<a href="https://truechristian.church/whybible" class="uk-icon-button uk-margin-small-left" uk-icon="world"></a>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<nav class="uk-navbar-container uk-navbar-transparent uk-margin" uk-navbar>
|
|
|
|
|
<div class="uk-navbar-left">
|
|
|
|
|
|
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">GetBible</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>
|
2020-10-26 21:16:29 +00:00
|
|
|
|
2020-10-27 19:46:27 +00:00
|
|
|
<div id="offcanvas-slide" uk-offcanvas>
|
|
|
|
|
<div class="uk-offcanvas-bar">
|
2020-10-26 21:16:29 +00:00
|
|
|
|
2020-10-27 19:46:27 +00:00
|
|
|
<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...">
|
|
|
|
|
<div class="uk-margin">
|
|
|
|
|
<button class="uk-button uk-button-default uk-button-small">Search</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
2020-10-26 21:16:29 +00:00
|
|
|
|
2020-10-27 19:46:27 +00:00
|
|
|
</div>
|
|
|
|
|
|
2020-10-26 21:16:29 +00:00
|
|
|
<div class="uk-margin">
|
2020-10-27 19:46:27 +00:00
|
|
|
|
|
|
|
|
<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>
|
2020-10-26 21:16:29 +00:00
|
|
|
</div>
|
2020-10-27 19:46:27 +00:00
|
|
|
<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>
|
|
|
|
|
</div>
|
2020-10-26 21:16:29 +00:00
|
|
|
</div>
|
2020-10-27 19:46:27 +00:00
|
|
|
<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>
|
|
|
|
|
</div>
|
2020-10-26 21:16:29 +00:00
|
|
|
</div>
|
2020-10-27 19:46:27 +00:00
|
|
|
<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>
|
|
|
|
|
</div>
|
2020-10-26 21:16:29 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-10-27 19:46:27 +00:00
|
|
|
</div>
|
2020-10-26 21:16:29 +00:00
|
|
|
|
2020-10-27 19:46:27 +00:00
|
|
|
</div>
|
2020-10-26 21:16:29 +00:00
|
|
|
</div>
|
2020-10-27 19:46:27 +00:00
|
|
|
|
|
|
|
|
<!-- <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>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<a class="uk-navbar-item uk-position-center-right" href="#modal-sections" uk-toggle><span uk-icon="icon: cog; ratio:2"></span></a>
|
2020-10-26 14:50:29 +00:00
|
|
|
|
2020-10-27 19:46:27 +00:00
|
|
|
<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 savedTranslations"
|
|
|
|
|
:key="i"
|
|
|
|
|
><div><span>{{tr["language"]?`(${tr["language"]})`:null}} {{tr['translation']}}</span>
|
2020-10-27 20:20:31 +00:00
|
|
|
{{" "}}<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>
|
2020-10-27 19:46:27 +00:00
|
|
|
</div> </li>
|
|
|
|
|
<li v-if="!savedTranslations.length">No saved translation</li>
|
|
|
|
|
|
2020-10-27 20:20:31 +00:00
|
|
|
<li><b>Add: </b>
|
2020-10-27 19:46:27 +00:00
|
|
|
<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)"
|
2020-10-26 19:00:09 +00:00
|
|
|
:key="i"
|
2020-10-27 19:46:27 +00:00
|
|
|
: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>
|
2020-10-27 20:20:31 +00:00
|
|
|
<a @click="add(translations[translation])" :class="{disabled:!translations[translation]}"><span class="uk-button uk-button-primary" uk-icon="icon: plus;"></span></a>
|
2020-10-27 19:46:27 +00:00
|
|
|
</li>
|
|
|
|
|
</ul>
|
2020-10-26 19:00:09 +00:00
|
|
|
|
2020-10-27 19:46:27 +00:00
|
|
|
</div>
|
|
|
|
|
|
2020-10-26 14:50:29 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-10-27 20:47:04 +00:00
|
|
|
<div class="uk-modal-footer uk-text-right">
|
2020-10-27 19:46:27 +00:00
|
|
|
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
|
2020-10-27 20:47:04 +00:00
|
|
|
<button class="uk-button uk-button-primary" @click="saveSettings()" type="button">Save</button>
|
|
|
|
|
</div>
|
2020-10-26 14:50:29 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-10-27 19:46:27 +00:00
|
|
|
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
2020-10-26 14:50:45 +00:00
|
|
|
</template>
|
|
|
|
|
<script>
|
2020-10-27 20:34:25 +00:00
|
|
|
import UIkit from 'uikit';
|
|
|
|
|
|
2020-10-26 14:50:45 +00:00
|
|
|
export default {
|
|
|
|
|
data: () => {
|
|
|
|
|
return {
|
2020-10-26 21:08:45 +00:00
|
|
|
translation: 'Add Translation...',
|
2020-10-26 14:50:45 +00:00
|
|
|
translations: {},
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
2020-10-26 19:00:09 +00:00
|
|
|
computed: {
|
|
|
|
|
savedTranslations() {
|
2020-10-26 21:08:45 +00:00
|
|
|
// let o = {}
|
|
|
|
|
// let counter = 0
|
|
|
|
|
// for(const tr in this.translations){
|
|
|
|
|
// if(counter>2)
|
|
|
|
|
// break;
|
|
|
|
|
// o = {...o, [tr]:this.translations[tr]}
|
|
|
|
|
// counter +=1
|
|
|
|
|
// // Object.assign({}, o,{[tr]: this.translations[tr]})
|
|
|
|
|
// }
|
|
|
|
|
// console.log(o);
|
|
|
|
|
return this.$store.state.settings.savedTr;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
add(tr){
|
|
|
|
|
if(!tr) return;
|
|
|
|
|
this.$store.dispatch('add', tr)
|
|
|
|
|
},
|
|
|
|
|
remove(tr){
|
|
|
|
|
this.$store.dispatch('remove', tr)
|
2020-10-27 20:34:25 +00:00
|
|
|
},
|
|
|
|
|
saveSettings(){
|
|
|
|
|
this.$store.commit('set_settings', this.$store.state.settings)
|
|
|
|
|
UIkit.modal('#modal-sections').hide()
|
2020-10-26 19:00:09 +00:00
|
|
|
}
|
|
|
|
|
},
|
2020-10-26 14:50:45 +00:00
|
|
|
async created(){
|
|
|
|
|
let config = {
|
|
|
|
|
headers: {'Access-Control-Allow-Origin': '*'}
|
|
|
|
|
};
|
2020-10-26 19:00:09 +00:00
|
|
|
let response = await fetch(`https://getbible.net/v2/translations.json`,config)
|
2020-10-26 14:50:45 +00:00
|
|
|
.catch(function(err) { this.translations = err });
|
|
|
|
|
|
|
|
|
|
if(!response)
|
|
|
|
|
return;
|
|
|
|
|
|
2020-10-26 19:00:09 +00:00
|
|
|
let data = await response.json().catch(err => {console.log(err);})
|
2020-10-26 14:50:45 +00:00
|
|
|
|
|
|
|
|
if(!data)
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
|
|
this.translations = data
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
