Skip to content

Commit

Permalink
fix: fix issue with create/edit presets and refactor settings (mainsa…
Browse files Browse the repository at this point in the history
  • Loading branch information
meteyou authored Jul 30, 2023
1 parent d67ef3a commit 6a4cca7
Show file tree
Hide file tree
Showing 5 changed files with 342 additions and 293 deletions.
56 changes: 56 additions & 0 deletions src/components/settings/Presets/PresetsEntry.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<template>
<settings-row :title="preset.name" :sub-title="subTitle">
<v-btn small outlined class="ml-3" @click="editPreset">
<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="deletePreset">
<v-icon small>{{ mdiDelete }}</v-icon>
</v-btn>
</settings-row>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import SettingsRow from '@/components/settings/SettingsRow.vue'
import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
import { convertName } from '@/plugins/helpers'
import { mdiDelete, mdiPencil } from '@mdi/js'
@Component({
components: { SettingsRow },
})
export default class PresetsEntry extends Mixins(BaseMixin) {
mdiPencil = mdiPencil
mdiDelete = mdiDelete
@Prop({ required: true }) readonly preset!: GuiPresetsStatePreset
get subTitle() {
let output: string[] = []
Object.keys(this.preset.values).forEach((key: string) => {
const values = this.preset.values[key]
if (values.bool) {
const name = key.indexOf(' ') ? key.slice(key.indexOf(' ') + 1) : key
output.push(convertName(name) + ': ' + values.value + '°C')
}
})
if (this.preset.gcode) output.push(this.$t('Settings.PresetsTab.CustomGCode').toString())
return output.join(', ')
}
editPreset() {
this.$emit('edit', this.preset)
}
deletePreset() {
this.$store.dispatch('gui/presets/delete', this.preset.id)
}
}
</script>
26 changes: 26 additions & 0 deletions src/components/settings/Presets/PresetsEntryCooldown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<template>
<settings-row :title="$t('Settings.PresetsTab.Cooldown')">
<v-btn small outlined class="ml-3" @click="editCooldown">
<v-icon left small>{{ mdiPencil }}</v-icon>
{{ $t('Settings.Edit') }}
</v-btn>
</settings-row>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import SettingsRow from '@/components/settings/SettingsRow.vue'
import { mdiPencil } from '@mdi/js'
@Component({
components: { SettingsRow },
})
export default class PresetsEntryCooldown extends Mixins(BaseMixin) {
mdiPencil = mdiPencil
editCooldown() {
this.$emit('edit')
}
}
</script>
182 changes: 182 additions & 0 deletions src/components/settings/Presets/PresetsForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
<template>
<v-card flat>
<v-form v-model="valid" @submit.prevent="savePreset">
<v-card-title>{{ title }}</v-card-title>
<v-card-text>
<v-row v-if="boolInvalidMin" class="mt-3">
<v-col class="py-0">
<v-alert dense text type="error">{{ $t('Settings.PresetsTab.PresetInfo') }}</v-alert>
</v-col>
</v-row>
<settings-row :title="$t('Settings.PresetsTab.Name')">
<v-text-field
v-model="preset.name"
:placeholder="$t('Settings.PresetsTab.PresetNamePlaceholder')"
hide-details="auto"
:rules="[rules.required, rules.unique]"
dense
outlined />
</settings-row>
<div v-for="(value, key) of preset.values" :key="key">
<v-divider class="my-2" />
<settings-row :title="converNameObject(key)">
<v-checkbox v-model="value.bool" hide-details class="shrink mt-0" />
<v-text-field
v-model="value.value"
hide-details="auto"
:rules="[rules.invalid]"
type="number"
suffix="°C"
dense
outlined
hide-spin-buttons
@focus="$event.target.select()" />
</settings-row>
</div>
<v-divider class="my-2" />
<settings-row :title="$t('Settings.PresetsTab.CustomGCode')">
<v-textarea v-model="preset.gcode" outlined hide-details />
</settings-row>
</v-card-text>
<v-card-actions class="d-flex justify-end">
<v-btn text @click="closeForm">
{{ $t('Settings.Cancel') }}
</v-btn>
<v-btn color="primary" text type="submit" :disabled="!valid">
{{ storeButtonText }}
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import SettingsRow from '@/components/settings/SettingsRow.vue'
import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
import { convertName } from '@/plugins/helpers'
import { mdiDelete, mdiPencil } from '@mdi/js'
@Component({
components: { SettingsRow },
})
export default class PresetsForm extends Mixins(BaseMixin) {
mdiPencil = mdiPencil
mdiDelete = mdiDelete
@Prop({ required: true }) readonly preset!: GuiPresetsStatePreset
valid = false
boolInvalidMin = false
private rules = {
required: (value: string) => value !== '' || this.$t('Settings.PresetsTab.ErrorNameRequired'),
unique: (value: string) => !this.existsPresetName(value) || this.$t('Settings.PresetsTab.ErrorNameNotUnique'),
invalid: (value: string) => parseFloat(value) >= 0 || this.$t('Settings.PresetsTab.ErrorInvalidValue'),
}
get title() {
if (this.preset.id === null) return this.$t('Settings.PresetsTab.CreateHeadline')
return this.$t('Settings.PresetsTab.EditHeadline')
}
get storeButtonText() {
if (this.preset.id === null) return this.$t('Settings.PresetsTab.StoreButton')
return this.$t('Settings.PresetsTab.UpdateButton')
}
get presets() {
return this.$store.getters['gui/presets/getPresets'] ?? []
}
get available_heaters() {
return (this.$store.state.printer?.heaters?.available_heaters ?? []).sort()
}
get available_temperature_fans() {
return (this.$store.state.printer?.heaters?.available_sensors ?? [])
.filter((name: string) => name.startsWith('temperature_fan '))
.sort()
}
mounted() {
const presetValues = Object.keys(this.preset.values)
// add missing heaters to preset
this.available_heaters
.filter((name: string) => !presetValues.includes(name))
.forEach((name: string) => {
this.preset.values[name] = {
bool: false,
type: 'heater',
value: 0,
}
})
// add missing temperature_fans to preset
this.available_temperature_fans
.filter((name: string) => !presetValues.includes(name))
.forEach((name: string) => {
this.preset.values[name] = {
bool: false,
type: 'temperature_fan',
value: 0,
}
})
// remove unused values from preset
presetValues
.filter(
(name: string) =>
!this.available_heaters.includes(name) && !this.available_temperature_fans.includes(name)
)
.forEach((name) => {
delete this.preset.values[name]
})
}
existsPresetName(name: string) {
return (
this.presets.findIndex(
(preset: GuiPresetsStatePreset) => preset.name === name && preset.id !== this.preset.id
) !== -1
)
}
converNameObject(name: string) {
return convertName(name.replace('temperature_fan ', ''))
}
closeForm() {
this.$emit('close')
}
savePreset() {
let setValues = 0
for (const key of Object.keys(this.preset.values)) {
if (this.preset.values[key].bool) setValues++
}
if (this.preset.gcode.length) setValues++
// stop here, when no values are set
if (setValues === 0) {
this.boolInvalidMin = true
return
}
// create new preset, if id === null
if (this.preset.id === null) {
this.$store.dispatch('gui/presets/store', { values: this.preset })
this.closeForm()
return
}
// update existing preset
this.$store.dispatch('gui/presets/update', { id: this.preset.id, values: this.preset })
this.closeForm()
}
}
</script>
52 changes: 52 additions & 0 deletions src/components/settings/Presets/PresetsFormCooldown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<template>
<v-card flat>
<v-form @submit.prevent="saveCooldown">
<v-card-title>{{ $t('Settings.PresetsTab.EditCooldown') }}</v-card-title>
<v-card-text>
<settings-row :title="$t('Settings.PresetsTab.CustomGCode')">
<v-textarea v-model="gcode" outlined hide-details />
</settings-row>
</v-card-text>
<v-card-actions class="d-flex justify-end">
<v-btn text @click="closeForm">
{{ $t('Settings.Cancel') }}
</v-btn>
<v-btn color="primary" text type="submit">
{{ $t('Settings.PresetsTab.UpdateCooldown') }}
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</template>

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import BaseMixin from '@/components/mixins/base'
import SettingsRow from '@/components/settings/SettingsRow.vue'
import { mdiDelete, mdiPencil } from '@mdi/js'
@Component({
components: { SettingsRow },
})
export default class PresetsFormCooldown extends Mixins(BaseMixin) {
mdiPencil = mdiPencil
mdiDelete = mdiDelete
@Prop({ required: true }) readonly inputGcode!: string
gcode = ''
mounted() {
this.gcode = this.inputGcode
}
closeForm() {
this.$emit('close')
}
saveCooldown() {
this.$store.dispatch('gui/presets/saveSetting', { name: 'cooldownGcode', value: this.gcode })
this.closeForm()
}
}
</script>
Loading

0 comments on commit 6a4cca7

Please sign in to comment.