@fdm-monster/client-next 0.0.1 → 0.0.2

package/src/components/Generic/Dialogs/PrinterChecksPanel.vue

@@ -1,37 +0,0 @@
-<template>
-  <v-col :cols="cols">
-    <strong> Checks: </strong>
-    <v-alert
-      v-for="(item, index) of getEvents()"
-      :key="index"
-      :type="item.color"
-      density="compact"
-    >
-      <small> {{ item.label }} {{ item.text }} </small>
-    </v-alert>
-  </v-col>
-</template>
-
-<script lang="ts" setup>
-import { useTestPrinterStore } from '@/store/test-printer.store'
-
-const errorCol = 'error'
-const successCol = 'success'
-const testPrinterStore = useTestPrinterStore()
-const cols = ref(4)
-
-function getEvents() {
-  return testPrinterStore.getEvents().map((e) => {
-    return {
-      label: e.event,
-      text: e.payload,
-      color: (e.failure ? errorCol : successCol) as
-        | 'success'
-        | 'error'
-        | 'warning'
-        | 'info'
-        | undefined
-    }
-  })
-}
-</script>

package/src/components/Generic/Dialogs/PrinterControlDialog.vue

@@ -1,202 +0,0 @@
-<template>
-  <BaseDialog
-    :id="dialog.dialogId"
-    :max-width="'700px'"
-    @escape="closeDialog()"
-  >
-    <v-card>
-      <v-card-title> Printer Controls </v-card-title>
-      <v-card-text>
-        <v-container v-if="printer">
-          <v-row>
-            <v-col :cols="12">
-              Printer: {{ printer?.name }}
-              <br />
-              <v-chip color="primary">
-                {{ printerTemps?.actual }}C / {{ printerTemps?.target }}C
-              </v-chip>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col :cols="8">
-              X/Y
-              <br />
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(-1, 1, 0)"
-              >
-                <v-icon>north_west</v-icon>
-              </v-btn>
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(0, 1, 0)"
-              >
-                <v-icon>north</v-icon>
-              </v-btn>
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(1, 1, 0)"
-              >
-                <v-icon>north_east</v-icon>
-              </v-btn>
-              <br />
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(-1, 0, 0)"
-              >
-                <v-icon>west</v-icon>
-              </v-btn>
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="homeAxes(['x', 'y'])"
-              >
-                <v-icon>home</v-icon>
-              </v-btn>
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(1, 0, 0)"
-              >
-                <v-icon>east</v-icon>
-              </v-btn>
-              <br />
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(-1, -1, 0)"
-              >
-                <v-icon>south_west</v-icon>
-              </v-btn>
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(0, -1, 0)"
-              >
-                <v-icon>south</v-icon>
-              </v-btn>
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(1, -1, 0)"
-              >
-                <v-icon>south_east</v-icon>
-              </v-btn>
-            </v-col>
-            <v-col cols="4">
-              Z
-              <br />
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(0, 0, 1)"
-              >
-                <v-icon>north</v-icon>
-              </v-btn>
-              <br />
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="homeAxes(['z'])"
-              >
-                <v-icon>home</v-icon>
-              </v-btn>
-              <br />
-              <v-btn
-                class="bg-primary"
-                variant="outlined"
-                size="x-large"
-                @click="jogPrinterHead(1, 0, 1)"
-              >
-                <v-icon>south</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col cols="12">
-              <v-btn-toggle v-model="multiplier">
-                <v-btn :value="0.1"> 0.1 </v-btn>
-                <v-btn :value="1"> 1 </v-btn>
-                <v-btn :value="10"> 10 </v-btn>
-                <v-btn :value="100"> 100 </v-btn>
-              </v-btn-toggle>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-card-text>
-      <v-card-actions>
-        <v-spacer />
-        <v-btn
-          variant="text"
-          @click="closeDialog()"
-        >
-          Close
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </BaseDialog>
-</template>
-
-<script lang="ts" setup>
-import { useDialog } from '@/shared/dialog.composable'
-import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
-import { computed, ref } from 'vue'
-import { usePrinterStore } from '@/store/printer.store'
-import { IdType } from '@/utils/id.type'
-import { usePrinterStateStore } from '@/store/printer-state.store'
-import { PrintersService } from '@/backend'
-
-const dialog = useDialog<{ printerId: IdType }>(DialogName.PrinterControlDialog)
-const printerStore = usePrinterStore()
-const printerStateStore = usePrinterStateStore()
-const printerId = computed(() => dialog.context()?.printerId)
-const printer = computed(() => {
-  if (!printerId.value) return
-
-  return printerStore.printer(printerId.value)
-})
-
-const multiplier = ref<number>(10)
-
-const printerTemps = computed(() => {
-  const events = printerStateStore.printerEventsById[printerId.value]
-  if (
-    events?.current?.payload?.temps?.length &&
-    events?.current?.payload?.temps[0]?.tool0?.actual
-  ) {
-    return events?.current?.payload?.temps[0]?.tool0
-  }
-  return null
-})
-
-const jogPrinterHead = async (x: number, y: number, z: number) => {
-  await PrintersService.sendPrinterJogCommand(printerId.value, {
-    x: x * multiplier.value,
-    y: y * multiplier.value,
-    z: z * multiplier.value
-  })
-}
-
-const homeAxes = async (axes: string[]) => {
-  await PrintersService.sendPrinterHomeCommand(printerId.value, axes)
-}
-
-const closeDialog = () => {
-  dialog.closeDialog()
-}
-</script>

