556 lines
24 KiB
Vue
556 lines
24 KiB
Vue
<template>
|
|
<div>
|
|
<template v-if="boolFormEdit === false">
|
|
<v-card-text>
|
|
<h3 class="text-h5 mb-3">{{ $t('Settings.MacrosTab.Macrogroups') }}</h3>
|
|
<template v-if="groups.length">
|
|
<div v-for="(group, index) in groups" :key="index">
|
|
<v-divider v-if="index" class="my-2"></v-divider>
|
|
<settings-row
|
|
:title="group.name !== '' ? group.name : '<' + $t('Settings.MacrosTab.UnknownGroup') + '>'"
|
|
:sub-title="
|
|
$tc('Settings.MacrosTab.CountMacros', 'macros' in group ? group.macros.length : 0, {
|
|
count: 'macros' in group ? group.macros.length : 0,
|
|
})
|
|
"
|
|
:dynamic-slot-width="true">
|
|
<v-btn small outlined class="ml-3" @click="editMacrogroup(group)">
|
|
<v-icon left small>{{ mdiPencil }}</v-icon>
|
|
{{ $t('Settings.Edit') }}
|
|
</v-btn>
|
|
<v-btn
|
|
small
|
|
outlined
|
|
class="ml-3 minwidth-0 px-2"
|
|
color="error"
|
|
@click="deleteMacrogroup(group.id)">
|
|
<v-icon small>{{ mdiDelete }}</v-icon>
|
|
</v-btn>
|
|
</settings-row>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<v-row>
|
|
<v-col>
|
|
<p class="mb-0 text-center font-italic">{{ $t('Settings.MacrosTab.NoGroups') }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
</v-card-text>
|
|
<v-card-actions class="d-flex justify-end">
|
|
<v-btn text color="primary" @click="addGroup">{{ $t('Settings.MacrosTab.AddGroup') }}</v-btn>
|
|
</v-card-actions>
|
|
</template>
|
|
<template v-else-if="boolFormEdit">
|
|
<v-card-text>
|
|
<h3 class="text-h5 mb-3">{{ $t('Settings.MacrosTab.EditGroup') }}</h3>
|
|
<settings-row :title="$t('Settings.MacrosTab.Name')">
|
|
<v-text-field
|
|
v-model="editGroup.name"
|
|
hide-details="auto"
|
|
:rules="[rules.required, rules.groupUnique]"
|
|
dense
|
|
outlined
|
|
@change="updateGroupOptionName"></v-text-field>
|
|
</settings-row>
|
|
<v-divider class="my-2"></v-divider>
|
|
<settings-row :title="$t('Settings.MacrosTab.Color')">
|
|
<v-select
|
|
v-model="editGroup.color"
|
|
:items="groupColors"
|
|
outlined
|
|
dense
|
|
hide-details
|
|
attach
|
|
@change="updateGroupOptionColor"></v-select>
|
|
</settings-row>
|
|
<template v-if="editGroup.color === 'custom'">
|
|
<v-divider class="my-2"></v-divider>
|
|
<settings-row :title="$t('Settings.MacrosTab.CustomColor')">
|
|
<v-menu bottom left offset-y :close-on-content-click="false">
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
v-bind="attrs"
|
|
:color="editGroup.colorCustom"
|
|
class="minwidth-0 px-5"
|
|
small
|
|
v-on="on"></v-btn>
|
|
</template>
|
|
<v-color-picker
|
|
:value="editGroup.colorCustom"
|
|
hide-mode-switch
|
|
mode="rgba"
|
|
@update:color="updateGroupOptionColorCustom"></v-color-picker>
|
|
</v-menu>
|
|
</settings-row>
|
|
</template>
|
|
<v-divider class="my-2"></v-divider>
|
|
<settings-row :title="$t('Settings.MacrosTab.Status')">
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
:color="editGroup.showInStandby ? '' : 'secondary'"
|
|
v-on="on"
|
|
@click="updateGroupOptionShowInStandby(!editGroup.showInStandby)">
|
|
<v-icon small>{{ mdiSleep }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.ShowInStateStandby') }}</span>
|
|
</v-tooltip>
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
:color="editGroup.showInPause ? '' : 'secondary'"
|
|
v-on="on"
|
|
@click="updateGroupOptionShowInPause(!editGroup.showInPause)">
|
|
<v-icon small>{{ mdiPause }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.ShowInStatePaused') }}</span>
|
|
</v-tooltip>
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
:color="editGroup.showInPrinting ? '' : 'secondary'"
|
|
v-on="on"
|
|
@click="updateGroupOptionShowInPrinting(!editGroup.showInPrinting)">
|
|
<v-icon small>{{ mdiPrinter3dNozzle }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.ShowInStatePrinting') }}</span>
|
|
</v-tooltip>
|
|
</settings-row>
|
|
<v-divider class="my-2"></v-divider>
|
|
<h3 class="text-h5 mt-6 mb-3">{{ $t('Settings.MacrosTab.GroupMacros') }}</h3>
|
|
<template v-if="editGroup.macros && editGroup.macros.length">
|
|
<draggable
|
|
v-model="editGroupMacros"
|
|
handle=".handle"
|
|
ghost-class="ghost"
|
|
group="macros"
|
|
@change="updateMacroOrder">
|
|
<v-row
|
|
v-for="(macro, index) in editGroupMacros"
|
|
:key="macro.name"
|
|
class="dragable-item my-2 mx-0">
|
|
<v-col class="col-auto pr-0 d-flex py-2">
|
|
<v-icon class="handle">{{ mdiDragVertical }}</v-icon>
|
|
</v-col>
|
|
<v-col class="py-2">
|
|
<settings-row
|
|
:key="'groupMacro_macro_' + index"
|
|
:title="macro.name"
|
|
:sub-title="getMacroDescription(macro.name)"
|
|
:dynamic-slot-width="true">
|
|
<template v-if="existsMacro(macro.name)">
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
:color="macro.color"
|
|
v-on="on"
|
|
@click="changeColorMacroFromGroup(macro)">
|
|
<v-icon small left>{{ mdiPalette }}</v-icon>
|
|
{{ macro.color }}
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.ChangeMacroColor') }}</span>
|
|
</v-tooltip>
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
:color="macro.showInStandby ? '' : 'secondary'"
|
|
v-on="on"
|
|
@click="
|
|
updateMacroFromGroup(
|
|
macro,
|
|
'showInStandby',
|
|
!macro.showInStandby
|
|
)
|
|
">
|
|
<v-icon small>{{ mdiSleep }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.ShowInStateStandby') }}</span>
|
|
</v-tooltip>
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
:color="macro.showInPause ? '' : 'secondary'"
|
|
v-on="on"
|
|
@click="
|
|
updateMacroFromGroup(macro, 'showInPause', !macro.showInPause)
|
|
">
|
|
<v-icon small>{{ mdiPause }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.ShowInStatePaused') }}</span>
|
|
</v-tooltip>
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
:color="macro.showInPrinting ? '' : 'secondary'"
|
|
v-on="on"
|
|
@click="
|
|
updateMacroFromGroup(
|
|
macro,
|
|
'showInPrinting',
|
|
!macro.showInPrinting
|
|
)
|
|
">
|
|
<v-icon small>{{ mdiPrinter3dNozzle }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.ShowInStatePrinting') }}</span>
|
|
</v-tooltip>
|
|
</template>
|
|
<v-tooltip top>
|
|
<template #activator="{ on, attrs }">
|
|
<v-btn
|
|
small
|
|
outlined
|
|
v-bind="attrs"
|
|
class="ml-3 minwidth-0 px-2"
|
|
color="error"
|
|
v-on="on"
|
|
@click="removeMacroFromGroup(macro)">
|
|
<v-icon small>{{ mdiDelete }}</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<span>{{ $t('Settings.MacrosTab.DeleteMacroFromGroup') }}</span>
|
|
</v-tooltip>
|
|
</settings-row>
|
|
</v-col>
|
|
</v-row>
|
|
</draggable>
|
|
</template>
|
|
<template v-else>
|
|
<v-row>
|
|
<v-col>
|
|
<p class="mb-0 text-center font-italic">{{ $t('Settings.MacrosTab.NoMacrosInGroup') }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
<h3 class="text-h5 mt-6 mb-3">{{ $t('Settings.MacrosTab.AvailableMacros') }}</h3>
|
|
<template v-if="availableMacros.length">
|
|
<template v-for="(macro, index) in availableMacros">
|
|
<v-divider v-if="index" :key="'availableMacro_deliver_' + index" class="my-2"></v-divider>
|
|
<settings-row
|
|
:key="'availableMacro_macro_' + index"
|
|
:title="macro.name"
|
|
:sub-title="macro.description"
|
|
:dynamic-slot-width="true">
|
|
<v-btn small outlined class="ml-3" @click="addMacroToGroup(macro)">
|
|
<v-icon left small>{{ mdiPlus }}</v-icon>
|
|
{{ $t('Settings.MacrosTab.Add') }}
|
|
</v-btn>
|
|
</settings-row>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<v-row>
|
|
<v-col>
|
|
<p class="mb-0 text-center font-italic">{{ $t('Settings.MacrosTab.NoAvailableMacros') }}</p>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
</v-card-text>
|
|
<v-card-actions class="d-flex justify-end">
|
|
<v-btn text @click="cancelEditMacrogroup">{{ $t('Settings.Close') }}</v-btn>
|
|
</v-card-actions>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Mixins, Watch } from 'vue-property-decorator'
|
|
import BaseMixin from '../mixins/base'
|
|
import draggable from 'vuedraggable'
|
|
import SettingsRow from '@/components/settings/SettingsRow.vue'
|
|
import { Debounce } from 'vue-debounce-decorator'
|
|
import { PrinterStateMacro } from '@/store/printer/types'
|
|
import { GuiMacrosStateMacrogroup, GuiMacrosStateMacrogroupMacro } from '@/store/gui/macros/types'
|
|
import {
|
|
mdiDelete,
|
|
mdiSleep,
|
|
mdiPause,
|
|
mdiPrinter3dNozzle,
|
|
mdiPlus,
|
|
mdiDragVertical,
|
|
mdiPalette,
|
|
mdiPencil,
|
|
} from '@mdi/js'
|
|
|
|
@Component({
|
|
components: { SettingsRow, draggable },
|
|
})
|
|
export default class SettingsMacrosTabExpert extends Mixins(BaseMixin) {
|
|
/**
|
|
* Icons
|
|
*/
|
|
mdiPencil = mdiPencil
|
|
mdiDelete = mdiDelete
|
|
mdiSleep = mdiSleep
|
|
mdiPause = mdiPause
|
|
mdiPrinter3dNozzle = mdiPrinter3dNozzle
|
|
mdiPlus = mdiPlus
|
|
mdiDragVertical = mdiDragVertical
|
|
mdiPalette = mdiPalette
|
|
|
|
private rules = {
|
|
required: (value: string) => value !== '' || 'required',
|
|
groupUnique: (value: string) => !this.existsGroupName(value) || 'Name already exists',
|
|
}
|
|
|
|
private boolFormEdit = false
|
|
private editGroupId: string | null = ''
|
|
|
|
get groupColors() {
|
|
return [
|
|
{
|
|
text: this.$t('Settings.MacrosTab.Primary'),
|
|
value: 'primary',
|
|
},
|
|
{
|
|
text: this.$t('Settings.MacrosTab.Secondary'),
|
|
value: 'secondary',
|
|
},
|
|
{
|
|
text: this.$t('Settings.MacrosTab.Success'),
|
|
value: 'success',
|
|
},
|
|
{
|
|
text: this.$t('Settings.MacrosTab.Warning'),
|
|
value: 'warning',
|
|
},
|
|
{
|
|
text: this.$t('Settings.MacrosTab.Error'),
|
|
value: 'error',
|
|
},
|
|
{
|
|
text: this.$t('Settings.MacrosTab.Custom'),
|
|
value: 'custom',
|
|
},
|
|
]
|
|
}
|
|
|
|
get macroColors() {
|
|
const colors = [...this.groupColors]
|
|
const indexCustom = colors.findIndex((color) => color.value === 'custom')
|
|
if (indexCustom !== -1) colors.splice(indexCustom, 1)
|
|
|
|
colors.push({
|
|
text: this.$t('Settings.MacrosTab.Group'),
|
|
value: 'group',
|
|
})
|
|
|
|
return colors
|
|
}
|
|
|
|
get allMacros() {
|
|
return this.$store.getters['printer/getMacros'] ?? []
|
|
}
|
|
|
|
get availableMacros() {
|
|
return this.allMacros.filter((m: GuiMacrosStateMacrogroupMacro) => !this.editGroupUsedMacros.includes(m.name))
|
|
}
|
|
|
|
get groups() {
|
|
return this.$store.getters['gui/macros/getAllMacrogroups'] ?? []
|
|
}
|
|
|
|
get editGroupUsedMacros() {
|
|
return this.editGroup?.macros?.map((m: GuiMacrosStateMacrogroupMacro) => m.name) ?? []
|
|
}
|
|
|
|
get editGroup(): GuiMacrosStateMacrogroup | null {
|
|
return this.$store.getters['gui/macros/getMacrogroup'](this.editGroupId)
|
|
}
|
|
|
|
get editGroupMacros() {
|
|
const macros = this.editGroup?.macros ?? []
|
|
macros.sort((a: GuiMacrosStateMacrogroupMacro, b: GuiMacrosStateMacrogroupMacro) => a.pos - b.pos)
|
|
|
|
return macros
|
|
}
|
|
|
|
set editGroupMacros(newVal) {}
|
|
|
|
existsGroupName(name: string) {
|
|
return (
|
|
this.groups.findIndex(
|
|
(group: GuiMacrosStateMacrogroup) => group.name === name && group.id != this.editGroupId
|
|
) >= 0
|
|
)
|
|
}
|
|
|
|
clearColorObject(color: any): string {
|
|
if (typeof color === 'object' && 'hex' in color) color = color.hex
|
|
if (color.length > 7) color = color.substr(0, 7)
|
|
return color
|
|
}
|
|
|
|
updateShowGeneral(newVal: boolean) {
|
|
this.$emit('update:showGeneral', newVal)
|
|
}
|
|
|
|
async addGroup() {
|
|
const values = {
|
|
name: '',
|
|
color: 'primary',
|
|
colorCustom: '#fff',
|
|
showInStandby: true,
|
|
showInPause: true,
|
|
showInPrinting: true,
|
|
}
|
|
this.editGroupId = await this.$store.dispatch('gui/macros/groupStore', { values })
|
|
|
|
this.boolFormEdit = true
|
|
}
|
|
|
|
editMacrogroup(group: GuiMacrosStateMacrogroup) {
|
|
this.boolFormEdit = true
|
|
this.editGroupId = group.id
|
|
}
|
|
|
|
deleteMacrogroup(id: string) {
|
|
this.$store.dispatch('gui/macros/groupDelete', id)
|
|
}
|
|
|
|
addMacroToGroup(macro: PrinterStateMacro) {
|
|
this.$store.dispatch('gui/macros/addMacroToMacrogroup', {
|
|
id: this.editGroupId,
|
|
macro: macro.name,
|
|
})
|
|
}
|
|
|
|
updateMacroFromGroup(macro: GuiMacrosStateMacrogroupMacro, option: string, value: boolean | string | number) {
|
|
this.$store.dispatch('gui/macros/updateMacroFromMacrogroup', {
|
|
id: this.editGroupId,
|
|
macro: macro.name,
|
|
option: option,
|
|
value: value,
|
|
})
|
|
}
|
|
|
|
updateMacroOrder(output: any) {
|
|
const oldIndex = output.moved.oldIndex ?? 0
|
|
const newIndex = output.moved.newIndex ?? 0
|
|
const oldPos = this.editGroupMacros[oldIndex].pos
|
|
const newPos = this.editGroupMacros[newIndex].pos
|
|
|
|
this.updateMacroFromGroup(this.editGroupMacros[oldIndex], 'pos', newPos)
|
|
this.updateMacroFromGroup(this.editGroupMacros[newIndex], 'pos', oldPos)
|
|
}
|
|
|
|
changeColorMacroFromGroup(macro: GuiMacrosStateMacrogroupMacro) {
|
|
let index = this.macroColors.findIndex((color) => color.value === macro.color) + 1
|
|
const maxIndex = this.macroColors.length - 1
|
|
|
|
if (index > maxIndex) index = 0
|
|
const newColor = this.macroColors[index].value
|
|
|
|
this.updateMacroFromGroup(macro, 'color', newColor)
|
|
}
|
|
|
|
removeMacroFromGroup(macro: GuiMacrosStateMacrogroupMacro) {
|
|
this.$store.dispatch('gui/macros/removeMacroFromMacrogroup', {
|
|
id: this.editGroupId,
|
|
macro: macro.name,
|
|
})
|
|
}
|
|
|
|
existsMacro(macroname: string) {
|
|
return (
|
|
this.allMacros.findIndex((m: PrinterStateMacro) => m.name.toLowerCase() === macroname.toLowerCase()) !== -1
|
|
)
|
|
}
|
|
|
|
getMacroDescription(macroname: string) {
|
|
const macro = this.allMacros.find((m: PrinterStateMacro) => m.name.toLowerCase() === macroname.toLowerCase())
|
|
if (!macro) return this.$t('Settings.MacrosTab.DeletedMacro')
|
|
|
|
return macro?.description ?? null
|
|
}
|
|
|
|
updateMacrogroupOption(option: string, newVal: boolean | string) {
|
|
const values: any = {}
|
|
values[option] = newVal
|
|
|
|
this.$store.dispatch('gui/macros/groupUpdate', {
|
|
id: this.editGroupId,
|
|
values,
|
|
})
|
|
}
|
|
|
|
@Debounce(250)
|
|
updateGroupOptionName(newVal: string) {
|
|
this.updateMacrogroupOption('name', newVal)
|
|
}
|
|
|
|
updateGroupOptionColor(newVal: string) {
|
|
this.updateMacrogroupOption('color', newVal)
|
|
}
|
|
|
|
@Debounce(250)
|
|
updateGroupOptionColorCustom(newVal: string) {
|
|
this.updateMacrogroupOption('colorCustom', this.clearColorObject(newVal))
|
|
}
|
|
|
|
updateGroupOptionShowInStandby(newVal: boolean) {
|
|
this.updateMacrogroupOption('showInStandby', newVal)
|
|
}
|
|
|
|
updateGroupOptionShowInPause(newVal: boolean) {
|
|
this.updateMacrogroupOption('showInPause', newVal)
|
|
}
|
|
|
|
updateGroupOptionShowInPrinting(newVal: boolean) {
|
|
this.updateMacrogroupOption('showInPrinting', newVal)
|
|
}
|
|
|
|
@Watch('boolFormEdit')
|
|
updatedBoolFormEdit(newVal: boolean) {
|
|
this.updateShowGeneral(!newVal)
|
|
}
|
|
|
|
cancelEditMacrogroup() {
|
|
this.boolFormEdit = false
|
|
this.$emit('scrollToTop')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dragable-item {
|
|
background-color: #282828;
|
|
}
|
|
</style>
|