From 21b56a9c55a52486efd4134b8baf088fc9657270 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 7 Mar 2020 21:47:00 +0100
Subject: [PATCH] fix many problems; download gcode files

---
 public/favicon.ico                       | Bin 4286 -> 1150 bytes
 public/index.html                        |   2 +-
 src/App.vue                              |  10 +++++---
 src/components/panels/StatusPanel.vue    |   4 +--
 src/components/panels/TempchartPanel.vue |  11 +++++---
 src/components/panels/ToolsPanel.vue     |  12 ++++-----
 src/pages/Files.vue                      |  31 ++++++++++++++++++++---
 src/store/index.js                       |   3 +--
 8 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..02b4d382def1c5eccd7160f98644586b4f86f2a8 100644
GIT binary patch
literal 1150
zcmb7@u}T9$5Qaw+u@MX?A_PgyS=jpqk}_SI6h44ed<j!3b{1(Qg}sHn#uo_06rzII
zs9>QM8nsxz|Lz83NC+xlW^ZQxx!u`0vnl>_Ipeoz+gY<EGg}8-coILxjM&7#QZOrp
zER^9QMQi!S%M+cnYp@4T5K^?3Pch~E*74_3Sj4{rH{iNqdzI!WH>nea4C@NC;S<iG
z1-I}8r*I4ppnBh++=@vXg=N+q@OK@to`ovBLc@w-8e0d|^Sn;1jY1w@Z@~Y~dJELA
zLwJTwn1d5=eGh#;=C5AyOHi+h&;^}o0XE<slru`NGv2`mG;KA^U~BLO4W0|w0~n{@
zC$<8+AWbc;(PZ5Rz55Zy=@r)=wO8%A3pzstI+JwHsQoLZ9;sLAnR=%ls+a1idONHi
zzCYbj-3sxYHCXEotDrm8-MZfIZ*YDz8;Yxsni<WG>S>l*pfhR4+K|kT&tY<A&97$E
u-!W{ji77|@u^9gn{Q1A%kL%qgb=0piO#FWP1+$lVv$KpBm~53RjkG^>RF9Vc

literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

diff --git a/public/index.html b/public/index.html
index 1f8d1b2f8..047a275e5 100644
--- a/public/index.html
+++ b/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>
diff --git a/src/App.vue b/src/App.vue
index 68c21181b..9b99f4a84 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/components/panels/StatusPanel.vue b/src/components/panels/StatusPanel.vue
index d13139206..28ee04ac6 100644
--- a/src/components/panels/StatusPanel.vue
+++ b/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">
diff --git a/src/components/panels/TempchartPanel.vue b/src/components/panels/TempchartPanel.vue
index 65c9f3a19..3666f29d1 100644
--- a/src/components/panels/TempchartPanel.vue
+++ b/src/components/panels/TempchartPanel.vue
@@ -4,11 +4,11 @@
             <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>
@@ -16,7 +16,7 @@
 
 <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 () {
diff --git a/src/components/panels/ToolsPanel.vue b/src/components/panels/ToolsPanel.vue
index f1ac92398..fed9c6721 100644
--- a/src/components/panels/ToolsPanel.vue
+++ b/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>
diff --git a/src/pages/Files.vue b/src/pages/Files.vue
index d654a0670..f38638257 100644
--- a/src/pages/Files.vue
+++ b/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
diff --git a/src/store/index.js b/src/store/index.js
index 0190dea73..78b450bde 100644
--- a/src/store/index.js
+++ b/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("/");
         }
     }