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

improves updateWealth error handling

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-13 16:06:00 +02:00
parent 2efed539fb
commit 6843fc92cf
1 changed files with 33 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<template>
<div>
<div class="box is-primary">
<span class="icon is-large">
<i class="fas fa-2x fa-piggy-bank"></i>
</span>
@@ -21,35 +21,34 @@
<p class="is-size-3">{{ wealth[3] }}</p>
</div>
</nav>
<nav v-show="edit" class="columns is-mobile">
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[0]"></input>
</div>
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[1]"></input>
</div>
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[2]"></input>
</div>
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[3]"></input>
<div v-if="edit"> <!-- or v-show ? -->
<nav class="columns is-1 is-variable is-mobile">
<template v-for="i in 4">
<div :key="`input-col-${i}`" class="column">
<input type="text" size="6" class="input"
:key="inputs_key"
:class="{'is-danger': form_errors[i - 1]}"
v-model.number="edit_values[i - 1]">
</input>
</div>
</template>
</nav>
<nav v-show="edit" class="columns is-mobile">
<div class="column is-3 is-offset-3">
<button class="button is-fullwidth is-danger"
<nav class="columns is-mobile">
<div class="column is-4 is-offset-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>
</button>
</div>
<div class="column is-3">
<button class="button is-primary is-fullwidth"
<div class="column is-4">
<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>
</div>
</template>
<script>
@@ -58,20 +57,28 @@
data () {
return {
edit_values: [0,0,0,0],
form_errors: [false,false,false,false],
inputs_key: 0, // Hack to re-render inputs
};
},
methods: {
updateWealth (op) {
const values = this.edit_values.map(Number);
console.log('updateWealth', op, values);
let success;
if (true) {
success = true;
}
const values = this.edit_values;
this.form_errors.fill(false); // Reset error status
values.forEach((v,i) => {
if (isNaN(v)) {
console.log("error with value", v);
this.form_errors[i] = true;
};
});
const success = !this.form_errors.includes(true);
if (success) {
console.log('updated', op, values);
this.$emit('updated');
this.edit_values.fill(0)
this.edit_values.fill(0) }
else {
console.log(this.form_errors);
this.inputs_key += 1;
}
}
}