diff --git a/package-lock.json b/package-lock.json index e720fe949..1e9086c96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11223,6 +11223,11 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, + "vue-toast-notification": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/vue-toast-notification/-/vue-toast-notification-0.0.3.tgz", + "integrity": "sha512-3UQuEa2oQX5JcWwMcnm6Kf9djL4XwWWv2R8uIawFC/PSPHYp4JCnXiYu+BVNc/qCQhpSvfkXmmDVOLRau5kVDg==" + }, "vuetify": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.1.5.tgz", diff --git a/package.json b/package.json index f628a84ad..e57ce4985 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "vue-json-rpc-websocket": "^1.0.5", "vue-resource": "^1.5.1", "vue-simple-upload": "^0.1.6", + "vue-toast-notification": "0.0.3", "vuetify": "^2.1.0", "vuetify-toast-snackbar": "^0.6.1", "vuex": "^3.1.1" diff --git a/src/App.vue b/src/App.vue index a8145ae5a..68c21181b 100644 --- a/src/App.vue +++ b/src/App.vue @@ -32,7 +32,8 @@ elevate-on-scroll> - Emergency Stop + mdi-refresh-circle reconnect + Emergency Stop @@ -75,7 +76,7 @@ export default { this.$socket.sendObj('get_printer_objects', {}, 'getObjectInfo'); this.$socket.sendObj('get_printer_status', { heater: [] }, 'getObjectInfo'); this.$socket.sendObj('post_printer_subscriptions', { - gcode: ["gcode_position", "speed", "speed_factor", "extrude_factor"], + gcode: ["gcode_position", "speed", "speed_factor", "extrude_factor", "busy", "abs_extrude"], toolhead: [], virtual_sdcard: [], header: [], @@ -98,6 +99,7 @@ export default { hostname: state => state.printer.hostname, version: state => state.printer.version, loadingEmergencyStop: state => state.socket.loadingEmergencyStop, + isConnected: state => state.socket.isConnected, }), }, methods: { diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue index 931e07c29..d13139206 100644 --- a/src/components/panels/StatusPanel.vue +++ b/src/components/panels/StatusPanel.vue @@ -7,8 +7,8 @@ {{ toolhead !== null && 'status' in toolhead ? toolhead.status : "" }} pause job - resume job - cancel job + resume job + cancel job @@ -35,91 +35,64 @@ - - - - - - + + + + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index a476912ba..29ef1c25e 100644 --- a/src/main.js +++ b/src/main.js @@ -1,21 +1,19 @@ import Vue from 'vue' -import VueRouter from 'vue-router' import JRPCWS from './plugins/json-rpc-websocket' import App from './App.vue' import vuetify from './plugins/vuetify' -import routes from './routes' import VueResource from 'vue-resource' import './components' import store from './store' +import router from './plugins/router' import { hostname } from './store/variables' +import 'vue-toast-notification/dist/index.css'; Vue.use(JRPCWS, 'ws://' + hostname + '/websocket', { store: store }); Vue.config.productionTip = false; -Vue.use(VueRouter); -const router = new VueRouter({mode: 'history', routes}); Vue.use(VueResource); Vue.http.headers.common['Content-Type'] = 'application/json'; diff --git a/src/pages/Files.vue b/src/pages/Files.vue index d460a7087..d654a0670 100644 --- a/src/pages/Files.vue +++ b/src/pages/Files.vue @@ -6,7 +6,7 @@ mdi-refresh Refresh - mdi-uploadUpload + mdi-uploadUpload state.files, loadingUpload: state => state.socket.loadingGcodeUpload, loadingRefresh: state => state.socket.loadingGcodeRefresh, + printStatus: state => state.printer.toolhead.status, }) }, methods: { @@ -128,6 +129,7 @@ }); }) .catch(() => { + this.$store.commit('setLoadingGcodeUpload', false); toast.error("Cannot upload the file!", { icon: 'fa-exclamation-triangle' }); diff --git a/src/plugins/router.js b/src/plugins/router.js new file mode 100644 index 000000000..5f5659cd2 --- /dev/null +++ b/src/plugins/router.js @@ -0,0 +1,8 @@ +import VueRouter from 'vue-router' +import Vue from "vue"; +import routes from "../routes"; + +Vue.use(VueRouter); +const router = new VueRouter({mode: 'history', routes}); + +export default router; \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 32d576124..0190dea73 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,7 +1,10 @@ import Vue from 'vue' import Vuex from 'vuex' +import VueToast from 'vue-toast-notification'; +import router from '../plugins/router' Vue.use(Vuex); +Vue.use(VueToast); let colorArray = [ '#F44336', @@ -34,7 +37,19 @@ export default new Vuex.Store({ toolhead: { position: [], status: "", + print_time: 0, + printing_time: 0, + estimated_print_time: 0, }, + pause_resume: { + is_paused: false + }, + idle_timeout: { + printing_time: 0 + }, + virtual_sdcard: { + process: 0 + } }, object: { heater: { @@ -69,7 +84,15 @@ export default new Vuex.Store({ } } - return heaters; + return heaters.sort((a, b) => { + let nameA = a.name.toUpperCase(); + let nameB = b.name.toUpperCase(); + + if (nameA < nameB) return -1; + if (nameA > nameB) return 1; + + return 0; + }); }, heatersCount: (state, getters) => { @@ -157,6 +180,14 @@ export default new Vuex.Store({ date: new Date(), message: data }); + + if (data.substring(0,2) === "//") { + data = data.replace("//", ""); + Vue.$toast.warning(data); + } else if (data.substring(0,2) === "!!") { + data = data.replace("!!", ""); + Vue.$toast.error(data); + } }, setLoadingSendGcode(state, value) { @@ -191,8 +222,31 @@ export default new Vuex.Store({ state.socket.loadingPrintResume = value; }, - reportError: (data) => { - this.$toast(data.message) + setLoadingPrintCancel(state, value) { + state.socket.loadingPrintCancel = value; + }, + + reportError(state, data) { + Vue.$toast.error(data.message); + }, + + setPausedState(state, data) { + switch (data) { + case 'paused': + state.printer.pause_resume.is_paused = true; + break; + + case 'resumed': + state.printer.pause_resume.is_paused = false; + break; + + case 'cleared': + state.printer.pause_resume.is_paused = false; + break; + + default: + window.console.log('setPausedState -> Default: '+data); + } }, voidMutation() { @@ -243,6 +297,10 @@ export default new Vuex.Store({ commit('setFileList', data.params[0].filelist); break; + case 'notify_paused_state_changed': + commit('setPausedState', data.params[0]); + break; + default: window.console.log("Default return"); if (data.error) window.console.error("JSON-RPC: " + data.error.message); @@ -251,7 +309,7 @@ export default new Vuex.Store({ }, socket_reconnect ({ commit }, count) { - commit('setConnected') + commit('setConnected'); window.console.log(count) }, @@ -297,6 +355,10 @@ export default new Vuex.Store({ commit('setLoadingPrintResume', false); }, + setLoadingPrintCancel({commit}) { + commit('setLoadingPrintCancel', false); + }, + sendGcode({commit}, data) { commit('setLoadingSendGcode', false); commit('sendGcode', data); @@ -304,7 +366,7 @@ export default new Vuex.Store({ switchToDashboard(state) { window.console.log(state); - + router.push("/"); } } }); \ No newline at end of file diff --git a/src/store/variables.js b/src/store/variables.js index 677251f02..53de1f1a4 100644 --- a/src/store/variables.js +++ b/src/store/variables.js @@ -1,2 +1,2 @@ -//export const hostname = window.location.host; -export const hostname = "kossel.local:8080"; \ No newline at end of file +export const hostname = window.location.host; +//export const hostname = "kossel.local:8080"; \ No newline at end of file