@fdm-monster/client-next 0.0.1

package/src/store/printer.store.ts

@@ -0,0 +1,236 @@
+import { defineStore } from 'pinia'
+import { PrinterDto } from '@/models/printers/printer.model'
+import {
+  ClearedFilesResult,
+  FileDto
+} from '@/models/printers/printer-file.model'
+import { PrinterFileService, PrintersService } from '@/backend'
+import { CreatePrinter } from '@/models/printers/crud/create-printer.model'
+import { PrinterJobService } from '@/backend/printer-job.service'
+import { usePrinterStateStore } from './printer-state.store'
+import { IdType } from '@/utils/id.type'
+import {
+  isPrinterDisabled,
+  isPrinterDisconnected,
+  isPrinterInMaintenance
+} from '@/shared/printer-state.constants'
+
+interface State {
+  printers: PrinterDto[]
+  printerFileCache: Record<IdType, FileDto[]>
+
+  sideNavPrinter?: PrinterDto
+  updateDialogPrinter?: PrinterDto
+  selectedPrinters: PrinterDto[]
+  maintenanceDialogPrinter?: PrinterDto
+}
+
+export const usePrinterStore = defineStore('Printers', {
+  state: (): State => ({
+    printers: [],
+    printerFileCache: {},
+
+    sideNavPrinter: undefined,
+    updateDialogPrinter: undefined,
+    selectedPrinters: [],
+    maintenanceDialogPrinter: undefined
+  }),
+  getters: {
+    printer() {
+      return (printerId?: IdType) => {
+        return this.printers.find((p) => p.id == printerId)
+      }
+    },
+    isSelectedPrinter(state) {
+      return (printerId?: IdType) =>
+        !!state.selectedPrinters.find((p: PrinterDto) => p.id === printerId)
+    },
+    printerFiles() {
+      return (printerId: IdType) => this.printerFileCache[printerId]
+    },
+    disabledCount(): number {
+      return this.printers.filter(isPrinterDisabled).length
+    },
+    disconnectedCount(): number {
+      const printerStateStore = usePrinterStateStore()
+      return this.printers.filter((p) =>
+        isPrinterDisconnected(p, printerStateStore.printerEventsById[p.id])
+      ).length
+    },
+    maintenanceCount(): number {
+      return this.printers.filter((p) => isPrinterInMaintenance(p)).length
+    }
+  },
+  actions: {
+    async createPrinter(newPrinter: CreatePrinter, forceSave: boolean) {
+      const data = await PrintersService.createPrinter(newPrinter, forceSave)
+      this.printers.push(data)
+      this.printers.sort((a: PrinterDto, b: PrinterDto) =>
+        a.name?.toLowerCase()?.localeCompare(b?.name?.toLowerCase()) ? 1 : -1
+      )
+      return data
+    },
+    toggleSelectedPrinter(printer: PrinterDto) {
+      const printerStateStore = usePrinterStateStore()
+      const selectedPrinterIndex = this.selectedPrinters.findIndex(
+        (sp) => sp.id == printer.id
+      )
+      if (selectedPrinterIndex === -1) {
+        if (printerStateStore.isApiResponding(printer.id)) {
+          this.selectedPrinters.push(printer)
+        }
+      } else {
+        this.selectedPrinters.splice(selectedPrinterIndex, 1)
+      }
+    },
+    clearSelectedPrinters() {
+      this.selectedPrinters = []
+    },
+    setSideNavPrinter(printer?: PrinterDto) {
+      this.sideNavPrinter = printer
+    },
+    setUpdateDialogPrinter(printer?: PrinterDto) {
+      this.updateDialogPrinter = printer
+    },
+    setMaintenanceDialogPrinter(printer?: PrinterDto) {
+      this.maintenanceDialogPrinter = printer
+    },
+    async updatePrinter(
+      {
+        printerId,
+        updatedPrinter
+      }: {
+        printerId: IdType
+        updatedPrinter: CreatePrinter
+      },
+      forceSave: boolean
+    ) {
+      const data = await PrintersService.updatePrinter(
+        printerId,
+        updatedPrinter,
+        forceSave
+      )
+      this._replacePrinter({ printerId, printer: data })
+      return data
+    },
+    async loadPrinters() {
+      const data = await PrintersService.getPrinters()
+      this.setPrinters(data)
+      return data
+    },
+    async deletePrinter(printerId: IdType) {
+      const data = await PrintersService.deletePrinter(printerId)
+      this._popPrinter(printerId)
+      return data
+    },
+    setPrinters(printers: PrinterDto[]) {
+      if (!printers?.length) {
+        this.printers = []
+        return
+      }
+      const viewedPrinterId = this.sideNavPrinter?.id
+      if (viewedPrinterId) {
+        this.sideNavPrinter = printers.find((p) => p.id === viewedPrinterId)
+      }
+      this.printers = printers.sort((a: PrinterDto, b: PrinterDto) =>
+        a.name?.toLowerCase()?.localeCompare(b?.name?.toLowerCase()) ? 1 : -1
+      )
+    },
+    _popPrinter(printerId: IdType) {
+      const printerIndex = this.printers.findIndex(
+        (p: PrinterDto) => p.id === printerId
+      )
+
+      if (printerIndex !== -1) {
+        this.printers.splice(printerIndex, 1)
+      } else {
+        console.warn(
+          'Printer was not popped as it did not occur in state',
+          printerId
+        )
+      }
+    },
+    _replacePrinter({
+      printerId,
+      printer
+    }: {
+      printerId: IdType
+      printer: PrinterDto
+    }) {
+      const printerIndex = this.printers.findIndex(
+        (p: PrinterDto) => p.id === printerId
+      )
+
+      if (printerIndex !== -1) {
+        this.printers[printerIndex] = printer
+      } else {
+        console.warn(
+          'Printer was not purged as it did not occur in state',
+          printerId
+        )
+      }
+    },
+    async clearPrinterFiles(printerId: IdType) {
+      if (!printerId) {
+        throw new Error('No printerId was provided')
+      }
+      const result = (await PrinterFileService.clearFiles(
+        printerId
+      )) as ClearedFilesResult
+      if (!result?.failedFiles) {
+        throw new Error('No failed files were returned')
+      }
+      const bucket = this.printerFileCache[printerId]
+      if (bucket) {
+        this.printerFileCache[printerId] = result.failedFiles
+      }
+    },
+    async loadPrinterFiles(printerId: IdType, recursive: boolean) {
+      const files = await PrinterFileService.getFiles(printerId, recursive)
+
+      files.sort((f1, f2) => {
+        return f1.date < f2.date ? 1 : -1
+      })
+
+      this.printerFileCache[printerId] = files
+      return files
+    },
+    async deletePrinterFile(printerId: IdType, fullPath: string) {
+      await PrinterFileService.deleteFileOrFolder(printerId, fullPath)
+
+      const fileBucket = this.printerFileCache[printerId]
+      if (!fileBucket?.length) {
+        console.warn('Printer file list was nonexistent', printerId)
+        return
+      }
+
+      const deletedFileIndex = fileBucket.findIndex((f) => f.path === fullPath)
+
+      if (deletedFileIndex !== -1) {
+        fileBucket.splice(deletedFileIndex, 1)
+      } else {
+        console.warn(
+          'File was not purged as it did not occur in state',
+          fullPath
+        )
+      }
+
+      return this.printerFiles(printerId)
+    },
+    async sendStopJobCommand(printerId?: IdType) {
+      const printerStateStore = usePrinterStateStore()
+      if (!printerId) return
+      const printer = this.printer(printerId)
+      if (!printer) return
+
+      const question = !printerStateStore.isPrinterPrinting(printerId)
+        ? 'The printer is still printing - are you sure to stop it?'
+        : 'The printer seems idle - do you want to command it to stop anyway?'
+
+      const answer = confirm(question)
+      if (answer) {
+        await PrinterJobService.stopPrintJob(printer.id)
+      }
+    }
+  }
+})

