From bb18992f803864410d5481397f74271c5b848155 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 14 Apr 2020 00:08:52 +0200
Subject: [PATCH] add interface settings and save gui.json on virtual_sdcard

---
 public/config.json                            | 16 +----
 src/App.vue                                   | 28 ++------
 .../panels/Settings/DashboardPanel.vue        | 58 +++++++++++++++
 .../panels/Settings/MacrosPanel.vue           | 49 +++++++++++++
 .../panels/Settings/WebcamPanel.vue           | 66 +++++++++++++++++
 src/components/panels/Settings/index.js       | 13 ++++
 src/components/panels/ToolsPanel.vue          |  5 +-
 src/components/panels/WebcamPanel.vue         |  2 +-
 src/components/panels/index.js                |  3 +-
 src/inputs/SettingsMacroSwitch.vue            | 46 ++++++++++++
 src/pages/Console.vue                         | 16 +----
 src/pages/Webcam.vue                          | 32 +++++++++
 src/pages/settings/general.vue                | 10 ---
 src/pages/settings/interface.vue              | 38 ++++++++++
 src/routes/index.js                           | 21 ++++--
 src/store/actions.js                          | 71 +++++++++++++++++--
 src/store/getters.js                          | 23 ++++++
 src/store/index.js                            |  7 +-
 src/store/mutations.js                        | 35 +++++----
 19 files changed, 448 insertions(+), 91 deletions(-)
 create mode 100644 src/components/panels/Settings/DashboardPanel.vue
 create mode 100644 src/components/panels/Settings/MacrosPanel.vue
 create mode 100644 src/components/panels/Settings/WebcamPanel.vue
 create mode 100644 src/components/panels/Settings/index.js
 create mode 100644 src/inputs/SettingsMacroSwitch.vue
 create mode 100644 src/pages/Webcam.vue
 delete mode 100644 src/pages/settings/general.vue
 create mode 100644 src/pages/settings/interface.vue

diff --git a/public/config.json b/public/config.json
index 34f66b3b6..bfab5638e 100644
--- a/public/config.json
+++ b/public/config.json
@@ -1,22 +1,8 @@
 {
   "socket": {
-    "hostname": "kossel.local",
+    "hostname": "voron250.local",
     "port": 8080,
     "reconnectInterval": 3000,
     "reconnectAttempts": 1000
-  },
-  "webcam": {
-    "url": "http://192.168.0.210/webcam/?action=stream"
-  },
-  "gui": {
-    "dashboard": {
-      "boolWebcam": true,
-      "hiddenMacros": [
-        "M600", "FLASH_YES", "FLASH_NO", "TESTMOVE_A", "TESTMOVE_B", "TESTMOVE_X", "TESTMOVE_Y", "M141", "CANCEL", "M120", "M121", "CANCEL_PRINT", "PRINT_START", "PRINT_END", "RESTORE_LIGHT", "M355"
-      ]
-    },
-    "gcodefiles": {
-      "countPerPage": 15
-    }
   }
 }
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 203f96fea..66cf8d189 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,8 +12,10 @@
                 <v-toolbar-title>{{ hostname }}</v-toolbar-title>
             </div>
             <ul class="navi" :expand="$vuetify.breakpoint.mdAndUp">
-                <li v-for="(category, index) in routes" :key="index" :prepend-icon="category.icon" :class="[category.path !== '/' && currentPage.includes(category.path) ? 'active' : '', 'nav-item']" :value="true">
-                    <router-link slot="activator" class="nav-link" exact :to="category.path" @click.prevent>
+                <li v-for="(category, index) in routes" :key="index" :prepend-icon="category.icon"
+                    :class="[category.path !== '/' && currentPage.includes(category.path) ? 'active' : '', 'nav-item']"
+                    :value="true">
+                    <router-link slot="activator" class="nav-link" exact :to="category.path" @click.prevent v-if="(category.title === 'Webcam' && boolNaviWebcam) || category.title !== 'Webcam'">
                         <v-icon>mdi-{{ category.icon }}</v-icon>
                         <span class="nav-title">{{ category.title }}</span>
                         <v-icon class="nav-arrow" v-if="category.children && category.children.length > 0">mdi-chevron-down</v-icon>
