CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: lockable sliders (#412)

Browse Source 
* fix: replace tab characters by spaces

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: replace tab characters by spaces

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* feature: add lockable sliders

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* feat: add lockable sliders

feat: add auto-lock sliders

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* locale: add EN locale for LockSlider and AutoLockSlider features.

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: rename autoLockSliders to lockSliders

refactor: include startLockTimer method in sendCmd method

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: refactor startLockTimer method

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: lockSlidersChanged Watcher

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: remove helper, use new isTouchDevice BaseMixin method instead

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* feat: add lockable sliders to miscellaneous sliders

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: every interaction with the slider resets timeout correctly

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: fix typo

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: remove unused import

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: remove unused import

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: replace tabs with spaces

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* chore: replace tabs with spaces / remove trailing newlines

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: rename name/value pairs to a more appropriate name

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor(locale): update EN locale file

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* fix: get/set correct store name

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: use "Delay" instead of "Timeout"

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor(locale): update EN locale file

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor(locale): update DE locale file

Signed-off-by: Dominik Willner <th33xitus@gmail.com>

* refactor: rename menuStyle to navigationStyle

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
This commit is contained in:
th33xitus 2021-11-17 21:03:57 +01:00 committed by GitHub
parent de673810c3
commit 6b8f56985a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 3578 additions and 3197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/TheSidebar.vue
View File

@ -30,7 +30,7 @@
</style>
<template>
<v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(menuStyle === 'iconsOnly')" :key="menuStyle" width="220px" clipped app>
<v-navigation-drawer v-model="naviDrawer" :src="sidebarBackground" :mini-variant="(navigationStyle === 'iconsOnly')" :key="navigationStyle" width="220px" clipped app>
<v-list class="pr-0 pt-0 ml-0">
<v-list-item-group active-class="active-nav-item">
<template v-if="countPrinters">
@ -99,8 +99,8 @@ export default class TheSidebarAlt extends Mixins(BaseMixin) {
this.$store.dispatch('setNaviDrawer', newVal)
}
get menuStyle() {
return this.$store.state.gui.dashboard.menuStyle
get navigationStyle() {
return this.$store.state.gui.dashboard.navigationStyle
}
get sidebarBackground(): string {

82
src/components/inputs/MiscellaneousSlider.vue
View File

@ -9,29 +9,54 @@
<v-row>
<v-col :class="pwm ? 'pb-1' : 'pb-3'">
<v-subheader class="_fan-slider-subheader">
<v-icon small :class="'mr-2 '+(value >= off_below && value > 0 ? 'icon-rotate' : '')" v-if="type !== 'output_pin'">mdi-fan</v-icon>
<v-btn
v-if="canLock && lockSliders && this.isTouchDevice && controllable"
@click="sliderIsLocked = !sliderIsLocked"
plain
small
icon
>
<v-icon small :color="(sliderIsLocked ? 'red' : '')">
{{ sliderIsLocked ? 'mdi-lock-outline' : 'mdi-lock-open-variant-outline' }}
</v-icon>
</v-btn>
<v-icon
small
:class="'mr-2 '+(value >= off_below && value > 0 ? 'icon-rotate' : '')"
v-if="type !== 'output_pin'"
>
mdi-fan
</v-icon>
<span>{{ convertName(name) }}</span>
<v-spacer></v-spacer>
<small v-if="rpm || rpm === 0" :class="'mr-3 ' + (rpm === 0 && value > 0 ? 'red--text' : '')">{{ Math.round(rpm) }} RPM</small>
<span class="font-weight-bold" v-if="!controllable || (controllable && pwm)">{{ Math.round(parseFloat(value)*100) }} %</span>
<v-icon v-if="controllable && !pwm" @click="switchOutputPin">{{ value ? "mdi-toggle-switch" : "mdi-toggle-switch-off-outline" }}</v-icon>
<small v-if="rpm || rpm === 0" :class="'mr-3 ' + (rpm === 0 && value > 0 ? 'red--text' : '')">
{{ Math.round(rpm) }} RPM
</small>
<span class="font-weight-bold" v-if="!controllable || (controllable && pwm)">
{{ Math.round(parseFloat(value)*100) }} %
</span>
<v-icon v-if="controllable && !pwm" @click="switchOutputPin">
{{ value ? "mdi-toggle-switch" : "mdi-toggle-switch-off-outline" }}
</v-icon>
</v-subheader>
<v-card-text class="py-0" v-if="controllable && pwm">
<v-slider
v-model="value"
v-touch="{start: resetLockTimer}"
:disabled="canLock && sliderIsLocked"
:min="0.0"
:max="1.0"
:step="0.01"
:color="value < off_below && value > 0 ? 'red' : undefined"
@change="changeSlicer()"
@change="changeSlider"
hide-details
>
<template v-slot:prepend>
<v-icon @click="decrement">mdi-minus</v-icon>
<v-icon @click="decrement" :disabled="canLock && sliderIsLocked">mdi-minus</v-icon>
</template>
<template v-slot:append>
<v-icon @click="increment">mdi-plus</v-icon>
<v-icon @click="increment" :disabled="canLock && sliderIsLocked">mdi-plus</v-icon>
</template>
</v-slider>
</v-card-text>
@ -50,9 +75,12 @@ import {Debounce} from 'vue-debounce-decorator'
@Component
export default class MiscellaneousSlider extends Mixins(BaseMixin) {
convertName = convertName
private timeout: number | undefined
private min = 0
private value = 0
@Prop({ required: true }) readonly sliderName!: string
@Prop({ type: Boolean, default: true, required: true }) readonly canLock!: string
@Prop({ type: Number, required: true }) target!: number
@Prop({ type: Number, default: 1 }) max!: number
@Prop({ type: String, default: '' }) name!: string
@ -63,8 +91,44 @@ export default class MiscellaneousSlider extends Mixins(BaseMixin) {
@Prop({ type: Number, default: 1 }) multi!: number
@Prop({ type: Number, default: 0 }) off_below!: number
@Watch('lockSliders', {immediate: true})
lockSlidersChanged(){
if(this.lockSliders && this.isTouchDevice){
this.sliderIsLocked = true
} else {
this.sliderIsLocked = false
}
}
startLockTimer() {
let t = this.lockSlidersDelay
if (!this.isTouchDevice || !this.lockSliders || (t <= 0)) return
this.timeout = setTimeout(() => this.sliderIsLocked = true, t * 1000)
}
resetLockTimer() {
clearTimeout(this.timeout)
}
get lockSliders() {
return this.$store.state.gui.general.lockSlidersOnTouchDevices
}
get lockSlidersDelay() {
return this.$store.state.gui.general.lockSlidersDelay
}
get sliderIsLocked() {
return this.$store.getters['gui/getLockedSliders'](this.sliderName)
}
set sliderIsLocked(newVal) {
if (!this.controllable) return
this.$store.dispatch('gui/saveSliderLockState', { name: this.sliderName, value: newVal })
}
@Debounce(500)
changeSlicer() {
changeSlider() {
this.sendCmd()
}
@ -84,6 +148,8 @@ export default class MiscellaneousSlider extends Mixins(BaseMixin) {
this.$store.dispatch('server/addEvent', {message: gcode, type: 'command'})
this.$socket.emit('printer.gcode.script', {script: gcode})
}
this.startLockTimer()
}
switchOutputPin() {

58
src/components/inputs/ToolSlider.vue
View File

@ -9,12 +9,24 @@
<v-row>
<v-col class="pb-1 pt-3">
<v-subheader class="_tool-slider-subheader">
<v-btn
v-if="canLock && lockSliders && isTouchDevice"
@click="sliderIsLocked = !sliderIsLocked"
plain
small
icon
>
<v-icon small :color="(sliderIsLocked ? 'red' : '')">
{{ sliderIsLocked ? 'mdi-lock-outline' : 'mdi-lock-open-variant-outline' }}
</v-icon>
</v-btn>
<span>{{ label }}</span>
<v-btn
v-if="value !== defaultValue"
class="ml-2"
x-small
icon
:disabled="canLock && sliderIsLocked"
@click="resetSlider"
>
<v-icon>mdi-restart</v-icon>
@ -27,6 +39,8 @@
<v-card-text class="py-0">
<v-slider
v-model="value"
v-touch="{start: resetLockTimer}"
:disabled="canLock && sliderIsLocked"
:min="min"
:max="processedMax"
:color="colorBar"
@ -34,11 +48,11 @@
hide-details>
<template v-slot:prepend>
<v-icon @click="decrement">mdi-minus</v-icon>
<v-icon @click="decrement" :disabled="canLock && sliderIsLocked">mdi-minus</v-icon>
</template>
<template v-slot:append>
<v-icon @click="increment">mdi-plus</v-icon>
<v-icon @click="increment" :disabled="canLock && sliderIsLocked">mdi-plus</v-icon>
</template>
</v-slider>
</v-card-text>
@ -55,11 +69,14 @@ import {Debounce} from 'vue-debounce-decorator'
@Component
export default class ToolSlider extends Mixins(BaseMixin) {
private timeout: number | undefined
value = 0
startValue = 0
processedMax = 100
dynamicStep = 50
@Prop({ required: true }) readonly sliderName!: string
@Prop({ type: Boolean, default: true, required: true }) readonly canLock!: string
@Prop({ type: Number, required: true }) readonly target!: number
@Prop({ type: String, required: true }) readonly command!: string
@Prop({ type: String, default: '' }) readonly attributeName!: string
@ -83,6 +100,41 @@ export default class ToolSlider extends Mixins(BaseMixin) {
}
}
@Watch('lockSliders', {immediate: true})
lockSlidersChanged(){
if(this.lockSliders && this.isTouchDevice){
this.sliderIsLocked = true
} else {
this.sliderIsLocked = false
}
}
startLockTimer() {
let t = this.lockSlidersDelay
if (!this.isTouchDevice || !this.lockSliders || (t <= 0)) return
this.timeout = setTimeout(() => this.sliderIsLocked = true, t * 1000)
}
resetLockTimer() {
clearTimeout(this.timeout)
}
get lockSliders() {
return this.$store.state.gui.general.lockSlidersOnTouchDevices
}
get lockSlidersDelay() {
return this.$store.state.gui.general.lockSlidersDelay
}
get sliderIsLocked() {
return this.$store.getters['gui/getLockedSliders'](this.sliderName)
}
set sliderIsLocked(newVal) {
this.$store.dispatch('gui/saveSliderLockState', { name: this.sliderName, value: newVal })
}
get colorBar() {
return this.max < this.value ? 'warning' : 'primary'
}
@ -126,6 +178,8 @@ export default class ToolSlider extends Mixins(BaseMixin) {
const gcode = this.command + ' ' + this.attributeName + (Math.max(1, this.value) * this.attributeScale).toFixed(0)
this.$store.dispatch('server/addEvent', {message: gcode, type: 'command'})
this.$socket.emit('printer.gcode.script', {script: gcode})
this.startLockTimer()
}
decrement() {

2
src/components/panels/MiscellaneousPanel.vue
View File

@ -13,6 +13,7 @@
<div v-for="(object, index) of miscellaneous" v-bind:key="index">
<v-divider v-if="index"></v-divider>
<miscellaneous-slider
:slider-name="object.name"
:name="object.name"
:type="object.type"
:target="object.power"
@ -22,6 +23,7 @@
:off_below="object.off_below"
:max="object.max_power"
:multi="parseInt(object.scale)"
:can-lock="true"
></miscellaneous-slider>
</div>
<div v-for="(sensor, index) of filamentSensors" v-bind:key="'sensor_'+index">

25
src/components/panels/PrintsettingsPanel.vue
View File

@ -10,10 +10,31 @@
:collapsible="true"
card-class="printsettings-panel"
>
<tool-slider :label="$t('Panels.PrintsettingsPanel.SpeedFactor')" :target="speed_factor" :max="200" :multi="100" :step="5" :dynamic-range="true" command="M220" attribute-name="S" ></tool-slider>
<tool-slider
slider-name="speed-factor"
:label="$t('Panels.PrintsettingsPanel.SpeedFactor')"
:target="speed_factor"
:max="200"
:multi="100"
:step="5"
:dynamic-range="true"
:can-lock="true"
command="M220"
attribute-name="S">
</tool-slider>
<template v-if="existsExtruder">
<v-divider></v-divider>
<tool-slider :label="$t('Panels.PrintsettingsPanel.ExtrusionFactor')" :target="extrude_factor" :max="200" :multi="100" :step="1" command="M221" attribute-name="S" ></tool-slider>
<tool-slider
slider-name="extrusion-factor"
:label="$t('Panels.PrintsettingsPanel.ExtrusionFactor')"
:target="extrude_factor"
:max="200"
:multi="100"
:step="1"
:can-lock="true"
command="M221"
attribute-name="S">
</tool-slider>
</template>
</panel>
</template>

62
src/components/settings/SettingsUiSettingsTab.vue
View File

@ -52,6 +52,30 @@
<v-switch v-model="displayZOffsetStandby" hide-details class="mt-0"></v-switch>
</settings-row>
<v-divider class="my-2"></v-divider>
<settings-row :title="$t('Settings.UiSettingsTab.LockSliders')" :sub-title="$t('Settings.UiSettingsTab.LockSlidersDescription')" :dynamicSlotWidth="true">
<v-switch v-model="lockSliders" hide-details class="mt-0"></v-switch>
</settings-row>
<v-divider class="my-2"></v-divider>
<v-expand-transition>
<settings-row v-show="lockSliders" :title="$t('Settings.UiSettingsTab.LockSlidersDelay')" :sub-title="$t('Settings.UiSettingsTab.LockSlidersDelayDescription')" :dynamicSlotWidth="true">
<v-text-field
class="mt-0"
prepend-icon="mdi-timer-outline"
:style="isMobile ? { 'max-width': '140px' } : {}"
v-model="lockSlidersDelay"
label="Timeout"
type="number"
:rules="[t => t >= 0]"
min="0"
step="0.5"
suffix="s"
hide-details
outlined
dense
></v-text-field>
</settings-row>
</v-expand-transition>
<v-divider v-show="lockSliders" class="my-2"></v-divider>
<settings-row :title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStop')" :sub-title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStopDescription')" :dynamicSlotWidth="true">
<v-switch v-model="confirmOnEmergencyStop" hide-details class="mt-0"></v-switch>
</settings-row>
@ -60,8 +84,8 @@
<v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
</settings-row>
<v-divider class="my-2"></v-divider>
<settings-row :title="$t('Settings.UiSettingsTab.MenuStyle')" :sub-title="$t('Settings.UiSettingsTab.MenuStyleDescription')">
<v-select v-model="menuStyleSetting" :items="menuStyles" outlined dense hide-details class="mt-0"></v-select>
<settings-row :title="$t('Settings.UiSettingsTab.NavigationStyle')" :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription')">
<v-select v-model="navigationStyleSetting" :items="navigationStyles" outlined dense hide-details class="mt-0"></v-select>
</settings-row>
<v-divider class="my-2"></v-divider>
<settings-row :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')" :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')" :dynamicSlotWidth="true">
@ -153,22 +177,42 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
this.$store.dispatch('gui/saveSetting', {name: 'general.confirmOnPowerDeviceChange', value: newVal })
}
get menuStyleSetting() {
return this.$store.state.gui.dashboard.menuStyle
get lockSliders() {
return this.$store.state.gui.general.lockSlidersOnTouchDevices
}
set menuStyleSetting(newVal) {
this.$store.dispatch('gui/saveSetting', {name: 'dashboard.menuStyle', value: newVal })
set lockSliders(newVal) {
this.$store.dispatch('gui/saveSetting', {name: 'general.lockSlidersOnTouchDevices', value: newVal})
}
get menuStyles() {
get lockSlidersDelay() {
return this.$store.state.gui.general.lockSlidersDelay
}
set lockSlidersDelay(newVal) {
(newVal >= 0) ? this.$store.dispatch('gui/saveSetting', {name: 'general.lockSlidersDelay', value: newVal}) : {}
}
get boolWideNavDrawer() {
return this.$store.state.gui.dashboard.boolWideNavDrawer ?? false
}
get navigationStyleSetting() {
return this.$store.state.gui.dashboard.navigationStyle
}
set navigationStyleSetting(newVal) {
this.$store.dispatch('gui/saveSetting', {name: 'dashboard.navigationStyle', value: newVal })
}
get navigationStyles() {
return [
{
text: this.$t('Settings.UiSettingsTab.MenuStyleIconsOnly'),
text: this.$t('Settings.UiSettingsTab.NavigationStyleIconsOnly'),
value: 'iconsOnly'
},
{
text: this.$t('Settings.UiSettingsTab.MenuStyleIconsAndText'),
text: this.$t('Settings.UiSettingsTab.NavigationStyleIconsAndText'),
value: 'iconsAndText'
}
]

1304
src/locales/de.json
View File

File diff suppressed because it is too large Load Diff

1460
src/locales/en.json
View File

File diff suppressed because it is too large Load Diff

1204
src/locales/it.json
View File

File diff suppressed because it is too large Load Diff

1204
src/locales/nl.json
View File

File diff suppressed because it is too large Load Diff

1150
src/locales/zh.json
View File

File diff suppressed because it is too large Load Diff

19
src/store/gui/actions.ts
View File

@ -3,7 +3,6 @@ import {ActionTree} from 'vuex'
import {GuiState} from '@/store/gui/types'
import {RootState} from '@/store/types'
import { getDefaultState } from './index'
import {v4 as uuid} from 'uuid'
export const actions: ActionTree<GuiState, RootState> = {
reset({ commit }) {
@ -128,9 +127,9 @@ export const actions: ActionTree<GuiState, RootState> = {
let newState = payload.newVal
if (
'value' in payload &&
keyName in payload.value &&
typeof payload.value[keyName] !== 'string' &&
!Array.isArray(payload.value[keyName])
keyName in payload.value &&
typeof payload.value[keyName] !== 'string' &&
!Array.isArray(payload.value[keyName])
) newState = Object.assign(payload.value[keyName], {...newState})
Vue.$socket.emit('server.database.post_item', { namespace: 'mainsail', key: keyName, value: newState })
@ -238,7 +237,7 @@ export const actions: ActionTree<GuiState, RootState> = {
resetLayout({ dispatch }, name) {
const defaultState = getDefaultState()
// eslint-disable-next-line
const newVal: any = defaultState.dashboard[name] ?? []
const newVal: any = defaultState.dashboard[name] ?? []
dispatch('saveSetting', {
name: 'dashboard.'+name,
@ -246,6 +245,16 @@ export const actions: ActionTree<GuiState, RootState> = {
})
},
saveSliderLockState({ commit, dispatch, state }, payload) {
if (!payload.value) commit('removeFromLockedSliders', {name: payload.name})
else commit('addToLockedSliders', { name: payload.name })
dispatch('updateSettings', {
keyName: 'dashboard.lockedSliders',
newVal: state.dashboard.lockedSliders
})
},
toggleHideUploadAndPrintBtn({commit, dispatch, state}, payload) {
commit('toggleHideUploadAndPrintBtn', payload)
dispatch('updateSettings', {

11
src/store/gui/getters.ts
View File

@ -1,4 +1,3 @@
import {caseInsensitiveSort} from '@/plugins/helpers'
import {GetterTree} from 'vuex'
import {GuiState} from '@/store/gui/types'
import {GuiMacrogroupsStateMacrogroup} from '@/store/gui/macrogroups/types'
@ -9,7 +8,7 @@ export const getters: GetterTree<GuiState, any> = {
getDatasetValue: (state) => (payload: { name: string, type: string }) => {
if (
payload.name in state.tempchart.datasetSettings &&
payload.type in state.tempchart.datasetSettings[payload.name]
payload.type in state.tempchart.datasetSettings[payload.name]
) return state.tempchart.datasetSettings[payload.name][payload.type]
return ['temperature', 'target'].includes(payload.type)
@ -18,8 +17,8 @@ export const getters: GetterTree<GuiState, any> = {
getDatasetAdditionalSensorValue: (state) => (payload: { name: string, sensor: string }) => {
if (
payload.name in state.tempchart.datasetSettings &&
'additionalSensors' in state.tempchart.datasetSettings[payload.name] &&
payload.sensor in state.tempchart.datasetSettings[payload.name].additionalSensors
'additionalSensors' in state.tempchart.datasetSettings[payload.name] &&
payload.sensor in state.tempchart.datasetSettings[payload.name].additionalSensors
) return state.tempchart.datasetSettings[payload.name].additionalSensors[payload.sensor]
return true
@ -51,5 +50,9 @@ export const getters: GetterTree<GuiState, any> = {
}
return panels
},
getLockedSliders: (state) => (name: string) => {
return state.dashboard.lockedSliders?.includes(name) ?? false
}
}

5
src/store/gui/index.ts
View File

@ -19,6 +19,8 @@ export const getDefaultState = (): GuiState => {
language: 'en',
displayCancelPrint: false,
displayZOffsetStandby: false,
lockSlidersOnTouchDevices: true,
lockSlidersDelay: 1.5,
confirmOnEmergencyStop: false,
confirmOnPowerDeviceChange: false,
calcEstimateTime: ['file', 'filament'],
@ -32,10 +34,11 @@ export const getDefaultState = (): GuiState => {
boolTempchart: true,
boolBigThumbnail: true,
boolWideNavDrawer: false,
menuStyle: 'iconsOnly',
navigationStyle: 'iconsOnly',
macroManagement: 'simple',
hiddenMacros: [],
hiddenTempChart: [],
lockedSliders: [],
control: {
style: 'bars',
feedrateXY: 100,

21
src/store/gui/mutations.ts
View File

@ -10,7 +10,7 @@ export const mutations: MutationTree<GuiState> = {
setData(state, payload) {
// eslint-disable-next-line
const setDataDeep = (currentState: any, payload: any) => {
const setDataDeep = (currentState: any, payload: any) => {
if (typeof payload === 'object') {
Object.keys(payload).forEach((key: string) => {
const value = payload[key]
@ -103,6 +103,25 @@ export const mutations: MutationTree<GuiState> = {
Vue.set(state.dashboard, payload.layoutname, layoutArray)
},
addToLockedSliders(state, payload){
const lockedSliders = [...state.dashboard.lockedSliders]
if (!lockedSliders.includes(payload.name)) {
lockedSliders.push(payload.name)
Vue.set(state.dashboard, 'lockedSliders', lockedSliders)
}
},
removeFromLockedSliders(state, payload){
const lockedSliders = [...state.dashboard.lockedSliders]
const index = lockedSliders.indexOf(payload.name)
if (index > -1) {
lockedSliders.splice(index, 1)
Vue.set(state.dashboard, 'lockedSliders', lockedSliders)
}
},
toggleHideUploadAndPrintBtn(state, payload) {
Vue.set(state.dashboard, 'boolHideUploadAndPrintButton', payload)
}