@fdm-monster/client-next 0.0.1 → 0.0.3

package/src/components/PrinterList/PrinterDetails.vue

@@ -1,91 +0,0 @@
-<template>
-  <v-container
-    v-if="printer"
-    v-drop-upload="{ printers: [printer] }"
-    :style="dragging ? 'background-color:red' : ''"
-    transition="scale-transition"
-  >
-    <v-row>
-      <v-col>
-        Name: {{ printer.name }} <br />
-        URL: {{ printer.printerURL }} <br />
-        Host:
-        <v-chip size="small">
-          {{ apiState }}
-        </v-chip>
-        <br />
-        WebSocket:
-        <v-chip size="small">
-          {{ socketState }}
-        </v-chip>
-        <br />
-        Printer:
-        <v-chip size="small">
-          {{ printerTextState }}
-        </v-chip>
-      </v-col>
-      <v-col>
-        <RefreshFilesAction
-          :printer="printer"
-          class="d-flex justify-end"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import { PrinterDto } from '@/models/printers/printer.model'
-import RefreshFilesAction from '@/components/Generic/Actions/RefreshFilesAction.vue'
-import { usePrinterStore } from '@/store/printer.store'
-import { usePrinterStateStore } from '@/store/printer-state.store'
-
-interface Data {
-  dragging: boolean
-}
-
-export default defineComponent({
-  name: 'PrinterDetails',
-  components: {
-    // FileControlList,
-    RefreshFilesAction
-  },
-  props: {
-    printer: Object as PropType<PrinterDto>
-  },
-
-  setup: () => {
-    return {
-      printersStore: usePrinterStore(),
-      printerStateStore: usePrinterStateStore()
-    }
-  },
-
-  data: (): Data => ({
-    dragging: false
-  }),
-
-  computed: {
-    printerId() {
-      return this.printer?.id
-    },
-
-    socketState() {
-      if (!this.printerId) return
-      return this.printerStateStore.socketStatesById[this.printerId]?.socket
-    },
-
-    apiState() {
-      if (!this.printerId) return
-      return this.printerStateStore.socketStatesById[this.printerId]?.api
-    },
-
-    printerTextState() {
-      if (!this.printerId) return
-      return this.printerStateStore.printerEventsById[this.printerId]?.current
-        ?.payload?.state.text
-    }
-  }
-})
-</script>

package/src/components/PrinterList/PrintersView.vue

