@fdm-monster/client-next 0.0.1

package/src/components/PrinterGrid/PrinterGridTile.vue

@@ -0,0 +1,438 @@
+<template>
+  <div v-drop-printer-position="{ x, y, printerSet: printer }">
+    <v-card
+      v-drop-upload="{ printers: [printer] }"
+      :class="{
+        'tile-large': largeTilesEnabled,
+        'tile-selected': selected,
+        'tile-unselected': unselected,
+        'tile-setup': printer
+      }"
+      :disabled="!printer"
+      :style="{
+        'background-color':
+          !gridStore.gridEditMode || !printer
+            ? printerStateColor
+            : 'rgba(1,1,1,0)'
+      }"
+      class="tile fill-height"
+      variant="outlined"
+      tile
+      @click="selectOrUnplacePrinter()"
+    >
+      <v-icon
+        v-if="printerState?.text.includes('API')"
+        color="primary"
+        size="70"
+        style="opacity: 0.2; position: absolute; top: 5%; right: 10%"
+      >
+        wifi_off
+      </v-icon>
+      <v-icon
+        v-if="printerState?.text.includes('USB')"
+        color="primary"
+        size="70"
+        style="opacity: 0.2; position: absolute; top: 5%; right: 10%"
+      >
+        usb_off
+      </v-icon>
+      <v-container
+        v-if="printer?.id"
+        class="tile-inner fill-height"
+      >
+        <small class="small-resized-font">
+          {{ printer?.name }}
+        </small>
+        <v-menu offset-y>
+          <template #activator="{ props }">
+            <v-btn
+              class="float-right d-inline d-xl-none"
+              v-bind="props"
+            >
+              <v-icon>more_vert</v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item
+              :close-on-click="true"
+              @click="clickInfo()"
+            >
+              <v-icon>info</v-icon>
+              &nbsp;Details
+            </v-list-item>
+            <v-list-item
+              v-if="hasPrinterControlFeature"
+              :close-on-click="true"
+              @click="clickOpenPrinterControlDialog()"
+            >
+              <v-icon>open_with</v-icon>
+              &nbsp;Control
+            </v-list-item>
+            <v-list-item
+              :close-on-click="true"
+              @click="clickOpenPrinterURL()"
+            >
+              <v-icon>directions</v-icon>
+              &nbsp;Visit OctoPrint
+            </v-list-item>
+            <v-list-item
+              :close-on-click="true"
+              @click="clickOpenSettings()"
+            >
+              <v-icon>settings</v-icon>
+              &nbsp;Edit Printer
+            </v-list-item>
+            <v-list-item
+              :close-on-click="true"
+              @click="clickEmergencyStop()"
+            >
+              <v-icon>stop</v-icon>
+              &nbsp;Quick stop
+            </v-list-item>
+          </v-list>
+        </v-menu>
+        <div
+          v-if="!gridStore.gridEditMode"
+          class="float-right d-none d-xl-inline"
+        >
+          <!-- Connect USB -->
+          <v-btn
+            v-if="
+              !printerStateStore.isPrinterOperational(printer?.id) &&
+              printerStateStore.isApiResponding(printer?.id)
+            "
+            @click.prevent.stop="clickConnectUsb()"
+          >
+            <v-icon>usb</v-icon>
+          </v-btn>
+
+          <!-- Quick stop button -->
+          <v-tooltip
+            v-if="
+              hasPrinterControlFeature &&
+              printerStateStore.isPrinterOperational(printer?.id)
+            "
+            location="bottom"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                elevation="4"
+                size="36"
+                v-bind="props"
+                @click.prevent.stop="clickOpenPrinterControlDialog()"
+              >
+                <v-icon>open_with</v-icon>
+              </v-btn>
+            </template>
+            <template #default>
+              <span> Control your printer head or extruder. </span>
+            </template>
+          </v-tooltip>
+
+          <!-- Quick stop button -->
+          <v-tooltip
+            v-if="printerStateStore.isPrinterOperational(printer?.id)"
+            location="bottom"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                elevation="4"
+                size="36"
+                v-bind="props"
+                @click.prevent.stop="clickEmergencyStop()"
+              >
+                <v-icon>dangerous</v-icon>
+              </v-btn>
+            </template>
+            <template #default>
+              <span> Send a quick stop, causing USB to be disconnected. </span>
+            </template>
+          </v-tooltip>
+
+          <!-- Refresh connectivity button -->
+          <v-tooltip
+            v-if="
+              printer.enabled &&
+              printerStateStore.isPrinterNotOnline(printer.id)
+            "
+            location="bottom"
+          >
+            <template #activator="{ props }">
+              <v-btn
+                elevation="4"
+                size="36"
+                v-bind="props"
+                @click.prevent.stop="clickRefreshSocket()"
+              >
+                <v-icon>autorenew</v-icon>
+              </v-btn>
+            </template>
+            <template #default>
+              <span> Retry connecting to OctoPrint API </span>
+            </template>
+          </v-tooltip>
+          <v-btn
+            elevation="5"
+            @click.prevent.stop="clickInfo()"
+          >
+            <v-icon>menu_open</v-icon>
+          </v-btn>
+        </div>
+        <div
+          v-else
+          class="float-end"
+        >
+          <strong
+            class="pl-5 pr-5"
+            color="primary"
+          >
+            <v-icon>disabled_visible</v-icon>
+            Click to clear
+          </strong>
+        </div>
+        <br />
+
+        <v-tooltip
+          :disabled="!printer?.disabledReason"
+          close-delay="100"
+          color="danger"
+          open-delay="0"
+          location="top"
+        >
+          <template #activator="{ props }">
+            <small
+              class="xsmall-resized-font text--secondary d-lg-inline d-none"
+              v-bind="props"
+            >
+              <span v-if="printer?.disabledReason">
+                <small> MAINTENANCE </small>
+                <v-icon
+                  class="d-none d-xl-inline"
+                  color="primary"
+                  size="small"
+                >
+                  info
+                </v-icon>
+              </span>
+              <span v-else>
+                <small>
+                  {{ printerState?.text?.toUpperCase() }}
+                </small>
+              </span>
+            </small>
+          </template>
+          Maintenance reason: <br />
+          {{ printer.disabledReason }}
+        </v-tooltip>
+        <small v-if="largeTilesEnabled && currentPrintingFilePath">
+          <strong> File: </strong> {{ currentPrintingFilePath }}
+        </small>
+      </v-container>
+      <v-container v-else-if="gridStore.gridEditMode">
+        <v-icon size="48">add</v-icon>
+        Place printer
+      </v-container>
+      <v-progress-linear
+        v-if="currentJob?.progress"
+        :model-value="currentJob.progress.completion"
+        absolute
+        bottom
+        color="green"
+        height="13"
+      >
+        <span class="xsmall-resized-font">
+          {{
+            largeTilesEnabled
+              ? currentJob?.progress?.completion
+                ? currentJob?.progress?.completion?.toFixed(1) + '%'
+                : '-'
+              : currentPrintingFilePath
+          }}
+        </span>
+      </v-progress-linear>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, PropType } from 'vue'
+import { CustomGcodeService } from '@/backend/custom-gcode.service'
+import { PrintersService } from '@/backend'
+import { usePrinterStore } from '@/store/printer.store'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useGridStore } from '@/store/grid.store'
+import { FloorService } from '@/backend/floor.service'
+import { useSettingsStore } from '@/store/settings.store'
+import { useFloorStore } from '@/store/floor.store'
+import { interpretStates } from '@/shared/printer-state.constants'
+import { usePrinterStateStore } from '@/store/printer-state.store'
+import { PrinterDto } from '@/models/printers/printer.model'
+import { useSnackbar } from '@/shared/snackbar.composable'
+import { useDialog } from '@/shared/dialog.composable'
+import { useFeatureStore } from '@/store/features.store'
+
+const defaultColor = 'rgba(100,100,100,0.1)'
+
+const props = defineProps({
+  printer: {
+    type: Object as PropType<PrinterDto | undefined>,
+    required: false
+  },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true }
+})
+
+const printerStore = usePrinterStore()
+const printerStateStore = usePrinterStateStore()
+const floorStore = useFloorStore()
+const featureStore = useFeatureStore()
+const settingsStore = useSettingsStore()
+const gridStore = useGridStore()
+const controlDialog = useDialog(DialogName.PrinterControlDialog)
+const addOrUpdateDialog = useDialog(DialogName.AddOrUpdatePrinterDialog)
+const snackbar = useSnackbar()
+
+const printerId = computed(() => props.printer?.id)
+
+const selected = computed(() => {
+  if (!printerId.value) return false
+  return printerStore.isSelectedPrinter(printerId.value)
+})
+
+const unselected = computed(() => {
+  return printerStore.selectedPrinters?.length && !selected.value
+})
+
+const hasPrinterControlFeature = computed(() => {
+  return featureStore.hasFeature('printerControlApi')
+})
+
+const largeTilesEnabled = computed(() => {
+  return settingsStore.largeTiles
+})
+
+const printerState = computed(() => {
+  if (!printerId.value) return
+  const printer = printerStore.printer(printerId.value)
+  if (!printer) return
+
+  const printerEvents = printerStateStore.printerEventsById[printerId.value]
+  const socketState = printerStateStore.socketStatesById[printerId.value]
+  return interpretStates(printer, socketState, printerEvents)
+})
+
+const printerStateColor = computed(() => {
+  const states = printerState.value
+  if (!states) {
+    return defaultColor
+  }
+  return states.rgb || defaultColor
+})
+
+const currentJob = computed(() => {
+  if (!printerId.value) return
+  return printerStateStore.printerJobsById[printerId.value]
+})
+
+const currentPrintingFilePath = computed(() => {
+  if (!printerId.value) return
+  return printerStateStore.printingFilePathsByPrinterId[printerId.value]
+})
+
+const clickInfo = () => {
+  printerStore.setSideNavPrinter(props.printer)
+}
+
+const clickRefreshSocket = async () => {
+  if (!printerId.value) return
+  await PrintersService.refreshSocket(printerId.value)
+  snackbar.openInfoMessage({
+    title: 'Refreshing OctoPrint connection state'
+  })
+}
+
+const clickOpenPrinterURL = () => {
+  if (!props.printer) return
+  PrintersService.openPrinterURL(props.printer.printerURL)
+}
+
+const clickOpenSettings = () => {
+  printerStore.setUpdateDialogPrinter(props.printer)
+  addOrUpdateDialog.openDialog()
+}
+
+const clickOpenPrinterControlDialog = async () => {
+  if (!printerId.value) {
+    throw new Error('PrinterId not set, cant open dialog')
+  }
+
+  await controlDialog.openDialog({ printerId })
+}
+
+const clickEmergencyStop = async () => {
+  if (!printerId.value) return
+  if (
+    confirm(
+      'Are you sure to abort the print in Quick Stop mode? Please reconnect after.'
+    )
+  ) {
+    await CustomGcodeService.postQuickStopM112Command(printerId.value)
+  }
+}
+
+const clickConnectUsb = async () => {
+  if (!printerId.value) return
+  await PrintersService.sendPrinterConnectCommand(printerId.value)
+}
+
+const selectOrUnplacePrinter = async () => {
+  if (!props.printer || !printerId.value) return
+  if (gridStore.gridEditMode) {
+    const floorId = floorStore.selectedFloor?.id
+    if (!floorId) throw new Error('Cant clear printer, floor not selected')
+    await FloorService.deletePrinterFromFloor(floorId, printerId.value)
+    return
+  }
+  printerStore.toggleSelectedPrinter(props.printer)
+}
+</script>
+
+<style>
+.tile {
+  min-height: 75px;
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
+.tile-large {
+  min-height: 200px;
+}
+
+.tile-inner {
+  opacity: 0.85;
+}
+
+.tile-selected {
+  outline: 2px solid rgb(2, 248, 23) !important;
+  opacity: 1;
+}
+
+.tile-unselected {
+  opacity: 0.65;
+}
+
+.tile-setup:hover {
+  outline: 2px solid #02b102 !important;
+  border-right-width: 8px;
+}
+
+.small-resized-font {
+  font-size: clamp(10px, 1vw, 18px);
+}
+
+.xsmall-resized-font {
+  font-size: clamp(8px, 1vw, 10px);
+}
+</style>

package/src/components/PrinterGrid/PrinterGridView.vue

@@ -0,0 +1,210 @@
+<template>
+  <div>
+    <HomeToolbar />
+
+    <v-banner
+      v-if="!gridStore.gridEditMode"
+      v-drop-upload="{ printers: selectedPrinters }"
+    >
+      <v-row style="margin-bottom: -5px">
+        <v-col style="padding: 5px 0 0 15px">
+          <v-chip-group class="d-inline-block">
+            <v-chip
+              v-if="selectedPrinters.length === 0"
+              size="small"
+            >
+              No selected printers
+            </v-chip>
+            <v-chip
+              v-for="selectedPrinter in selectedPrinters"
+              :key="selectedPrinter.id"
+              closable
+              color="primary"
+              size="small"
+              @click="openPrinter(selectedPrinter)"
+              @click:close="deselectPrinter(selectedPrinter)"
+            >
+              {{ selectedPrinter.name }}
+            </v-chip>
+          </v-chip-group>
+        </v-col>
+        <v-col
+          align="right"
+          style="padding: 0"
+        >
+          <v-chip-group
+            v-if="selectedFile"
+            class="float-end"
+          >
+            <v-chip
+              closable
+              @click:close="deselectFile()"
+            >
+              {{ selectedFile.name }}
+              <strong class="pl-1">
+                {{ formatBytes(selectedFile.size) }}
+              </strong>
+            </v-chip>
+          </v-chip-group>
+          <br />
+          <v-btn
+            v-if="isBatchReprintFeatureAvailable"
+            :disabled="!hasPrintersSelected"
+            color="primary"
+            size="x-small"
+            @click="batchReprintFiles()"
+          >
+            <v-icon
+              class="pr-2"
+              size="small"
+            >
+              refresh
+            </v-icon>
+            Batch reprint
+          </v-btn>
+          <v-btn
+            :color="hasPrintersSelected ? 'primary' : 'secondary'"
+            class="ml-2"
+            size="x-small"
+            @click="clearSelectedPrinters()"
+          >
+            <v-icon
+              class="pr-2"
+              size="small"
+            >
+              delete
+            </v-icon>
+            Clear all ({{ selectedPrinters.length }})
+          </v-btn>
+          <v-btn
+            class="ml-2"
+            color="primary"
+            size="x-small"
+            @click="$refs.fileUpload?.click()"
+          >
+            Select gcode file
+          </v-btn>
+          <v-btn
+            :disabled="!selectedFile"
+            class="ml-2 mr-5"
+            color="green"
+            size="x-small"
+            @click="uploadFile()"
+          >
+            Upload gcode file
+          </v-btn>
+          <input
+            ref="fileUpload"
+            :multiple="false"
+            accept=".gcode"
+            style="display: none"
+            type="file"
+            @change="filesSelected()"
+          />
+        </v-col>
+      </v-row>
+    </v-banner>
+
+    <PrinterGrid class="ma-2" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import PrinterGrid from '@/components/PrinterGrid/PrinterGrid.vue'
+import { PrinterDto } from '@/models/printers/printer.model'
+import { PrintersService } from '@/backend'
+import { formatBytes } from '@/utils/file-size.util'
+import { convertMultiPrinterFileToQueue } from '@/utils/uploads-state.utils'
+import HomeToolbar from '@/components/PrinterGrid/HomeToolbar.vue'
+import { usePrinterStore } from '@/store/printer.store'
+import { useUploadsStore } from '@/store/uploads.store'
+import { useFeatureStore } from '@/store/features.store'
+import { usePrinterStateStore } from '@/store/printer-state.store'
+import { useGridStore } from '@/store/grid.store'
+import { useSnackbar } from '@/shared/snackbar.composable'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useDialog } from '@/shared/dialog.composable'
+
+const gridStore = useGridStore()
+const printersStore = usePrinterStore()
+const printerStateStore = usePrinterStateStore()
+const uploadsStore = useUploadsStore()
+const featureStore = useFeatureStore()
+const snackbar = useSnackbar()
+
+const selectedFile = ref<File | undefined>(undefined)
+const isBatchReprintFeatureAvailable = computed(() =>
+  featureStore.hasFeature('batchReprintCalls')
+)
+const hasPrintersSelected = computed(
+  () => printersStore.selectedPrinters.length > 0
+)
+const selectedPrinters = computed(() => printersStore.selectedPrinters)
+const fileUpload = ref<HTMLInputElement | null>(null)
+
+const deselectFile = () => {
+  if (fileUpload.value) {
+    fileUpload.value.value = ''
+    selectedFile.value = undefined
+  }
+}
+
+const clearSelectedPrinters = () => {
+  printersStore.clearSelectedPrinters()
+}
+
+const batchReprintFiles = async () => {
+  const output = await useDialog(DialogName.BatchReprintDialog).handleAsync(
+    printersStore.selectedPrinters?.map((p) => p.id)
+  )
+  console.log('[PrinterGridView] Dialog completed', output)
+  // await printersStore.batchReprintFiles();
+}
+
+const uploadFile = () => {
+  const selectedPrintersValue = selectedPrinters.value
+  const accessiblePrinters = selectedPrintersValue.filter((p) =>
+    printerStateStore.isApiResponding(p.id)
+  )
+
+  if (!selectedFile.value) return
+
+  // Checking and informing user
+  const incompleteListCount =
+    selectedPrintersValue.length - accessiblePrinters.length
+  if (incompleteListCount > 0) {
+    snackbar.openInfoMessage({
+      title: `${incompleteListCount} printers inaccessible`,
+      subtitle: 'These were skipped from uploading.'
+    })
+  }
+
+  const uploads = convertMultiPrinterFileToQueue(
+    accessiblePrinters,
+    selectedFile.value
+  )
+  uploadsStore.queueUploads(uploads)
+
+  if (fileUpload.value) {
+    fileUpload.value.value = ''
+  }
+  clearSelectedPrinters()
+}
+
+const filesSelected = () => {
+  if (fileUpload.value && fileUpload.value.files) {
+    selectedFile.value = fileUpload.value.files[0]
+  } else {
+    selectedFile.value = undefined
+  }
+}
+
+const deselectPrinter = (printer: PrinterDto) => {
+  printersStore.toggleSelectedPrinter(printer)
+}
+
+const openPrinter = (printer: PrinterDto) => {
+  PrintersService.openPrinterURL(printer.printerURL)
+}
+</script>

package/src/components/PrinterList/FileControlList.vue

@@ -0,0 +1,40 @@
+<template>
+  <div v-if="fileList && printerId">
+    <strong> Files: </strong>
+    <v-list color="primary">
+      <v-list-item
+        v-for="file in fileList"
+        :key="file.path"
+      >
+        {{ file.path }}
+        <small class="ml-4 mr-4">
+          {{ new Date(file.date).toUTCString() }}
+        </small>
+        <v-btn @click="deleteFile(file)">
+          <v-icon>delete</v-icon>
+          <v-spacer />
+          Delete
+        </v-btn>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { FileDto } from '@/models/printers/printer-file.model'
+import { usePrinterStore } from '@/store/printer.store'
+
+interface Props {
+  fileList: FileDto[]
+  printerId: string
+}
+
+const props = defineProps<Props>()
+
+const printersStore = usePrinterStore()
+
+const deleteFile = async (file: FileDto) => {
+  if (!props.fileList || !props.printerId) return
+  await printersStore.deletePrinterFile(props.printerId, file.path)
+}
+</script>