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

redraws frontend UI

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-07-28 15:56:19 +02:00
parent d280d0f095
commit a3eaeed807
12 changed files with 151 additions and 15350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,57 +1,53 @@
<template>
<div class="box is-shadowless">
<nav class="columns is-mobile is-multiline is-vcentered">
<div class="column">
<section class="level is-mobile">
<div class="level-left">
<div class="level-item">
<span class="icon is-large"
@click="edit = !edit">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>
<p v-if="debt" class="has-text-danger">-{{ debt }}gp </p>
</div>
<div class="column has-text-info">
<p class="heading">PP</p>
<p class="is-size-4">{{ wealth[3] }}</p>
</div>
<div class="column has-text-warning">
<p class="heading">PO</p>
<p class="is-size-4">{{ wealth[2] }}</p>
</div>
<div class="column has-text-grey">
<p class="heading">PA</p>
<p class="is-size-4">{{ wealth[1] }}</p>
</div>
<div class="column has-text-grey">
<p class="heading">PC</p>
<p class="is-size-4">{{ wealth[0] }}</p>
</div>
</nav>
<div v-if="edit"> <!-- or v-show ? -->
<nav class="columns is-mobile">
<div class="column">
<NumberInput v-model="edit_value"></NumberInput>
</div>
<div class="column is-2">
<button class="button is-outlined is-fullwidth is-danger"
@click="updateWealth('minus')">
<span class="icon"><i class="fas fa-2x fa-minus"></i></span>
</div>
<template v-if="edit">
<div class="level-item">
<input type="number" step="0.01" v-model="edit_value"></input>
</div>
<div class="level-item">
<button class="button is-danger" @click="updateWealth()">
Modifier
</button>
</div>
<div class="column is-2">
<button class="button is-outlined is-primary is-fullwidth"
@click="updateWealth('plus')">
<span class="icon"><i class="fas fa-2x fa-plus"></i></span>
</button>
</div>
</nav>
</div>
</template>
<template v-else>
<div class="level-item ">
<p class="is-size-4">{{ wealth[3] }}</p>
<p class="heading">PP</p>
</div>
<div class="level-item ">
<p class="is-size-4">{{ wealth[2] }}</p>
<p class="heading">PO</p>
</div>
<div class="level-item ">
<p class="is-size-4">{{ wealth[1] }}</p>
<p class="heading">PA</p>
</div>
<div class="level-item ">
<p class="is-size-4">{{ wealth[0] }}</p>
<p class="heading">PC</p>
</div>
</template>
</div>
</div>
<div class="level-right" v-if="debt">
<div class="level-item">
<p class="heading is-size-4 has-text-danger">Dette: {{ debt }}gp </p>
</div>
</div>
</div>
</section>
</template>
<script>
import { AppStorage } from '../AppStorage.js'
import NumberInput from './NumberInput.vue'
export default {
components: { NumberInput },
props: ["wealth", "debt"],
data () {
return {
@@ -60,28 +56,9 @@
};
},
methods: {
updateWealth (op) {
var goldValue;
switch (op) {
case 'plus':
goldValue = this.edit_value;
break;
case 'minus':
goldValue = -this.edit_value;
break;
default:
console.log("Error, bad operator !", op);
return;
}
AppStorage.updatePlayerWealth(goldValue)
.then(done => {
if (done) {
this.$emit('updated');
this.resetValues();
} else {
console.log('correct errors');
}
});
updateWealth () {
AppStorage.updatePlayerWealth(this.edit_value)
.then(_ => this.resetValues());
},
resetValues () {
this.edit = false;