@@ -82,26 +84,9 @@ export default {
         routes: routes
     }),
     created () {
-        this.$vuetify.theme.dark = true,
+        this.$vuetify.theme.dark = true;
         this.$socket.onOpen = () => {
-            this.$socket.sendObj('get_printer_info', {}, 'getKlipperInfo');
-            this.$socket.sendObj('get_printer_objects', {}, 'getObjectInfo');
-            this.$socket.sendObj('get_printer_status', { heater: [] }, 'getObjectInfo');
-            this.$socket.sendObj('get_printer_status', { configfile: ['config'] }, 'getPrinterConfig');
-            this.$socket.sendObj('post_printer_subscriptions', {
-                gcode: [],
-                toolhead: [],
-                virtual_sdcard: [],
-                heater: [],
-                heater_bed: [],
-                extruder: ["temperature", "target"],
-                fan: [],
-                pause_resume: [],
-                idle_timeout: [],
-
-            });
-            this.$socket.sendObj('get_printer_files', {}, 'getFileList');
-            this.$socket.sendObj('get_printer_gcode_help', {}, 'getHelpList');
+
         }
     },
     computed: {
@@ -116,6 +101,7 @@ export default {
             isConnected: state => state.socket.isConnected,
             isConnecting: state => !state.socket.isConnected,
             progress: state => state.printer.virtual_sdcard.progress,
+            boolNaviWebcam: state => state.gui.webcam.bool,
         }),
         ...mapGetters([
             'getTitle'
diff --git a/src/components/panels/Settings/DashboardPanel.vue b/src/components/panels/Settings/DashboardPanel.vue
new file mode 100644
index 000000000..c09d72f20
--- /dev/null
+++ b/src/components/panels/Settings/DashboardPanel.vue
@@ -0,0 +1,58 @@
+
+<template>
+    <v-card>
+        <v-list-item>
+            <v-list-item-avatar color="grey"><v-icon dark>mdi-view-dashboard</v-icon></v-list-item-avatar>
+            <v-list-item-content>
+                <v-list-item-title class="headline">Dashboard</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-divider class="my-2"></v-divider>
+        <v-card-text class="px-0 pb-0 pt-3 content">
+            <v-row>
+                <v-col class="px-10 py-0">
+                    <v-switch v-model="boolShowWebcamOnDashboard" label="Webcam"></v-switch>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col class="px-10 py-0">
+                    <v-switch v-model="boolShowTempchartOnDashboard" label="Tempchart"></v-switch>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    export default {
+        components: {
+
+        },
+        data: function() {
+            return {
+
+            }
+        },
+        computed: {
+            boolShowWebcamOnDashboard: {
+                get() {
+                    return this.$store.state.gui.dashboard.boolWebcam;
+                },
+                set(status) {
+                    return this.$store.dispatch('setSettings', { gui: { dashboard: { boolWebcam: status } } });
+                }
+            },
+            boolShowTempchartOnDashboard: {
+                get() {
+                    return this.$store.state.gui.dashboard.boolTempchart;
+                },
+                set(status) {
+                    return this.$store.dispatch('setSettings', { gui: { dashboard: { boolTempchart: status } } });
+                }
+            },
+        },
+        methods: {
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/panels/Settings/MacrosPanel.vue b/src/components/panels/Settings/MacrosPanel.vue
new file mode 100644
index 000000000..ec83cd84e
--- /dev/null
+++ b/src/components/panels/Settings/MacrosPanel.vue
@@ -0,0 +1,49 @@
+
+<template>
+    <v-card>
+        <v-list-item>
+            <v-list-item-avatar color="grey"><v-icon dark>mdi-code-tags</v-icon></v-list-item-avatar>
+            <v-list-item-content>
+                <v-list-item-title class="headline">Macros</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-divider class="my-2"></v-divider>
+        <v-card-text class="px-0 pb-3 pt-3 content">
+            <div v-for="(macro, index) in getAllMacros" v-bind:key="index">
+                <v-row>
+                    <v-col class="px-10 py-0">
+                        <settings-macro-switch :name="macro.name"></settings-macro-switch>
+                    </v-col>
+                </v-row>
+            </div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    import { mapState, mapGetters } from 'vuex';
+    import SettingsMacroSwitch from "../../../inputs/SettingsMacroSwitch";
+
+    export default {
+        components: {
+            SettingsMacroSwitch
+
+        },
+        data: function() {
+            return {
+
+            }
+        },
+        computed: {
+            ...mapState({
+                hiddenMacros: state => state.gui.dashboard.hiddenMacros,
+            }),
+            ...mapGetters([
+                'getAllMacros',
+            ])
+        },
+        methods: {
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/panels/Settings/WebcamPanel.vue b/src/components/panels/Settings/WebcamPanel.vue
new file mode 100644
index 000000000..a2278e5b1
--- /dev/null
+++ b/src/components/panels/Settings/WebcamPanel.vue
@@ -0,0 +1,66 @@
+<style>
+    .webcamImage {
+        width: 100%;
+    }
+</style>
+
+<template>
+    <v-card>
+        <v-list-item>
+            <v-list-item-avatar color="grey"><v-icon dark>mdi-webcam</v-icon></v-list-item-avatar>
+            <v-list-item-content>
+                <v-list-item-title class="headline">Webcam</v-list-item-title>
+            </v-list-item-content>
+        </v-list-item>
+        <v-divider class="my-2"></v-divider>
+        <v-card-text class="px-0 pb-0 pt-3 content">
+            <v-row>
+                <v-col class="px-10 py-0">
+                    <v-text-field
+                        v-model="webcamUrl"
+                        label="Webcam URL"
+                    ></v-text-field>
+                </v-col>
+            </v-row>
+            <v-row>
+                <v-col class="px-10 py-0">
+                    <v-switch v-model="boolNavi" label="Show in Navigation"></v-switch>
+                </v-col>
+            </v-row>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+    export default {
+        components: {
+
+        },
+        data: function() {
+            return {
+
+            }
+        },
+        computed: {
+            webcamUrl: {
+                get() {
+                    return this.$store.state.webcam.url;
+                },
+                set(newWebcamUrl) {
+                    return this.$store.dispatch('setSettings', { webcam: { url: newWebcamUrl } });
+                }
+            },
+            boolNavi: {
+                get() {
+                    return this.$store.state.gui.webcam.bool;
+                },
+                set(bool) {
+                    return this.$store.dispatch('setSettings', { gui: { webcam: { bool: bool } } });
+                }
+            },
+        },
+        methods: {
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/panels/Settings/index.js b/src/components/panels/Settings/index.js
new file mode 100644
index 000000000..4db511498
--- /dev/null
+++ b/src/components/panels/Settings/index.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+
+import WebcamPanel from './WebcamPanel.vue'
+import DashboardPanel from "./DashboardPanel";
+import MacrosPanel from "./MacrosPanel";
+
+Vue.component('settings-webcam-panel', WebcamPanel);
+Vue.component('settings-dashboard-panel', DashboardPanel);
+Vue.component('settings-macros-panel', MacrosPanel);
+
+export default {
+
+}
\ No newline at end of file
diff --git a/src/components/panels/ToolsPanel.vue b/src/components/panels/ToolsPanel.vue
index d209bfc01..876bfe010 100644
--- a/src/components/panels/ToolsPanel.vue
+++ b/src/components/panels/ToolsPanel.vue
@@ -50,8 +50,8 @@
                     </v-col>
                 </v-row>
             </div>
-            <v-divider class="my-2"></v-divider>
-            <v-row>
+            <v-divider class="my-2" v-if="boolTempchart"></v-divider>
+            <v-row v-if="boolTempchart">
                 <v-col>
                     <line-chart :chart-data="chartdata" v-if="loaded"></line-chart>
                 </v-col>
@@ -84,6 +84,7 @@
             ...mapState({
                 labels: state => state.temperaturChart.labels,
                 datasets: state => state.temperaturChart.datasets,
+                boolTempchart: state => state.gui.dashboard.boolTempchart,
             }),
             ...mapGetters([
                 'heaters',
diff --git a/src/components/panels/WebcamPanel.vue b/src/components/panels/WebcamPanel.vue
index 5df05f324..a1847ae49 100644
--- a/src/components/panels/WebcamPanel.vue
+++ b/src/components/panels/WebcamPanel.vue
@@ -7,7 +7,7 @@
 <template>
     <v-card>
         <v-list-item>
-            <v-list-item-avatar color="grey"><v-icon dark>fa-camera</v-icon></v-list-item-avatar>
+            <v-list-item-avatar color="grey"><v-icon dark>mdi-webcam</v-icon></v-list-item-avatar>
             <v-list-item-content>
                 <v-list-item-title class="headline">Webcam</v-list-item-title>
             </v-list-item-content>
diff --git a/src/components/panels/index.js b/src/components/panels/index.js
index f08e60efb..b6284eb3b 100644
--- a/src/components/panels/index.js
+++ b/src/components/panels/index.js
@@ -8,6 +8,7 @@ import Peripherie from "./PeripheriePanel";
 import MacrosPanel from "./MacrosPanel";
 import LimitsPanel from "./LimitsPanel";
 import WebcamPanel from "./WebcamPanel";
+import Settings from "./Settings/";
 
 Vue.component('status-panel', StatusPanel);
 Vue.component('tools-panel', ToolsPanel);
@@ -19,5 +20,5 @@ Vue.component('limits-panel', LimitsPanel);
 Vue.component('webcam-panel', WebcamPanel);
 
 export default {
-    StatusPanel,
+    Settings
 }
\ No newline at end of file
diff --git a/src/inputs/SettingsMacroSwitch.vue b/src/inputs/SettingsMacroSwitch.vue
new file mode 100644
index 000000000..fb7d9887b
--- /dev/null
+++ b/src/inputs/SettingsMacroSwitch.vue
@@ -0,0 +1,46 @@
+<style>
+    .settings_macro_switch .v-messages {
+        display: none;
+    }
+</style>
+
+<template>
+    <v-switch v-model="value" :label="name.toUpperCase()" @change="setValue" class="settings_macro_switch mt-0"></v-switch>
+</template>
+
+
+<script>
+    import { mapState } from 'vuex';
+
+    export default {
+        data: function() {
+            return {
+                value: false
+            }
+        },
+        props: {
+            name: String,
+        },
+        computed: {
+            ...mapState({
+                hiddenMacros: state => state.gui.dashboard.hiddenMacros
+            }),
+        },
+        methods: {
+            setValue() {
+                if (this.value) {
+                    let index = this.hiddenMacros.indexOf(this.name);
+                    if (index > -1) this.hiddenMacros.splice(index, 1);
+                } else this.hiddenMacros.push(this.name);
+            }
+        },
+        watch: {
+            hiddenMacros: function() {
+                this.value = !this.hiddenMacros.includes(this.name);
+            }
+        },
+        created() {
+            this.value = !this.hiddenMacros.includes(this.name);
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/pages/Console.vue b/src/pages/Console.vue
index e3f4a0554..659c5f81c 100644
--- a/src/pages/Console.vue
+++ b/src/pages/Console.vue
@@ -39,17 +39,7 @@
                         v-on:keyup.up="onKeyUp"
                         v-on:keyup.down="onKeyDown"
                         v-on:keydown.tab="getAutocomplete"
-                        v-on:blur="handleBlur"
                 ></v-text-field>
-                <!--<v-text-field
-                    v-model="gcode"
-                    label="Send code..."
-                    solo
-                    class="gcode-command-field"
-                    v-on:keyup.enter="doSend"
-                    v-on:keyup.up="onKeyUp"
-                    v-on:keyup.down="onKeyDown"
-                ></v-text-field>-->
             </v-col>
 
             <v-col class="col-auto align-content-center">
@@ -173,10 +163,10 @@
             getAutocomplete(e) {
                 e.preventDefault();
                 if (this.gcode.length) {
-                    let commands = this.helplist.filter((element) => element.commandLow.indexOf(this.gcode) === 0);
+                    let commands = this.helplist.filter((element) => element.commandLow.indexOf(this.gcode.toLowerCase()) === 0);
                     if (commands && commands.length === 1) this.gcode = commands[0].command;
                     else {
-                        let commands = this.helplist.filter((element) => element.commandLow.includes(this.gcode));
+                        let commands = this.helplist.filter((element) => element.commandLow.includes(this.gcode.toLowerCase()));
                         if (commands && commands.length) {
                             let output = "";
                             commands.forEach(command => output += "<b>"+command.command+":</b> "+command.description+"<br />");
@@ -185,8 +175,6 @@
                         }
                     }
                 }
-            },
-            handleBlur() {
                 this.$refs.gcodeCommandField.focus();
             }
         }
diff --git a/src/pages/Webcam.vue b/src/pages/Webcam.vue
new file mode 100644
index 000000000..40ff7695a
--- /dev/null
+++ b/src/pages/Webcam.vue
@@ -0,0 +1,32 @@
+<style>
+
+</style>
+
+<template>
+    <div>
+        <v-row>
+            <v-col col-12>
+                <webcam-panel></webcam-panel>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+<script>
+    import { mapState } from 'vuex';
+
+    export default {
+        data () {
+            return {
+
+            }
+        },
+        computed: {
+            ...mapState({
+                webcamUrl: state => state.webcam.url,
+            }),
+        },
+        methods: {
+
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/pages/settings/general.vue b/src/pages/settings/general.vue
deleted file mode 100644
index cc7281da4..000000000
--- a/src/pages/settings/general.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-    <div>
-        Settings - General
-    </div>
-</template>
-<script>
-    export default {
-
-    }
-</script>
\ No newline at end of file
diff --git a/src/pages/settings/interface.vue b/src/pages/settings/interface.vue
new file mode 100644
index 000000000..909b25557
--- /dev/null
+++ b/src/pages/settings/interface.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <v-row>
+            <v-col class="col-6">
+                <settings-dashboard-panel></settings-dashboard-panel>
+            </v-col>
+            <v-col class="col-6">
+                <settings-webcam-panel></settings-webcam-panel>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col class="col-6">
+                <settings-macros-panel></settings-macros-panel>
+            </v-col>
+        </v-row>
+        <v-fab-transition>
+            <v-btn fab fixed large bottom right :loading="loadingUpload" @click="saveGuiSettings">
+                <v-icon>mdi-check</v-icon>
+            </v-btn>
+        </v-fab-transition>
+    </div>
+</template>
+<script>
+    import { mapState, mapActions } from 'vuex';
+
+    export default {
+        computed: {
+            ...mapState({
+                loadingUpload: state => state.socket.loadingSaveGuiConfig,
+            }),
+        },
+        methods: {
+            ...mapActions([
+                'saveGuiSettings'
+            ]),
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/routes/index.js b/src/routes/index.js
index 9dc026ecc..2ff8166ec 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -1,9 +1,10 @@
 import Dashboard from '../pages/Dashboard.vue'
 //import Status from '../pages/Status.vue'
+import Webcam from '../pages/Webcam.vue'
 import Console from '../pages/Console.vue'
 import Files from '../pages/Files.vue'
 import Settings from '../pages/Settings.vue'
-import SettingsGeneral from '../pages/settings/general.vue'
+import SettingsInterface from '../pages/settings/interface.vue'
 import SettingsMachine from '../pages/settings/machine.vue'
 
 const routes = [
@@ -11,13 +12,19 @@ const routes = [
         title: "Dashboard",
         path: '/',
         icon: 'view-dashboard',
-        component: Dashboard
+        component: Dashboard,
+    },
+    {
+        title: "Webcam",
+        path: '/webcam',
+        icon: 'webcam',
+        component: Webcam,
     },
     {
         title: "Console",
         path: '/console',
         icon: 'code-tags',
-        component: Console
+        component: Console,
     },
     /*{
         title: "Current Job",
@@ -29,7 +36,7 @@ const routes = [
         title: "G-Code Files",
         path: '/files',
         icon: 'printer-3d-nozzle',
-        component: Files
+        component: Files,
     },
     {
         title: "Settings",
@@ -38,9 +45,9 @@ const routes = [
         component: Settings,
         children: [
             {
-                title: 'General',
-                path: '/settings/general',
-                component: SettingsGeneral
+                title: 'Interface',
+                path: '/settings/interface',
+                component: SettingsInterface
             },
             {
                 title: 'Machine',
diff --git a/src/store/actions.js b/src/store/actions.js
index af8c1ad02..5c8bb1b6c 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -1,17 +1,44 @@
 import Vue from 'vue'
 import router from "../plugins/router";
+import store from "./index";
+import axios from "axios";
+import {hostname} from "./variables";
 
 
 export default {
     socket_on_open ({ commit }) {
         commit('setConnected');
-        window.console.log('Socket connected');
-
         Vue.prototype.$socket.sendObj('get_printer_status', { }, 'getHelpData');
+
+        fetch('http://'+store.state.socket.hostname+':'+store.state.socket.port+'/printer/files/gui.json')
+        .then(res => res.json()).then(file => {
+            store.commit('setSettings', file);
+        }).catch(function() {
+            window.console.warn('No kwc config file found.');
+        });
+
+        Vue.prototype.$socket.sendObj('get_printer_info', {}, 'getKlipperInfo');
+        Vue.prototype.$socket.sendObj('get_printer_objects', {}, 'getObjectInfo');
+        Vue.prototype.$socket.sendObj('get_printer_status', { heater: [] }, 'getObjectInfo');
+        Vue.prototype.$socket.sendObj('get_printer_status', { configfile: ['config'] }, 'getPrinterConfig');
+        Vue.prototype.$socket.sendObj('post_printer_subscriptions', {
+            gcode: [],
+            toolhead: [],
+            virtual_sdcard: [],
+            heater: [],
+            heater_bed: [],
+            extruder: ["temperature", "target"],
+            fan: [],
+            pause_resume: [],
+            idle_timeout: [],
+
+        });
+        Vue.prototype.$socket.sendObj('get_printer_files', {}, 'getFileList');
+        Vue.prototype.$socket.sendObj('get_printer_gcode_help', {}, 'getHelpList');
     },
 
     socket_on_close ({ commit }, event) {
-        commit('setDisconnected')
+        commit('setDisconnected');
         if (event.wasClean) {
             window.console.log('Socket closed clear')
         } else {
@@ -62,7 +89,21 @@ export default {
 
     socket_reconnect ({ commit }, count) {
         commit('setConnected');
-        window.console.log(count)
+        window.console.log(count);
+        Vue.prototype.$socket.sendObj('get_printer_status', { heater: [] }, 'getObjectInfo');
+        Vue.prototype.$socket.sendObj('get_printer_status', { configfile: ['config'] }, 'getPrinterConfig');
+        Vue.prototype.$socket.sendObj('post_printer_subscriptions', {
+            gcode: [],
+            toolhead: [],
+            virtual_sdcard: [],
+            heater: [],
+            heater_bed: [],
+            extruder: ["temperature", "target"],
+            fan: [],
+            pause_resume: [],
+            idle_timeout: [],
+
+        });
     },
 
     socket_reconnect_error ({ commit }) {
@@ -70,6 +111,24 @@ export default {
         window.console.error('Socket disconnected')
     },
 
+    saveGuiSettings({ commit, state }) {
+        commit('setLoadingSaveGuiConfige', true);
+        let file = new File([JSON.stringify({ webcam: state.webcam, gui: state.gui })], 'gui.json');
+
+        let formData = new FormData();
+        formData.append('file', file);
+
+        axios.post('http://' + hostname + '/printer/files/upload',
+            formData, {
+                headers: { 'Content-Type': 'multipart/form-data' }
+            }
+        ).then(() => {
+            commit('setLoadingSaveGuiConfige', false);
+        }).catch(() => {
+            window.console.error("Error save gui.json!");
+        });
+    },
+
     getKlipperInfo({ commit }, data) {
         commit('setPrinterData', {
             hostname: data.hostname,
@@ -158,7 +217,9 @@ export default {
 
     getHelpData({ commit }, data) {
         commit('voidMutation', data);
-        window.console.log(data);
+    },
 
+    setSettings({ commit }, data) {
+        commit('setSettings', data);
     },
 }
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
index 0f5cec89c..2b19fe573 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -130,6 +130,29 @@ export default {
         });
     },
 
+    getAllMacros: state => {
+        let array = [];
+
+        for (let prop in state.config) {
+            if (prop.startsWith('gcode_macro') && !state.config[prop].hasOwnProperty('rename_existing')) {
+                array.push({
+                    'name': prop.replace('gcode_macro ', ''),
+                    'prop': state.config[prop]
+                });
+            }
+        }
+
+        return array.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;
+        });
+    },
+
     getTitle: state => {
         if (state.socket.isConnected) {
             if (state.printer.pause_resume.is_paused) return "Pause Print";
diff --git a/src/store/index.js b/src/store/index.js
index b5d3a76a2..b98d155f9 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -28,15 +28,20 @@ export default new Vuex.Store({
             loadingQGL: false,
             loadingRestart: false,
             loadingRestartFirmware: false,
+            loadingSaveGuiConfig: false,
         },
         webcam: {
             url: ""
         },
         gui: {
             dashboard: {
-                boolWebcam: false,
+                boolWebcam: true,
+                boolTempchart: true,
                 hiddenMacros: [],
             },
+            webcam: {
+                bool: false,
+            },
             gcodefiles: {
                 countPerPage: 10,
             }
diff --git a/src/store/mutations.js b/src/store/mutations.js
index cbfb76821..e56032ae0 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -118,20 +118,23 @@ export default {
 
     setFileList(state, data) {
         state.files = [];
-
-        for (let [key, file] of Object.entries(data)) {
-            state.files.push({
-                number: key,
-                filename: file.filename,
-                modified: Date.parse(file.modified),
-                size: file.size,
-                slicer: file.slicer,
-                filament_used: file.filament_used,
-                estimated_time: file.estimated_time,
-                layer_height: file.layer_height,
-                first_layer_height: file.first_layer_height,
-                object_height: file.object_height,
-            });
+        let array = Object.entries(data);
+
+        for (let [key, file] of array) {
+            if (file.filename !== "gui.json") {
+                state.files.push({
+                    number: key,
+                    filename: file.filename,
+                    modified: Date.parse(file.modified),
+                    size: file.size,
+                    slicer: file.slicer,
+                    filament_used: file.filament_used,
+                    estimated_time: file.estimated_time,
+                    layer_height: file.layer_height,
+                    first_layer_height: file.first_layer_height,
+                    object_height: file.object_height,
+                });
+            }
         }
         //state.files = data;
     },
@@ -223,6 +226,10 @@ export default {
         state.socket.loadingRestartFirmware = value;
     },
 
+    setLoadingSaveGuiConfige(state, value) {
+        state.socket.loadingSaveGuiConfig = value;
+    },
+
     reportError(state, data) {
         //Vue.$toast.error(data.message);
         window.console.log(data);