package/src/store/profile.store.ts

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { UserService } from '@/backend/user.service'
+
+interface State {
+  username: string | null
+  isDemoUser: boolean | null
+  userId: string | null
+}
+
+export const useProfileStore = defineStore('profile', {
+  state: (): State => ({
+    username: null,
+    isDemoUser: null,
+    userId: null
+  }),
+  actions: {
+    async getProfile() {
+      return await UserService.getProfile().then((response) => {
+        this.username = response.username
+        this.userId = response.id
+        this.isDemoUser = response.isDemoUser
+      })
+    }
+  }
+})

package/src/store/settings.store.ts

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia'
+import {
+  FrontendSettings,
+  SettingsDto,
+  TimeoutSettings
+} from '@/models/settings/settings.model'
+import { SettingsService } from '@/backend'
+import { ServerSettingsDto } from '@/models/settings/server-settings.dto'
+
+export interface FrontendDebugSettings {
+  showPrinterStateUpdateSideNav: boolean
+  showInterpretedPrinterState: boolean
+  showJobsRendered: boolean
+}
+
+export interface SettingsState {
+  settings?: SettingsDto
+  frontendDebugSettings: FrontendDebugSettings
+}
+
+export const useSettingsStore = defineStore({
+  id: 'Settings',
+  state: (): SettingsState => ({
+    settings: undefined,
+    frontendDebugSettings: {
+      showPrinterStateUpdateSideNav: false,
+      showInterpretedPrinterState: false,
+      showJobsRendered: false
+    }
+  }),
+  actions: {
+    async loadSettings(): Promise<SettingsDto> {
+      const response = await SettingsService.getSettings()
+      this.settings = response
+      return response
+    },
+    async updateFrontendSettings(
+      update: FrontendSettings
+    ): Promise<SettingsDto> {
+      const response = await SettingsService.updateFrontendSettings(update)
+      this.settings = response
+      return response
+    },
+    async updateTimeoutSettings(update: TimeoutSettings): Promise<SettingsDto> {
+      const response = await SettingsService.updateTimeoutSettings(update)
+      this.settings = response
+      return response
+    }
+  },
+  getters: {
+    serverSettings(): ServerSettingsDto | undefined {
+      return this.settings?.server
+    },
+    largeTiles(): boolean {
+      return this.settings?.frontend?.largeTiles || false
+    },
+    gridCols(): number {
+      return this.settings?.frontend?.gridCols || 8
+    },
+    gridRows(): number {
+      return this.settings?.frontend?.gridRows || 8
+    }
+  }
+})

