@fdm-monster/client-next 0.0.1

package/src/components/Settings/FloorSettings.vue

@@ -0,0 +1,276 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary">
+      <v-avatar>
+        <v-icon>settings</v-icon>
+      </v-avatar>
+      <v-toolbar-title> Floor Management </v-toolbar-title>
+    </v-toolbar>
+
+    <v-list
+      subheader
+      lines="three"
+    >
+      <v-list-subheader> Floors </v-list-subheader>
+
+      <v-list-item>
+        <v-list-item-title> Create new floor </v-list-item-title>
+        <v-list-item-subtitle>
+          Creates an empty department/floor to view printer groups
+          <br />
+          <v-btn
+            color="primary"
+            @click="createFloor()"
+          >
+            Create floor
+          </v-btn>
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+
+    <v-divider />
+
+    <v-row no-gutters>
+      <v-col>
+        <v-list density="compact">
+          <v-list-item-group v-model="selectedItem">
+            <v-list-item
+              v-for="floor of floors"
+              :key="floor.id"
+            >
+              <v-list-item-title>
+                {{ floor.name }}
+              </v-list-item-title>
+              <v-list-item-subtitle>
+                {{ floor.printers.length || 0 }} assigned
+              </v-list-item-subtitle>
+
+              <v-list-item-action-text>
+                Floor number: {{ floor.floor }}
+              </v-list-item-action-text>
+            </v-list-item>
+          </v-list-item-group>
+        </v-list>
+      </v-col>
+
+      <v-col>
+        <v-toolbar>
+          <v-hover v-slot="{ isHovering, props }">
+            <v-toolbar-title v-bind="props">
+              <v-edit-dialog
+                v-if="selectedFloor"
+                @open="setEditedPrinterFloorName"
+                @save="updatePrinterFloorName"
+              >
+                <v-btn color="secondary">
+                  <v-icon
+                    v-if="isHovering"
+                    size="small"
+                  >
+                    edit
+                  </v-icon>
+                  {{ selectedFloor.name }}
+                </v-btn>
+
+                <template #input>
+                  <v-text-field
+                    v-model="editedFloorName"
+                    v-model:return-value="editedFloorName"
+                    counter
+                    label="Edit"
+                    single-line
+                  />
+                </template>
+              </v-edit-dialog>
+
+              <span v-else> Select a floor on the left </span>
+            </v-toolbar-title>
+          </v-hover>
+
+          <v-hover v-slot="{ isHovering, props }">
+            <v-toolbar-title v-bind="props">
+              <v-edit-dialog
+                v-if="selectedFloor"
+                @open="setEditedPrinterFloorNumber"
+                @save="updatePrinterFloorNumber"
+              >
+                <v-btn color="secondary">
+                  <v-icon
+                    v-if="isHovering"
+                    size="small"
+                  >
+                    edit
+                  </v-icon>
+                  {{ selectedFloor.floor }}
+                </v-btn>
+
+                <template #input>
+                  <v-text-field
+                    v-model="editedFloorNumber"
+                    v-model:return-value="editedFloorNumber"
+                    label="Edit"
+                    single-line
+                    type="number"
+                  />
+                </template>
+              </v-edit-dialog>
+            </v-toolbar-title>
+          </v-hover>
+
+          <v-spacer />
+
+          <v-btn
+            v-if="selectedFloor"
+            color="primary"
+            @click="clickDeleteFloor()"
+          >
+            <v-icon>delete</v-icon>
+            Delete floor
+          </v-btn>
+        </v-toolbar>
+
+        <v-list v-if="selectedFloor">
+          <v-list-item
+            v-for="x in showAddedPrinters"
+            :key="x"
+          >
+            <v-list-item-content v-if="printerInFloor(selectedFloor, x)">
+              <v-list-item-title>
+                {{ printerInFloor(selectedFloor, x)?.name }}
+              </v-list-item-title>
+            </v-list-item-content>
+
+            <v-list-item-action v-if="printerInFloor(selectedFloor, x)">
+              <v-btn @click="deletePrinterFromFloor(selectedFloor, x)">
+                <v-icon>close</v-icon>
+                Clear
+              </v-btn>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { FloorDto } from '@/models/floors/floor.model'
+import { usePrinterStore } from '@/store/printer.store'
+import { useDialogsStore } from '@/store/dialog.store'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { PrinterDto } from '@/models/printers/printer.model'
+import { useFloorStore } from '@/store/floor.store'
+import { useSnackbar } from '@/shared/snackbar.composable'
+
+interface Data {
+  editedFloorName: string
+  editedFloorNumber: number
+  selectedItem: number
+}
+
+export default defineComponent({
+  name: 'FloorSettings',
+
+  props: {},
+  setup: () => {
+    return {
+      printersStore: usePrinterStore(),
+      floorStore: useFloorStore(),
+      dialogsStore: useDialogsStore(),
+      snackbar: useSnackbar()
+    }
+  },
+  data: (): Data => ({
+    selectedItem: 0,
+    editedFloorName: '',
+    editedFloorNumber: 0
+  }),
+
+  computed: {
+    floors() {
+      return this.floorStore.floors
+    },
+
+    selectedFloor() {
+      return this.floorStore.floors[this.selectedItem]
+    },
+
+    showAddedPrinters() {
+      return this.selectedFloor.printers?.length + 1
+    },
+
+    unassignedPrinters() {
+      return this.floorStore.floorlessPrinters
+    }
+  },
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  methods: {
+    printerInFloor(floor: FloorDto, index: number): PrinterDto | undefined {
+      if (!floor?.printers) return
+
+      const floorPrinter = floor.printers[index - 1]
+      if (!floorPrinter) return
+      return this.printersStore.printer(floorPrinter.printerId)
+    },
+
+    async createFloor() {
+      this.dialogsStore.openDialogWithContext(DialogName.AddOrUpdateFloorDialog)
+    },
+
+    setEditedPrinterFloorName() {
+      this.editedFloorName = this.selectedFloor.name
+    },
+
+    setEditedPrinterFloorNumber() {
+      this.editedFloorNumber = this.selectedFloor.floor
+    },
+
+    async updatePrinterFloorName() {
+      if (!this.selectedFloor?.id) return
+      const { id: floorId } = this.selectedFloor
+      await this.floorStore.updateFloorName({
+        floorId,
+        name: this.editedFloorName
+      })
+      this.snackbar.info('Floor name updated')
+    },
+
+    async updatePrinterFloorNumber() {
+      if (!this.selectedFloor?.id) return
+      const { id: floorId } = this.selectedFloor
+      await this.floorStore.updateFloorNumber({
+        floorId,
+        floorNumber: this.editedFloorNumber
+      })
+      this.snackbar.info('Floor level updated')
+      // Adapt to potential sort change
+      this.selectedItem = -1
+    },
+
+    async clickDeleteFloor() {
+      if (!this.selectedFloor?.id) return
+
+      await this.floorStore.deleteFloor(this.selectedFloor.id)
+      this.snackbar.info('Floor deleted')
+    },
+
+    async deletePrinterFromFloor(floor: FloorDto, index: number) {
+      const printer = this.printerInFloor(floor, index)
+      if (!floor?.id || !printer?.id) return
+
+      await this.floorStore.deletePrinterFromFloor({
+        floorId: floor.id,
+        printerId: printer.id
+      })
+      this.snackbar.info('Printer removed from floor')
+    }
+  }
+})
+</script>

