redraws frontend UI

This commit is contained in:
2019-07-28 15:56:19 +02:00
parent d280d0f095
commit a3eaeed807
12 changed files with 151 additions and 15350 deletions

View File

@@ -1,88 +1,50 @@
<template>
<div class="container is-paddingless">
<div v-if="mainControlsDisplayed"
class="columns is-mobile is-vcentered"
>
<div class="column is-narrow">
<span class="icon is-large">
<i class="fas fa-2x fa-dragon"></i>
</span>
</div>
<div class="column has-text-left">
<h1 class="title">Coffre de groupe</h1>
</div>
<div class="column" v-show="canAdd">
<div v-show="mainControlsDisplayed" class="buttons is-right">
<button v-if="canAdd"
class="button is-inverted is-info"
@click="is_adding = true"
>
<span class="icon">
<i class="fas fa-box-open"></i>
</span>
<p>Nouveau loot</p>
</button>
<button class="button is-inverted is-primary">
<span class="icon">
<i class="fas fa-coins"></i>
</span>
<p>Tout vendre</p>
<table class="table is-fullwidth is-striped">
<thead>
<tr>
<th>{{ player == 0 ? 'Coffre de groupe' : 'Objets'}}</th>
<th v-if="canGrab"></th>
<th v-if="canSell">
<div class="buttons is-right">
<button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
@click="is_selling = !is_selling">
<span class="icon"><i class="fas fa-coins"></i></span>
<p v-if="!is_selling">Vendre</p>
<p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
</button>
<PercentInput v-show="is_selling"></PercentInput>
</div>
</div>
</div>
<Loot v-if="is_adding" @done="is_adding = false"></Loot>
<table v-else class="table is-fullwidth is-striped" >
<thead>
<tr>
<th>Objets de {{ player }}</th>
<th v-if="canGrab"></th>
<th v-if="canSell">
<div class="buttons is-right">
<button class="button"
:class="is_selling ? 'is-danger' : 'is-warning'"
@click="is_selling = !is_selling"
>
<span class="icon">
<i class="fas fa-coins"></i>
</span>
<p v-if="!is_selling">
Vendre</p>
<p v-else>
{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
</button>
<PercentInput v-show="is_selling">
</PercentInput>
</th>
</tr>
</thead>
<tbody v-if="app_state.initiated">
<template v-for="(item, idx) in content">
<tr :key="`row-${idx}`">
<td>
<strong>{{item.name}}</strong>
</td>
<td v-if="canGrab">
<Request :item="item.id"></Request>
</td>
<td v-if="canSell">
<div class="field is-grouped is-pulled-right" v-show="is_selling">
<div class="control">
<label class="label">
<input type="checkbox"
id="`item-${idx}`"
:value="item.id"
v-model="sell_selected">
{{item.base_price / 2}} GP
</label>
</div>
</th>
</tr>
</thead>
<tbody>
<template v-for="(item, idx) in content">
<tr :key="`row-${idx}`">
<td>{{item.name}}</td>
<td v-if="canGrab">
<Request :item="item.id"></Request>
</td>
<td v-if="canSell">
<div class="field is-grouped is-pulled-right" v-show="is_selling">
<div class="control">
<label class="label">
<input type="checkbox"
id="`item-${idx}`"
:value="item.id"
v-model="sell_selected">
{{item.base_price / 2}} GP
</label>
</div>
<PercentInput></PercentInput>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<PercentInput></PercentInput>
</div>
</td>
</tr>
</template>
</tbody>
<p v-else>Loading...</p>
</table>
</template>
<script>
@@ -154,11 +116,6 @@
return (this.app_state.player_id == 0
&& this.player == 0);
},
// The main controls are only displayed on group chest
mainControlsDisplayed () {
return (this.player == 0
&& !this.is_adding);
}
},
}
</script>