package/src/components/Generic/Dialogs/PrinterMaintenanceDialog.vue

@@ -1,130 +0,0 @@
-<template>
-  <BaseDialog
-    :id="dialog.dialogId"
-    :max-width="'700px'"
-    @escape="closeDialog()"
-  >
-    <v-card class="pa-4">
-      <v-card-title>
-        <span class="text-h5">
-          Mark '{{ printer?.name }}' for maintenance
-        </span>
-      </v-card-title>
-      <v-alert color="secondary">
-        Keep this info clear and stick to convention
-      </v-alert>
-      <v-card-text>
-        <v-row>
-          <v-col cols="12">
-            <v-select
-              v-model="selectedQuickItems"
-              :chips="true"
-              :items="quickItems"
-              :menu-props="{
-                closeOnBack: true,
-                closeOnContentClick: true
-              }"
-              clearable
-              color="primary"
-              multiple
-              placeholder="Quick select reason"
-              @update:model-value="updateText()"
-            />
-            <v-textarea
-              v-model="formData.disabledReason"
-              data-vv-validate-on="change|blur"
-            >
-              <template #label>
-                <div>Type the reason*</div>
-              </template>
-            </v-textarea>
-          </v-col>
-        </v-row>
-      </v-card-text>
-      <v-card-actions>
-        <em class="text-red"> * indicates required field </em>
-        <v-spacer />
-        <v-btn
-          variant="text"
-          @click="closeDialog()"
-        >
-          Close
-        </v-btn>
-        <v-btn
-          color="blue-darken-1"
-          variant="text"
-          @click="submit()"
-        >
-          Save
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </BaseDialog>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { PrintersService } from '@/backend'
-import { usePrinterStore } from '@/store/printer.store'
-import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
-import { useDialog } from '@/shared/dialog.composable'
-
-const selectedQuickItems = ref([])
-const quickItems = [
-  'Broken part',
-  'Blob',
-  'Maxtemp',
-  'Preheat error',
-  'Cable USB ',
-  'Bed thermal runaway',
-  'Thermistor Heatbed',
-  'Thermistor Heatblock',
-  'Thermal Runaway',
-  'Mintemp Nozzle',
-  'Mintemp Heatbed',
-  'Nozzle',
-  'Nozzle Clog',
-  'Fan Hotend',
-  'Fan Part cooling',
-  'Extruder rattle',
-  'Extruder',
-  'Z Axis',
-  'X Axis',
-  'Y Axis',
-  'Rented',
-  'Motherboard',
-  'Other',
-  'Clean'
-]
-const formData = ref<{
-  disabledReason?: string
-}>({})
-const printersStore = usePrinterStore()
-const dialog = useDialog(DialogName.PrinterMaintenanceDialog)
-const printer = computed(() => printersStore.maintenanceDialogPrinter)
-
-const updateText = () => {
-  formData.value.disabledReason = selectedQuickItems.value.join(', ')
-}
-
-const submit = async () => {
-  const printerId = printer.value?.id
-  if (!printerId) {
-    formData.value = {}
-    closeDialog()
-    return
-  }
-
-  const disabledReason = formData.value.disabledReason
-  await PrintersService.updatePrinterMaintenance(printerId, disabledReason)
-
-  formData.value = {}
-  closeDialog()
-}
-
-const closeDialog = () => {
-  selectedQuickItems.value = []
-  dialog.closeDialog()
-  printersStore.setMaintenanceDialogPrinter()
-}
-</script>