package/src/components/Settings/GridSettings.vue

@@ -0,0 +1,127 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary">
+      <v-avatar>
+        <v-icon>settings</v-icon>
+      </v-avatar>
+      <v-toolbar-title> Grid Settings </v-toolbar-title>
+    </v-toolbar>
+
+    <v-list
+      subheader
+      lines="three"
+    >
+      <v-list-subheader> Grid Rows and Columns </v-list-subheader>
+      <v-list-item>
+        <v-row v-if="settingsStore.settings?.frontend">
+          <v-col cols="2">
+            <v-select
+              v-model="settingsStore.settings.frontend.gridRows"
+              :items="rowOptions()"
+              label="Set the grid rows"
+            />
+          </v-col>
+          <v-col cols="2">
+            <v-select
+              v-model="settingsStore.settings.frontend.gridCols"
+              :items="colOptions()"
+              label="Set the grid columns"
+            />
+          </v-col>
+          <v-col cols="1" />
+          <v-col>
+            <v-btn
+              color="primary"
+              @click="updateGridSettings()"
+            >
+              Save tile settings
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-list-item>
+    </v-list>
+
+    <v-divider />
+    <v-list
+      subheader
+      lines="three"
+    >
+      <v-list-subheader> Large or Compact Tiles </v-list-subheader>
+      <v-list-item>
+        <v-row v-if="settingsStore.settings?.frontend">
+          <v-col cols="5">
+            <v-checkbox
+              v-model="settingsStore.settings.frontend.largeTiles"
+              label="Large tiles"
+            />
+          </v-col>
+          <v-col cols="1">
+            <v-btn
+              color="primary"
+              @click="updateGridSettings()"
+            >
+              Save tile settings
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useSettingsStore } from '../../store/settings.store'
+import { colOptions, rowOptions } from '../../shared/printer-grid.constants'
+import { useSnackbar } from '@/shared/snackbar.composable'
+
+interface Data {
+  property: number
+}
+
+export default defineComponent({
+  name: 'GridSettings',
+  components: {},
+
+  props: {},
+  setup: () => {
+    return {
+      settingsStore: useSettingsStore(),
+      snackbar: useSnackbar()
+    }
+  },
+  data: (): Data => ({
+    property: 0
+  }),
+
+  computed: {
+    largeTilesSettings() {
+      return this.settingsStore.largeTiles
+    }
+  },
+
+  watch: {},
+
+  async created() {},
+
+  async mounted() {},
+
+  methods: {
+    rowOptions() {
+      return rowOptions
+    },
+
+    colOptions() {
+      return colOptions
+    },
+
+    async updateGridSettings() {
+      await this.settingsStore.updateFrontendSettings({
+        gridCols: this.settingsStore.gridCols,
+        gridRows: this.settingsStore.gridRows,
+        largeTiles: this.largeTilesSettings
+      })
+      this.snackbar.info('Grid settings updated')
+    }
+  }
+})
+</script>

