@fdm-monster/client-next 0.0.1

package/src/components/AboutHelp/AboutView.vue

@@ -0,0 +1,164 @@
+<template>
+  <v-card>
+    <v-card-title> About FDM Monster<strong> © </strong> </v-card-title>
+    <v-card-text>
+      The first prototype of FDM Monster<strong> © </strong> was created by
+      David Zwart in 2021 in collaboration with
+      <strong> <a href="https://mtb3d.com"> MTB3D </a> </strong>. This
+      open-source prototype proved a strong factor in process and logistics
+      optimization for a 3D Printing company with 100+ printers. Due to it's
+      success, we decided to keep it open-source and free!
+    </v-card-text>
+    <v-card-text>
+      The latest 3D Printing Farm server named FDM Monster has been tested for 2
+      years using a custom image for running 4 OctoPrint images on a Raspberry
+      Pi.
+      <br />
+      This version uses the famous
+      <a
+        href="https://nodejs.org/en"
+        target="_blank"
+      >
+        <strong> Node.js framework </strong>
+      </a>
+      together with Awilix and ExpressJS for its server, and
+      <a
+        href="https://vuejs.org/"
+        target="_blank"
+      >
+        <strong> Vue 2 </strong>
+      </a>
+      and
+      <a
+        href="https://next.vuetifyjs.com/"
+        target="_blank"
+      >
+        <strong> Vuetify 2 </strong>
+      </a>
+      to set a base for FDM Monster Client<strong> © </strong> - the webapp.
+      <br />
+      <br />
+      <strong> Your server's version is: {{ serverVersion }} </strong>
+      <br />
+      <strong> Your clients's version is: {{ version }} </strong>
+      <br />
+      <strong v-if="monsterPiVersion">
+        Your MonsterPi version is: {{ monsterPiVersion }}<br />
+      </strong>
+      <strong v-else> No MonsterPi distro detected. </strong>
+      <br />
+      <v-btn
+        class="mt-3"
+        variant="outlined"
+        to="/settings/software-upgrade"
+      >
+        Visit Upgrade Settings
+      </v-btn>
+    </v-card-text>
+    <v-card-title> Documentation </v-card-title>
+    <v-card-text>
+      <strong>
+        <v-btn
+          color="primary"
+          href="https://docs.fdm-monster.net"
+          style="color: white"
+          target="_blank"
+        >
+          <v-icon class="mr-2">menu_book</v-icon>
+          FDM Monster documentation site
+        </v-btn>
+      </strong>
+      <br />
+    </v-card-text>
+
+    <!--    Bug reports section -->
+    <v-card-title>
+      Bug reports
+      <v-icon>bug</v-icon>
+    </v-card-title>
+    <v-card-text>
+      Did you find a bug, or a feature that needs work? We would love to hear
+      about it! <br />
+
+      <strong> We have multiple ways to report it: </strong>
+      <h3>
+        <ul class="ml-5">
+          <li>Mail to davidzwa@gmail.com</li>
+          <li>
+            <a
+              href="https://discord.gg/mwA8uP8CMc"
+              style="color: white"
+              target="_blank"
+            >
+              Discord server
+            </a>
+          </li>
+          <li>
+            <strong>
+              <a
+                href="https://github.com/fdm-monster/fdm-monster/issues"
+                style="color: white"
+                target="_blank"
+              >
+                FDM Monster <strong> © </strong> Github Issues
+              </a>
+            </strong>
+          </li>
+          <li>
+            <a
+              href="https://fdm-monster.net"
+              style="color: white"
+              target="_blank"
+            >
+              Website
+            </a>
+          </li>
+        </ul>
+      </h3>
+    </v-card-text>
+
+    <v-card-title> About me </v-card-title>
+    <v-card-text>
+      <img
+        src="/img/DavidZwart.jpg"
+        width="150px"
+      />
+      <h4 class="mt-2">
+        <a
+          href="https://www.linkedin.com/in/david-zwart-88514083/"
+          style="color: white"
+          target="_blank"
+        >
+          LinkedIn
+        </a>
+
+        <a
+          class="ml-2"
+          href="https://github.com/davidzwa"
+          style="color: white"
+          target="_blank"
+        >
+          Github Profile
+        </a>
+      </h4>
+      David Zwart MSc., post-graduate from the TU Delft (Embedded Systems),
+      author of FDM Monster<strong> © </strong>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { AppService } from '@/backend/app.service'
+import { version as clientVersion } from '../../../package.json'
+
+const serverVersion = ref('')
+const monsterPiVersion = ref<string | null>('')
+const version = ref(clientVersion)
+
+onMounted(async () => {
+  const versionSpec = await AppService.getVersion()
+  serverVersion.value = versionSpec.version
+  monsterPiVersion.value = versionSpec.monsterPi
+})
+</script>