package/src/store/test-printer.store.ts

@@ -0,0 +1,70 @@
+import { defineStore } from 'pinia'
+import { CreatePrinter } from '@/models/printers/crud/create-printer.model'
+import { PrintersService } from '@/backend'
+
+export interface TestEvent {
+  correlationToken: string
+  event: string
+  payload: string
+}
+
+interface State {
+  currentCorrelationToken?: string
+  testPrinter?: CreatePrinter
+  testPrinterEvents?: TestEvent[]
+}
+
+export const useTestPrinterStore = defineStore('TestPrinter', {
+  state: (): State => ({
+    currentCorrelationToken: undefined,
+    testPrinter: undefined,
+    testPrinterEvents: []
+  }),
+  getters: {
+    getEvents() {
+      return () =>
+        (
+          this.testPrinterEvents?.filter(
+            (e) => e.correlationToken === this.currentCorrelationToken
+          ) || []
+        )
+          .filter(
+            (e) =>
+              (e.event !== 'API_STATE_UPDATED' || e.payload !== 'unset') &&
+              (e.event !== 'WS_STATE_UPDATED' || e.payload !== 'unopened')
+          )
+          .map((e) => {
+            const event = e.event.startsWith('WS_') ? 'Socket' : 'API'
+            return {
+              event,
+              payload: e.payload
+                ?.toString()
+                ?.replace('noResponse', 'unreachable')
+                .replace('authFail', 'authentication failure'),
+              failure: [
+                'authFail',
+                'noResponse',
+                'aborted',
+                'globalKey',
+                'error',
+                'connection error',
+                'closed',
+                'connection closed'
+              ].includes(e.payload?.toString())
+            }
+          })
+    }
+  },
+  actions: {
+    clearEvents() {
+      this.testPrinterEvents = []
+    },
+    async createTestPrinter(newPrinter: CreatePrinter) {
+      this.testPrinter = newPrinter
+      return await PrintersService.testConnection(newPrinter)
+    },
+    saveEvent(event: TestEvent) {
+      this.testPrinterEvents?.push(event)
+    }
+  }
+})

package/src/store/uploads.store.ts

