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

UI fixes, adds blanket impls of buy/sell signals

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-08-01 21:57:47 +02:00
parent f1d088596d
commit e56c8df121
6 changed files with 70 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
lootalot_front/src/components/Chest.vue
View File

@@ -5,17 +5,20 @@
<th width="100%">Objets</th>
<th>Valeur</th>
<th>
<div v-show="perms.canSell" class="buttons" :class="{'has-addons': is_selling}">
<button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
@click="is_selling = !is_selling">
<div v-if="perms.canSell" class="buttons is-marginless" :class="{'has-addons': is_selling}">
<button class="button is-marginless" :class="is_selling ? 'is-danger' : 'is-warning'"
@click="sellSelectedItems">
<span class="icon"><i class="fas fa-coins"></i></span>
<p v-if="!is_selling">Vendre</p>
<p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
<p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p>
</button>
<PercentInput v-show="is_selling"></PercentInput>
</div>
<div v-show="perms.canBuy">
<button class="button is-primary">Acheter</button>
<div v-else-if="perms.canBuy">
<button class="button is-danger is-fullwidth" @click="buySelectedItems">Acheter</button>
</div>
<div v-else-if="perms.canGrab">
<button class="button is-static is-fullwidth">Demander</button>
</div>
</th>
</tr>
@@ -26,18 +29,18 @@
<td><strong>{{item.name}}</strong></td>
<td>{{ item.base_price }}po</td>
<td>
<Request v-show="perms.canGrab"
<Request v-if="perms.canGrab"
:item="item.id"
@claim="(data) => $emit('claim', data)"
@unclaim="(data) => $emit('unclaim', data)">
</Request>
<div v-show="is_selling || perms.canBuy" class="field is-grouped">
<div v-else-if="showSelectors" class="buttons has-addons">
<label :for="`select-${idx}`" class="button is-marginless">
<input type="checkbox" class="checkbox"
id="`select-${idx}`"
:id="`select-${idx}`"
:value="item.id"
v-model="selected_items">
<label for="`select-${idx}`" class="label" style="padding: 0 1em;">
{{item.base_price / 2}} GP
&nbsp;{{is_selling ? item.base_price / 2 : item.base_price }}po
</label>
<PercentInput></PercentInput>
</div>
@@ -79,15 +82,39 @@
data () {
return {
is_selling: false,
is_adding: false,
selected_items: [],
};
},
methods: {
buySelectedItems () {
const items = this.items.filter(i => this.selected_items.includes(i.id));
this.$emit("buy", items);
this.selected_items.length = 0;
},
sellSelectedItems () {
if (!this.is_selling) {
this.is_selling = true;
} else {
this.is_selling = false;
if (this.selected_items.length > 0) {
const items = this.items.filter(i => this.selected_items.includes(i.id));
this.$emit("sell", items);
this.selected_items = [];
}
}
},
},
computed: {
totalSellValue () {
showSelectors () { return !this.perms.canGrab && (this.is_selling || this.perms.canBuy); },
totalSelectedValue () {
return this.items
.filter(item => this.selected_items.includes(item.id))
.map(item => item.base_price / 2)
.map(item => {
if (this.is_selling) {
return item.base_price / 2;
} else {
return item.base_price;
}})
.reduce((total,value) => total + value, 0);
},
},
@@ -97,4 +124,7 @@
<style scoped>
.table td, .table th { vertical-align: middle; }
.buttons { flex-wrap: nowrap; }
label.is-checkbox {
background-color: #eee;
}
</style>