98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<template>
|
|
<section class="level is-mobile">
|
|
<div class="level-left">
|
|
<div class="level-item">
|
|
<span class="icon is-large" @click="editing = !editing">
|
|
<i class="fas fa-2x fa-piggy-bank"></i>
|
|
</span>
|
|
</div>
|
|
<template v-if="editing">
|
|
<div class="level-item">
|
|
<div class="field has-addons">
|
|
<p class="control">
|
|
<input class="input" type="number" step="0.01" v-model="edit_value"></input>
|
|
</p>
|
|
<p class="control">
|
|
<a class="button is-static">po</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="level-item">
|
|
<button class="button is-danger" @click="updateWealth()">
|
|
Modifier
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="level-item ">
|
|
<p class="is-size-4">{{ pp }}</p>
|
|
<p class="heading">PP</p>
|
|
</div>
|
|
<div class="level-item ">
|
|
<p class="is-size-4">{{ gp }}</p>
|
|
<p class="heading">PO</p>
|
|
</div>
|
|
<div class="level-item ">
|
|
<p class="is-size-4 has-text-grey-light">{{ sp }}</p>
|
|
<p class="heading">PA</p>
|
|
</div>
|
|
<div class="level-item ">
|
|
<p class="is-size-4 has-text-grey-light">{{ cp }}</p>
|
|
<p class="heading">PC</p>
|
|
</div>
|
|
</template>
|
|
</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>
|
|
export default {
|
|
props: ["wealth", "debt"],
|
|
data () {
|
|
return {
|
|
editing: false,
|
|
edit_value: 0,
|
|
};
|
|
},
|
|
methods: {
|
|
updateWealth () {
|
|
this.$emit("update", this.edit_value);
|
|
this.resetValues();
|
|
},
|
|
resetValues () {
|
|
this.editing = false;
|
|
this.edit_value = 0;
|
|
}
|
|
},
|
|
computed: {
|
|
pp () {
|
|
return this.wealth[3];
|
|
},
|
|
gp () {
|
|
const gp = this.wealth[2];
|
|
if (gp < 10) {
|
|
return "0" + gp;
|
|
} else {
|
|
return gp;
|
|
}
|
|
},
|
|
sp () {
|
|
return this.wealth[1];
|
|
},
|
|
cp () {
|
|
return this.wealth[0];
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.input { max-width: 9em; }
|
|
</style>
|