package/src/components/Generic/Dialogs/YamlImportExportDialog.vue

@@ -1,186 +0,0 @@
-<template>
-  <BaseDialog
-    :id="dialog.dialogId"
-    max-width="700px"
-    @before-opened="onBeforeDialogOpened"
-    @escape="closeDialog()"
-  >
-    <v-card class="pa-4">
-      <v-card-title>
-        <span class="text-h5"> YAML export and import </span>
-      </v-card-title>
-      <v-card-text>
-        <div>Choose mode:</div>
-        <v-row>
-          <br />
-          <v-radio-group
-            v-model="selectedMode"
-            class="ml-3"
-            inline
-          >
-            <v-radio
-              :value="0"
-              label="Import YAML"
-            />
-            <v-radio
-              :value="1"
-              label="Export YAML"
-            />
-          </v-radio-group>
-        </v-row>
-
-        <div>
-          <div
-            v-if="isImportMode"
-            class="pl-2"
-          >
-            <v-file-input
-              v-model="importFile"
-              accept=".yaml"
-              label="Select a YAML file for import *"
-            />
-          </div>
-          <div v-else>
-            <v-checkbox
-              v-model="exportFloors"
-              class="pa-0 ma-0 mt-2 ml-2"
-              label="Include floors"
-            />
-            <v-checkbox
-              v-model="exportGroups"
-              :disabled="disableExportGroups"
-              class="pa-0 ma-0 mt-2 ml-2"
-              label="Include groups"
-            />
-            <v-checkbox
-              v-model="exportPrinters"
-              class="pa-0 ma-0 ml-2"
-              label="Include printers"
-            />
-            <v-checkbox
-              v-model="exportFloorGrid"
-              class="pa-0 ma-0 ml-2"
-              label="Include grid positions (auto-includes printers)"
-            />
-
-            Include notes (for yourself):
-            <v-textarea
-              v-model="notes"
-              rows="1"
-            />
-          </div>
-          <v-btn
-            v-if="!isImportMode"
-            @click="downloadExportYamlFile()"
-          >
-            <v-icon>download</v-icon>
-            Export YAML file
-          </v-btn>
-          <v-btn
-            v-if="isImportMode"
-            :disabled="!isFileProvided"
-            @click="uploadAndImportYamlFile()"
-          >
-            <v-icon>upload</v-icon>
-            Import YAML data
-          </v-btn>
-        </div>
-      </v-card-text>
-      <v-card-actions>
-        <em class="text-red"> * indicates required field </em>
-        <v-spacer />
-        <v-btn
-          variant="text"
-          @click="closeDialog()"
-        >
-          Close
-        </v-btn>
-      </v-card-actions>
-    </v-card>
-  </BaseDialog>
-</template>
-
-<script lang="ts" setup>
-import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
-import { ServerPrivateService } from '@/backend/server-private.service'
-import { useDialog } from '@/shared/dialog.composable'
-import { useSnackbar } from '@/shared/snackbar.composable'
-import { useFeatureStore } from '@/store/features.store'
-
-const featureStore = useFeatureStore()
-const dialog = useDialog(DialogName.YamlImportExport)
-const snackbar = useSnackbar()
-
-const errorMessage = ref('')
-const errorDetailedMessage = ref('')
-const selectedMode = ref(0)
-const exportFloors = ref(true)
-const exportFloorGrid = ref(true)
-const exportGroups = ref(true)
-const exportPrinters = ref(true)
-const importFile = ref(undefined)
-const notes = ref('')
-
-const disableExportGroups = computed(() => {
-  return !featureStore.hasFeature('printerGroupsApi')
-})
-
-const isFileProvided = computed(() => {
-  return !!importFile.value
-})
-
-const isImportMode = computed(() => {
-  return selectedMode.value === 0
-})
-
-const onBeforeDialogOpened = async () => {
-  await featureStore.loadFeatures()
-  exportGroups.value = featureStore.hasFeature('printerGroupsApi')
-}
-
-const downloadExportYamlFile = async () => {
-  if (exportFloorGrid.value) {
-    exportPrinters.value = true
-  }
-
-  await ServerPrivateService.downloadYamlExport({
-    exportPrinters: exportPrinters.value,
-    exportGroups: exportGroups.value,
-    exportFloorGrid: exportFloorGrid.value,
-    printerComparisonStrategiesByPriority: ['name', 'url'],
-    exportFloors: exportFloors.value,
-    floorComparisonStrategiesByPriority: 'floor',
-    notes: notes.value
-  })
-  snackbar.openInfoMessage({
-    title: 'Downloaded the YAML file'
-  })
-  notes.value = ''
-}
-
-const uploadAndImportYamlFile = async () => {
-  errorMessage.value = ''
-  errorDetailedMessage.value = ''
-  if (!importFile.value) {
-    errorMessage.value = 'The import file was not specified'
-    return
-  }
-  try {
-    await ServerPrivateService.uploadAndImportYaml(importFile.value)
-    importFile.value = undefined
-    snackbar.openInfoMessage({
-      title: 'Imported the YAML file'
-    })
-    closeDialog()
-  } catch (e) {
-    errorMessage.value = 'An error occurred uring import'
-    errorDetailedMessage.value = (e as Error).message.toString()
-    importFile.value = undefined
-  }
-}
-
-const closeDialog = () => {
-  importFile.value = undefined
-  dialog.closeDialog()
-}
-</script>

