start printing
This commit is contained in:
15
src/App.vue
15
src/App.vue
@@ -32,7 +32,7 @@
|
||||
elevate-on-scroll>
|
||||
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="error">Emergency Stop</v-btn>
|
||||
<v-btn color="error" :loading="loadingEmergencyStop" @click="emergencyStop">Emergency Stop</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-content id="content">
|
||||
@@ -81,7 +81,11 @@ export default {
|
||||
header: [],
|
||||
heater_bed: [],
|
||||
extruder: ["temperature", "target"],
|
||||
fan: []});
|
||||
fan: [],
|
||||
pause_resume: [],
|
||||
idle_timeout: [],
|
||||
|
||||
});
|
||||
this.$socket.sendObj('get_printer_files', {}, 'getFileList');
|
||||
}
|
||||
},
|
||||
@@ -93,7 +97,14 @@ export default {
|
||||
toolhead: state => state.printer.toolhead,
|
||||
hostname: state => state.printer.hostname,
|
||||
version: state => state.printer.version,
|
||||
loadingEmergencyStop: state => state.socket.loadingEmergencyStop,
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
emergencyStop: function() {
|
||||
this.$store.commit('setLoadingEmergencyStop', true);
|
||||
this.$socket.sendObj('post_printer_gcode', {script: 'M112'}, 'setLoadingEmergencyStop');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@@ -6,6 +6,9 @@
|
||||
<v-list-item-title class="headline">Status</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ toolhead !== null && 'status' in toolhead ? toolhead.status : "" }}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<v-btn class="orange" v-if="toolhead && toolhead.status === 'Printing'" @click="btnPauseJob" :loading="btnStatusPause">pause job</v-btn>
|
||||
<v-btn class="red" v-if="toolhead && toolhead.status === 'Paused'" :loading="btnStatusResume">resume job</v-btn>
|
||||
<v-btn class="red" v-if="toolhead && toolhead.status === 'Paused'">cancel job</v-btn>
|
||||
</v-list-item>
|
||||
<v-divider class="my-2" ></v-divider>
|
||||
<v-card-text class="px-0 pt-0 pb-2 content">
|
||||
@@ -110,14 +113,23 @@
|
||||
export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
position: state => state.printer.toolhead.position
|
||||
position: state => state.printer.toolhead.position,
|
||||
btnStatusPause: state => state.socket.loadingPrintPause,
|
||||
btnStatusResume: state => state.socket.loadingPrintResume,
|
||||
}),
|
||||
...mapGetters([
|
||||
'toolhead'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
|
||||
btnPauseJob() {
|
||||
this.$store.commit('setLoadingPrintPause', true);
|
||||
this.$socket.sendObj('post_printer_print_pause', { }, 'setLoadingPrintPause');
|
||||
},
|
||||
btnResumeJob() {
|
||||
this.$store.commit('setLoadingPrintResume', true);
|
||||
this.$socket.sendObj('post_printer_print_resume', { }, 'setLoadingPrintResume');
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
@@ -7,8 +7,9 @@ import routes from './routes'
|
||||
import VueResource from 'vue-resource'
|
||||
import './components'
|
||||
import store from './store'
|
||||
import { hostname } from './store/variables'
|
||||
|
||||
Vue.use(JRPCWS, 'ws://'+window.location.host+'/websocket', {
|
||||
Vue.use(JRPCWS, 'ws://' + hostname + '/websocket', {
|
||||
store: store
|
||||
});
|
||||
|
||||
|
@@ -22,7 +22,7 @@
|
||||
</template>
|
||||
|
||||
<template #item="{ item }">
|
||||
<tr @contextmenu="showContextMenu($event, item)">
|
||||
<tr @contextmenu="showContextMenu($event, item)" @click="dialog.show = true, dialog.filename = item.filename">
|
||||
<td class=" ">
|
||||
{{ item.filename }}
|
||||
</td>
|
||||
@@ -38,25 +38,41 @@
|
||||
</v-card>
|
||||
<v-menu v-model="contextMenu.shown" :position-x="contextMenu.x" :position-y="contextMenu.y" absolute offset-y>
|
||||
<v-list>
|
||||
<v-list-item>
|
||||
<!--<v-list-item>
|
||||
<v-icon class="mr-1">mdi-cloud-download</v-icon> Download
|
||||
</v-list-item>
|
||||
</v-list-item>-->
|
||||
<v-list-item @click="removeFile">
|
||||
<v-icon class="mr-1">mdi-delete</v-icon> Delete
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<v-dialog v-model="dialog.show" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title class="headline">Start Job</v-card-title>
|
||||
<v-card-text>Do you want to start {{ dialog.filename }}?</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="red darken-1" text @click="dialog.show = false">No</v-btn>
|
||||
<v-btn color="green darken-1" text @click="startPrint(dialog.filename)">Yes</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from 'vuex';
|
||||
import axios from 'axios';
|
||||
import { hostname } from '../store/variables';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
sortBy: 'modified',
|
||||
sortDesc: true,
|
||||
dialog: {
|
||||
show: false,
|
||||
filename: ""
|
||||
},
|
||||
headers: [
|
||||
{
|
||||
text: 'Name',
|
||||
@@ -101,7 +117,7 @@
|
||||
formData.append('file', file);
|
||||
this.$store.commit('setLoadingGcodeUpload', true);
|
||||
|
||||
axios.post('http://'+window.location.host+'/printer/files/upload',
|
||||
axios.post('http://' + hostname + '/printer/files/upload',
|
||||
formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
}
|
||||
@@ -151,17 +167,22 @@
|
||||
});
|
||||
},
|
||||
removeFile() {
|
||||
window.console.log(this.contextMenu.item);
|
||||
window.console.log("remove");
|
||||
|
||||
axios.delete(
|
||||
'http://'+window.location.host+'/printer/files/'+this.contextMenu.item.filename
|
||||
'http://'+hostname+'/printer/files/'+this.contextMenu.item.filename
|
||||
).then(() => {
|
||||
window.console.log('success');
|
||||
this.$toast(this.contextMenu.item.filename+" successfully deleted.", {
|
||||
icon: 'fa-trash'
|
||||
});
|
||||
}).catch(() => {
|
||||
window.console.log('fail');
|
||||
this.$toast.error("Error! Cannot delete file.", {
|
||||
icon: 'fa-warning'
|
||||
});
|
||||
});
|
||||
},
|
||||
startPrint(filename = "") {
|
||||
this.dialog.show = false;
|
||||
this.$socket.sendObj('post_printer_print_start', { filename: filename }, 'switchToDashboard');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@@ -1,9 +1,9 @@
|
||||
import Dashboard from '../pages/Dashboard.vue'
|
||||
import Status from '../pages/Status.vue'
|
||||
//import Status from '../pages/Status.vue'
|
||||
import Console from '../pages/Console.vue'
|
||||
import Files from '../pages/Files.vue'
|
||||
import SettingsGeneral from '../pages/settings/general.vue'
|
||||
import SettingsMachine from '../pages/settings/machine.vue'
|
||||
//import SettingsGeneral from '../pages/settings/general.vue'
|
||||
//import SettingsMachine from '../pages/settings/machine.vue'
|
||||
|
||||
const routes = [
|
||||
{
|
||||
@@ -13,24 +13,24 @@ const routes = [
|
||||
component: Dashboard
|
||||
},
|
||||
{
|
||||
title: "Console",
|
||||
path: '/console',
|
||||
icon: 'code-tags',
|
||||
component: Console
|
||||
},
|
||||
/*{
|
||||
title: "Current Job",
|
||||
path: '/status',
|
||||
icon: 'printer-3d-nozzle',
|
||||
component: Status
|
||||
},
|
||||
},*/
|
||||
{
|
||||
title: "G-Code Files",
|
||||
path: '/files',
|
||||
icon: 'printer-3d-nozzle',
|
||||
component: Files
|
||||
},
|
||||
{
|
||||
title: "Console",
|
||||
path: '/console',
|
||||
icon: 'code-tags',
|
||||
component: Console
|
||||
},
|
||||
{
|
||||
/*{
|
||||
title: "Settings",
|
||||
path: '/settings',
|
||||
icon: 'wrench',
|
||||
@@ -48,7 +48,7 @@ const routes = [
|
||||
component: SettingsMachine
|
||||
},
|
||||
]
|
||||
},
|
||||
},*/
|
||||
|
||||
];
|
||||
|
||||
|
@@ -24,6 +24,9 @@ export default new Vuex.Store({
|
||||
isConnected: false,
|
||||
loadingGcodeUpload: false,
|
||||
loadingGcodeRefresh: false,
|
||||
loadingEmergencyStop: false,
|
||||
loadingPrintPause: false,
|
||||
loadingPrintResume: false,
|
||||
},
|
||||
printer: {
|
||||
hostname: '',
|
||||
@@ -160,8 +163,7 @@ export default new Vuex.Store({
|
||||
state.socket.loadingSendGcode = value;
|
||||
},
|
||||
|
||||
sendGcode(state, data) {
|
||||
window.console.log(data);
|
||||
sendGcode(state) {
|
||||
state.socket.loadingSendGcode = false;
|
||||
},
|
||||
|
||||
@@ -177,6 +179,22 @@ export default new Vuex.Store({
|
||||
state.socket.loadingGcodeRefresh = value;
|
||||
},
|
||||
|
||||
setLoadingEmergencyStop(state, value) {
|
||||
state.socket.loadingEmergencyStop = value;
|
||||
},
|
||||
|
||||
setLoadingPrintPause(state, value) {
|
||||
state.socket.loadingPrintPause = value;
|
||||
},
|
||||
|
||||
setLoadingPrintResume(state, value) {
|
||||
state.socket.loadingPrintResume = value;
|
||||
},
|
||||
|
||||
reportError: (data) => {
|
||||
this.$toast(data.message)
|
||||
},
|
||||
|
||||
voidMutation() {
|
||||
|
||||
},
|
||||
@@ -199,11 +217,7 @@ export default new Vuex.Store({
|
||||
},
|
||||
|
||||
socket_on_error ({ commit }, data) {
|
||||
commit('voidMutation');
|
||||
window.console.error('Socket Error: ' + data.message);
|
||||
window.console.log(data);
|
||||
|
||||
//this.$toast.error(data.message)
|
||||
commit('reportError', data);
|
||||
},
|
||||
|
||||
socket_on_message ({ commit, state }, data) {
|
||||
@@ -221,6 +235,10 @@ export default new Vuex.Store({
|
||||
commit('setPrinterStatus', data.params[0]);
|
||||
break;
|
||||
|
||||
/*case 'notify_klippy_state_changed':
|
||||
commit('setPrinterStatus', data.params[0]);
|
||||
break;*/
|
||||
|
||||
case 'notify_filelist_changed':
|
||||
commit('setFileList', data.params[0].filelist);
|
||||
break;
|
||||
@@ -267,9 +285,26 @@ export default new Vuex.Store({
|
||||
commit('setLoadingSendGcode', value);
|
||||
},
|
||||
|
||||
setLoadingEmergencyStop({commit}) {
|
||||
commit('setLoadingEmergencyStop', false);
|
||||
},
|
||||
|
||||
setLoadingPrintPause({commit}) {
|
||||
commit('setLoadingPrintPause', false);
|
||||
},
|
||||
|
||||
setLoadingPrintResume({commit}) {
|
||||
commit('setLoadingPrintResume', false);
|
||||
},
|
||||
|
||||
sendGcode({commit}, data) {
|
||||
commit('setLoadingSendGcode', false);
|
||||
commit('sendGcode', data);
|
||||
},
|
||||
|
||||
switchToDashboard(state) {
|
||||
window.console.log(state);
|
||||
|
||||
}
|
||||
}
|
||||
});
|
2
src/store/variables.js
Normal file
2
src/store/variables.js
Normal file
@@ -0,0 +1,2 @@
|
||||
//export const hostname = window.location.host;
|
||||
export const hostname = "kossel.local:8080";
|
Reference in New Issue
Block a user