fix: removes the delay on app init when the printer is off

Signed-off-by: Craig Bassett <craig.bassett@gmail.com>

src/components/cards/settings/ThemeSettingsCard.vue

@@ -14,7 +14,6 @@
         @update:color="handlePrimaryColorChange"
         mode="hexa"
         hide-mode-switch
-        hide-inputs
         canvas-height="100"
         dot-size="25"
       >

src/components/widgets/SystemPrintersWidget.vue

@@ -41,7 +41,7 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import consola from 'consola'
-import { Config, InstanceConfig, ApiConfig } from '@/store/config/types'
+import { InitConfig, InstanceConfig, ApiConfig } from '@/store/config/types'
 import VersionStatus from '@/components/VersionStatus.vue'
 import DialogAddInstance from '@/components/dialogs/dialogAddInstance.vue'
 import UtilsMixin from '@/mixins/utils'
@@ -89,10 +89,12 @@ export default class SystemPrintersWidget extends Mixins(UtilsMixin) {
 
     // Re-init the app.
     appInit(apiConfig, this.$store.state.config.hostConfig)
-      .then((config: Config) => {
+      .then((config: InitConfig) => {
         // Reconnect the socket with the new instance url.
-        consola.debug('Activating new instance with config', config)
-        this.$socket.connect(config.apiConfig.socketUrl)
+        if (config.apiConnected) {
+          consola.debug('Activating new instance with config', config)
+          this.$socket.connect(config.apiConfig.socketUrl)
+        }
       })
   }
 }

src/globals.ts

@@ -88,6 +88,8 @@ import {
  * Global, static constants.
  */
 export const Globals = Object.freeze({
+  APP_NAME: 'fluidd',
+  NETWORK_REQUEST_TIMEOUT: 500,
   CONSOLE_HISTORY_RETENTION: 1000, // total count
   CONSOLE_RECEIVE_PREFIX: '',
   CONSOLE_SEND_PREFIX: '$ ',
@@ -103,7 +105,6 @@ export const Globals = Object.freeze({
     ConsoleHistory: '.fluidd_console_history.json'
     // PrintHistory: '.fluidd_file_history.json'
   },
-  APP_NAME: 'fluidd',
   FILTERED_FILES_PREFIX: ['.', 'thumbs'],
   FILTERED_FILES_EXTENSION: ['.json'],
   DOCS_ROOT: 'https://docs.fluidd.xyz',

src/init.ts

@@ -3,7 +3,8 @@ import vuetify from './plugins/vuetify'
 import store from './store'
 import consola from 'consola'
 import { Globals } from './globals'
-import { ApiConfig, Config, HostConfig, InstanceConfig, UiSettings } from './store/config/types'
+import { ApiConfig, InitConfig, HostConfig, InstanceConfig, UiSettings } from './store/config/types'
+import { AxiosError, AxiosResponse } from 'axios'
 
 // Load API configuration
 /**
@@ -64,7 +65,7 @@ const getApiConfig = async (hostConfig: HostConfig): Promise<ApiConfig | Instanc
   const results = await Promise.all(
     endpoints.map(async endpoint => {
       try {
-        return await Vue.$http.get(endpoint + '/printer/info?date=' + new Date().getTime(), { timeout: 500 })
+        return await Vue.$http.get(endpoint + '/printer/info?date=' + new Date().getTime(), { timeout: Globals.NETWORK_REQUEST_TIMEOUT })
       } catch {
         consola.debug('Failed loading endpoint ping', endpoint)
       }
@@ -77,7 +78,7 @@ const getApiConfig = async (hostConfig: HostConfig): Promise<ApiConfig | Instanc
     : { apiUrl: '', socketUrl: '' }
 }
 
-export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): Promise<Config> => {
+export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): Promise<InitConfig> => {
   // Reset the store to its default state.
   store.dispatch('reset', {}, { root: true })
 
@@ -95,25 +96,36 @@ export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): P
   store.dispatch('config/onInitApiConfig', apiConfig)
 
   // Load any file configuration we may have.
-  const fileConfig: {[index: string]: UiSettings | string[]} = {}
+  const fileConfig: {[index: string]: UiSettings | string[] | null} | undefined = {}
   const files: {[index: string]: string} = Globals.CONFIG_FILES
+  let apiConnected = true
   if (
     apiConfig.apiUrl !== '' && apiConfig.socketUrl !== ''
   ) {
-    try {
-      for (const key in files) {
-        const file = await fetch(apiConfig.apiUrl + '/server/files/config/' + files[key], { cache: 'no-store' })
-        fileConfig[key] = (file.ok)
-          ? await file.json()
-          : null // no file yet.
-      }
-    } catch (e) {
-      // can't connect.
-      consola.debug('API Down / Not Available:', e)
+    for (const key in files) {
+      await Vue.$http.get(apiConfig.apiUrl + '/server/files/config/' + files[key] + '?date=' + new Date().getTime(), { timeout: Globals.NETWORK_REQUEST_TIMEOUT })
+        .then((d) => {
+          consola.debug('setting file data', d.data)
+          fileConfig[key] = d.data
+        })
+        .catch((e: AxiosError) => {
+          // If this is a 404, set the file config to null and move on.
+          // If this is something else, we should set the api connection to
+          // false because we couldn't make contact with moonraker.
+          if (e.response && e.response.status === 404) {
+            fileConfig[key] = null
+          } else {
+            // Otherwise, API is down / not available.
+            // if (e.code === 'ECONNABORTED') {
+            // }
+            apiConnected = false
+            consola.debug('API Down / Not Available:', e.response)
+          }
+        })
     }
   }
 
-  // uiSettings could equal;
+  // fileConfig could equal;
   // - null - meaning we made a connection, but no user configuration is saved yet, which is ok.
   // - undefined - meaning the API is likely down..
   // apiConfig could have empty strings, meaning we have no valid connection.
@@ -125,5 +137,5 @@ export const appInit = async (apiConfig?: ApiConfig, hostConfig?: HostConfig): P
     vuetify.framework.theme.currentTheme.primary = store.state.config.uiSettings.theme.colors.primary
   }
 
-  return { apiConfig, hostConfig }
+  return { apiConfig, hostConfig, apiConnected }
 }

src/main.ts

@@ -11,7 +11,7 @@ import store from './store'
 import vuetify from './plugins/vuetify'
 import VueMeta from 'vue-meta'
 import { appInit } from './init'
-import { Config } from './store/config/types'
+import { InitConfig } from './store/config/types'
 import { FiltersPlugin } from './plugins/filters'
 import { SocketPlugin } from './plugins/socketClient'
 import { ColorSetPlugin } from './plugins/colorSet'
@@ -68,7 +68,7 @@ Vue.component('inline-help', InlineHelpIcon)
 Vue.component('fluidd-icon', FluiddIcon)
 
 appInit()
-  .then((config: Config) => {
+  .then((config: InitConfig) => {
     consola.debug('Loaded App Configuration', config)
 
     // Init the socket plugin
@@ -79,7 +79,7 @@ appInit()
       store
     })
 
-    if (config.apiConfig.socketUrl) {
+    if (config.apiConfig.socketUrl && config.apiConnected) {
       Vue.$socket.connect(config.apiConfig.socketUrl)
     }
 

src/store/config/actions.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import consola from 'consola'
-import { ConfigState, GenericSave, Config, InstanceConfig, UiSettings, HostConfig, CardConfig, CardState } from './types'
+import { ConfigState, GenericSave, InitConfig, InstanceConfig, UiSettings, HostConfig, CardConfig, CardState } from './types'
 import { RootState } from '../types'
 import { Globals } from '@/globals'
 import { get } from 'lodash-es'
@@ -31,7 +31,7 @@ export const actions: ActionTree<ConfigState, RootState> = {
   /**
    * Inits any local storage state we may have.
    */
-  async initLocal ({ commit }, payload: Config) {
+  async initLocal ({ commit }, payload: InitConfig) {
     commit('onInitLocal') // Just loads local storage config into the store.
     commit('onInitInstances', payload) // Loads instances from local storage, and also inits the current instance.
   },

src/store/config/mutations.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import consola from 'consola'
 import { MutationTree } from 'vuex'
-import { ConfigState, UiSettings, GenericSave, InstanceConfig, Config, CardConfig } from './types'
+import { ConfigState, UiSettings, GenericSave, InstanceConfig, InitConfig, CardConfig } from './types'
 import { Macro } from '../socket/types'
 import { defaultState } from './index'
 import { Globals } from '@/globals'
@@ -100,7 +100,7 @@ export const mutations: MutationTree<ConfigState> = {
     state.hostConfig.hosted = payload.hosted
   },
 
-  onInitInstances (state, payload: Config) {
+  onInitInstances (state, payload: InitConfig) {
     let instances: InstanceConfig[] = []
     const apiConfig = payload.apiConfig
     // const uiSettings = payload.uiSettings

src/store/config/types.ts

@@ -96,10 +96,11 @@ export interface GenericSave {
   value: string | boolean | number;
 }
 
-export interface Config {
+export interface InitConfig {
   apiConfig: ApiConfig | InstanceConfig;
   fileConfig?: FileConfig;
   hostConfig?: HostConfig;
+  apiConnected?: boolean;
 }
 
 export interface FileConfig {

src/store/index.ts

@@ -8,7 +8,7 @@ import { devicePower } from './devicePower'
 import { version } from './version'
 import { wait } from './wait'
 import { RootState } from './types'
-import { Config } from './config/types'
+import { InitConfig } from './config/types'
 
 Vue.use(Vuex)
 
@@ -31,7 +31,7 @@ export default new Vuex.Store<RootState>({
     }
   },
   actions: {
-    async init ({ dispatch, commit }, payload: Config) {
+    async init ({ dispatch, commit }, payload: InitConfig) {
       // Should init the store, and ensure we've loaded our
       // configuration if there is any.
       commit('version/setVersion', process.env.VERSION)

src/store/socket/index.ts

@@ -8,7 +8,7 @@ import { RootState } from '../types'
 export const defaultState = (): SocketState => {
   return {
     open: false, // socket is open or closed.
-    connecting: true, // socket is trying to connect.
+    connecting: false, // socket is trying to connect.
     ready: false, // indicates the socket is ready (and has first dump of data...)
     acceptingNotifications: false,
     consoleEntryCount: 0,