rust/lootalot
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

works on Loot adding UI

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-10-04 16:02:22 +02:00
parent 1ff2429244
commit 4f6970c423
2 changed files with 56 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lootalot_front/src/App.vue
View File

@@ -56,7 +56,13 @@
</nav> </nav>
<main class="section"> <main class="section">
<template v-if="isAdding"> <template v-if="isAdding">
<ItemInput v-if="playerIsGroup" :source="state.inventory" @addItem="item => pending_loot.push(item)"></ItemInput> <div v-if="playerIsGroup" class="box">
<ItemInput v-if="playerIsGroup"
:source="state.inventory"
@addItem="item => pending_loot.push(item)"
></ItemInput>
<button>Envoyer</button>
</div>
<AddingChest <AddingChest
:items="playerIsGroup ? pending_loot : state.inventory" :items="playerIsGroup ? pending_loot : state.inventory"
:perms="playerIsGroup ? {} : { canBuy: true }" :perms="playerIsGroup ? {} : { canBuy: true }"

103
lootalot_front/src/components/ItemInput.vue
View File

@@ -1,101 +1,96 @@
<template> <template>
<div class="container is-paddingless"> <div class="container is-paddingless">
<p class="heading">Ajouter un objet</p> <p class="heading">Ajouter un objet</p>
<div class="field has-addons"> <div class="field">
<label for="item_name" class="label">Nom</label>
<div class="control is-expanded" :class="{'is-loading': is_loading }"> <div class="control is-expanded" :class="{'is-loading': is_loading }">
<input type="text" <input type="text"
v-model="item_name" id="item_name"
@input="autocompletion" v-model="item.name"
@input="autoCompletion"
class="input" class="input"
:class="{'is-danger': no_results,
'is-warning': auto_open}"
autocomplete="on" autocomplete="on"
></input> ></input>
</div> </div>
<div class="dropdown" :class="{'is-active': showCompletionFrame}">
<div class="dropdown-menu">
<div class="dropdown-content">
<a v-for="(result,i) in results"
:key="i"
@click="setResult(result)"
class="dropdown-item"
>{{ result.name }}</a>
</div>
</div>
</div>
</div>
<div class="field">
<div class="control"> <div class="control">
<input type="text" <input type="text"
class="input" class="input"
:class="{'is-danger': !item_price}" :class="{'is-danger': item.base_price == ''}"
v-model.number="item_price" v-model.number="item.base_price"
></input> ></input>
</div> </div>
<div class="control"> <div class="control">
<button class="button is-primary" <button class="button is-primary"
:disabled="no_results" @click="addItem"
@click="additem"
>+</button> >+</button>
</div> </div>
</div> </div>
<div class="dropdown" :class="{'is-active': auto_open}">
<div class="dropdown-menu">
<div class="dropdown-content">
<a v-for="(result,i) in results"
:key="i"
@click="setresult(result)"
class="dropdown-item"
>{{ result.name }}</a>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: ["source"], props: ["source"],
data () { data () {
return { return {
is_loading: false, is_loading: false,
no_results: false, item: {
item_name: '', name: '',
item_price: '', base_price: '',
},
results: [], results: [],
auto_open: false,
}; };
}, },
methods: { methods: {
autoCompletion (ev) { autoCompletion () {
// TODO: a lot happens here that // Unset any previous value on input (for every field except item's name)
// need to be clarified this.item.base_price = '';
if (this.item_name == '') {
this.auto_open = false; if (this.item.name == '') {
this.results = []; this.results = [];
this.no_results = false;
} else { } else {
this.results = this.source.filter(item => { this.results = this.source.filter(
return item.name.toUpperCase().includes(this.item_name.toUpperCase()); item => item.name.toUpperCase().includes(this.item.name.toUpperCase())
}); );
// Update status
if (this.results.length == 0) {
this.no_results = true;
} else {
this.no_results = false;
this.auto_open = true;
}
} }
}, },
setResult(result) { setResult(result) {
this.item_name = result.name; this.item.name = result.name;
this.item_price = result.base_price; this.item.base_price = result.base_price;
this.auto_open = false; // Clear results to close completionFrame
this.results = [];
}, },
addItem () { addItem () {
this.$emit("addItem", { // TODO: check item is valid
name: this.item_name, this.$emit("addItem", this.item);
base_price: this.item_price this.item = {
}); name: '',
this.item_name = ''; base_price: '',
this.item_price = ''; };
this.results = []; this.results = [];
this.no_results = false; },
this.auto_open = false;
}
}, },
computed: {
showCompletionFrame () { return this.results.length > 0 },
}
} }
</script> </script>
<style scoped> <style scoped>
.dropdown, .dropdown-menu { min-width: 100%; margin-top: 0; padding-top: 0;} .dropdown, .dropdown-menu { min-width: 100%; margin-top: 0; padding-top: 0;}
.dropdown { top: -0.75rem; } /*.dropdown { top: -0.75rem; }*/
</style> </style>