@fdm-monster/client-next 0.0.1 → 0.0.2

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

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

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

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

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

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

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

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

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

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