@fdm-monster/client-next 0.0.1 → 0.0.3

package/src/components/PrinterGrid/PrinterGridTile.vue

@@ -1,438 +0,0 @@
-<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

@@ -1,210 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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>