package/src/components/Settings/OctoPrintSettings.vue

@@ -0,0 +1,188 @@
+<template>
+  <v-card>
+    <v-toolbar color="primary">
+      <v-avatar>
+        <v-icon>settings</v-icon>
+      </v-avatar>
+      <v-toolbar-title> OctoPrint Settings </v-toolbar-title>
+    </v-toolbar>
+    <v-list lines="three">
+      <v-list-item>
+        <v-list-item-title> Pre-upload file cleanup </v-list-item-title>
+        <v-list-item-subtitle>
+          Automatically cleanup old files to ensure the SD card has enough
+          space.
+          <br />
+          <v-checkbox
+            v-model="fileHandlingSettings.autoRemoveOldFilesBeforeUpload"
+            label="Remove old file before upload"
+          />
+          <v-text-field
+            v-model="fileHandlingSettings.autoRemoveOldFilesCriteriumDays"
+            :disabled="!fileHandlingSettings.autoRemoveOldFilesBeforeUpload"
+            label="Amount of days to keep files"
+            min="0"
+            variant="outlined"
+            type="number"
+          />
+          <v-checkbox
+            v-model="fileHandlingSettings.autoRemoveOldFilesAtBoot"
+            label="Remove old files when (re)booting the server"
+          />
+          <v-btn
+            color="primary"
+            @click="setFileCleanSettings()"
+          >
+            save file clean settings
+          </v-btn>
+        </v-list-item-subtitle>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title> Connection Timeout </v-list-item-title>
+        <v-list-item-subtitle v-if="settingsStore.settings?.timeout">
+          The connection timeout is the amount of time in milliseconds that the
+          server will wait for OctoPrint to respond before giving up
+          <v-text-field
+            v-model="settingsStore.settings.timeout.apiTimeout"
+            label="Connection Timeout"
+            min="0"
+            variant="outlined"
+            type="number"
+          />
+          <v-btn
+            color="primary"
+            @click="updateTimeoutSettings()"
+          >
+            save connection timeout
+          </v-btn>
+        </v-list-item-subtitle>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title> Clean file references </v-list-item-title>
+        <v-list-item-subtitle>
+          Clear out the file references for all printers - this does not remove
+          them from OctoPrint!
+          <br />
+          <v-btn
+            color="primary"
+            @click="purgeFiles()"
+          >
+            Purge file references
+          </v-btn>
+        </v-list-item-subtitle>
+      </v-list-item>
+
+      <v-list-item>
+        <v-list-item-title>
+          Disable inefficient GCode analysis
+        </v-list-item-title>
+        <v-list-item-subtitle>
+          Disable GCode analysis on all printers at once, preventing CPU
+          intensive and inaccurate time/size estimates.
+          <br />
+          <v-btn
+            color="primary"
+            @click="bulkDisableGCodeAnalysis()"
+          >
+            Bulk disable GCode Analysis
+          </v-btn>
+        </v-list-item-subtitle>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { PrinterFileService, SettingsService } from '@/backend'
+import { PrinterSettingsService } from '@/backend/printer-settings.service'
+import { FileCleanSettings } from '@/models/settings/printer-file-clean-settings.model'
+import { usePrinterStore } from '@/store/printer.store'
+import { usePrinterStateStore } from '@/store/printer-state.store'
+import { useSnackbar } from '@/shared/snackbar.composable'
+import { useSettingsStore } from '@/store/settings.store'
+
+interface Data {
+  fileHandlingSettings: FileCleanSettings
+}
+
+export default defineComponent({
+  name: 'FdmSettings',
+
+  props: {},
+  setup: () => {
+    return {
+      settingsStore: useSettingsStore(),
+      printersStore: usePrinterStore(),
+      snackbar: useSnackbar(),
+      printerStateStore: usePrinterStateStore()
+    }
+  },
+  data: (): Data => ({
+    fileHandlingSettings: {
+      autoRemoveOldFilesBeforeUpload: false,
+      autoRemoveOldFilesAtBoot: false,
+      autoRemoveOldFilesCriteriumDays: 7
+    }
+  }),
+
+  computed: {},
+
+  watch: {},
+
+  async created() {
+    const settings = await SettingsService.getSettings()
+    this.fileHandlingSettings = settings.printerFileClean
+  },
+
+  mounted() {},
+  methods: {
+    async updateTimeoutSettings() {
+      if (!this.settingsStore.settings?.timeout?.apiTimeout) {
+        this.snackbar.error('Timeout not set')
+        return
+      }
+      if (this.settingsStore.settings.timeout.apiTimeout < 1000) {
+        this.snackbar.error(
+          'Timeout is too low - please set it to at least 1000 milliseconds'
+        )
+      } else {
+        await this.settingsStore.updateTimeoutSettings(
+          this.settingsStore.settings?.timeout
+        )
+        this.snackbar.info('Timeout settings updated')
+      }
+    },
+
+    async setFileCleanSettings() {
+      const serverSettings = await SettingsService.setFileCleanSettings(
+        this.fileHandlingSettings
+      )
+      this.fileHandlingSettings = serverSettings.printerFileClean
+    },
+
+    async purgeFiles() {
+      await PrinterFileService.purgeFiles()
+
+      this.snackbar.openInfoMessage({
+        title: 'Successfully purged all references to printer files!'
+      })
+    },
+
+    async bulkDisableGCodeAnalysis() {
+      const printers = this.printerStateStore.onlinePrinters
+      this.snackbar.openInfoMessage({
+        title: `Trying to disable gcode analysis for ${printers.length} online printers.`
+      })
+      for (const printer of Object.values(printers)) {
+        await PrinterSettingsService.setGCodeAnalysis(printer.id, false)
+      }
+      this.snackbar.openInfoMessage({
+        title: `Finished disabling gcode analysis for ${printers.length} online printers.`
+      })
+    }
+  }
+})
+</script>