@fdm-monster/client-next 0.0.1

package/src/components/NotFound/NotFoundView.vue

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

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

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

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

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