@fdm-monster/client-next 0.0.1 → 0.0.2

package/src/components/NotFound/NotFoundView.vue

@@ -1,39 +0,0 @@
-<template>
-  <v-container>
-    <h2 class="text-center mt-lg-12">This page was not found.</h2>
-
-    <h1 class="text-center">: (</h1>
-    <br />
-    <h4 class="text-center">
-      <v-btn
-        class="align-center"
-        color="primary"
-        to="/"
-        variant="elevated"
-      >
-        <v-icon class="mr-2">home</v-icon>
-        Go home
-      </v-btn>
-
-      <span class="pa-5"> or </span>
-      <v-btn
-        class="align-center"
-        variant="elevated"
-        @click="goBack()"
-      >
-        <v-icon class="mr-2">arrow_left</v-icon>
-        Go back
-      </v-btn>
-    </h4>
-  </v-container>
-</template>
-
-<script lang="ts" setup>
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const goBack = () => {
-  router.go(-1)
-}
-</script>

package/src/components/PrintStatistics/PrintStatistics.vue

@@ -1,168 +0,0 @@
-<template>
-  <v-sheet
-    height="100%"
-    width="100%"
-  >
-    <v-container>
-      <v-row>
-        <v-col>
-          <v-icon>filter_list</v-icon>
-          Filter by printer name (optional)
-        </v-col>
-        <v-col>
-          <v-text-field
-            v-model="printerNameSearch"
-            class="p-2"
-            clearable
-            label="Search"
-            prepend-icon="search"
-            single-line
-          />
-        </v-col>
-      </v-row>
-    </v-container>
-    <v-alert>
-      Please reload here if you want updated results:
-      <v-btn
-        color="primary"
-        size="x-small"
-        @click="loadCompletions()"
-      >
-        Reload
-      </v-btn>
-    </v-alert>
-    <v-table dark>
-      <template #default>
-        <thead>
-          <tr>
-            <th class="text-left">Printer name</th>
-            <th class="text-left">Floor</th>
-            <th class="text-left">Fail/ Success/ Total</th>
-            <th class="text-left">Last success</th>
-            <th class="text-left">Last failure</th>
-            <th class="text-left">Successes (week/48H/24H)</th>
-            <th class="text-left">Failures (week/48H/24H)</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="item in shownCompletions"
-            :key="item.printerId"
-          >
-            <td>
-              {{ printer(item.printerId)?.name ?? '?' }}
-            </td>
-            <td>
-              {{ floorOfPrinter(item.printerId)?.name ?? '?' }}
-            </td>
-            <td>
-              &#215; {{ item.failureCount }} / &#128504; {{ item.successCount }}
-              <strong> ~{{ item.printCount }} </strong>
-            </td>
-            <td>
-              {{ Date.now() - item.lastSuccess?.createdAt || '-' }}
-            </td>
-            <td>
-              <v-tooltip location="bottom">
-                <template
-                  v-if="item.lastFailure?.status"
-                  #activator="{ props }"
-                >
-                  <v-icon v-bind="props">info</v-icon>
-                </template>
-                <span>
-                  {{ item.lastFailure?.status || '-' }} <br />
-                  {{ item.lastFailure?.createdAt }} <br />
-                  <small>
-                    {{ item.lastFailure?.fileName }}
-                  </small>
-                  <br />
-                  <strong>
-                    {{ item.lastFailure?.completionLog }}
-                  </strong>
-                  <br />
-                </span>
-              </v-tooltip>
-            </td>
-            <td>
-              {{ item.successEventsLastWeek }} {{ item.successEventsLast48H }}
-              {{ item.successEventsLast24H }}
-            </td>
-            <td>
-              {{ item.failureEventsLastWeek }} {{ item.failureEventsLast48H }}
-              {{ item.failureEventsLast24H }}
-            </td>
-          </tr>
-        </tbody>
-      </template>
-    </v-table>
-  </v-sheet>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
-import { PrintCompletionsService } from '@/backend/print-completions.service'
-import { PrinterCompletions } from '@/models/print-completions/print-completions.model'
-import { usePrinterStore } from '@/store/printer.store'
-import { useFloorStore } from '@/store/floor.store'
-import { IdType } from '@/utils/id.type'
-
-const loadedCompletions = ref<PrinterCompletions[]>([])
-const shownCompletions = ref<PrinterCompletions[]>([])
-const printerNameSearch = ref<string>('')
-
-const printerStore = usePrinterStore()
-const floorStore = useFloorStore()
-
-onMounted(async () => {
-  await loadCompletions()
-})
-
-watch([() => printerNameSearch.value], () => {
-  updatePrinters()
-})
-
-const loadCompletions = async () => {
-  loadedCompletions.value = []
-  shownCompletions.value = []
-  loadedCompletions.value = await PrintCompletionsService.getCompletions()
-  updatePrinters()
-}
-
-const printer = (printerId: IdType) => {
-  return printerStore.printer(printerId)
-}
-
-const floorOfPrinter = (printerId: IdType) => {
-  return floorStore.floorOfPrinter(printerId)
-}
-
-const updatePrinters = () => {
-  const pIds = printerStore.printers.map((p) => p.id)
-
-  // Determine printers from store, any unknown ID's filtered out
-  const preSearchPrints = pIds.length
-    ? loadedCompletions.value.filter((c) => pIds.includes(c.printerId))
-    : loadedCompletions.value
-
-  const preSortPrints = printerNameSearch.value?.length
-    ? preSearchPrints.filter((p) => {
-        const printer = printerStore.printers.find(
-          (spr) => spr.id === p.printerId
-        )
-        if (!printer) return false
-
-        return (printer.name + printer.printerURL)
-          .toLowerCase()
-          .includes(printerNameSearch.value.toLowerCase())
-      })
-    : preSearchPrints
-
-  shownCompletions.value = preSortPrints.sort((p1, p2) => {
-    if (p1.failureCount === p2.failureCount) {
-      return p1.printCount > p2.printCount ? -1 : 1
-    }
-    return p1.failureCount > p2.failureCount ? -1 : 1
-  })
-}
-</script>

package/src/components/PrintStatistics/PrintStatisticsView.vue

@@ -1,15 +0,0 @@
-<template>
-  <v-container>
-    <PrintStatistics />
-  </v-container>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-import PrintStatistics from '@/components/PrintStatistics/PrintStatistics.vue'
-
-export default defineComponent({
-  name: 'PrintStatisticsView',
-  components: { PrintStatistics }
-})
-</script>

package/src/components/PrinterGrid/HomeToolbar.vue

@@ -1,90 +0,0 @@
-<template>
-  <v-toolbar flat>
-    <v-toolbar-title> Floors </v-toolbar-title>
-    <v-btn-toggle
-      :model-value="selectedFloorToggleIndex"
-      class="ml-7"
-      mandatory
-      rounded
-      @update:model-value="changeFloorIndex"
-    >
-      <v-btn
-        v-for="f in floors"
-        :key="f.id"
-      >
-        <v-icon>format_align_left</v-icon>
-        {{ f.name }}
-      </v-btn>
-    </v-btn-toggle>
-
-    <v-btn
-      v-if="!printerStore.printers?.length"
-      class="mt-0 ml-6"
-      color="primary"
-      to="/printers"
-    >
-      You have no printers. Click here to start!
-    </v-btn>
-    <v-alert
-      v-if="floorStore.floorlessPrinters.length"
-      class="mt-4 ml-12"
-      color="primary"
-    >
-      <v-icon>warning</v-icon>
-      {{ floorStore.floorlessPrinters.length }} unplaced printer(s)!
-    </v-alert>
-    <div class="ma-4 pt-6">
-      <v-switch
-        v-model="gridStore.gridEditMode"
-        label="Printer Relocate Mode"
-      />
-    </div>
-
-    <v-spacer />
-    <span class="d-flex flex-wrap gap-2">
-      <span class="pr-2">
-        <v-icon>print</v-icon>
-        {{ printerStateStore.printingCount }}
-      </span>
-      <span class="pr-2">
-        <v-icon>ac_unit</v-icon>
-        {{ printerStateStore.operationalNotPrintingCount }}
-      </span>
-      <span class="pr-2">
-        <v-icon>handyman</v-icon>
-        {{ printerStore.maintenanceCount }}
-      </span>
-      <span class="pr-2">
-        <v-icon>usb_off</v-icon>
-        {{ printerStore.disconnectedCount }}
-      </span>
-      <span class="pr-2">
-        <v-icon>print_disabled</v-icon>
-        {{ printerStore.disabledCount }}
-      </span>
-    </span>
-  </v-toolbar>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { usePrinterStore } from '@/store/printer.store'
-import { useGridStore } from '@/store/grid.store'
-import { useFloorStore } from '@/store/floor.store'
-import { usePrinterStateStore } from '@/store/printer-state.store'
-
-const printerStore = usePrinterStore()
-const printerStateStore = usePrinterStateStore()
-const floorStore = useFloorStore()
-const gridStore = useGridStore()
-const selectedFloorToggleIndex = ref<number>(0)
-
-const floors = computed(() => {
-  return floorStore.floors
-})
-
-function changeFloorIndex(index: any) {
-  floorStore.changeSelectedFloorByIndex(index)
-  selectedFloorToggleIndex.value = index
-}
-</script>

package/src/components/PrinterGrid/PrinterGrid.vue

@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <v-banner v-if="gridStore.gridEditMode">
-      <v-row style="margin-bottom: -5px">
-        <v-col>
-          <span>
-            Drag {{ floorStore.floorlessPrinters.length }} unplaced printer(s)
-            from here to place it on the grid.
-          </span>
-          <v-chip-group>
-            <v-chip
-              v-for="printer of floorStore.floorlessPrinters"
-              :key="printer.id"
-              draggable
-              size="small"
-              style="cursor: move"
-              @dragstart="onDragStart(printer, $event)"
-            >
-              {{ printer.name }}
-            </v-chip>
-          </v-chip-group>
-        </v-col>
-        <v-col>
-          <div>
-            Clear printers by clicking on
-            <strong>
-              <v-icon>disabled_visible</v-icon>
-              Click to clear
-            </strong>
-          </div>
-        </v-col>
-      </v-row>
-    </v-banner>
-    <v-row
-      v-for="y in rows"
-      :key="y"
-      class="ma-1"
-      no-gutters
-    >
-      <v-col
-        v-for="x in columns"
-        :key="x"
-        :cols="columnWidth"
-        :sm="columnWidth"
-      >
-        <v-row
-          class="test-top"
-          no-gutters
-        >
-          <v-col cols="6">
-            <PrinterGridTile
-              :printer="getPrinter(2 * (x - 1), 2 * (y - 1))"
-              :x="2 * (x - 1)"
-              :y="2 * (y - 1)"
-            />
-          </v-col>
-          <v-col cols="6">
-            <PrinterGridTile
-              :printer="getPrinter(2 * (x - 1) + 1, 2 * (y - 1))"
-              :x="2 * (x - 1) + 1"
-              :y="2 * (y - 1)"
-            />
-          </v-col>
-        </v-row>
-        <v-row
-          class="test-bottom"
-          no-gutters
-        >
-          <v-col cols="6">
-            <PrinterGridTile
-              :printer="getPrinter(2 * (x - 1), 2 * (y - 1) + 1)"
-              :x="2 * (x - 1)"
-              :y="2 * (y - 1) + 1"
-            />
-          </v-col>
-          <v-col cols="6">
-            <PrinterGridTile
-              :printer="getPrinter(2 * (x - 1) + 1, 2 * (y - 1) + 1)"
-              :x="2 * (x - 1) + 1"
-              :y="2 * (y - 1) + 1"
-            />
-          </v-col>
-        </v-row>
-      </v-col>
-    </v-row>
-    <img
-      alt="FDM Monster Background"
-      class="grid-bg-img align-content-center"
-      src="/img/logo.svg"
-      style="opacity: 0.08; pointer-events: none"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, onMounted } from 'vue'
-import PrinterGridTile from '@/components/PrinterGrid/PrinterGridTile.vue'
-import { totalVuetifyColumnCount } from '@/shared/printer-grid.constants'
-import { usePrinterStore } from '@/store/printer.store'
-import { PrinterDto } from '@/models/printers/printer.model'
-import { useGridStore } from '@/store/grid.store'
-import { dragAppId, INTENT, PrinterPlace } from '@/shared/drag.constants'
-import { useSettingsStore } from '@/store/settings.store'
-import { useFloorStore } from '@/store/floor.store'
-
-console.debug('Setup grid')
-
-const printerStore = usePrinterStore()
-const floorStore = useFloorStore()
-const settingsStore = useSettingsStore()
-const gridStore = useGridStore()
-
-onMounted(async () => {
-  await printerStore.loadPrinters()
-  await floorStore.loadFloors()
-})
-
-const printerMatrix = computed(() => floorStore.gridSortedPrinters)
-const columns = computed(() => settingsStore.gridCols / 2)
-const columnWidth = computed(() => totalVuetifyColumnCount / columns.value)
-const rows = computed(() => settingsStore.gridRows / 2)
-
-function onDragStart(printer: PrinterDto, ev: DragEvent) {
-  if (!ev.dataTransfer) return
-  if (!printer.id) return
-
-  ev.dataTransfer.setData(
-    'text',
-    JSON.stringify({
-      appId: dragAppId,
-      intent: INTENT.PRINTER_PLACE,
-      printerId: printer.id
-    } as PrinterPlace)
-  )
-}
-
-function getPrinter(col: number, row: number) {
-  const x = col
-  const y = row
-  if (!printerMatrix.value?.length || !printerMatrix.value[x]) return undefined
-  return printerMatrix.value[x][y]
-}
-</script>
-
-<style>
-.grid-bg-img {
-  position: fixed;
-  height: 100vh;
-  top: 50vh;
-  width: 600%;
-  left: -250%;
-  filter: grayscale(100%);
-}
-
-.test-bottom {
-  border: 1px solid transparent;
-  margin: 0 20px 10px 20px !important;
-}
-
-.test-top {
-  border: 1px solid transparent;
-  margin: 0 20px 0 20px !important;
-}
-</style>