fix: clear out the last type warnings

Author: cadriel

src/components/cards/TemperatureCard.vue

@@ -17,17 +17,7 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import TemperatureChartWidget from '@/components/widgets/TemperatureChartWidget.vue'
 import TemperatureTargetsWidget from '@/components/widgets/TemperatureTargetsWidget.vue'
-import { Chart } from 'chart.js'
-
-export interface Data {
-  label: string;
-  data: Value[];
-}
-
-export interface Value {
-  x: Date;
-  y: number;
-}
+import { ChartData, Chart } from '@/store/socket/types'
 
 @Component({
   components: {
@@ -52,19 +42,13 @@ export default class TemperatureCard extends Vue {
   }
 
   @Watch('allChartData')
-  onAllChartDataChanged (val: any) {
-    if (val.datasets.length) {
+  onAllChartDataChanged (val: Chart) {
+    if (val.datasets && val.datasets.length) {
       this.start()
     }
   }
 
-  mounted () {
-    // we should setup a watch and start once we have initial data.
-    // this.start()
-  }
-
   private start () {
-    // this.chartData.datasets = this.$store.state.socket.chart
     this.chartData = this.allChartData
     this.chartReady = true
   }

src/components/widgets/TemperatureChartWidget.vue

@@ -1,13 +1,11 @@
 <script lang="ts">
-/* eslint-disable padded-blocks */
-import { Vue, Component, Prop, Mixins, Emit } from 'vue-property-decorator'
+import { Vue, Component, Prop, Mixins } from 'vue-property-decorator'
 import Chart from 'chart.js'
 import VueChart from 'vue-chartjs'
 import 'chartjs-plugin-colorschemes'
 
 @Component({})
 export default class TemperatureChartWidget extends Mixins(VueChart.Line, VueChart.mixins.reactiveProp) {
-
   @Prop({ required: true, default: {} })
   public chartData!: Chart.ChartData
 
@@ -69,7 +67,6 @@ export default class TemperatureChartWidget extends Mixins(VueChart.Line, VueCha
 
   private applyDefaultOptions () {
     const ticks = this.getXTicks()
-    // this.options.onClick = this.onClick
     this.options.maintainAspectRatio = false
     this.options.responsive = true
     this.options.scales = {
@@ -150,33 +147,6 @@ export default class TemperatureChartWidget extends Mixins(VueChart.Line, VueCha
       mode: undefined
     }
   }
-
-  private onClick (
-    event?: MouseEvent | undefined,
-    activeElements?: {}[] | undefined
-  ): any {
-    const element = this.chart.getElementAtEvent(event)
-    if (element && element.length > 0) {
-      this.clickChartElement(element)
-    }
-  }
-
-  /**
-   * Reset chart position
-   */
-  // @Watch('resetChart')
-  // private resetChartPosition() {
-  //   console.log(this.chart);
-  //   if (this.resetChart) {
-  //     const chart: any = this.zoomChartInstance;
-  //     chart.resetZoom();
-  //   }
-  // }
-
-  @Emit('click-chart-element')
-  public clickChartElement (element: any) {
-    return element
-  }
 }
 
 </script>

src/components/widgets/TemperatureTargetsWidget.vue

@@ -86,6 +86,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import InputTemperature from '@/components/inputs/InputTemperature.vue'
 import UtilsMixin from '@/mixins/utils'
+import { Fan, Heater } from '@/store/socket/types'
 
 @Component({
   components: {
@@ -105,11 +106,11 @@ export default class TemperatureTargetsWidget extends Mixins(UtilsMixin) {
     return this.$store.getters['socket/getFans']
   }
 
-  setHeaterTargetTemp (item: any, target: any) {
+  setHeaterTargetTemp (item: Heater, target: number) {
     this.sendGcode(`SET_HEATER_TEMPERATURE HEATER=${item.name} TARGET=${target}`)
   }
 
-  setFanTargetTemp (item: any, target: any) {
+  setFanTargetTemp (item: Fan, target: number) {
     this.sendGcode(`SET_TEMPERATURE_FAN_TARGET TEMPERATURE_FAN=${item.name} TARGET=${target}`)
   }
 

src/components/widgets/filesystem/FileSystemWidget.vue

@@ -163,7 +163,6 @@ import { Directory, File } from '@/store/files/types'
 import { SocketActions } from '@/socketActions'
 import DialogInput from '@/components/dialogs/dialogInput.vue'
 import BtnFileUpload from '@/components/inputs/BtnFileUpload.vue'
-import { Waits } from '@/globals'
 import { DialogData } from '@/types'
 import { clone } from 'lodash-es'
 import { AxiosResponse } from 'axios'
@@ -299,7 +298,7 @@ export default class FileSystemWidget extends Vue {
     }
   }
 
-  uploadFile (file: any) {
+  uploadFile (file: globalThis.File) {
     const formData = new FormData()
     let filename = file.name.replace(' ', '_')
     filename = `${this.currentPath}/${filename}`.substring(7)
@@ -317,8 +316,8 @@ export default class FileSystemWidget extends Vue {
   }
 
   // This feels hacky...
-  downloadFile (item: any) {
-    const filename = item.name
+  downloadFile (item: File) {
+    const filename = item.name || ''
     const filepath = `/server/files/${this.currentPath}/${item.name}`
     this.$http.get(
       this.apiUrl + filepath,

src/plugins/axios.ts

@@ -1,7 +1,7 @@
 import _Vue from 'vue'
 import Axios, { AxiosStatic } from 'axios'
 
-export function AxiosPlugin<AxiosPlugOptions> (Vue: typeof _Vue, options?: AxiosPluginOptions): void {
+export function AxiosPlugin<AxiosPlugOptions> (Vue: typeof _Vue): void {
   // do stuff with options
   Vue.prototype.$http = Axios
   Vue.$http = Axios

src/plugins/filters.ts

@@ -65,9 +65,10 @@ const Filters = {
   },
 
   /**
-   * The filesystem sorted. This is taken from vuetify, and modified to ensure our directories
+   * The filesystem sorter. This is copied from vuetify, and modified to ensure our directories
    * are always sorted to the top.
    */
+  /* eslint-disable @typescript-eslint/no-explicit-any */
   fileSystemSort (items: any, sortBy: string[], sortDesc: boolean[], locale: string) {
     if (sortBy === null || !sortBy.length) return items
     const stringCollator = new Intl.Collator(locale, { sensitivity: 'accent', usage: 'sort' })
@@ -105,9 +106,9 @@ const Filters = {
       }
       return 0
     })
-    // items.sort((a: any, b: any) => (a.isDirectory === b.isDirectory) ? 0 : (a.isDirectory ? -1 : 1))
     return items
   }
+  /* eslint-enable @typescript-eslint/no-explicit-any */
 }
 
 export const FiltersPlugin = {
@@ -133,6 +134,8 @@ declare module 'vue/types/vue' {
     capitalize(string: string): string;
     formatFileDateTime(datetime: string): string;
     getReadableFileSizeString(fileSizeInBytes: number): string;
+    /* eslint-disable @typescript-eslint/no-explicit-any */
     fileSystemSort(items: Array<any>, sortBy: string[], sortDesc: boolean[], locale: string): Array<any>;
+    /* eslint-enable @typescript-eslint/no-explicit-any */
   }
 }

src/socketActions.ts

@@ -42,7 +42,7 @@ export const SocketActions = {
   async printerPrintCancel () {
     Vue.$socket.emit(
       'printer.print.cancel', {
-        action: 'onPrintCancel',
+        action: 'socket/onPrintCancel',
         wait: Waits.onPrintCancel
       }
     )
@@ -51,7 +51,7 @@ export const SocketActions = {
   async printerPrintPause () {
     Vue.$socket.emit(
       'printer.print.pause', {
-        action: 'onPrintPause',
+        action: 'socket/onPrintPause',
         wait: Waits.onPrintPause
       }
     )
@@ -60,7 +60,7 @@ export const SocketActions = {
   async printerPrintResume () {
     Vue.$socket.emit(
       'printer.print.resume', {
-        action: 'onPrintResume',
+        action: 'socket/onPrintResume',
         wait: Waits.onPrintResume
       }
     )

src/store/socket/actions.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { ActionTree } from 'vuex'
-import { SocketState, ChartItem } from './types'
+import { SocketState, ChartDataSet } from './types'
 import { RootState } from '../types'
 import { configureChartEntry } from '../helpers'
 import { Globals } from '@/globals'
@@ -59,18 +59,18 @@ export const actions: ActionTree<SocketState, RootState> = {
   /**
    * Print cancelled confirmation.
    */
-  async onPrintCancel ({ commit }, payload) {
+  async onPrintCancel () {
     console.log('Print Cancelled')
   },
 
   /**
    * Print paused confirmation.
    */
-  async onPrintPause ({ commit }, payload) {
+  async onPrintPause () {
     console.log('Print Paused')
   },
 
-  async onPrintResume ({ commit }, payload) {
+  async onPrintResume () {
     console.log('Print Resumed')
   },
 
@@ -162,7 +162,7 @@ export const actions: ActionTree<SocketState, RootState> = {
       if (originalKey.includes(' ')) {
         key = key.split(' ')[1]
       }
-      const data: ChartItem[] = [
+      const data: ChartDataSet[] = [
         { label: key, data: [], radius: 0 },
         { label: `${key}Target`, data: [], radius: 0 }
       ]
@@ -283,7 +283,7 @@ export const actions: ActionTree<SocketState, RootState> = {
   async notifyFilelistChanged ({ dispatch }, payload) {
     dispatch('files/notify' + Vue.$filters.capitalize(payload.action), payload, { root: true }) // Passed on to the files module
   },
-  async notifyMetadataUpdate ({ commit, state }, payload) {
+  async notifyMetadataUpdate (_, payload) {
     console.log('metadataUpdate', payload)
   },
 
@@ -306,7 +306,7 @@ export const actions: ActionTree<SocketState, RootState> = {
     }
     commit('addConsoleEntry', payload.replace(/(?:\r\n|\r|\n)/g, '<br>'))
   },
-  async addMacro ({ commit, state, rootState }, macro) {
+  async addMacro ({ commit, rootState }, macro) {
     // Macros should include a property to indicate if they're visible
     // on the dashboard or not. This comes from the fileConfig.
     const hidden = rootState.config?.fileConfig?.dashboard?.hiddenMacros.includes(macro)

src/store/socket/getters.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { GetterTree } from 'vuex'
-import { SocketState, TimeEstimates } from './types'
+import { Heater, Fan, SocketState, TimeEstimates, Sensor, Chart, ChartDataSet } from './types'
 import { RootState } from '../types'
 import { chartConfiguration } from '@/globals'
 import { TinyColor } from '@ctrl/tinycolor'
@@ -85,12 +85,12 @@ export const getters: GetterTree<SocketState, RootState> = {
   /**
    * Return available heaters
    */
-  getHeaters: (state) => {
+  getHeaters: (state): Heater[] => {
     if (
       state.printer.heaters.available_heaters &&
       state.printer.heaters.available_heaters.length
     ) {
-      const r: any = []
+      const r: Heater[] = []
       state.printer.heaters.available_heaters.forEach((e: string) => {
         const config = (state.printer.configfile.config[e]) ? state.printer.configfile.config[e] : undefined
         r.push({
@@ -100,7 +100,7 @@ export const getters: GetterTree<SocketState, RootState> = {
           maxTemp: (config && config.max_temp) ? parseInt(config.max_temp) : null
         })
       })
-      return r.sort((a: any, b: any) => {
+      return r.sort((a: Heater, b: Heater) => {
         const name1 = a.name.toUpperCase()
         const name2 = b.name.toUpperCase()
         return (name1 < name2) ? -1 : (name1 > name2) ? 1 : 0
@@ -112,12 +112,12 @@ export const getters: GetterTree<SocketState, RootState> = {
   /**
   * Return available temperature fans
   */
-  getFans: (state) => {
+  getFans: (state): Fan[] => {
     if (
       state.temperature_fans &&
       state.temperature_fans.length
     ) {
-      const r: any = []
+      const r: Fan[] = []
       state.temperature_fans.forEach((e: string) => {
         const config = (state.printer.configfile.config['temperature_fan ' + e]) ? state.printer.configfile.config['temperature_fan ' + e] : undefined
         r.push({
@@ -135,12 +135,12 @@ export const getters: GetterTree<SocketState, RootState> = {
   /**
    * Return available temperature probes / sensors.
    */
-  getSensors: (state) => {
+  getSensors: (state): Sensor[] => {
     if (
       state.temperature_sensors &&
       state.temperature_sensors.length
     ) {
-      const r: any = []
+      const r: Sensor[] = []
       state.temperature_sensors.forEach((e: string) => {
         r.push({
           name: e,
@@ -180,7 +180,7 @@ export const getters: GetterTree<SocketState, RootState> = {
   },
 
   getChartData: (state) => {
-    const chartData: {[key: string]: Array<{[key: string]: any}> } = {
+    const chartData: Chart = {
       labels: [],
       datasets: []
     }
@@ -190,7 +190,7 @@ export const getters: GetterTree<SocketState, RootState> = {
       // Beds should probably be some variation of blue;
       // Hotends should be some variation of red;
       // Other sensors can hue off'f green.
-      const defaults: {[key: string]: any } = {
+      const defaults: ChartDataSet = {
         data: item.data,
         label: item.label,
         display: false,

src/store/socket/mutations.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { MutationTree } from 'vuex'
 import { get } from 'lodash-es'
-import { SocketState, ChartItem, Macro } from './types'
+import { SocketState, ChartDataSet, Macro } from './types'
 import { state as originalState, state } from './index'
 import { chartConfiguration } from '@/globals'
 
@@ -84,7 +84,7 @@ export const mutations: MutationTree<SocketState> = {
     }
   },
   addInitialChartData (state, payload) {
-    payload.forEach((item: ChartItem) => {
+    payload.forEach((item: ChartDataSet) => {
       state.chart.push(item)
     })
   },