refactor: use boolean for settings in store instead of string

This commit is contained in:
Valentin Kaelin 2019-11-30 21:59:27 +01:00
parent 1dae55db54
commit 9297c1ee06
3 changed files with 9 additions and 11 deletions

View file

@ -181,7 +181,7 @@ export default {
computed: { computed: {
statsFormat() { statsFormat() {
return this.percentSettings === 'true' ? 'percentStats' : 'stats' return this.percentSettings ? 'percentStats' : 'stats'
}, },
...mapState({ ...mapState({
percentSettings: state => state.settings.percent percentSettings: state => state.settings.percent

View file

@ -4,12 +4,11 @@
v-model="selected" v-model="selected"
id="toggle-on" id="toggle-on"
class="toggle toggle-left hidden" class="toggle toggle-left hidden"
name="toggle" :value="true"
value="true"
type="radio" type="radio"
/> />
<label <label
:class="{'selected-label': selected === 'true'}" :class="{'selected-label': selected}"
for="toggle-on" for="toggle-on"
class="inline-block py-1 rounded-l-full border-t-2 border-r border-b-2 border-l-2 border-teal-500 cursor-pointer" class="inline-block py-1 rounded-l-full border-t-2 border-r border-b-2 border-l-2 border-teal-500 cursor-pointer"
>%</label> >%</label>
@ -17,17 +16,16 @@
v-model="selected" v-model="selected"
id="toggle-off" id="toggle-off"
class="toggle toggle-right hidden" class="toggle toggle-right hidden"
name="toggle" :value="false"
value="false"
type="radio" type="radio"
/> />
<label <label
:class="{'selected-label': selected === 'false'}" :class="{'selected-label': !selected}"
for="toggle-off" for="toggle-off"
class="inline-block py-1 rounded-r-full border-t-2 border-r-2 border-b-2 border-l border-teal-500 cursor-pointer" class="inline-block py-1 rounded-r-full border-t-2 border-r-2 border-b-2 border-l border-teal-500 cursor-pointer"
>Total</label> >Total</label>
<div <div
:class="selected === 'true' ? 'left-checked' : 'right-checked'" :class="selected ? 'left-checked' : 'right-checked'"
class="selector absolute w-1/2 inset-0 bg-teal-500" class="selector absolute w-1/2 inset-0 bg-teal-500"
></div> ></div>
</div> </div>

View file

@ -1,7 +1,7 @@
export const namespaced = true export const namespaced = true
export const state = { export const state = {
percent: 'true' percent: false
} }
export const mutations = { export const mutations = {
@ -12,8 +12,8 @@ export const mutations = {
export const actions = { export const actions = {
async updatePercent({ commit }, percent) { async updatePercent({ commit }, percent) {
if (!percent) { if (typeof (percent) !== 'boolean') {
percent = localStorage.getItem('settings-percent') || 'true' percent = localStorage.getItem('settings-percent') === 'true'
} else { } else {
localStorage.setItem('settings-percent', percent) localStorage.setItem('settings-percent', percent)
} }