getBible/app
4
2
Fork 0
mirror of https://github.com/getbible/app.git synced 2024-12-22 15:58:55 +00:00
Code

made setting modal dynamic

Browse Source
This commit is contained in:
Erastus Amunwe 2020-10-26 21:00:09 +02:00
parent 6f9abd18a1
commit bcd6f2f79e
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/NavBar.vue
View File

@ -28,24 +28,29 @@
<h3>Saved Translations</h3> <h3>Saved Translations</h3>
<div> <div>
<ul class="uk-list uk-list-large uk-list-divider"> <ul class="uk-list uk-list-large uk-list-divider">
<li>List item 1 <span class="uk-position-center-right" uk-icon="icon: minus-circle;"></span> </li> <li
<li>List item 2</li> v-for="(tr,i) in Object.keys(savedTranslations)"
<li>List item 3</li> :key="i"
><div><span>{{savedTranslations[tr]["language"]?`(${savedTranslations[tr]["language"]})`:null}} {{savedTranslations[tr]['translation']}}</span> <a class="uk-position-center-right uk-position-relative"><span uk-icon="icon: minus-circle;"></span></a>
</div> </li>
<li> <li>
<div uk-form-custom="target: > * > span:first-child"> <div uk-form-custom="target: > * > span:first-child">
<select> <select>
<option value="">Add Translation...</option> <option value="">Add Translation...</option>
<option value="1">Option 01</option> <option
<option value="2">Option 02</option> v-for="(tr,i) in Object.keys(translations)"
<option value="3">Option 03</option> :key="i"
<option value="4">Option 04</option> :value="tr"
>{{translations[tr]["language"]?`(${translations[tr]["language"]})`:null}} {{translations[tr]['translation']}}
</option>
</select> </select>
<button class="uk-button uk-button-default" type="button" tabindex="-1"> <button class="uk-button uk-button-default" type="button" tabindex="-1">
<span></span> <span></span>
<span uk-icon="icon: chevron-down"></span> <span uk-icon="icon: chevron-down"></span>
</button> </button>
</div> </div>
<span uk-icon="icon: plus-circle; ratio:2"></span> <a><span uk-icon="icon: plus-circle; ratio:2"></span></a>
</li> </li>
</ul> </ul>
@ -56,9 +61,10 @@
<div class="uk-modal-footer uk-text-right"> <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-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="button">Save</button> <button class="uk-button uk-button-primary" type="button">Save</button>
</div> </div>
</div> </div>
</div> </div>
</nav> </nav>
</template> </template>
<script> <script>
@ -69,17 +75,32 @@ export default {
} }
}, },
computed: {
savedTranslations() {
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 o
}
},
async created(){ async created(){
let config = { let config = {
headers: {'Access-Control-Allow-Origin': '*'} headers: {'Access-Control-Allow-Origin': '*'}
}; };
let response =fetch(`https://getbible.net/v2/translations.json`,config) let response = await fetch(`https://getbible.net/v2/translations.json`,config)
.catch(function(err) { this.translations = err }); .catch(function(err) { this.translations = err });
if(!response) if(!response)
return; return;
let data = response.json().catch(err => {console.log(err);}) let data = await response.json().catch(err => {console.log(err);})
if(!data) if(!data)
return; return;