remove restore-modal and replace it with the finished fix values setting
This commit is contained in:
negue
@@ -1,208 +0,0 @@
|
||||
<template>
|
||||
<b-modal
|
||||
id="restore"
|
||||
:title="$t('fixValues')"
|
||||
:hide-footer="true"
|
||||
size="lg"
|
||||
>
|
||||
<p>{{ $t('fixValuesText1') }}</p>
|
||||
<p>{{ $t('fixValuesText2') }}</p>
|
||||
<div class="form-horizontal">
|
||||
<h3>{{ $t('stats') }}</h3>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('health') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.hp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.hp"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('experience') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.exp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.exp"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('gold') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.gp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.gp"
|
||||
>
|
||||
</div>
|
||||
<!--input.form-control(type='number',
|
||||
step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('mana') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.mp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.mp"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('level') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.lvl"
|
||||
class="form-control"
|
||||
type="number"
|
||||
data-for="stats.lvl"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<h3>{{ $t('achievements') }}</h3>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('fix21Streaks') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.achievements.streak"
|
||||
class="form-control"
|
||||
type="number"
|
||||
data-for="achievements.streak"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
class="btn btn-danger"
|
||||
@click="close()"
|
||||
>
|
||||
{{ $t('discardChanges') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="restore()"
|
||||
>
|
||||
{{ $t('saveAndClose') }}
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import clone from 'lodash/clone';
|
||||
import { MAX_LEVEL_HARD_CAP } from '@/../../common/script/constants';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
restoreValues: {
|
||||
stats: {
|
||||
hp: 0,
|
||||
mp: 0,
|
||||
gp: 0,
|
||||
exp: 0,
|
||||
lvl: 0,
|
||||
},
|
||||
achievements: {
|
||||
streak: 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data' }),
|
||||
},
|
||||
mounted () {
|
||||
this.restoreValues.stats = clone(this.user.stats);
|
||||
this.restoreValues.achievements.streak = clone(this.user.achievements.streak);
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.validateInputs();
|
||||
this.$root.$emit('bv::hide::modal', 'restore');
|
||||
},
|
||||
restore () {
|
||||
if (!this.validateInputs()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.restoreValues.stats.lvl > MAX_LEVEL_HARD_CAP) {
|
||||
this.restoreValues.stats.lvl = MAX_LEVEL_HARD_CAP;
|
||||
}
|
||||
|
||||
const userChangedLevel = this.restoreValues.stats.lvl !== this.user.stats.lvl;
|
||||
const userDidNotChangeExp = this.restoreValues.stats.exp === this.user.stats.exp;
|
||||
if (userChangedLevel && userDidNotChangeExp) this.restoreValues.stats.exp = 0;
|
||||
|
||||
this.user.stats = clone(this.restoreValues.stats);
|
||||
this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
|
||||
|
||||
const settings = {
|
||||
'stats.hp': Number(this.restoreValues.stats.hp),
|
||||
'stats.exp': Number(this.restoreValues.stats.exp),
|
||||
'stats.gp': Number(this.restoreValues.stats.gp),
|
||||
'stats.lvl': Number(this.restoreValues.stats.lvl),
|
||||
'stats.mp': Number(this.restoreValues.stats.mp),
|
||||
'achievements.streak': Number(this.restoreValues.achievements.streak),
|
||||
};
|
||||
|
||||
this.$store.dispatch('user:set', settings);
|
||||
this.$root.$emit('bv::hide::modal', 'restore');
|
||||
},
|
||||
validateInputs () {
|
||||
const canRestore = ['hp', 'exp', 'gp', 'mp'];
|
||||
let valid = true;
|
||||
|
||||
for (const stat of canRestore) {
|
||||
if (this.restoreValues.stats[stat] === '') {
|
||||
this.restoreValues.stats[stat] = this.user.stats[stat];
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
|
||||
const inputLevel = Number(this.restoreValues.stats.lvl);
|
||||
if (this.restoreValues.stats.lvl === ''
|
||||
|| !Number.isInteger(inputLevel)
|
||||
|| inputLevel < 1) {
|
||||
this.restoreValues.stats.lvl = this.user.stats.lvl;
|
||||
valid = false;
|
||||
}
|
||||
|
||||
const inputStreak = Number(this.restoreValues.achievements.streak);
|
||||
if (this.restoreValues.achievements.streak === ''
|
||||
|| !Number.isInteger(inputStreak)
|
||||
|| inputStreak < 0) {
|
||||
this.restoreValues.achievements.streak = this.user.achievements.streak;
|
||||
valid = false;
|
||||
}
|
||||
|
||||
return valid;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="row standard-page">
|
||||
<restore-modal />
|
||||
<reset-modal />
|
||||
<delete-modal />
|
||||
<h1 class="col-12">
|
||||
@@ -59,16 +58,6 @@
|
||||
>{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn btn-primary mr-2 mb-2"
|
||||
popover-trigger="mouseenter"
|
||||
popover-placement="right"
|
||||
:popover="$t('fixValPop')"
|
||||
@click="openRestoreModal()"
|
||||
>
|
||||
{{ $t('fixVal') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
@@ -256,17 +245,14 @@
|
||||
import hello from 'hellojs';
|
||||
import axios from 'axios';
|
||||
import { mapState } from '@/libs/store';
|
||||
import restoreModal from './restoreModal';
|
||||
import resetModal from './resetModal';
|
||||
import deleteModal from './deleteModal';
|
||||
import { SUPPORTED_SOCIAL_NETWORKS } from '@/../../common/script/constants';
|
||||
import notificationsMixin from '../../mixins/notifications';
|
||||
import sounds from '../../libs/sounds';
|
||||
import { buildAppleAuthUrl } from '../../libs/auth';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
restoreModal,
|
||||
resetModal,
|
||||
deleteModal,
|
||||
},
|
||||
@@ -375,9 +361,6 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
openRestoreModal () {
|
||||
this.$root.$emit('bv::show::modal', 'restore');
|
||||
},
|
||||
openResetModal () {
|
||||
this.$root.$emit('bv::show::modal', 'reset');
|
||||
},
|
||||
@@ -407,14 +390,6 @@ export default {
|
||||
await axios.post('/api/v4/user/auth/local/register', this.localAuth);
|
||||
window.location.href = '/user/settings/site';
|
||||
},
|
||||
changeAudioTheme () {
|
||||
this.soundIndex = 0;
|
||||
this.set('sound');
|
||||
},
|
||||
playAudio () {
|
||||
this.$root.$emit('playSound', sounds[this.soundIndex]);
|
||||
this.soundIndex = (this.soundIndex + 1) % sounds.length;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -201,6 +201,8 @@ export default {
|
||||
window.alert(this.$t('displayNameSuccess')); // eslint-disable-line no-alert
|
||||
this.user.profile.name = newName;
|
||||
this.temporaryDisplayName = newName;
|
||||
|
||||
this.closeModal();
|
||||
},
|
||||
validateDisplayName: debounce(async function checkName (displayName) {
|
||||
if (displayName.length <= 1 || displayName === this.user.profile.name) {
|
||||
|
||||
@@ -40,132 +40,42 @@
|
||||
<br>
|
||||
<span v-html="$t('fixValuesText2')"></span>
|
||||
</div>
|
||||
"mana": "Mana",
|
||||
"hp": "HP",
|
||||
"mp": "MP",
|
||||
"xp": "XP",
|
||||
"health": "Health",
|
||||
<div class="fix-value-group">
|
||||
<span class="fix-label">
|
||||
{{ $t('health') }}
|
||||
</span>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend positive-addon input-group-icon">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon"
|
||||
v-html="icons.health"
|
||||
></div>
|
||||
</div>
|
||||
<input
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
required="required"
|
||||
|
||||
<div class="content-centered">
|
||||
<div class="input-rows row">
|
||||
<div
|
||||
v-for="input in inputList"
|
||||
:key="input.property"
|
||||
class="col-4"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-horizontal">
|
||||
<h3>{{ $t('stats') }}</h3>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('health') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.hp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.hp"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('experience') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.exp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.exp"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('gold') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.gp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.gp"
|
||||
>
|
||||
</div>
|
||||
<!--input.form-control(type='number',
|
||||
step="any", data-for='stats.gp', v-model='restoreValues.stats.gp',disabled)-->
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('mana') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.mp"
|
||||
class="form-control"
|
||||
type="number"
|
||||
step="any"
|
||||
data-for="stats.mp"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('level') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.stats.lvl"
|
||||
class="form-control"
|
||||
type="number"
|
||||
data-for="stats.lvl"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<h3>{{ $t('achievements') }}</h3>
|
||||
<div class="form-group row">
|
||||
<div class="col-sm-3">
|
||||
<label class="control-label">{{ $t('fix21Streaks') }}</label>
|
||||
</div>
|
||||
<div class="col-sm-9">
|
||||
<input
|
||||
v-model="restoreValues.achievements.streak"
|
||||
class="form-control"
|
||||
type="number"
|
||||
data-for="achievements.streak"
|
||||
>
|
||||
<div class="fix-value-group mt-3">
|
||||
<span class="fix-label">
|
||||
{{ $t(input.translationKey) }}
|
||||
</span>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend positive-addon input-group-icon">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon icon-16"
|
||||
v-html="input.icon"
|
||||
></div>
|
||||
</div>
|
||||
<input
|
||||
v-model="restoreValues[input.property]"
|
||||
class="form-control"
|
||||
type="number"
|
||||
min="0"
|
||||
required="required"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Health
|
||||
Exp
|
||||
Mana
|
||||
Gold
|
||||
Level
|
||||
21-Day-Streak
|
||||
TODO
|
||||
|
||||
<save-cancel-buttons
|
||||
:disable-save="inputsInvalid || true"
|
||||
@saveClicked="changePassword( passwordUpdates)"
|
||||
class="mt-4"
|
||||
@saveClicked="save()"
|
||||
@cancelClicked="requestCloseModal()"
|
||||
/>
|
||||
</td>
|
||||
@@ -181,10 +91,33 @@
|
||||
background: white;
|
||||
}
|
||||
|
||||
.input-rows {
|
||||
width: calc(370px + 1.5rem);
|
||||
}
|
||||
|
||||
.content-centered {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fix-label {
|
||||
font-weight: bold;
|
||||
line-height: 1.71;
|
||||
color: $gray-50;
|
||||
}
|
||||
|
||||
.svg-icon.icon-16 {
|
||||
width: 16px !important;
|
||||
height: 16px !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import clone from 'lodash/clone';
|
||||
// import clone from 'lodash/clone';
|
||||
import SaveCancelButtons from '../components/saveCancelButtons.vue';
|
||||
import { InlineSettingMixin } from '../components/inlineSettingMixin';
|
||||
import healthIcon from '@/assets/svg/health.svg';
|
||||
@@ -202,16 +135,12 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
restoreValues: {
|
||||
stats: {
|
||||
hp: 0,
|
||||
mp: 0,
|
||||
gp: 0,
|
||||
exp: 0,
|
||||
lvl: 0,
|
||||
},
|
||||
achievements: {
|
||||
streak: 0,
|
||||
},
|
||||
hp: 0,
|
||||
mp: 0,
|
||||
gp: 0,
|
||||
exp: 0,
|
||||
lvl: 0,
|
||||
streak: 0,
|
||||
},
|
||||
icons: Object.freeze({
|
||||
health: healthIcon,
|
||||
@@ -221,72 +150,110 @@ export default {
|
||||
level,
|
||||
streak: streakIcon,
|
||||
}),
|
||||
inputList: Object.freeze([
|
||||
{
|
||||
translationKey: 'health',
|
||||
icon: healthIcon,
|
||||
property: 'hp',
|
||||
},
|
||||
{
|
||||
translationKey: 'experience',
|
||||
icon: experienceIcon,
|
||||
property: 'exp',
|
||||
}, {
|
||||
translationKey: 'mana',
|
||||
icon: manaIcon,
|
||||
property: 'mp',
|
||||
}, {
|
||||
translationKey: 'gold',
|
||||
icon: svgGold,
|
||||
property: 'gp',
|
||||
},
|
||||
{
|
||||
translationKey: 'level',
|
||||
icon: level,
|
||||
property: 'lvl',
|
||||
},
|
||||
{
|
||||
translationKey: 'fix21Streaks',
|
||||
icon: streakIcon,
|
||||
property: 'streak',
|
||||
},
|
||||
]),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data' }),
|
||||
},
|
||||
mounted () {
|
||||
this.restoreValues.stats = clone(this.user.stats);
|
||||
this.restoreValues.achievements.streak = clone(this.user.achievements.streak);
|
||||
const {
|
||||
hp, mp, gp, exp, lvl,
|
||||
} = this.user.stats;
|
||||
|
||||
this.restoreValues = {
|
||||
hp, mp, gp, exp, lvl, streak: this.user.achievements.streak,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.validateInputs();
|
||||
this.$root.$emit('bv::hide::modal', 'restore');
|
||||
},
|
||||
restore () {
|
||||
save () {
|
||||
if (!this.validateInputs()) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.restoreValues.stats.lvl > MAX_LEVEL_HARD_CAP) {
|
||||
this.restoreValues.stats.lvl = MAX_LEVEL_HARD_CAP;
|
||||
if (this.restoreValues.lvl > MAX_LEVEL_HARD_CAP) {
|
||||
this.restoreValues.lvl = MAX_LEVEL_HARD_CAP;
|
||||
}
|
||||
|
||||
const userChangedLevel = this.restoreValues.stats.lvl !== this.user.stats.lvl;
|
||||
const userDidNotChangeExp = this.restoreValues.stats.exp === this.user.stats.exp;
|
||||
if (userChangedLevel && userDidNotChangeExp) this.restoreValues.stats.exp = 0;
|
||||
const userChangedLevel = this.restoreValues.lvl !== this.user.stats.lvl;
|
||||
const userDidNotChangeExp = this.restoreValues.exp === this.user.stats.exp;
|
||||
if (userChangedLevel && userDidNotChangeExp) {
|
||||
this.restoreValues.exp = 0;
|
||||
}
|
||||
|
||||
this.user.stats = clone(this.restoreValues.stats);
|
||||
this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
|
||||
// todo
|
||||
// this.user.stats = clone(this.restoreValues.stats);
|
||||
// this.user.achievements.streak = clone(this.restoreValues.achievements.streak);
|
||||
|
||||
const settings = {
|
||||
'stats.hp': Number(this.restoreValues.stats.hp),
|
||||
'stats.exp': Number(this.restoreValues.stats.exp),
|
||||
'stats.gp': Number(this.restoreValues.stats.gp),
|
||||
'stats.lvl': Number(this.restoreValues.stats.lvl),
|
||||
'stats.mp': Number(this.restoreValues.stats.mp),
|
||||
'achievements.streak': Number(this.restoreValues.achievements.streak),
|
||||
'stats.hp': Number(this.restoreValues.hp),
|
||||
'stats.exp': Number(this.restoreValues.exp),
|
||||
'stats.gp': Number(this.restoreValues.gp),
|
||||
'stats.lvl': Number(this.restoreValues.lvl),
|
||||
'stats.mp': Number(this.restoreValues.mp),
|
||||
'achievements.streak': Number(this.restoreValues.streak),
|
||||
};
|
||||
|
||||
this.$store.dispatch('user:set', settings);
|
||||
this.$root.$emit('bv::hide::modal', 'restore');
|
||||
|
||||
this.closeModal();
|
||||
},
|
||||
validateInputs () {
|
||||
const canRestore = ['hp', 'exp', 'gp', 'mp'];
|
||||
let valid = true;
|
||||
|
||||
for (const stat of canRestore) {
|
||||
if (this.restoreValues.stats[stat] === '') {
|
||||
this.restoreValues.stats[stat] = this.user.stats[stat];
|
||||
if (this.restoreValues[stat] === '') {
|
||||
this.restoreValues[stat] = this.user.stats[stat];
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
|
||||
const inputLevel = Number(this.restoreValues.stats.lvl);
|
||||
if (this.restoreValues.stats.lvl === ''
|
||||
|| !Number.isInteger(inputLevel)
|
||||
|| inputLevel < 1) {
|
||||
this.restoreValues.stats.lvl = this.user.stats.lvl;
|
||||
const inputLevel = Number(this.restoreValues.lvl);
|
||||
if (this.restoreValues.lvl === ''
|
||||
|| !Number.isInteger(inputLevel)
|
||||
|| inputLevel < 1) {
|
||||
this.restoreValues.lvl = this.user.stats.lvl;
|
||||
valid = false;
|
||||
}
|
||||
|
||||
const inputStreak = Number(this.restoreValues.achievements.streak);
|
||||
if (this.restoreValues.achievements.streak === ''
|
||||
|| !Number.isInteger(inputStreak)
|
||||
|| inputStreak < 0) {
|
||||
this.restoreValues.achievements.streak = this.user.achievements.streak;
|
||||
const inputStreak = Number(this.restoreValues.streak);
|
||||
if (this.restoreValues.streak === ''
|
||||
|| !Number.isInteger(inputStreak)
|
||||
|| inputStreak < 0) {
|
||||
this.restoreValues.streak = this.user.achievements.streak;
|
||||
valid = false;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user