fix many problems; download gcode files

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>kwc</title>
+    <title>KlipperWebControl</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>

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="green" v-if="!isConnected" :loading="loadingEmergencyStop" @click="emergencyStop"><v-icon class="mr-2">mdi-refresh-circle</v-icon> reconnect</v-btn>
+            <!--<v-btn color="green" v-if="!isConnected" :loading="loadingEmergencyStop" @click="emergencyStop"><v-icon class="mr-2">mdi-refresh-circle</v-icon> reconnect</v-btn>-->
             <v-btn color="error" v-if="isConnected" :loading="loadingEmergencyStop" @click="emergencyStop">Emergency Stop</v-btn>
         </v-app-bar>
 
@@ -124,7 +124,10 @@ export default {
         text-align: center;
         border-bottom: 1px solid #ffffff40;
         margin-bottom: 1em;
-        padding: .75em 0 .25em 0;
+        padding: .75em 0 .75em 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 
     #nav-header img {
@@ -133,9 +136,8 @@ export default {
     }
 
     #nav-header .v-toolbar__title {
-        display: inline-block;
-        line-height: 40px;
         font-size: 24px;
+        vertical-align: middle;
     }
 
     .v-navigation-drawer__content {

src/components/panels/StatusPanel.vue

@@ -7,8 +7,8 @@
                 <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="orange" v-if="(toolhead && toolhead.status === 'Ready') && is_paused" :loading="btnStatusResume" @click="btnResumeJob">resume job</v-btn>
-            <v-btn class="red ml-2" v-if="(toolhead && toolhead.status === 'Ready') && is_paused" :loading="btnStatusCancel" @click="btnCancelJob">cancel job</v-btn>
+            <v-btn class="red" v-if="(toolhead && toolhead.status === 'Ready') && is_paused" :loading="btnStatusCancel" @click="btnCancelJob">cancel job</v-btn>
+            <v-btn class="orange ml-2" v-if="(toolhead && toolhead.status === 'Ready') && is_paused" :loading="btnStatusResume" @click="btnResumeJob">resume job</v-btn>
         </v-list-item>
         <v-divider class="my-2" ></v-divider>
         <v-card-text class="px-0 pt-0 pb-2 content">

src/components/panels/TempchartPanel.vue

@@ -4,19 +4,19 @@
             <v-list-item-avatar color="grey"><v-icon dark>fa-thermometer-three-quarters</v-icon></v-list-item-avatar>
             <v-list-item-content>
                 <v-list-item-title class="headline">Temperature Chart</v-list-item-title>
-                <v-list-item-subtitle>buxdehude</v-list-item-subtitle>
+                <v-list-item-subtitle>{{ heatersCount }} heaters</v-list-item-subtitle>
             </v-list-item-content>
         </v-list-item>
         <v-divider class="my-2"></v-divider>
-        <v-card-text class="px-0 pt-0 pb-2 content">
+        <v-card-text class="pt-0 pb-2 content">
             <line-chart :chart-data="chartdata" v-if="loaded"></line-chart>
         </v-card-text>
     </v-card>
 </template>
 
 <script>
     import LineChart from '../../charts/LineChart.js'
-    import { mapState } from 'vuex'
+    import {mapGetters, mapState} from 'vuex'
 
     export default {
         components: {
@@ -35,7 +35,10 @@
             ...mapState({
                 labels: state => state.temperaturChart.labels,
                 datasets: state => state.temperaturChart.datasets,
-            })
+            }),
+            ...mapGetters([
+                'heatersCount'
+            ])
         },
         methods: {
             fillData () {

src/components/panels/ToolsPanel.vue

@@ -16,19 +16,19 @@
         <v-divider class="my-2"></v-divider>
         <v-card-text class="px-0 pt-0 pb-2 content">
             <v-row class="pl-3 pr-3">
-                <v-col class="text-center"><b>Heater</b></v-col>
-                <v-col class="text-center"><b>Current</b></v-col>
-                <v-col class="text-center"><b>Target</b></v-col>
+                <v-col class="text-center py-0"><b>Heater</b></v-col>
+                <v-col class="text-center py-0"><b>Current</b></v-col>
+                <v-col class="text-center py-0"><b>Target</b></v-col>
             </v-row>
             <div v-for="(heater, index) in heaters" v-bind:key="index" >
                 <v-divider class="my-2"></v-divider>
                 <v-row class="pl-3 pr-3 heater-row">
-                    <v-col class="text-center">
+                    <v-col class="text-center py-0">
                         <b>{{ heater.name }}</b><br />
                         <small>{{ heater.target > 0 ? "active" : "off" }}</small>
                     </v-col>
-                    <v-col class="text-center vertical_align_center"><span>{{ heater.temperature.toFixed(1) }}°C</span></v-col>
-                    <v-col class="text-center vertical_align_center">
+                    <v-col class="text-center py-0 vertical_align_center"><span>{{ heater.temperature.toFixed(1) }}°C</span></v-col>
+                    <v-col class="text-center py-0 vertical_align_center">
                         <toolInput :name="heater.name" :target="heater.target" ></toolInput>
                     </v-col>
                 </v-row>

src/pages/Files.vue

@@ -1,3 +1,17 @@
+<style>
+    .v-data-table .v-data-table-header__icon {
+        margin-left: 7px;
+    }
+
+    .v-data-table th:last-child .v-data-table-header__icon {
+        float: right;
+    }
+
+    .v-data-table .file-list-cursor:hover {
+        cursor: pointer;
+    }
+</style>
+
 <template>
     <div>
         <v-card>
@@ -22,7 +36,7 @@
                 </template>
 
                 <template #item="{ item }">
-                    <tr @contextmenu="showContextMenu($event, item)" @click="dialog.show = true, dialog.filename = item.filename">
+                    <tr @contextmenu="showContextMenu($event, item)" @click="dialog.show = true, dialog.filename = item.filename" class="file-list-cursor">
                         <td class=" ">
                             {{ item.filename }}
                         </td>
@@ -38,9 +52,9 @@
         </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 @click="downloadFile">
                     <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>
@@ -86,7 +100,7 @@
                     {
                         text: 'last modified',
                         value: 'modified',
-                        align: 'end',
+                        align: 'end'
                     },
                 ],
                 options: {
@@ -99,6 +113,7 @@
                     y: 0,
                     item: {}
                 },
+                hostname: hostname,
             }
         },
         computed: {
@@ -168,6 +183,14 @@
                     this.contextMenu.shown = true
                 });
             },
+            downloadFile() {
+                let link = document.createElement("a");
+                link.download = name;
+                link.href = 'http://' + hostname + '/printer/files/' + this.contextMenu.item.filename;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+            },
             removeFile() {
                 axios.delete(
                     'http://'+hostname+'/printer/files/'+this.contextMenu.item.filename

src/store/index.js

@@ -364,8 +364,7 @@ export default new Vuex.Store({
             commit('sendGcode', data);
         },
 
-        switchToDashboard(state) {
-            window.console.log(state);
+        switchToDashboard() {
             router.push("/");
         }
     }