@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia'
+import {
+  FailedQueuedUpload,
+  QueuedUpload
+} from '@/models/uploads/queued-upload.model'
+import { PrinterFileService } from '@/backend'
+import { useSnackbar } from '@/shared/snackbar.composable'
+
+export interface UploadsState {
+  queuedUploads: QueuedUpload[]
+  failedUploads: FailedQueuedUpload[]
+  uploadingNow: boolean
+}
+
+export const useUploadsStore = defineStore('Uploads', {
+  state: (): UploadsState => ({
+    queuedUploads: [],
+    failedUploads: [],
+    uploadingNow: false
+  }),
+  getters: {
+    hasPendingUploads(state) {
+      return state.queuedUploads?.length > 0
+    },
+    isUploadingNow(state) {
+      return state.uploadingNow
+    },
+    nextUpload(state) {
+      return state.queuedUploads[0]
+    }
+  },
+  actions: {
+    queueUploads(uploads: QueuedUpload[]) {
+      this.failedUploads = []
+      this.queuedUploads.push(...uploads)
+    },
+    cancelUploads() {
+      this.queuedUploads = []
+      this.failedUploads = []
+    },
+    async handleNextUpload() {
+      const snackbar = useSnackbar()
+      // Dont upload when queue empty
+      if (!this.queuedUploads?.length) return
+      this.uploadingNow = true
+      const { file, printer, commands } = this.nextUpload
+      // We'd rather fail fast and avoid the same upload failing many times
+      this.queuedUploads.splice(0, 1)
+
+      try {
+        await PrinterFileService.uploadFile(printer, file, commands)
+      } catch (e: any) {
+        if (e.isAxiosError) {
+          const failedUpload: FailedQueuedUpload = {
+            file,
+            printer,
+            commands,
+            error: e
+          }
+          this.failedUploads.push(failedUpload)
+          snackbar.openErrorMessage({
+            title: 'Upload failure',
+            subtitle: `File ${file.name}Upload failed for  to printer ${printer.name}`
+          })
+        } else {
+          snackbar.openErrorMessage({
+            title: 'Upload failure',
+            subtitle: 'Unknown upload error occurred'
+          })
+        }
+      }
+      this.uploadingNow = false
+    }
+  }
+})

package/src/styles/README.md

@@ -0,0 +1,3 @@
+# Styles
+
+This directory is for configuring the styles of the application.

package/src/styles/settings.scss

@@ -0,0 +1,10 @@
+/**
+ * src/styles/settings.scss
+ *
+ * Configures SASS variables and Vuetify overwrites
+ */
+
+// https://vuetifyjs.com/features/sass-variables/`
+// @use 'vuetify/settings' with (
+//   $color-pack: false
+// );

package/src/types/global.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly BASE_URL: string
+  readonly PACKAGE_VERSION: string
+  readonly MODE: string
+  readonly BASE_URL: string
+  readonly PROD: boolean
+  readonly DEV: boolean
+  readonly SSR: boolean
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

package/src/utils/array.utils.ts

@@ -0,0 +1,15 @@
+export const groupArrayBy = <T>(
+  array: T[],
+  predicate: (value: T, index: number, array: T[]) => string
+) =>
+  array.reduce(
+    (acc, value, index, array) => {
+      ;(acc[predicate(value, index, array)] ||= []).push(value)
+      return acc
+    },
+    {} as { [key: string]: T[] }
+  )
+
+export const distinct = (value: any, index: number, self: any) => {
+  return self.indexOf(value) === index
+}

package/src/utils/date.utils.ts

@@ -0,0 +1,5 @@
+export function formatIntlDate(dateString: string | Date) {
+  const date = new Date(dateString)
+  // Then specify how you want your dates to be formatted
+  return new Intl.DateTimeFormat('default', { dateStyle: 'long' }).format(date)
+}

package/src/utils/download-file.util.ts

@@ -0,0 +1,25 @@
+import { getBaseUri } from '@/shared/http-client'
+
+export function downloadFileByBlob(data: ArrayBuffer, fileName: string) {
+  if (!data) {
+    throw new Error('No data to download')
+  }
+  const blob = new Blob([data], { type: 'text/plain' })
+  const link = document.createElement('a')
+  link.href = URL.createObjectURL(blob)
+  link.download = fileName
+  link.click()
+  URL.revokeObjectURL(link.href)
+}
+
+export async function downloadFileByUrl(url: string, fileName: string) {
+  const apiBase = await getBaseUri()
+  const isAbsolute =
+    url.indexOf('http://') === 0 || url.indexOf('https://') === 0
+  const finalUrl = isAbsolute ? url : `${apiBase}/${url}`
+  const link = document.createElement('a')
+  link.href = finalUrl
+  link.download = fileName
+  link.click()
+  URL.revokeObjectURL(link.href)
+}

package/src/utils/error.utils.ts

