feat: allow toggle for temp chart

Author: cadriel

src/components/cards/TemperatureCard.vue

@@ -1,14 +1,27 @@
 <template>
   <v-card color="tertiary" class="mb-4">
-    <v-card-title class="quaternary">
-      <v-icon left>{{ icons.fire }}</v-icon>
-      <span class="font-weight-light">Temperatures</span>
+    <v-card-title class="quaternary py-3">
+
+      <v-col cols="12" lg="auto" class="pa-0">
+        <v-icon left>{{ icons.fire }}</v-icon>
+        <span class="font-weight-light">Temperatures</span>
+      </v-col>
+
+      <v-col class="pa-0 d-inline-flex justify-start justify-md-end flex-wrap">
+        <v-btn
+          @click="chartVisible = !chartVisible"
+          color="secondary"
+          class="ml-0 ml-md-2 mr-2 mr-md-0 my-1">
+          <v-icon small class="mr-1">{{ icons.chart }}</v-icon>
+          <span>Chart</span>
+        </v-btn>
+      </v-col>
     </v-card-title>
     <v-divider></v-divider>
 
     <temperature-targets-widget></temperature-targets-widget>
 
-    <v-card-text class="chart-container">
+    <v-card-text class="chart-container" v-if="chartVisible">
       <temperature-chart-widget v-if="chartReady && klippyConnected" :chart-data="chartData" :styles="chartStyles"></temperature-chart-widget>
     </v-card-text>
   </v-card>
@@ -54,6 +67,14 @@ export default class TemperatureCard extends Mixins(UtilsMixin) {
     this.chartData = this.allChartData
     this.chartReady = true
   }
+
+  get chartVisible (): boolean {
+    return this.$store.state.config.localConfig.chartVisible
+  }
+
+  set chartVisible (val: boolean) {
+    this.$store.dispatch('config/saveLocalStorage', { chartVisible: val })
+  }
 }
 </script>
 

src/components/cards/ToolheadCard.vue

@@ -2,7 +2,7 @@
   <v-card color="tertiary" class="mb-4">
     <v-card-title class="quaternary">
       <v-icon left>{{ icons.printer3dNozzle }}</v-icon>
-      <span class="font-weight-light">Toolhead</span>
+      <span class="font-weight-light">Tool</span>
       <v-spacer />
       <v-btn
         v-if="!printerPrinting"

src/components/widgets/TemperatureTargetsWidget.vue

@@ -5,23 +5,39 @@
           Actual
         </v-col>
         <v-col class="py-0 px-2 text-subtitle-1 grey--text text--darken-1">
-          Target
-          <!-- <v-menu bottom :offset-y="true">
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn small v-bind="attrs" v-on="on" icon color="grey"><v-icon>mdi-chevron-down</v-icon></v-btn>
-            </template>
-            <v-list nav dense transition="slide-y-transition">
-              <v-list-item>
-                <v-list-item-title>Off</v-list-item-title>
-              </v-list-item>
-              <v-list-item>
-                <v-list-item-title>Set ABS</v-list-item-title>
-              </v-list-item>
-              <v-list-item>
-                <v-list-item-title>Set PLA</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu> -->
+          <v-layout>
+            Target
+            <v-spacer></v-spacer>
+            <!-- <v-menu bottom left :offset-y="true" :min-width="150">
+              <template v-slot:activator="{ on, attrs }">
+              <v-btn
+                :min-width="40"
+                v-bind="attrs" v-on="on"
+                color="secondary"
+                small
+                class="pa-0">
+                <v-icon>{{ icons.chevronDown }}</v-icon>
+              </v-btn>
+              </template>
+              <v-list
+                nav
+                dense
+                color="secondary">
+                <v-list-item link>
+                  <v-list-item-title>Off</v-list-item-title>
+                </v-list-item>
+                <v-list-item link>
+                  <v-list-item-title>Preheat</v-list-item-title>
+                </v-list-item>
+                <v-list-item link>
+                  <v-list-item-title>ABS</v-list-item-title>
+                </v-list-item>
+                <v-list-item link>
+                  <v-list-item-title>PLA</v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu> -->
+          </v-layout>
         </v-col>
       </v-row>
 

src/globals.ts

@@ -54,7 +54,8 @@ import {
   mdiCogs,
   mdiContentSaveOutline,
   mdiAlert,
-  mdiPowerPlug
+  mdiPowerPlug,
+  mdiChartBellCurve
 } from '@mdi/js'
 
 /**
@@ -71,6 +72,7 @@ export const Globals = Object.freeze({
 })
 
 export const Icons = Object.freeze({
+  chart: mdiChartBellCurve,
   power: mdiPowerPlug,
   home: mdiHome,
   close: mdiClose,

src/store/config/index.ts

@@ -14,6 +14,7 @@ export const state: ConfigState = {
   unsavedChanges: false,
   localConfig: {
     cameraVisible: false,
+    chartVisible: true,
     darkMode: true
   },
   fileConfig: {

src/store/config/types.ts

@@ -11,6 +11,7 @@ export interface ConfigState {
 export interface LocalConfig {
   [key: string]: string | boolean | number;
   cameraVisible: boolean;
+  chartVisible: boolean;
   darkMode: boolean;
 }
 

todo.md

@@ -48,6 +48,7 @@
 - add a widget to configure ztilt (needed?)
 
 ## User wants
+- another request to have the current temps above the macors etc during a print, but not while not printing.
 - draggable dashboard panels?
 - maybe look at tightening the mobile ui. have fan's as a value, that you can click
   on which then makes a popout to adjust fan?