package/src/components/CameraGrid/CameraGridView.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <v-toolbar>
+      <v-toolbar-title class="mr-4"> Camera Overview </v-toolbar-title>
+      <v-btn
+        color="primary"
+        @click="addCamera()"
+      >
+        <v-icon class="mr-2">add</v-icon>
+        Add camera
+      </v-btn>
+    </v-toolbar>
+    <v-row class="ma-0">
+      <div
+        v-for="camera in query.data.value"
+        :key="camera.cameraStream.id"
+        class="ma-4"
+        style="border: 1px solid grey; margin: 0"
+        width="300"
+      >
+        <v-card
+          class="pb-2 pl-2 pr-2"
+          width="300"
+        >
+          <v-card-title>
+            <v-icon
+              v-if="camera.cameraStream.printerId"
+              class="mr-2"
+              size="small"
+            >
+              print
+            </v-icon>
+            <v-icon
+              v-else
+              class="mr-2"
+              size="small"
+            >
+              camera_alt
+            </v-icon>
+            {{ camera?.cameraStream.name ?? camera?.printer?.name ?? 'Camera' }}
+          </v-card-title>
+          <img
+            :src="camera.cameraStream?.streamURL"
+            width="100%"
+          />
+          <br />
+          <v-btn
+            class="mr-1"
+            size="small"
+            @click="updateCamera(camera.cameraStream.id)"
+          >
+            <v-icon class="mr-2">edit</v-icon>
+            Update
+          </v-btn>
+          <v-btn
+            size="small"
+            @click="deleteCamera(camera.cameraStream.id)"
+          >
+            <v-icon class="mr-2">delete</v-icon>
+            Delete
+          </v-btn>
+        </v-card>
+      </div>
+    </v-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { CameraStreamService } from '@/backend/camera-stream.service'
+import { useDialog } from '@/shared/dialog.composable'
+import { DialogName } from '@/components/Generic/Dialogs/dialog.constants'
+import { useMutation, useQuery } from '@tanstack/vue-query'
+import { CameraWithPrinter } from '@/models/camera-streams/camera-stream'
+import { usePrinterStore } from '@/store/printer.store'
+import { IdType } from '@/utils/id.type'
+
+const printerStore = usePrinterStore()
+const dialog = useDialog(DialogName.AddOrUpdateCameraDialog)
+const camerasWithPrinter = async (): Promise<CameraWithPrinter[]> => {
+  const streams = await CameraStreamService.listCameraStreams()
+  return streams.map((cameraStream) => ({
+    printer: printerStore.printers.find(
+      (printer) => printer.id === cameraStream.printerId
+    ),
+    cameraStream
+  })) as CameraWithPrinter[]
+}
+const query = useQuery({
+  queryKey: ['cameraStream'],
+  queryFn: camerasWithPrinter
+})
+const deleteMutation = useMutation({
+  mutationFn: (cameraId: IdType) =>
+    CameraStreamService.deleteCameraStream(cameraId),
+  onSuccess: () => query.refetch()
+})
+
+function addCamera() {
+  dialog.openDialog({ addOrUpdate: 'add' })
+}
+
+function updateCamera(cameraId?: IdType) {
+  if (!cameraId) return
+  dialog.openDialog({ addOrUpdate: 'update', cameraId })
+}
+
+function deleteCamera(cameraId?: IdType) {
+  if (!cameraId) return
+  deleteMutation.mutateAsync(cameraId)
+}
+</script>