package/src/components/Generic/Dialogs/dialog.constants.ts

@@ -1,19 +0,0 @@
-export enum DialogName {
-  // The JSON import dialog, which is used to import a JSON file with a printer array into the application.
-  BatchJsonCreate = 'BatchJsonCreate',
-  // Stateful dialog meant for verifying the last printed file of each selected printer
-  BatchReprintDialog = 'BatchReprintDialog',
-  // The YAML import and export dialog, which is used to import and export a YAML file with a printer array into and from the application.
-  // This YAML is for internal backup and restore only and is not compatible with external projects.
-  YamlImportExport = 'YamlImportExport',
-  // The printer create dialog, which is used to create a new or update a printer.
-  AddOrUpdatePrinterDialog = 'AddOrUpdatePrinterDialog',
-  // The floor create dialog, which is used to create a new floor where printers can be placed.
-  AddOrUpdateFloorDialog = 'AddOrUpdateFloorDialog',
-  // The printer repair dialog, which is used to mark a printer as maintenance mode.
-  PrinterMaintenanceDialog = 'PrinterMaintenanceDialog',
-  // The camera create dialog, which is used to create a new or update a camera.
-  AddOrUpdateCameraDialog = 'AddOrUpdateCameraDialog',
-  // Dialog for moving print head, homing, or retracting/extruding filament
-  PrinterControlDialog = 'PrinterControlDialog'
-}