@fdm-monster/client-next 0.0.1

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

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

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

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

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

@@ -0,0 +1,19 @@
+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'
+}