Solved merge conflict

package.json

@@ -6,8 +6,8 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint --fix",
-    "electron:build": "vue-cli-service electron:build",
+    "getbible:build": "vue-cli-service electron:build",
-    "electron:serve": "vue-cli-service electron:serve",
+    "getbible:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps"
   },

src/App.vue

@@ -1,10 +1,20 @@
 <template>
-<div>
+<div >
+  <!-- <div 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 ">
+    <selections/>
+    <div class="uk-container uk-container-small">
+
     <options/>
+    </div>
   </div>
 </div>
+
 </template>
 
 <script>
@@ -15,6 +25,7 @@ import Icons from 'uikit/dist/js/uikit-icons';
 
 import navbar from './components/NavBar.vue';
 import options from './components/Options.vue';
+import Selections from  './components/Selection.vue'
 
 UIkit.use(Icons);
  
@@ -22,16 +33,13 @@ export default {
   name: 'App',
   components: {
     navbar,
-    options
+    options,
+    Selections,
   },
   created(){
-     const userSettings = localStorage.getItem('settings');
     
-    if (userSettings) {
+    this.$store.dispatch('initialise')
-      const settings = JSON.parse(userSettings);
+  //  console.log(JSON.parse(JSON.stringify(this.$store.state)));
-      this.$store.commit('set_settings', settings);
-    }
-   
   }
 }
 </script>

src/api/getbible_v2_api.js

@@ -0,0 +1,15 @@
+// TO DO
+// these should be imported from root config file
+
+let BASE_URL = 'https://getbible.net';
+let API_VERSION = 'v2';
+
+
+export default {
+    get_translations(){
+        return fetch(`${BASE_URL}/${API_VERSION}/translations.json`)
+    },
+    get_translation(abbreviation){
+        return fetch(`${BASE_URL}/${API_VERSION}/${abbreviation}.json`)
+    }
+}

src/api/idb.js

@@ -1,6 +1,7 @@
 const DB_NAME = 'getbibledb';
-const DB_VERSION = 1;
+const DB_VERSION = 3;
 let DB;