@@ -0,0 +1,3 @@
+export function errorSummary(e: any) {
+  return e.message ? `${e.message}\n ${e.stack}` : `'${e}'`
+}

package/src/utils/file-size.util.ts

@@ -0,0 +1,11 @@
+export function formatBytes(bytes: number, decimals = 2) {
+  if (bytes === 0) return '0 Bytes'
+
+  const k = 1024
+  const dm = decimals < 0 ? 0 : decimals
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
+}

package/src/utils/id.type.ts

@@ -0,0 +1 @@
+export type IdType = number | string

package/src/utils/sentry.util.ts

@@ -0,0 +1,8 @@
+import * as Sentry from '@sentry/vue'
+
+export function setSentryEnabled(enabled: boolean) {
+  const client = Sentry.getClient()
+  // @ts-ignore
+  client.getOptions().enabled = enabled
+  console.warn('Sentry enabled:', enabled)
+}

package/src/utils/test.util.ts

@@ -0,0 +1,30 @@
+import { useSnackbar } from '../shared/snackbar.composable'
+
+export function uploadProgressTest(enabled: boolean) {
+  if (!enabled) return
+
+  const snackbar = useSnackbar()
+  // Nice visual test for uploads
+  let i = 0
+  let j = 0
+  let interval: any
+  // eslint-disable-next-line prefer-const
+  interval = setInterval(() => {
+    i += 2
+    j += 3
+    snackbar.openProgressMessage('1', 'file.gcode to YoParinter', i, i > 55)
+    if (j > 10 && j < 80) {
+      snackbar.openProgressMessage('2', 'file2.gcode to Beast', i, i > 80)
+    }
+    snackbar.openProgressMessage('3', 'file3.gcode to Beast', i, i > 80)
+    snackbar.openProgressMessage('4', 'file4.gcode to Beast', i, i > 80)
+    if (j > 20)
+      snackbar.openProgressMessage('5', 'file5.gcode to Beast', i, i > 60)
+    snackbar.openProgressMessage('6', 'file6.gcode to Beast', i, i > 65)
+    snackbar.openProgressMessage('7', 'file7.gcode to Beast', i, i > 80)
+
+    if (i >= 110 && j > 115) {
+      clearInterval(interval)
+    }
+  }, 200)
+}

package/src/utils/time.utils.ts

@@ -0,0 +1,2 @@
+export const sleep = (time: number) =>
+  new Promise((res) => setTimeout(res, time))

package/src/utils/uploads-state.utils.ts

@@ -0,0 +1,58 @@
+import { FileUploadCommands } from '@/models/printers/file-upload-commands.model'
+import { PrinterDto } from '@/models/printers/printer.model'
+import { QueuedUpload } from '@/models/uploads/queued-upload.model'
+
+/**
+ * Multiple files => 1 printer
+ * @param printer
+ * @param files
+ * @param printedFileName
+ */
+export function convertPrinterMultiFileToQueue(
+  printer: PrinterDto,
+  files: File[],
+  printedFileName: string | null
+): QueuedUpload[] {
+  if (!printer) return []
+
+  return files.map((f) => {
+    const commands: FileUploadCommands = {
+      select: false,
+      print: false
+    }
+    if (f.name === printedFileName) {
+      commands.print = true
+    }
+
+    return {
+      file: f,
+      printer,
+      commands
+    }
+  }) as QueuedUpload[]
+}
+
+/**
+ * 1 file => multiple printers
+ * @param printers
+ * @param file
+ * @param commands
+ */
+export function convertMultiPrinterFileToQueue(
+  printers: PrinterDto[],
+  file: File,
+  commands: FileUploadCommands = {
+    select: true,
+    print: true
+  }
+) {
+  if (!printers?.length || !file) return []
+
+  return printers.map((p) => {
+    return {
+      file,
+      printer: p,
+      commands
+    }
+  }) as QueuedUpload[]
+}

package/src/utils/validation.utils.ts

@@ -0,0 +1,14 @@
+export function isValidIPOrMask(str: string) {
+  const splitArray = str.split('.')
+  const subAddresses = splitArray.length
+  const arr = splitArray.filter((el) => {
+    return !/^0.|\D/g.test(el)
+  })
+
+  if (subAddresses <= 1) return false
+
+  return (
+    arr.filter((el) => el.length && parseInt(el) >= 0 && parseInt(el) <= 255)
+      .length === subAddresses
+  )
+}