@fdm-monster/client-next 0.0.1 → 0.0.2

package/src/components/AboutHelp/AboutView.vue

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

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

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

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