+// window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
 
 export default {
 
@@ -11,7 +12,7 @@ export default {
 			console.log('OPENING DB', DB);
 			let request = window.indexedDB.open(DB_NAME, DB_VERSION);
 			
-			request.onerror = e => {
+			request.onerror = (e) => {
 				console.log('Error opening db', e);
 				reject('Error');
 			};
@@ -24,37 +25,50 @@ export default {
 			request.onupgradeneeded = e => {
 				console.log('onupgradeneeded');
 				let db = e.target.result;
-				db.createObjectStore("savedTranslations", { autoIncrement: true, keyPath:'id' });
+				db.createObjectStore("saved_translations", { keyPath:'abbreviation' });
+				db.createObjectStore("translations", { keyPath:'abbreviation' });
 			};
 		});
 	},
-	async deleteTranslation(tr) {
+	async delete(delInfo) { 	
 
 		let db = await this.getDb();
 
-		return new Promise(resolve => {
+		return new Promise((resolve, reject) => {
 
-			let trans = db.transaction(['savedTranslations'],'readwrite');
+			let trans = db.transaction([delInfo.name],'readwrite');
 			trans.oncomplete = () => {
-				resolve();
+				resolve(true);
 			};
 
-			let store = trans.objectStore('savedTranslations');
+			let store = trans.objectStore(delInfo.name);
-			store.delete(tr.id);
+			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);
+
+			trans.onerror = e => {
+				reject(e)
+			}
+			trans.onabort = e => {
+				reject(e)
+			}
+			trans.commit();
+
 		});	
 	},
-	async getTranslations() {
+	async getAll(name) {
 
 		let db = await this.getDb();
 
 		return new Promise(resolve => {
 
-			let trans = db.transaction(['savedTranslations'],'readonly');
+			let trans = db.transaction([name],'readonly');
 			trans.oncomplete = () => {
 				resolve(tr);
 			};
 			
-			let store = trans.objectStore('savedTranslations');
+			let store = trans.objectStore(name);
 			let tr = [];
 			
 			store.openCursor().onsuccess = e => {
@@ -68,45 +82,52 @@ export default {
 		});
 	},
 
-	async saveTranslation(tr) {
+	async save(arg) {
 
 		let db = await this.getDb();
 
-		return new Promise(resolve => {
+		return new Promise((resolve, reject) => {
 
-			let trans = db.transaction(['savedTranslations'],'readwrite');
+			let trans = db.transaction([arg.name],'readwrite');
 			trans.oncomplete = () => {
-				resolve();
+				resolve(true);
 			};
-
+			console.log(arg.name);
-			let store = trans.objectStore('savedTranslations');
+			let store = trans.objectStore(arg.name);
-			store.put(tr);
+			store.put(arg.putObj);
-
+			trans.onerror = e => reject(e)
 		});
 	
     },
-    async getTranslation(abbr) {
+    async get(name, keyPath) {
 
 		let db = await this.getDb();
 
-		return new Promise(resolve => {
+		return new Promise((resolve, reject) => {
 
-			let trans = db.transaction(['savedTranslations'],'readonly');
+			let trans = db.transaction([name],'readonly');
 			trans.oncomplete = () => {
 				resolve(tr);
 			};
 			
-			let store = trans.objectStore('savedTranslations');
+			let store = trans.objectStore(name);
 			let tr = {};
 			
 			store.openCursor().onsuccess = e => {
 				let cursor = e.target.result;
 				if (cursor) {
-                    if(abbr == cursor.value.abbreviation)
+                    if(keyPath == cursor.value.keyPath)
 					tr = cursor.value
 					cursor.continue();
 				}
 			};
+			trans.onerror = e => {
+				reject(e)
+			}
+			trans.onabort = e => {
+				reject(e)
+			}
+			trans.commit();
 
 		});
 	},

src/background.js

@@ -30,7 +30,7 @@ function createWindow() {
   if (process.env.WEBPACK_DEV_SERVER_URL) {
     // Load the url of the dev server if in development mode
     win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-    if (!process.env.IS_TEST) win.webContents.openDevTools()
+    // if (!process.env.IS_TEST) win.webContents.openDevTools()
   } else {
     createProtocol('app')
     // Load the index.html when not in development

src/components/NavBar.vue

@@ -1,16 +1,12 @@
 <template>
-    <div class="uk-margin uk-container">
-        <div class="uk-margin uk-align-right">
-
-                <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 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>
                 <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="#offcanvas-slide" class="uk-navbar-item uk-search uk-search-default" uk-toggle><span  uk-icon="icon: search; ratio:2"></span>Search</a>
 
@@ -34,12 +30,12 @@
                                 <div>
                                         <ul class="uk-list uk-list-large uk-list-divider">
                                             <li
-                                            v-for="(tr,i) in savedTranslations" 
+                                            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="!savedTranslations.length">No saved translation</li>
+                                            <li v-if="!saved_translations.length">No saved translation</li>
                                             
                                             <li><b>Add: </b>
                                                 <div uk-form-custom="target: > * > span:first-child">
@@ -73,11 +69,25 @@
                 </div>
                 
             </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>
+                </li>
+                <li>
+                <a href="https://www.facebook.com/TheHolyScriptures" class="uk-icon-button  uk-margin-small-left" uk-icon="facebook"></a>
+                </li>
+                <li>
+                <a href="https://truechristian.church/whybible" class="uk-icon-button uk-margin-small-left" 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'
 
 export default {
     components: {
@@ -86,43 +96,50 @@ export default {
     data: () => {
         return {
             translation: 'Add Translation...',
-            translations: {},
+            translations:{}
-            
         }
     },
     computed: {
-        savedTranslations() {
+        saved_translations() {
-            // let o = {}
+            console.log(this.$store.state.saved_translations[0]);
-            // let counter = 0
+            return this.$store.state.saved_translations;
-            // 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)
+            let payload = {
+                abbreviation: tr.abbreviation,
+                saved_translations: {
+                    name: 'saved_translations',
+                    putObj: tr
+                }
+            }
+            this.$store.dispatch('add', payload)
         },
-        remove(tr){
+        remove(abbr){
-            this.$store.dispatch('remove', tr)
+           let payload = {
+            translation:{
+                name: 'translations',
+                keyPath: abbr
+            },
+            saved_translations:{
+                name: 'saved_translations',
+                keyPath: abbr
+            }
+        }
+            this.$store.dispatch('remove', payload)
         },
         saveSettings(){
-            this.$store.commit('set_settings', this.$store.state.settings)
+            this.$store.commit('save_settings', this.$store.state.saved_translations)
             UIkit.modal('#modal-sections').hide()
         }
     },
     async created(){
-                let config = {
+               
-                    headers: {'Access-Control-Allow-Origin': '*'}
+                let response = await getbible.get_translations()
-                };
-                let response = await fetch(`https://getbible.net/v2/translations.json`,config)
                     .catch(function(err) { this.translations = err });
 
                 if(!response)

src/components/Options.vue

@@ -1,12 +1,11 @@
 <template>
     <div class="uk-container">
-        <div class="uk-flex uk-flex-around">
+        <!-- <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 selected value="1">Choose...</option> -->
                         <option 
                         class="uk-animation-slide-bottom uk-animation-15" v-for="(tr,i) in translations" 
                         :key="i"
@@ -21,7 +20,6 @@
                         <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 selected value="1">Choose...</option> -->
                         <option 
                         v-for="(bk,i) in Object.keys(books)" 
                         :key="i"
@@ -35,7 +33,6 @@
                         <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 selected value="1">Choose...</option> -->
                         <option 
                         v-for="(ch,i) in Object.keys(chapters)" 
                         :key="i"
@@ -45,14 +42,8 @@
                         
                     </select>
                 </div>
-            </div>
+            </div> -->
-            <verses
+           
-            v-if="translations.length && books[book]"
-            :dir="t(translation).direction.toLowerCase()"
-            :book_name="books[book].name"
-            :chapter="fchapters"
-            />
-
             <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>
@@ -86,9 +77,12 @@ export default {
             }},
             computed: {
                 translations(){
-                    return this.$store.state.settings.savedTr;
+                    return this.$store.state.saved_translations;
+                },
+                saved_translations(){
+                    console.log(this.$store.state.saved_translations);
+                    return this.$store.state.saved_translations
                 },
-                
                 fchapters: function (){
                     if(!this.search)
                     return this.chapter.verses
@@ -182,37 +176,8 @@ export default {
                 }
             },
             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();
-                    }).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>

src/components/Selection.vue

@@ -0,0 +1,206 @@
+<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>
+            <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)"
+                    :key="i"
+                    :value="tr.abbreviation"
+                    ><a 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>
+            <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'])"
+                    :key="i"
+                    :value="books[bk]['nr']"
+                    ><a href="#">{{books[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>
+            <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="(ch,i) in Object.keys(chapters)" 
+                    @change="update_chapter(chapters[ch]['chapter'])" 
+                    :key="i"
+                    ><a >{{chapters[ch]['chapter']}}</a></li>
+               <li><a href="#"><span uk-pagination-next></span></a></li>
+            </ul>
+        </li>
+     </ul>
+</div>
+</template>
+<script>
+import _ from 'lodash';
+// import verses from './Verses.vue';
+
+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(){
+                    return this.$store.state.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
+
+                },
+                async update_tr(){
+
+                },
+                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'
+                    });
+                
+                },
+                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'
+                    });
+                }
+            },
+            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>

src/components/Verses.vue

@@ -1,7 +1,7 @@
 <template>
     <ul :dir="dir" 
      class="uk-margin-medium-top uk-list uk-list-divider uk-animation-hover">
-        <li  v-for="(verse, i) in chapter" :key="i" 
+        <li  v-for="(verse, i) in verses" :key="i" 
         :class="`uk-animation-slide-bottom uk-animation-15 uk-animation-hover`">
             
             <h5  class=" uk-primary">
@@ -17,17 +17,22 @@
 </template>
 <script>
 export default {
-    props: {
+    data: () => {
-        dir: {
+        return {
-            type:String,
+        // dir: ''
-            required:true},
+        // book_name: ''
-        book_name: {
+        // chapter:''
-            type:String,
+        }
-            required: true,
+    },
+    computed: {
+        verses(){
+            return this.$store.getters.verses;
         },
-        chapter:{
+        dir(){
-            type: Object,
+            return this.$store.getters.dir;
-            required: true,
+        },
+        book_name(){
+            return this.$store.getters.book_name;
         }
     }
 }

src/store.js

@@ -1,60 +0,0 @@
-import { createStore } from 'vuex'
-
-import idb from './api/idb';
-
-export const store = createStore({
-  state: {
-    settings: {
-        savedTr: []
-    },
-    trs: [],
-    search: '',
-  },
-  mutations: {
-    add_translation (state,translation ) {
-        state.settings.savedTr.push(translation)
-    },
-    remove_translation (state,abbr ) {
-        state.settings.savedTr = state.settings.savedTr.filter(tr => tr.abbreviation !==abbr)
-        
-    }, 
-    set_settings(state, settings){
-      state.settings =  settings;
-      localStorage.setItem('settings', JSON.stringify(settings))
-    },
-    add_search(state, search){
-        state.search = search
-    }
-  },
-  actions:{
-      add({commit}, tr){
-        commit('add_translation', tr);
-      },
-      remove({commit}, abbr){
-        commit('remove_translation', abbr);
-      },
-      add_s({commit}, sr){
-        commit('add_search', sr);
-      },
-      async deleteTranslation(context, tr) {
-        await idb.deleteCat(tr); 
-      },
-      async getTranslations(context) {
-        context.state.trs = [];
-        let trs = await idb.getTranslations();
-        trs.forEach(t => {
-          context.state.trs.push(t);
-        });
-      },
-      async getTranslation(context, abbr) {
-        
-        let tr = await idb.getTranslation(abbr);
-        return tr;
-      },
-      async saveTranslation(context, tr) {
-        await idb.saveCat(tr);
-      }
-  }
-})
-
-// export default store;

src/store/actions.js

@@ -0,0 +1,99 @@
+import idb from '../api/idb';
+import getbible  from  '../api/getbible_v2_api';
+
+export default {
+    async add({commit}, payload){
+
+    // payload = {
+    //   abbreviation: '',
+    //   saved_translations:{
+    //     name: 'saved_translation',
+    //     putObj: {}
+    //   }
+    // }
+      const response = await getbible.get_translation(payload.abbreviation).catch(err => console.log(err))
+      // console.log(response);
+      if(!response) return;
+
+      const data = await response.json().catch(err => console.log(err))
+      // console.log(JSON.parse(data));
+      if(!data) return;
+      let dataString = JSON.stringify(data)
+      let savet = JSON.stringify(payload.saved_translations.putObj)
+      // console.log(dataString);
+      payload.translation = {
+        name: 'translations',
+        putObj: JSON.parse(dataString),
+      }
+      payload.saved_translations.putObj = JSON.parse(savet)
+      let success = false
+    //save translation in indexdb
+    success =  await idb.save(payload.translation).catch(err => console.log(err));
+    
+    if(!success)
+      return;
+
+    // then save the newly added translation details to the list of saved tr...s
+    success = await idb.save(payload.saved_translations).catch(err => console.log(err));
+
+    if(!success) return;
+
+      commit('add_translation', payload);
+    },
+    async remove({commit}, payload){
+      // payload example
+      // payload = {
+      //   translation:{
+      //     name: 'translation',
+      //     keyPath: 'aksjv'
+      //   },
+      //   saved_translations:{
+      //     name: 'saved_translation',
+      //     keyPath: "askjv"
+      //   }
+      // }
+      const {translation, saved_translations} = payload
+      let success = false
+      //save translation in indexdb
+      success =  await idb.delete(translation).catch(err => console.log(err));
+
+      if(!success)
+        return;
+
+      // then save the newly added translation details to the list of saved tr...s
+      success = await idb.delete(saved_translations).catch(err => console.log(err));
+
+      
+      if(!success) return;
+
+      commit('REMOVE_TRANSLATION', payload);
+    },
+   async  initialise({commit}){
+        let saved_translations = await idb.getAll('saved_translations').catch(err => console.log(err));
+        
+        if(!saved_translations) saved_translations = [];
+        
+  
+          let translations = await idb.getAll('translations').catch(err => console.log(err));
+          
+          if(!translations || !translations.length) translations = [{}];
+          
+    commit('initialise', {saved_translations, translation: translations[0]})
+        
+   
+
+    },
+    set_chapter({commit}, payload) {
+        commit('set_chapter', 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));
+        
+        if(!translation) return;
+        payload.translation = translation
+        commit('set_translation', payload)
+    }
+}

src/store/getters.js

@@ -0,0 +1,49 @@
+export default {
+
+    chapter : (state) =>{
+      return state.selected.chapter
+    },
+
+    book_nr : (state) =>{
+      return state.selected.book
+    },
+
+    book_name:(state, getters)=> {
+      return getters.books.find(book => book.nr === getters.book_nr).name
+    },
+
+    translation: (state)=>{
+      return state.selected.translation;
+    },
+
+    in_memory_translation : (state) =>{
+      return state.in_memory_translation
+    },
+
+    books : (state)=>{
+      if(!state.in_memory_translation.books)
+      return []
+
+      return state.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();
+      return 'ltr'
+    },
+
+    chapters : (state, getters) =>{
+      if(!getters.book) return [];
+      const book =  getters.books.find(book => book.nr === getters.book)
+      return book.chapters
+    },
+
+    verses: (state, getters) => {
+      if(!getters.chapter)
+        return []
+      const chapter = getters.chapters.find(chapter => chapter.chapter === getters.chapter)
+      return chapter.verses;
+    }
+    
+  }

src/store/mutations.js

@@ -0,0 +1,68 @@
+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;
+
+     state.saved_translations = state.saved_translations.filter(tr => tr.abbreviation !== keyPath)
+
+     if(state.in_memory_translation.abbreviation === keyPath){
+       state.in_memory_translation = {}
+       state.selected = {
+         translation: null,
+         book: null,
+         chapter: null
+       }
+     }
+       
+   }, 
+   // 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
+   },
+   set_chapter(state, payload){
+      state.selected.chapter = payload;
+   },
+   set_book(state, payload){
+     state.selected.book =  payload;
+   },
+   set_translation(state, payload){
+    state.selected.translation = payload.selectedTranslation;
+    state.in_memory_translation = payload.translation;
+   }
+ }

src/store/state.js

@@ -0,0 +1,12 @@
+export default {
+    saved_translations: [],
+    // test: (()=>(['Hello', 'Wold']))()
+    // ,
+    selected:{
+      translation: null,
+      book: null,
+      chapter: null
+    },
+    in_memory_translation:{},
+    search: '',
+  }

src/store/store.js

@@ -0,0 +1,14 @@
+import { createStore } from 'vuex'
+
+
+import state from './state';
+import getters from  './getters';
+import mutations from  './mutations';
+import actions from './actions'
+
+export const store = createStore({
+  state,
+  getters,
+  mutations,
+  actions
+})

vue.config.js

@@ -0,0 +1,23 @@
+module.exports = {
+    pages: {
+      index: {
+        // entry for the page
+        entry: 'src/main.js',
+        // the source template
+        template: 'public/index.html',
+        // output as dist/index.html
+        filename: 'index.html',
+        // when using title option,
+        // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
+        title: 'GetBible',
+        // chunks to include on this page, by default includes
+        // extracted common chunks and vendor chunks.
+        chunks: ['chunk-vendors', 'chunk-common', 'index']
+      },
+      // when using the entry-only string format,
+      // template is inferred to be `public/subpage.html`
+      // and falls back to `public/index.html` if not found.
+      // Output filename is inferred to be `subpage.html`.
+      subpage: 'src/main.js'
+    }
+  }