@@ -1,492 +0,0 @@
-<template>
-  <div>
-    <v-card>
-      <v-card-title>
-        Printers
-        <v-spacer />
-        <v-select
-          v-if="hasPrinterGroupFeature && groupsWithPrinters.length"
-          v-model="filteredGroupsWithPrinters"
-          multiple
-          :items="groupsWithPrinters"
-          item-title="name"
-          :return-object="true"
-          placeholder="Select group to filter by"
-          prepend-icon="filter_list"
-          label="Filter by groups"
-        />
-        <v-text-field
-          v-model="search"
-          class="p-2"
-          clearable
-          label="Printer search"
-          prepend-icon="search"
-          single-line
-        />
-      </v-card-title>
-
-      <v-data-table
-        :expanded.sync="expanded"
-        :headers="tableHeaders"
-        :items="printers"
-        :search="search"
-        single-expand
-        class="elevation-1"
-        item-key="id"
-        show-expand
-        @click:row="clickRow"
-      >
-        <template #no-data>
-          <div class="mt-4 mb-4">
-            <h3 v-if="printers.length === 0">
-              No printer has been created yet. Create one here:
-            </h3>
-            <h3 v-else>
-              No printer has been found. Adjust your filters or search criteria.
-            </h3>
-            <PrinterCreateAction />
-          </div>
-        </template>
-        <template #top>
-          <v-toolbar flat>
-            <v-toolbar-title>
-              Showing {{ printers.length || 0 }} printers
-            </v-toolbar-title>
-            <v-btn
-              class="ml-3"
-              variant="outlined"
-              type="button"
-              @click="openImportJsonPrintersDialog()"
-            >
-              <v-icon>publish</v-icon>
-              Import OctoFarm Printers
-            </v-btn>
-            <v-btn
-              class="ml-3"
-              variant="outlined"
-              type="button"
-              @click="openCreatePrinterDialog()"
-            >
-              <v-icon>add</v-icon>
-              Create Printer
-            </v-btn>
-            <v-btn
-              class="ml-3"
-              color="primary"
-              type="button"
-              @click="openYamlImportExportDialog()"
-            >
-              <v-icon>publish</v-icon>
-              Import/Export YAML
-            </v-btn>
-            <v-spacer />
-          </v-toolbar>
-        </template>
-        <template #item.enabled="{ item }">
-          <v-switch
-            v-model="item.enabled"
-            color="primary"
-            dark
-            inset
-            @click.native.capture.stop="toggleEnabled(item)"
-          >
-            {{ item.enabled }}
-          </v-switch>
-        </template>
-        <template #item.name="{ item }">
-          <v-chip
-            color="primary"
-            dark
-          >
-            {{ item.name || item.printerURL }}
-          </v-chip>
-        </template>
-        <template #item.floor="{ item }">
-          <v-chip
-            v-if="item.id"
-            color="primary"
-          >
-            {{ floorOfPrinter(item.id)?.name }}
-          </v-chip>
-        </template>
-        <template
-          v-if="hasPrinterGroupFeature"
-          #item.group="{ item }"
-        >
-          <v-chip
-            v-for="group of groupsOfPrinter(item.id)"
-            :key="group.id"
-            closable
-            size="small"
-            class="ml-2"
-            @click:close="deletePrinterFromGroup(group.id, item.id)"
-          >
-            {{ group.name }}
-          </v-chip>
-
-          <v-menu offset-y>
-            <template #activator="{ props }">
-              <v-chip
-                :disabled="!groupsWithPrinters.length"
-                class="ml-2"
-                size="small"
-                v-bind="props"
-              >
-                <v-icon size="small">add</v-icon>
-              </v-chip>
-            </template>
-
-            <v-list
-              density="compact"
-              style="border: 1px solid dimgray"
-            >
-              <v-list-subheader> ADD TO GROUP </v-list-subheader>
-              <v-list-item-group>
-                <v-list-item
-                  v-for="(group, index) in nonGroupsOfPrinter(item.id)"
-                  :key="index"
-                  @click="addPrinterToGroup(group.id, item.id)"
-                >
-                  <v-list-item-title>
-                    {{ group.name }}
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list-item-group>
-            </v-list>
-          </v-menu>
-        </template>
-        <template #item.actions="{ item }">
-          <PrinterUrlAction :printer="item" />
-          <PrinterConnectionAction :printer="item" />
-          <PrinterQuickStopAction :printer="item" />
-          <SyncPrinterNameAction :printer="item" />
-          <PrinterDeleteAction :printer="item" />
-          <PrinterSettingsAction
-            :printer="item"
-            @update:show="openEditDialog(item)"
-          />
-        </template>
-        <template #item.socketupdate="{ item }">
-          <span v-if="currentEventReceivedAt[item.id]">
-            Updated {{ diffSeconds(currentEventReceivedAt[item.id]) }} seconds
-            ago
-          </span>
-          <span v-else> No update received (silence) </span>
-        </template>
-        <template #expanded-row="{ item, columns }">
-          <td :colspan="columns.length">
-            <PrinterDetails :printer="item" />
-          </td>
-        </template>
-      </v-data-table>
-    </v-card>
-
-    <v-card
-      v-if="hasPrinterGroupFeature"
-      class="mt-4"
-    >
-      <v-card-title> Printer Groups </v-card-title>
-
-      <v-card-text>
-        <h3>Existing groups:</h3>
-
-        <v-container>
-          <v-chip-group
-            v-model="selectedGroup"
-            selected-class="primary--text"
-            column
-            @update:model-value="selectGroupForUpdatingName()"
-          >
-            <v-chip
-              v-for="group of groupsWithPrinters"
-              :key="group.id"
-              size="small"
-              closable
-              class="mr-3"
-              @click:close="deleteGroup(group.id)"
-            >
-              {{ group.name }}
-            </v-chip>
-          </v-chip-group>
-        </v-container>
-
-        <h3 class="mt-3">Update group name</h3>
-        <v-container>
-          <v-alert v-if="!selectedGroupObject">
-            Select a group to update its name.
-          </v-alert>
-          <v-text-field
-            v-model="updatedGroupName"
-            :disabled="!selectedGroupObject"
-            label="Group Name"
-            placeholder="Type group name here"
-          >
-            Name
-          </v-text-field>
-          <v-btn @click="updateGroupName(selectedGroupObject)">
-            Update name
-          </v-btn>
-        </v-container>
-
-        <h3 class="mt-3">Add group</h3>
-
-        <v-container>
-          <v-text-field
-            v-model="newGroupName"
-            label="Group Name"
-            placeholder="Type group name here"
-          >
-            Name
-          </v-text-field>
-          <v-btn @click="createGroup()"> Create new group </v-btn>
-        </v-container>
-      </v-card-text>
-    </v-card>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { PrintersService } from '@/backend/printers.service'
-import PrinterDetails from '@/components/PrinterList/PrinterDetails.vue'
-import PrinterUrlAction from '@/components/Generic/Actions/PrinterUrlAction.vue'
-import PrinterSettingsAction from '@/components/Generic/Actions/PrinterSettingsAction.vue'
-import PrinterConnectionAction from '@/components/Generic/Actions/PrinterConnectionAction.vue'
-import PrinterQuickStopAction from '@/components/Generic/Actions/PrinterQuickStopAction.vue'
-import SyncPrinterNameAction from '@/components/Generic/Actions/SyncPrinterNameAction.vue'
-
-import { usePrinterStore } from '@/store/printer.store'
-import { useDialogsStore } from '@/store/dialog.store'
-import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
-import PrinterCreateAction from '@/components/Generic/Actions/PrinterCreateAction.vue'
-import PrinterDeleteAction from '@/components/Generic/Actions/PrinterDeleteAction.vue'
-import { useFloorStore } from '@/store/floor.store'
-import { usePrinterStateStore } from '@/store/printer-state.store'
-import { IdType } from '@/utils/id.type'
-import { PrinterDto } from '@/models/printers/printer.model'
-import { useFeatureStore } from '@/store/features.store'
-import { useQuery } from '@tanstack/vue-query'
-import { useSnackbar } from '@/shared/snackbar.composable'
-import {
-  GroupWithPrintersDto,
-  PrinterGroupService
-} from '@/backend/printer-group.service'
-import { useDialog } from '@/shared/dialog.composable'
-import { VDataTable } from 'vuetify/components'
-
-const snackbar = useSnackbar()
-const printerStore = usePrinterStore()
-const loading = ref<boolean>(false)
-const printerStateStore = usePrinterStateStore()
-const floorStore = useFloorStore()
-const dialogsStore = useDialogsStore()
-const featureStore = useFeatureStore()
-const groupsWithPrinters = ref<GroupWithPrintersDto<IdType>[]>([])
-const filteredGroupsWithPrinters = ref<GroupWithPrintersDto<IdType>[]>([])
-const newGroupName = ref('')
-const updatedGroupName = ref('')
-const selectedGroup = ref<number>()
-
-type ReadonlyHeaders = VDataTable['$props']['headers']
-
-const search = ref('')
-const expanded = ref<string[]>([])
-const hasPrinterGroupFeature = computed(() =>
-  featureStore.hasFeature('printerGroupsApi')
-)
-const tableHeaders = computed(
-  () =>
-    [
-      { title: 'Enabled', key: 'enabled' },
-      { title: 'Printer Name', align: 'start', sortable: true, key: 'name' },
-      { title: 'Floor', key: 'floor', sortable: false },
-      ...(featureStore.hasFeature('printerGroupsApi')
-        ? [{ title: 'Group(s)', key: 'group', sortable: true }]
-        : []),
-      { title: 'Actions', key: 'actions', sortable: false },
-      { title: 'Socket Update', key: 'socketupdate', sortable: false },
-      { title: '', key: 'data-table-expand' }
-    ] as ReadonlyHeaders
-)
-
-async function loadData() {
-  loading.value = true
-  await featureStore.loadFeatures()
-  if (featureStore.hasFeature('printerGroupsApi')) {
-    const response = await PrinterGroupService.getGroupsWithPrinters()
-    groupsWithPrinters.value = response
-  }
-  loading.value = false
-  return groupsWithPrinters
-}
-
-const printerGroupsQuery = useQuery({
-  queryKey: ['printerGroups'],
-  queryFn: loadData
-})
-
-const printers = computed(() => {
-  if (
-    !featureStore.hasFeature('printerGroupsApi') ||
-    !filteredGroupsWithPrinters.value?.length
-  ) {
-    return printerStore.printers
-  }
-  const printerIdsInFilteredGroups =
-    filteredGroupsWithPrinters.value.flatMap((g) =>
-      g.printers.map((p) => p.printerId)
-    ) || []
-  return printerStore.printers.filter((p) =>
-    printerIdsInFilteredGroups.includes(p.id)
-  )
-})
-
-const currentEventReceivedAt = computed(
-  () => printerStateStore.printerCurrentEventReceivedAtById
-)
-const selectedGroupObject = computed(() => {
-  if (!selectedGroup.value && selectedGroup.value !== 0) return
-
-  return groupsWithPrinters.value[selectedGroup.value]
-})
-
-const diffSeconds = (timestamp: number) => {
-  if (!timestamp) return
-  const now = Date.now()
-  return (now - timestamp) / 1000
-}
-
-const groupsOfPrinter = (printerId: IdType) => {
-  return groupsWithPrinters.value.filter((g) =>
-    g.printers.find((p) => p.printerId === printerId)
-  )
-}
-
-const nonGroupsOfPrinter = (printerId: IdType) => {
-  return groupsWithPrinters.value.filter(
-    (g) => !g.printers.find((p) => p.printerId === printerId)
-  )
-}
-
-const floorOfPrinter = (printerId: IdType) => {
-  return floorStore.floorOfPrinter(printerId)
-}
-
-const openEditDialog = (printer: PrinterDto) => {
-  printerStore.setUpdateDialogPrinter(printer)
-  dialogsStore.openDialogWithContext(DialogName.AddOrUpdatePrinterDialog)
-}
-
-const openCreatePrinterDialog = () => {
-  dialogsStore.openDialogWithContext(DialogName.AddOrUpdatePrinterDialog)
-}
-
-const clickRow = (item: PrinterDto, event: any) => {
-  console.log(item, event)
-
-  if (event.isExpanded) {
-    const index = expanded.value.findIndex((i) => i === item.id)
-    expanded.value.splice(index, 1)
-  } else {
-    expanded.value.push(item.id.toString())
-  }
-}
-
-const openImportJsonPrintersDialog = () => {
-  dialogsStore.openDialogWithContext(DialogName.BatchJsonCreate)
-}
-
-const openYamlImportExportDialog = () => {
-  useDialog(DialogName.YamlImportExport).openDialog()
-}
-
-const createGroup = async () => {
-  if (!newGroupName.value?.trim()?.length) {
-    throw new Error('Please set a non-empty group name')
-  }
-
-  await PrinterGroupService.createGroup(newGroupName.value.trim())
-  await printerGroupsQuery.refetch()
-  newGroupName.value = ''
-  snackbar.info('Created group')
-}
-
-const selectGroupForUpdatingName = () => {
-  if (!selectedGroupObject.value) return
-
-  updatedGroupName.value = selectedGroupObject.value?.name
-}
-
-const updateGroupName = async (group?: GroupWithPrintersDto<IdType>) => {
-  if (!group?.id) {
-    throw new Error('Group id was not defined')
-  }
-  const existingGroup = groupsWithPrinters.value.find((g) => g.id === group.id)
-  if (!existingGroup) {
-    throw new Error('Group was not found, please reload the page')
-  }
-  if (!updatedGroupName.value?.trim()?.length) {
-    throw new Error('Please set a non-empty group name')
-  }
-
-  await PrinterGroupService.updateGroupName(
-    group.id,
-    updatedGroupName.value.trim()
-  )
-  await printerGroupsQuery.refetch()
-}
-
-const deleteGroup = async (groupId: IdType) => {
-  const existingGroup = groupsWithPrinters.value.find((g) => g.id === groupId)
-  if (!existingGroup) {
-    throw new Error('Group was not found, please reload the page')
-  }
-
-  const printerCount = existingGroup.printers.length
-  if (
-    printerCount > 0 &&
-    !confirm(
-      `This group contains ${printerCount} printers, are you sure to delete it?`
-    )
-  ) {
-    return
-  }
-
-  await PrinterGroupService.deleteGroup(groupId)
-  await printerGroupsQuery.refetch()
-  snackbar.info('Deleted group')
-}
-
-const addPrinterToGroup = async (groupId: IdType, printerId: IdType) => {
-  await PrinterGroupService.addPrinterToGroup(groupId, printerId)
-  await printerGroupsQuery.refetch()
-  snackbar.info('Added printer to group')
-}
-
-const deletePrinterFromGroup = async (groupId: IdType, printerId: IdType) => {
-  await PrinterGroupService.deletePrinterFromGroup(groupId, printerId)
-  await printerGroupsQuery.refetch()
-  snackbar.info('Removed printer from group')
-}
-
-const toggleEnabled = async (printer: PrinterDto) => {
-  if (!printer.id) {
-    throw new Error('Printer ID not set, cant toggle enabled')
-  }
-
-  printer.enabled = !printer.enabled
-  await PrintersService.toggleEnabled(printer.id, printer.enabled)
-}
-</script>
-
-<style lang="scss">
-.disabled-highlight tbody {
-  tr:hover {
-    background-color: transparent !important;
-  }
-}
-
-.reorder-row-icon {
-  cursor: move;
-}
-</style>