@fdm-monster/client-next 0.0.1

package/src/components/Generic/Actions/PrinterCreateAction.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-btn
+    class="ma-2"
+    color="primary"
+    fab
+    size="small"
+    @click.c.capture.native.stop="openCreatePrinterDialog()"
+  >
+    <v-icon>add</v-icon>
+  </v-btn>
+</template>
+
+<script lang="ts" setup>
+import { useDialogsStore } from '@/store/dialog.store'
+import { DialogName } from '../Dialogs/dialog.constants'
+
+const dialogsStore = useDialogsStore()
+
+function openCreatePrinterDialog() {
+  dialogsStore.openDialogWithContext(DialogName.AddOrUpdatePrinterDialog)
+}
+</script>

package/src/components/Generic/Actions/PrinterDeleteAction.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-btn
+    class="ma-2"
+    color="primary"
+    fab
+    size="small"
+    @click.prevent.stop="deletePrinter"
+  >
+    <v-icon>delete</v-icon>
+  </v-btn>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import { PrinterDto } from '@/models/printers/printer.model'
+import { usePrinterStore } from '@/store/printer.store'
+
+const props = defineProps<{
+  printer: PrinterDto
+}>()
+
+const printersStore = usePrinterStore()
+
+async function deletePrinter() {
+  if (!confirm('Are you sure to delete this printer?')) return
+
+  await printersStore.deletePrinter(props.printer.id)
+}
+</script>

package/src/components/Generic/Actions/PrinterQuickStopAction.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-badge
+    v-if="printer.enabled"
+    bordered
+    class="ma-2"
+    overlap
+  >
+    <template #badge>
+      <v-icon>bolt</v-icon>
+    </template>
+    <v-btn
+      fab
+      size="small"
+      @click.stop="clickQuickStop"
+    >
+      <v-icon>stop</v-icon>
+    </v-btn>
+  </v-badge>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import { PrinterDto } from '@/models/printers/printer.model'
+import { CustomGcodeService } from '@/backend/custom-gcode.service'
+
+const props = defineProps<{
+  printer: PrinterDto
+}>()
+
+async function clickQuickStop() {
+  if (confirm('Are you sure to abort the print? Please reconnect after.')) {
+    await CustomGcodeService.postQuickStopM112Command(props.printer.id)
+  }
+}
+</script>

package/src/components/Generic/Actions/PrinterSettingsAction.vue

@@ -0,0 +1,35 @@
+<template>
+  <v-btn
+    class="ma-2"
+    color="primary"
+    fab
+    size="small"
+    @click.c.capture.native.stop="openSettings()"
+  >
+    <v-icon>settings</v-icon>
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { PrinterDto } from '@/models/printers/printer.model'
+
+export default defineComponent({
+  name: 'PrinterSettingsAction',
+  props: {
+    printer: Object as PropType<PrinterDto>
+  },
+
+  computed: {
+    printerId() {
+      return this.printer!.id
+    }
+  },
+
+  methods: {
+    openSettings() {
+      this.$emit('update:show', this.printer!.id)
+    }
+  }
+})
+</script>

package/src/components/Generic/Actions/PrinterUrlAction.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-btn
+    class="ma-2"
+    color="primary"
+    fab
+    size="small"
+    @click.c.capture.native.stop="openPrinterURL()"
+  >
+    <v-icon>directions</v-icon>
+  </v-btn>
+</template>
+
+<script lang="ts" setup>
+import { PrinterDto } from '@/models/printers/printer.model'
+import { PrintersService } from '@/backend'
+
+const props = defineProps<{
+  printer: PrinterDto
+}>()
+
+async function openPrinterURL() {
+  PrintersService.openPrinterURL(props.printer.printerURL)
+}
+</script>

package/src/components/Generic/Actions/RefreshFilesAction.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-btn
+    color="secondary"
+    @click="getFiles()"
+  >
+    <v-icon>refresh</v-icon>
+    <span class="d-none d-lg-inline"> Refresh files </span>
+  </v-btn>
+</template>
+
+<script lang="ts">
+import { usePrinterStore } from '@/store/printer.store'
+import { defineComponent, PropType } from 'vue'
+import { PrinterDto } from '@/models/printers/printer.model'
+
+interface Data {
+  property: number
+}
+
+export default defineComponent({
+  name: 'RefreshFilesAction',
+  components: {},
+  props: {
+    printer: Object as PropType<PrinterDto>
+  },
+  setup: () => {
+    return {
+      printersStore: usePrinterStore()
+    }
+  },
+
+  data: (): Data => ({
+    property: 0
+  }),
+
+  computed: {},
+
+  watch: {},
+
+  async created() {},
+  async mounted() {},
+  methods: {
+    async getFiles() {
+      if (!this.printer) return
+
+      await this.printersStore.loadPrinterFiles(this.printer.id, false)
+    }
+  }
+})
+</script>