package/src/components/FirstTimeSetup/FirstTimeSetupView.vue

@@ -0,0 +1,354 @@
+<template>
+  <v-container>
+    <img
+      alt="FDM Monster Background"
+      class="grid-bg-img align-content-center"
+      src="/img/logo.svg"
+      style="opacity: 0.08"
+    />
+    <v-stepper
+      v-model="stepper"
+      class="bg-grey-darken-4"
+    >
+      <v-stepper-header>
+        <v-stepper-step
+          :complete="stepper > 1"
+          step="1"
+        >
+          Introduction
+        </v-stepper-step>
+
+        <v-divider />
+
+        <v-stepper-step
+          :complete="stepper > 2"
+          step="2"
+        >
+          Login and registration
+        </v-stepper-step>
+
+        <v-divider />
+
+        <v-stepper-step step="3"> Summary </v-stepper-step>
+      </v-stepper-header>
+
+      <v-stepper-items>
+        <v-stepper-content
+          class="align-content-center align-center text-center"
+          step="1"
+        >
+          <div class="align-content-center align-center text-center">
+            <img
+              class="rounded-pill ma-4"
+              src="/img/OIG.jpg"
+              style="opacity: 0.7"
+              width="400"
+            />
+            />
+            <h1>FDM Monster</h1>
+            <small> This server is still unconfigured. </small>
+          </div>
+          <v-btn
+            class="mt-14 mb-14"
+            color="primary"
+            @click="stepper = 2"
+          >
+            Start Setup
+          </v-btn>
+
+          <div class="mt-6 border_all">
+            <v-icon class="mr-6">question_mark</v-icon>
+            <small>
+              If you have questions at any point, reach out on
+              <a href="https://github.com/fdm-monster/fdm-monster/issues">
+                Github
+              </a>
+              or on <a href="https://discord.gg/mwA8uP8CMc"> Discord </a>.
+            </small>
+          </div>
+        </v-stepper-content>
+        <v-stepper-content
+          class="align-content-center align-center text-center"
+          step="2"
+        >
+          <h4><v-icon class="mr-2">settings</v-icon> Login</h4>
+
+          <v-form v-model="formValid">
+            <v-switch
+              v-model="formStep1.loginRequired"
+              class="mt-5"
+            >
+              <template #message>
+                <span class="d-flex flex-row align-center">
+                  <v-icon
+                    :color="formStep1.loginRequired ? 'success' : ''"
+                    :disabled="!formStep1.loginRequired"
+                    class="ml-3 mr-3"
+                  >
+                    check
+                  </v-icon>
+                  Login is required.
+                </span>
+
+                <span class="d-flex flex-row align-center">
+                  <v-icon
+                    :color="!formStep1.loginRequired ? 'error' : ''"
+                    :disabled="formStep1.loginRequired"
+                    class="ml-3 mr-3"
+                  >
+                    close
+                  </v-icon>
+                  No login is required. The admin role is assumed.
+                </span>
+              </template>
+              <template #label> Enable Login </template>
+            </v-switch>
+
+            <v-alert
+              v-if="!formStep1.loginRequired"
+              color="error-darken-4"
+            >
+              You might be exposing your FDM Monster server publicly. Please
+              take care evaluating the
+              <strong> Enable Login </strong> option.
+            </v-alert>
+
+            <v-switch
+              v-model="formStep1.registration"
+              class="mt-10 mb-10"
+            >
+              <template #message>
+                <span class="d-flex flex-row align-center">
+                  <v-icon
+                    :color="formStep1.registration ? 'success' : ''"
+                    :disabled="!formStep1.registration"
+                    class="ml-3 mr-3"
+                  >
+                    check
+                  </v-icon>
+                  Accounts can be registered with a guest role.
+                </span>
+                <span class="d-flex flex-row align-center">
+                  <v-icon
+                    :color="!formStep1.registration ? 'error' : ''"
+                    :disabled="formStep1.registration"
+                    class="ml-3 mr-3"
+                  >
+                    close
+                  </v-icon>
+                  No other accounts can be registered.
+                </span>
+              </template>
+              <template #label> Enable Registration </template>
+            </v-switch>
+
+            <v-divider />
+
+            <h4 class="mt-4">
+              <v-icon class="mr-2">shield</v-icon> Admin account
+            </h4>
+
+            <v-text-field
+              v-model="formStep2.rootUsername"
+              :rules="[(v) => !!v || 'Username is required']"
+              class="mt-5"
+              label="Username"
+              prepend-icon="person"
+            >
+              <template #prepend>
+                <v-icon>person</v-icon>
+              </template>
+            </v-text-field>
+
+            <v-text-field
+              v-model="formStep2.rootPassword"
+              type="password"
+              prepend-icon="lock"
+              :rules="[
+                (v) => !!v || 'Password is required',
+                (v) =>
+                  (!!v && v?.length >= 8) ||
+                  'Password must be of length 8 or greater'
+              ]"
+              class="mt-5"
+              label="Password"
+            >
+              <template #prepend>
+                <v-icon>password</v-icon>
+              </template>
+            </v-text-field>
+
+            <v-text-field
+              v-model="formStep2.rootPassword2"
+              type="password"
+              prepend-icon="lock"
+              :rules="[
+                (v) => !!v || 'Repeated password is required',
+                (v) => v === formStep2.rootPassword || 'Passwords are not equal'
+              ]"
+              class="mt-5"
+              label="Repeated Password"
+            >
+              <template #prepend>
+                <v-icon>password</v-icon>
+              </template>
+            </v-text-field>
+          </v-form>
+
+          <div class="mt-4">
+            <v-btn
+              class="mr-4"
+              @click="stepper = 1"
+            >
+              Back
+            </v-btn>
+            <v-btn
+              :disabled="!formValid"
+              color="primary"
+              @click="submitWizard()"
+            >
+              Verify & Submit
+            </v-btn>
+          </div>
+
+          <v-divider class="mt-4" />
+
+          <div class="mt-14">
+            <v-icon class="mr-6">question_mark</v-icon>
+            <small>
+              If you have questions at any point, reach out on
+              <a href="https://github.com/fdm-monster/fdm-monster/issues">
+                Github
+              </a>
+              or on <a href="https://discord.gg/mwA8uP8CMc"> Discord </a>.
+            </small>
+          </div>
+        </v-stepper-content>
+        <v-stepper-content
+          class="align-content-center align-center text-center"
+          step="3"
+        >
+          <div class="mb-5 mt-10">
+            <v-icon
+              size="100"
+              class="mr-5"
+              color="green circle"
+            >
+              check_circle
+            </v-icon>
+            Setup Completed
+          </div>
+
+          <br />
+          <v-btn
+            color="primary"
+            class="mr-4"
+            @click="continueNext()"
+          >
+            Let's continue
+          </v-btn>
+
+          <div class="mt-14">
+            <v-icon class="mr-6">question_mark</v-icon>
+            <small>
+              If you have questions at any point, reach out on
+              <a href="https://github.com/fdm-monster/fdm-monster/issues">
+                Github
+              </a>
+              or on <a href="https://discord.gg/mwA8uP8CMc"> Discord </a>.
+            </small>
+          </div>
+        </v-stepper-content>
+      </v-stepper-items>
+    </v-stepper>
+  </v-container>
+</template>
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { FirstTimeSetupService } from '@/backend/first-time-setup.service'
+import { useSnackbar } from '@/shared/snackbar.composable'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/store/auth.store'
+
+const router = useRouter()
+const snackbar = useSnackbar()
+const formValid = ref(false)
+const authStore = useAuthStore()
+const formStep1 = ref({
+  loginRequired: true,
+  registration: false
+})
+const formStep2 = ref({
+  rootUsername: 'admin',
+  rootPassword: '',
+  rootPassword2: ''
+})
+
+const stepper = ref(1)
+
+onMounted(async () => {
+  await authStore.checkAuthenticationRequirements()
+
+  if (authStore.wizardState?.wizardCompleted) {
+    snackbar.info('Setup already completed.')
+    if (authStore.loginRequired) {
+      await router.push({ name: 'Login' })
+    } else {
+      await router.push({ name: 'Home' })
+    }
+  }
+})
+
+async function submitWizard() {
+  if (!formValid.value) {
+    snackbar.error('Please fill out all required fields.')
+    return
+  }
+
+  const formValue = formStep1.value
+  const form2Value = formStep2.value
+  await FirstTimeSetupService.postFirstTimeSetup({
+    loginRequired: formValue.loginRequired,
+    registration: formValue.registration,
+    rootUsername: form2Value.rootUsername,
+    rootPassword: form2Value.rootPassword
+  })
+  snackbar.openInfoMessage({ title: 'Setup completed' })
+  stepper.value = 3
+}
+
+async function continueNext() {
+  await router.push({ name: 'Login' })
+}
+</script>
+<style>
+.typewriter h1 {
+  overflow: hidden; /* Ensures the content is not revealed until the animation */
+  border-right: 0.15em solid orange; /* The typwriter cursor */
+  white-space: nowrap; /* Keeps the content on a single line */
+  //margin: 0 auto; /* Gives that scrolling effect as the typing happens */
+  letter-spacing: 0.15em; /* Adjust as needed */
+  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+}
+
+/* The typing effect */
+@keyframes typing {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+/* The typewriter cursor effect */
+@keyframes blink-caret {
+  from,
+  to {
+    border-color: transparent;
+  }
+  50% {
+    border-color: orange;
+  }
+}
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <v-badge
+    v-if="printer.enabled"
+    :color="isPrinterOperational() ? 'green' : 'red'"
+    bordered
+    class="ma-2"
+    overlap
+  >
+    <template #badge>
+      <v-icon v-if="isPrinterOperational()">check</v-icon>
+      <v-icon v-else>close</v-icon>
+    </template>
+    <v-btn
+      :disabled="isPrinterPrinting()"
+      fab
+      size="small"
+      @click.stop="togglePrinterConnection"
+    >
+      <v-icon>usb</v-icon>
+    </v-btn>
+  </v-badge>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from 'vue'
+import { PrinterDto } from '@/models/printers/printer.model'
+import { PrintersService } from '@/backend'
+import { usePrinterStateStore } from '@/store/printer-state.store'
+
+const props = defineProps<{
+  printer: PrinterDto
+}>()
+
+const printerStateStore = usePrinterStateStore()
+
+function isPrinterOperational() {
+  if (!props.printer.id) {
+    return false
+  }
+  return printerStateStore.isPrinterOperational(props.printer.id)
+}
+
+function isPrinterPrinting() {
+  if (!props.printer.id) {
+    return false
+  }
+  return printerStateStore.isPrinterPrinting(props.printer.id)
+}
+
+async function togglePrinterConnection() {
+  if (isPrinterOperational()) {
+    return PrintersService.sendPrinterDisconnectCommand(props.printer.id)
+  }
+  await PrintersService.sendPrinterConnectCommand(props.printer.id)
+}
+</script>