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>
<main class="section">
<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
:items="playerIsGroup ? pending_loot : state.inventory"
:perms="playerIsGroup ? {} : { canBuy: true }"

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

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