package/src/components/Generic/Actions/SyncPrinterNameAction.vue

@@ -0,0 +1,36 @@
+<template>
+  <v-tooltip location="top">
+    <template #activator="{ props }">
+      <v-btn
+        v-bind="props"
+        class="ma-2"
+        color="primary"
+        fab
+        size="small"
+        @click.c.capture.native.stop="syncPrinterName()"
+      >
+        <v-icon>badge</v-icon>
+      </v-btn>
+    </template>
+    <template #default> Set OctoPrints name to the FDM Monster Name </template>
+  </v-tooltip>
+</template>
+
+<script lang="ts" setup>
+import { PrinterDto } from '@/models/printers/printer.model'
+import { PrinterSettingsService } from '@/backend/printer-settings.service'
+import { useSnackbar } from '@/shared/snackbar.composable'
+
+const props = defineProps<{
+  printer: PrinterDto
+}>()
+
+const snackbar = useSnackbar()
+
+async function syncPrinterName() {
+  await PrinterSettingsService.syncPrinterName(props.printer.id)
+  snackbar.openInfoMessage({
+    title: 'Synced printer name to OctoPrint'
+  })
+}
+</script>

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

@@ -0,0 +1,131 @@
+<template>
+  <BaseDialog
+    :id="dialog.dialogId"
+    max-width="800px"
+    @escape="closeDialog()"
+  >
+    <v-card>
+      <v-card-title>
+        <span class="text-h5">
+          <v-avatar
+            class="mr-2"
+            color="primary"
+            size="56"
+          >
+            {{ avatarInitials }}
+          </v-avatar>
+          <span v-if="isUpdating"> Updating Camera </span>
+          <span v-else> New Camera </span>
+        </span>
+      </v-card-title>
+
+      <v-card-text>
+        <v-container grid-list-md>
+          <v-layout wrap>
+            <v-text-field
+              v-model="cameraStream.name"
+              label="Name"
+              required
+            />
+            <v-text-field
+              v-model="cameraStream.streamURL"
+              label="Url (MJPEG)"
+              required
+            />
+          </v-layout>
+        </v-container>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          color="primary-darken-2"
+          @click="close"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          color="primary"
+          @click="isUpdating ? updateCamera() : createCamera()"
+        >
+          {{ isUpdating ? 'Update' : 'Create' }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useDialog } from '@/shared/dialog.composable'
+import {
+  CameraStream,
+  CameraWithPrinter
+} from '@/models/camera-streams/camera-stream'
+import { CameraStreamService } from '@/backend/camera-stream.service'
+import { useQueryClient } from '@tanstack/vue-query'
+
+const queryClient = useQueryClient()
+const dialog = useDialog(DialogName.AddOrUpdateCameraDialog)
+
+const avatarInitials = computed(() => {
+  return 'C'
+})
+
+const cameraStream = ref<CameraStream>({
+  name: '',
+  streamURL: ''
+})
+
+const isDialogUpdate = () => dialog.context()?.addOrUpdate === 'update'
+
+const isUpdating = computed(() => {
+  return isDialogUpdate()
+})
+
+watch(
+  () => dialog.context(),
+  (context) => {
+    if (!context || context?.addOrUpdate !== 'update') {
+      cameraStream.value.streamURL = ''
+      cameraStream.value.name = ''
+      return
+    }
+
+    const stream = queryClient
+      .getQueryData<CameraWithPrinter[]>(['cameraStream'])
+      ?.find(
+        (cameraStream) => cameraStream.cameraStream.id === context.cameraId
+      )
+    cameraStream.value.name = stream?.cameraStream.name
+    cameraStream.value.streamURL = stream?.cameraStream.streamURL || ''
+  }
+)
+
+function closeDialog() {
+  dialog.closeDialog()
+}
+
+async function createCamera() {
+  await CameraStreamService.createCameraStream({
+    streamURL: cameraStream.value.streamURL,
+    name: cameraStream.value.name
+  })
+  await queryClient.refetchQueries({ queryKey: ['cameraStream'] })
+  dialog.closeDialog()
+}
+
+async function updateCamera() {
+  await CameraStreamService.updateCameraStream(dialog.context()?.cameraId, {
+    streamURL: cameraStream.value.streamURL,
+    name: cameraStream.value.name
+  })
+  await queryClient.refetchQueries({ queryKey: ['cameraStream'] })
+  dialog.closeDialog()
+}
+
+function close() {
+  dialog.closeDialog()
+}
+</script>

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

