319 lines
15 KiB
Vue
319 lines
15 KiB
Vue
|
|
<template>
|
|
<div>
|
|
<v-card>
|
|
<v-toolbar flat dense >
|
|
<v-toolbar-title>
|
|
<span class="subheading"><v-icon left>mdi-fire</v-icon>Preheat Presets</span>
|
|
</v-toolbar-title>
|
|
</v-toolbar>
|
|
<v-card-text class="py-3">
|
|
<v-container>
|
|
<v-row v-for="(preset, index) in this['gui/getPreheatPresets']" v-bind:key="index">
|
|
<v-col class="rounded transition-swing secondary py-2 px-2 mb-6" style="cursor: pointer;">
|
|
<v-row align="center">
|
|
<v-col class="pl-6">
|
|
<strong>{{ preset.name }}</strong>
|
|
</v-col>
|
|
<v-col class="col-6">
|
|
<div v-for="[key, value] in Object.entries(preset.values)" v-bind:key="key">
|
|
<span class="text-no-wrap" v-if="value.bool" >{{ convertPresetName(key, value) }}: {{ value.value }}°C</span>
|
|
</div>
|
|
</v-col>
|
|
<v-col class="col-auto text-right"><v-btn small class="minwidth-0 float-right" v-on:click.stop.prevent="editPreset(preset)"><v-icon small>mdi-pencil</v-icon></v-btn></v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col class="rounded transition-swing secondary py-2 px-2 mb-6" style="cursor: pointer;">
|
|
<v-row align="center">
|
|
<v-col class="pl-6">
|
|
<strong>Cooldown</strong>
|
|
</v-col>
|
|
<v-col class="col-auto text-right"><v-btn small class="minwidth-0 float-right" v-on:click.stop.prevent="editCooldown"><v-icon small>mdi-pencil</v-icon></v-btn></v-col>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col class="text-center mt-0">
|
|
<v-btn @click="createPreset">add preset</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
</v-card>
|
|
<v-dialog v-model="dialog.bool" persistent :width="600">
|
|
<v-card dark>
|
|
<v-toolbar flat dense color="primary">
|
|
<v-toolbar-title>
|
|
<span class="subheading">
|
|
<v-icon class="mdi mdi-fire" left></v-icon>
|
|
{{ dialog.index === null ? "Create" : "Edit" }} Preset
|
|
</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-btn small class="minwidth-0" @click="dialog.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
|
|
</v-toolbar>
|
|
<v-card-text class="pt-3">
|
|
<v-container class="pb-0">
|
|
<v-form
|
|
v-model="dialog.valid"
|
|
@submit.prevent="savePreset"
|
|
>
|
|
<template v-if="dialog.bool">
|
|
<v-row>
|
|
<v-col class="col-6">
|
|
<v-row>
|
|
<v-col class="col-12">
|
|
<v-text-field
|
|
v-model="dialog.name"
|
|
label="Name"
|
|
hide-details="auto"
|
|
:rules="[rules.required, rules.unique]"
|
|
dense
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row class="mt-2 mx-0 mb-2" v-for="(heater) of this['printer/getHeaters']" v-bind:key="heater.name" align="center">
|
|
<v-checkbox
|
|
v-model="dialog.values[heater.name].bool"
|
|
hide-details
|
|
class="shrink mr-2 mt-0"
|
|
></v-checkbox>
|
|
<v-text-field
|
|
v-model="dialog.values[heater.name].value"
|
|
:label="convertName(heater.name)"
|
|
hide-details="auto"
|
|
type="number"
|
|
suffix="°C"
|
|
></v-text-field>
|
|
</v-row>
|
|
<v-row class="mt-2 mx-0 mb-2" v-for="(fan) of this['printer/getTemperatureFans']" v-bind:key="'temperature_fan '+fan.name" align="center">
|
|
<v-checkbox
|
|
v-model="dialog.values['temperature_fan '+fan.name].bool"
|
|
hide-details
|
|
class="shrink mr-2 mt-0"
|
|
></v-checkbox>
|
|
<v-text-field
|
|
v-model="dialog.values['temperature_fan '+fan.name].value"
|
|
:label="convertName(fan.name)"
|
|
hide-details="auto"
|
|
type="number"
|
|
suffix="°C"
|
|
></v-text-field>
|
|
</v-row>
|
|
</v-col>
|
|
<v-col class="col-6">
|
|
<v-textarea
|
|
outlined
|
|
name="input-7-4"
|
|
label="Custom G-Code"
|
|
v-model="dialog.gcode"
|
|
></v-textarea>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="dialog.boolInvalidMin">
|
|
<v-col class="py-0">
|
|
<v-alert dense text type="error">You have to set minimum a target temperature or a custom gcode.</v-alert>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row class="mt-3">
|
|
<v-col class="text-center">
|
|
<v-btn
|
|
color="red"
|
|
outlined
|
|
class="float-left minwidth-0"
|
|
@click="deletePreset"
|
|
v-if="this.dialog.index !== null"
|
|
>
|
|
<v-icon>mdi-delete</v-icon>
|
|
</v-btn>
|
|
<v-btn
|
|
color="white"
|
|
outlined
|
|
:class="dialog.index !== null ? 'float-right' : '' "
|
|
type="submit"
|
|
>
|
|
{{ dialog.index === null ? "store" : "update" }} preset
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
</v-form>
|
|
</v-container>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-dialog v-model="cooldownDialog.bool" persistent :width="300">
|
|
<v-card dark>
|
|
<v-toolbar flat dense color="primary">
|
|
<v-toolbar-title>
|
|
<span class="subheading">
|
|
<v-icon class="mdi mdi-fire" left></v-icon> Edit Cooldown
|
|
</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-btn small class="minwidth-0" @click="cooldownDialog.bool = false"><v-icon small>mdi-close-thick</v-icon></v-btn>
|
|
</v-toolbar>
|
|
<v-card-text class="pt-3">
|
|
<v-container class="pb-0">
|
|
<v-form
|
|
v-model="cooldownDialog.valid"
|
|
@submit.prevent="saveCooldown"
|
|
>
|
|
<v-row>
|
|
<v-col class="col-12">
|
|
<v-textarea
|
|
outlined
|
|
name="input-7-4"
|
|
label="Custom G-Code"
|
|
v-model="cooldownDialog.gcode"
|
|
:rules="[rules.required]"
|
|
></v-textarea>
|
|
</v-col>
|
|
</v-row>
|
|
<v-row>
|
|
<v-col class="text-center">
|
|
<v-btn
|
|
color="white"
|
|
outlined
|
|
type="submit"
|
|
>
|
|
update cooldown
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-form>
|
|
</v-container>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters } from 'vuex';
|
|
import {convertName} from "@/plugins/helpers";
|
|
|
|
export default {
|
|
components: {
|
|
|
|
},
|
|
data: function() {
|
|
return {
|
|
dialog: {
|
|
bool: false,
|
|
valid: false,
|
|
name: "",
|
|
gcode: "",
|
|
index: null,
|
|
boolInvalidMin: false,
|
|
values: {},
|
|
},
|
|
rules: {
|
|
required: (value) => value !== '' || 'required',
|
|
unique: (value) => !this.existsPresetName(value) || 'Name already exists',
|
|
},
|
|
cooldownDialog: {
|
|
bool: false,
|
|
gcode: "",
|
|
valid: false,
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
orgState: state => state.gui.presets,
|
|
cooldownGcode: state => state.gui.cooldownGcode,
|
|
}),
|
|
...mapGetters([
|
|
'printer/getHeaters',
|
|
'printer/getTemperatureFans',
|
|
'gui/getPreheatPresets',
|
|
])
|
|
},
|
|
mounted() {
|
|
this.clearDialog()
|
|
},
|
|
methods: {
|
|
convertName: convertName,
|
|
convertPresetName(name, value) {
|
|
if (value.type === "temperature_fan") name = name.replace("temperature_fan ", "")
|
|
|
|
return this.convertName(name)
|
|
},
|
|
existsPresetName(name) {
|
|
return (this["gui/getPreheatPresets"].findIndex((preset) => preset.name === name && preset.index !== this.dialog.index) >= 0)
|
|
},
|
|
createPreset() {
|
|
this.clearDialog()
|
|
this.dialog.bool = true
|
|
},
|
|
clearDialog() {
|
|
this.dialog.bool = false
|
|
this.dialog.index = null
|
|
this.dialog.name = ""
|
|
this.dialog.gcode = ""
|
|
this.dialog.boolInvalidMin = false
|
|
this.dialog.values = {}
|
|
|
|
for(const heater of this["printer/getHeaters"]) {
|
|
this.dialog.values[heater.name] = {
|
|
bool: true,
|
|
value: 0,
|
|
type: 'heater',
|
|
}
|
|
}
|
|
|
|
for(const fan of this["printer/getTemperatureFans"]) {
|
|
this.dialog.values['temperature_fan '+fan.name] = {
|
|
bool: true,
|
|
value: 0,
|
|
type: 'temperature_fan',
|
|
}
|
|
}
|
|
},
|
|
editPreset(preset) {
|
|
this.dialog.name = preset.name
|
|
this.dialog.index = preset.index
|
|
this.dialog.gcode = preset.gcode
|
|
this.dialog.values = {...preset.values}
|
|
this.dialog.bool = true
|
|
},
|
|
savePreset() {
|
|
let setValues = 0
|
|
for (const key of Object.keys(this.dialog.values)) {
|
|
if (this.dialog.values[key].bool) setValues++
|
|
}
|
|
if (this.dialog.gcode.length) setValues++
|
|
|
|
if (setValues === 0) this.dialog.boolInvalidMin = true
|
|
else if (this.dialog.valid) {
|
|
for (const key of Object.keys(this.dialog.values)) {
|
|
this.dialog.values[key].value = parseInt(this.dialog.values[key].value)
|
|
}
|
|
|
|
if (this.dialog.index) {
|
|
this.$store.dispatch('gui/updatePreset', this.dialog )
|
|
} else this.$store.dispatch('gui/addPreset', this.dialog )
|
|
|
|
this.clearDialog()
|
|
}
|
|
},
|
|
deletePreset() {
|
|
this.$store.dispatch('gui/deletePreset', this.dialog )
|
|
this.clearDialog()
|
|
},
|
|
editCooldown() {
|
|
this.cooldownDialog.gcode = this.cooldownGcode
|
|
this.cooldownDialog.bool = true
|
|
},
|
|
saveCooldown() {
|
|
if (this.cooldownDialog.valid) {
|
|
this.$store.dispatch("gui/setSettings", {cooldownGcode: this.cooldownDialog.gcode})
|
|
this.cooldownDialog.bool = false
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script> |