@@ -0,0 +1,141 @@
+<template>
+  <BaseDialog
+    :id="dialog.dialogId"
+    :max-width="'700px'"
+    @escape="closeDialog"
+  >
+    <v-card>
+      <v-card-title>
+        <span class="text-h5">
+          <v-avatar
+            color="primary"
+            size="56"
+            >{{ avatarInitials }}</v-avatar
+          >
+          New Floor
+        </span>
+      </v-card-title>
+      <v-card-text>
+        <v-row>
+          <v-col :cols="12">
+            <v-container>
+              <v-row>
+                <v-col
+                  v-if="formData"
+                  cols="12"
+                  md="6"
+                >
+                  <v-text-field
+                    v-model="formData.name"
+                    autofocus
+                    label="Floor name*"
+                    required
+                  />
+                  <v-text-field
+                    v-model="formData.floor"
+                    label="Floor number"
+                    required
+                    type="number"
+                  />
+                </v-col>
+              </v-row>
+            </v-container>
+          </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"
+          >Create</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </BaseDialog>
+</template>
+
+<script lang="ts" setup>
+import { inject, ref, computed, watch, onMounted } from 'vue'
+import {
+  generateInitials,
+  newRandomNamePair
+} from '@/shared/noun-adjectives.data'
+import { FloorService } from '@/backend/floor.service'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useFloorStore } from '@/store/floor.store'
+import { useDialog } from '@/shared/dialog.composable'
+import { AppConstants } from '@/shared/app.constants'
+import {
+  getDefaultCreateFloor,
+  PreCreateFloor
+} from '@/models/floors/floor.model'
+import { useSnackbar } from '@/shared/snackbar.composable'
+
+const dialog = useDialog(DialogName.AddOrUpdateFloorDialog)
+const floorStore = useFloorStore()
+const appConstants = inject('appConstants') as AppConstants
+const snackbar = useSnackbar()
+
+const formData = ref<PreCreateFloor>(getDefaultCreateFloor())
+
+const printerFloorId = computed(() => dialog.context()?.printerFloorId)
+
+const avatarInitials = computed(() => {
+  return formData.value ? generateInitials(formData.value.name) : ''
+})
+
+const validateFormData = () => {
+  if (
+    !formData.value.name ||
+    formData.value.name.length < appConstants.minPrinterFloorNameLength
+  ) {
+    snackbar.openErrorMessage({ title: 'Invalid floor name' })
+    return false
+  }
+  if (!Number.isInteger(Number(formData.value.floor))) {
+    snackbar.openErrorMessage({ title: 'Floor number must be an integer' })
+    return false
+  }
+  return true
+}
+
+const submit = async () => {
+  if (!validateFormData()) return
+  const floorData = FloorService.convertCreateFormToFloor(formData.value)
+  await floorStore.createFloor(floorData)
+  snackbar.openInfoMessage({ title: `Floor ${floorData.name} created` })
+  formData.value.name = newRandomNamePair()
+  const maxIndex = Math.max(...floorStore.floors.map((f) => f.floor)) + 1
+  formData.value.floor = maxIndex.toString()
+  closeDialog()
+}
+
+const closeDialog = () => {
+  dialog.closeDialog()
+}
+
+watch(printerFloorId, (val) => {
+  if (val) {
+    const printerFloor = floorStore.floor(val)
+    formData.value = FloorService.convertPrinterFloorToCreateForm(printerFloor)
+  }
+})
+
+onMounted(() => {
+  if (printerFloorId.value) {
+    const crudeData = floorStore.floor(printerFloorId.value)
+    formData.value = FloorService.convertPrinterFloorToCreateForm(crudeData)
+  } else if (floorStore.floors?.length) {
+    const maxIndex = Math.max(...floorStore.floors.map((pf) => pf.floor)) + 1
+    formData.value.floor = maxIndex.toString()
+  }
+})
+</script>