@fdm-monster/client-next 0.0.1 → 0.0.3

package/src/components/Generic/Loaders/GridLoader.vue

@@ -1,68 +0,0 @@
-<template>
-  <div
-    v-if="loading"
-    :style="getWrapperStyle()"
-  >
-    <div
-      v-for="index in 9"
-      :key="index"
-      :style="getCircleStyle(random(100))"
-    />
-  </div>
-</template>
-
-<script>
-const random = (top) => Math.random() * top
-
-export default {
-  name: 'GridLoader',
-  props: {
-    loading: { type: Boolean, default: true },
-    color: { type: String, default: '#000000' },
-    size: { type: Number, default: 15 },
-    margin: { type: String, default: '2px' },
-    sizeUnit: { type: String, default: 'px' }
-  },
-
-  methods: {
-    random,
-    getWrapperStyle() {
-      const width = `${parseFloat(this.size) * 3 + parseFloat(this.margin) * 6}${this.sizeUnit}`
-      return {
-        width: width,
-        fontSize: 0
-      }
-    },
-
-    getCircleStyle(rand) {
-      const animation = `grid ${rand / 100 + 0.6}s ${rand / 100 - 0.2}s infinite ease`
-      return {
-        display: 'inline-block',
-        backgroundColor: this.color,
-        width: `${this.size}${this.sizeUnit}`,
-        height: `${this.size}${this.sizeUnit}`,
-        margin: this.margin,
-        borderRadius: '100%',
-        animationFillMode: 'both',
-        animation: animation
-      }
-    }
-  }
-}
-</script>
-
-<style>
-@keyframes grid {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0.5);
-    opacity: 0.7;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-</style>

package/src/components/Generic/NavigationDrawer.vue

@@ -1,69 +0,0 @@
-<template>
-  <v-navigation-drawer
-    permanent
-    rail
-    theme="dark"
-    class="nav-side-background"
-  >
-    <v-app-bar-nav-icon class="ml-1 mt-2">
-      <v-img
-        alt="FDM Monster Logo"
-        :src="imgLogo"
-        class="shrink mr-1 pt-3 ml-1"
-        transition="scale-transition"
-        width="40"
-      />
-    </v-app-bar-nav-icon>
-
-    <v-divider />
-
-    <v-list
-      density="compact"
-      nav
-    >
-      <v-list-item
-        v-for="([icon, title, path], i) in items"
-        :key="i"
-        :to="path"
-        :prepend-icon="icon"
-        :title="title"
-        density="comfortable"
-        router-link
-      />
-    </v-list>
-  </v-navigation-drawer>
-</template>
-
-<script lang="ts" setup>
-import imgLogo from '@/assets/logo.png'
-
-const items = [
-  ['home', 'Devices', '/'],
-  ['print', 'Printers', '/printers'],
-  ['camera_alt', 'CameraGridView', '/cameras'],
-  ['settings', 'Settings', '/settings'],
-  ['timeline', 'PrintStatistics', '/statistics'],
-  ['contact_support', 'About', '/about']
-]
-</script>
-
-<style>
-/*https://mdbootstrap.com/docs/vue/css/background-image/*/
-.nav-side-background {
-  background: -moz-linear-gradient(
-    45deg,
-    rgba(18, 18, 18, 1),
-    rgba(155, 5, 5, 1) 100%
-  );
-  background: -webkit-linear-gradient(
-    45deg,
-    rgba(18, 18, 18, 1),
-    rgba(155, 5, 5, 1) 100%
-  );
-  background: linear-gradient(
-    45deg,
-    rgba(18, 18, 18, 1),
-    rgba(155, 5, 5, 1) 100%
-  );
-}
-</style>

package/src/components/Generic/PrintJobsMenu.vue

@@ -1,148 +0,0 @@
-<template>
-  <div class="text-center">
-    <v-menu
-      v-model="menu"
-      :close-on-content-click="false"
-      :nudge-width="400"
-      location="bottom right"
-      offset-x
-      offset-y
-      transition="slide-x-transition"
-    >
-      <template #activator="{ props }">
-        <v-btn
-          :color="activePrintCount ? 'green' : 'secondary'"
-          dark
-          v-bind="props"
-        >
-          <span>
-            Print jobs {{ activePrintCount ? `(${activePrintCount})` : '' }}
-          </span>
-          <v-icon end> work </v-icon>
-        </v-btn>
-      </template>
-
-      <v-card
-        class="d-flex flex-column"
-        min-width="300"
-      >
-        <v-list style="overflow-y: hidden; flex-shrink: 0">
-          <v-list-item>
-            <template #prepend>
-              <v-avatar
-                class="font-weight-bold"
-                color="primary"
-                size="44"
-              >
-                {{ activePrintCount }}
-              </v-avatar>
-            </template>
-
-            <v-list-item-title>
-              Print Jobs
-              <span class="float-end">
-                <v-btn
-                  variant="tonal"
-                  @click="menu = false"
-                >
-                  <v-icon>close</v-icon>Close
-                </v-btn>
-              </span>
-            </v-list-item-title>
-
-            <v-list-item-action class="mt-2">
-              <v-text-field
-                v-model="searchString"
-                autofocus
-                class="p-2"
-                clearable
-                label="Search jobs or printers"
-                persistent-placeholder
-                placeholder="Type part of a filename or printer name to search"
-                prepend-icon="search"
-                style="min-width: 900px"
-              />
-            </v-list-item-action>
-          </v-list-item>
-        </v-list>
-
-        <v-divider />
-
-        <v-list style="overflow-y: auto; flex-shrink: 1">
-          <v-list-item v-if="!activePrintCount"> No active prints </v-list-item>
-          <v-list-item
-            v-for="{ printer, job } of activePrintJobs"
-            :key="printer.id"
-            lines="two"
-          >
-            <template #prepend>
-              <v-avatar size="70">
-                <v-progress-circular
-                  :model-value="job?.progress?.completion"
-                  :width="5"
-                  color="green"
-                  size="50"
-                >
-                  {{ truncateProgress(job.progress?.completion) + '%' || '' }}
-                </v-progress-circular>
-              </v-avatar>
-            </template>
-
-            <v-list-item-title>
-              {{ job.job?.file?.name }}
-            </v-list-item-title>
-
-            <v-list-item-subtitle>
-              Elapsed:
-              {{ Math.round(job?.progress.printTime ?? 0 / 60) }} minutes
-              <br />
-              Printer: {{ printer.name }}
-            </v-list-item-subtitle>
-          </v-list-item>
-        </v-list>
-
-        <v-card-actions>
-          <v-spacer />
-
-          <v-btn @click="menu = false"> Close </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-menu>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { usePrinterStateStore } from '@/store/printer-state.store'
-
-const printerStateStore = usePrinterStateStore()
-const searchString = ref('')
-const menu = ref(false)
-
-const activePrintJobs = computed(() => {
-  return printerStateStore.printersWithJob.filter((p) => {
-    const fileName = p.job?.job?.file.name
-    const fileNameSearch = fileName?.toLowerCase() || ''
-    const printerUrlSearch = p.printer.printerURL?.toLowerCase() || ''
-    const searchSearch = p.printer.name?.toLowerCase() || ''
-
-    const combineSearch = `${fileNameSearch} ${printerUrlSearch} ${searchSearch}`
-    return (
-      !searchString.value ||
-      combineSearch.includes(searchString.value.toLowerCase())
-    )
-  })
-})
-
-const activePrintCount = computed(() => {
-  return activePrintJobs.value.length || 0
-})
-
-function truncateProgress(progress: number) {
-  if (!progress) return ''
-  return progress?.toFixed(0)
-}
-
-watch(menu, () => {
-  searchString.value = ''
-})
-</script>

package/src/components/Generic/Snackbars/AppErrorSnackbar.vue

@@ -1,64 +0,0 @@
-<template>
-  <v-snackbar
-    v-model="snackbarOpened"
-    :timeout="snackbarTimeout"
-    absolute
-    location="bottom"
-    class="ml-16 mb-16 ma-3 elevation-24"
-    color="error-darken-1"
-    rounded="pill"
-    multi-line
-    style="z-index: 1000"
-    width="450"
-  >
-    <v-row>
-      <v-col cols="2">
-        <v-btn size="large">
-          <v-icon>error</v-icon>
-          <v-icon />
-        </v-btn>
-      </v-col>
-      <v-col
-        class="d-flex align-center flex-row"
-        cols="8"
-      >
-        <div>
-          <span class="font-weight-bold text-button">
-            {{ snackbarTitle }}
-          </span>
-          <div v-if="snackbarSubtitle?.length">
-            {{ snackbarSubtitle }}
-          </div>
-        </div>
-      </v-col>
-
-      <v-col cols="1">
-        <v-btn
-          size="large"
-          @click="snackbarOpened = false"
-        >
-          <v-icon>close</v-icon>
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-snackbar>
-</template>
-<script lang="ts" setup>
-import { ErrorMessage, useSnackbar } from '@/shared/snackbar.composable'
-import { onMounted, ref } from 'vue'
-
-const snackbar = useSnackbar()
-const snackbarTimeout = ref(-1)
-const snackbarOpened = ref(false)
-const snackbarTitle = ref('')
-const snackbarSubtitle = ref('')
-
-onMounted(() => {
-  snackbar.onErrorMessage((data: ErrorMessage) => {
-    snackbarTitle.value = data.title
-    snackbarSubtitle.value = data.subtitle ?? ''
-    snackbarOpened.value = true
-    snackbarTimeout.value = data.timeout ?? 10000
-  })
-})
-</script>

package/src/components/Generic/Snackbars/AppInfoSnackbar.vue

@@ -1,63 +0,0 @@
-<template>
-  <v-snackbar
-    v-model="snackbarOpened"
-    absolute
-    location="bottom"
-    :color="isWarning ? 'warning darken-2' : 'success'"
-    class="ma-3 elevation-24"
-    rounded="pill"
-    :timeout="timeout"
-    style="z-index: 1000"
-    multi-line
-  >
-    <v-row>
-      <v-col cols="2">
-        <v-btn size="large">
-          <v-icon>info</v-icon>
-        </v-btn>
-      </v-col>
-      <v-col
-        cols="8"
-        class="d-flex align-center flex-row"
-      >
-        <div>
-          <span class="font-weight-bold text-button">
-            {{ infoTitle }}
-          </span>
-          <div v-if="infoSubtitle?.length">
-            {{ infoSubtitle }}
-          </div>
-        </div>
-      </v-col>
-      <v-col cols="1">
-        <v-btn
-          size="large"
-          @click="snackbarOpened = false"
-        >
-          <v-icon>close</v-icon>
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-snackbar>
-</template>
-<script lang="ts" setup>
-import { InfoMessage, useSnackbar } from '@/shared/snackbar.composable'
-import { onMounted, ref } from 'vue'
-
-const snackbar = useSnackbar()
-const snackbarOpened = ref(false)
-const infoTitle = ref('')
-const infoSubtitle = ref('')
-const timeout = ref(2000)
-const isWarning = ref(false)
-
-onMounted(() => {
-  snackbar.onInfoMessage((data: InfoMessage) => {
-    infoTitle.value = data.title
-    infoSubtitle.value = data.subtitle ?? ''
-    isWarning.value = data.warning ?? false
-    timeout.value = data.timeout ?? 2000
-    snackbarOpened.value = true
-  })
-})
-</script>

package/src/components/Generic/Snackbars/AppProgressSnackbar.vue

@@ -1,158 +0,0 @@
-<template>
-  <v-snackbar
-    v-model="snackbarOpened"
-    :timeout="progressTimeout"
-    absolute
-    location="bottom right"
-    class="ma-3 elevation-24"
-    min-width="450px"
-    multi-line
-    rounded="pill"
-    style="z-index: 1000"
-  >
-    <v-row>
-      <v-col cols="2">
-        <v-btn
-          icon
-          size="large"
-        >
-          <v-icon>file_upload</v-icon>
-        </v-btn>
-      </v-col>
-      <v-col
-        class="d-flex align-center flex-row"
-        cols="8"
-      >
-        <div style="width: 100%">
-          <span class="font-weight-bold text-button">
-            {{ snackbarTitle }}
-          </span>
-          <div
-            v-for="(progress, index) in progressTracked"
-            :key="index"
-            class="mb-2"
-          >
-            <v-icon v-if="progress.completed">check</v-icon>
-            <v-icon v-else-if="progress.timeoutAt">pause</v-icon>
-            <v-icon v-else>hourglass_bottom</v-icon>
-            {{ progress.title }}
-            {{ (progress.completed ? 100 : progress.value).toFixed(1) }}%
-            <br />
-            <v-progress-linear
-              :key="progress.key"
-              :model-value="progress.completed ? 100 : progress.value"
-              :color="progress.timeoutAt ? 'red' : 'success'"
-            />
-          </div>
-        </div>
-      </v-col>
-      <v-col cols="1">
-        <v-btn
-          icon
-          size="large"
-          @click="snackbarOpened = false"
-        >
-          <v-icon>close</v-icon>
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-snackbar>
-</template>
-<script lang="ts" setup>
-import { ProgressMessage, useSnackbar } from '@/shared/snackbar.composable'
-import { onMounted, ref } from 'vue'
-
-const snackbar = useSnackbar()
-const snackbarOpened = ref(false)
-const snackbarTitle = ref('')
-
-// Merged upload progress tracking
-interface ProgressTracked {
-  value: number
-  key: string
-  title: string
-  completed: boolean
-  startedAt: number
-  expiresAt: number
-  timeoutAt?: number
-}
-
-const progressTracked = ref<ProgressTracked[]>([])
-const progressTimeout = ref<number>(100)
-
-function getProgressByKey(key: string) {
-  return progressTracked.value.find((p) => p.key === key)
-}
-
-function addProgressTracker(
-  // Tracking key
-  key: string,
-  title: string,
-  value: number = 0,
-  completed: boolean = false,
-  expiresAt: number = Date.now() + 1500
-) {
-  console.log(
-    `[AppProgressSnackbar] Adding ${key} tracker with progress ${value}`
-  )
-  progressTracked.value.push({
-    key,
-    title,
-    value,
-    completed,
-    startedAt: Date.now(),
-    expiresAt,
-    timeoutAt: undefined
-  })
-}
-
-function removeProgressTracker(key: string) {
-  progressTracked.value = progressTracked.value.filter((p) => p.key !== key)
-}
-
-onMounted(() => {
-  setInterval(() => {
-    if (!progressTracked.value.length) {
-      return
-    }
-
-    for (const progress of progressTracked.value) {
-      const { value, completed, expiresAt, key } = progress
-      if ((completed || value >= 100) && expiresAt < Date.now()) {
-        removeProgressTracker(key)
-      } else if (progress.timeoutAt && progress.timeoutAt < Date.now()) {
-        removeProgressTracker(key)
-      } else if (!progress.timeoutAt && expiresAt < Date.now()) {
-        progress.timeoutAt = Date.now() + 5000
-      }
-    }
-    if (!progressTracked.value.length) {
-      // Dwell the notification snackbar for a timeout duration
-      progressTimeout.value = 2000
-      snackbarTitle.value = 'Upload ended'
-      console.debug(
-        `[AppSnackbars] Setting timeout to ${progressTimeout.value}`
-      )
-    } else {
-      progressTimeout.value = -1
-      snackbarOpened.value = true
-    }
-  }, 1000)
-  snackbar.onProgressMessage((data: ProgressMessage) => {
-    const { key, value, title, completed } = data
-    const record = getProgressByKey(key)
-    if (!record) {
-      if (value >= 100) {
-        // If the value is above 100, don't consider it (bug/noise)
-        return
-      }
-      addProgressTracker(key, title, value, false, Date.now() + 1500)
-    } else if (Math.min(100, value) >= record.value) {
-      record.expiresAt = Date.now() + 1500
-      record.value = value
-      record.completed = completed
-    }
-    snackbarTitle.value = 'Uploading files'
-  })
-})
-</script>

package/src/components/Generic/Vuetify/TooltipButton.vue

@@ -1,47 +0,0 @@
-<template>
-  <v-tooltip :location="props.location">
-    <template #activator="{ props: tooltipProps }">
-      <v-btn
-        v-bind="tooltipProps"
-        variant="outlined"
-        class="ml-2"
-        :color="color"
-        @click="$emit('click')"
-      >
-        <slot>
-          <v-icon
-            v-if="props.icon?.length"
-            :class="'mr-2 ' + props.iconClass"
-          >
-            {{ props.icon }}
-          </v-icon>
-          {{ props.text }}
-        </slot>
-      </v-btn>
-    </template>
-    <span>
-      {{ props.tooltip }}
-    </span>
-  </v-tooltip>
-</template>
-
-<script lang="ts" setup>
-defineEmits(['click'])
-
-export interface Props {
-  tooltip: string
-  color?: string | 'success' | 'warning' | 'danger' | 'primary' | 'secondary'
-  icon?: string
-  iconClass?: string
-  text?: string
-  location?: 'start' | 'end' | 'left' | 'right' | 'top' | 'bottom'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  color: 'white',
-  icon: '',
-  iconClass: '',
-  text: '',
-  location: 'bottom'
-})
-</script>

package/src/components/HelpOverlay/HelpOverlay.vue

@@ -1,57 +0,0 @@
-<template>
-  <v-dialog
-    v-model="isOpened"
-    fullscreen
-    eager
-    transition="dialog-bottom-transition"
-    width="100%"
-  >
-    <!-- Dialog Activator -->
-    <template #activator="{ props: dialogActivatorProps }">
-      <v-tooltip location="top">
-        <template #activator="{ props: tooltipProps }">
-          <v-btn
-            icon="help"
-            v-bind="{ ...dialogActivatorProps, ...tooltipProps }"
-          >
-            <v-icon>help</v-icon>
-          </v-btn>
-        </template>
-        <span> Load the online documentation webpage </span>
-      </v-tooltip>
-    </template>
-
-    <!-- Content-->
-    <template #default="{ isActive }">
-      <v-card
-        height="100%"
-        width="100%"
-      >
-        <v-toolbar color="primary">
-          <v-icon class="ml-5">help</v-icon>
-          <h2 class="ml-10">FDM Monster Documentation</h2>
-          <v-spacer />
-          <span class="mr-10"> docs.fdm-monster.net </span>
-
-          <v-btn
-            variant="flat"
-            @click="isActive.value = false"
-          >
-            <v-icon class="mr-2">close</v-icon>
-            Close help
-          </v-btn>
-        </v-toolbar>
-
-        <iframe
-          height="100%"
-          src="https://docs.fdm-monster.net"
-          style="background-color: black; border-width: 0"
-          width="100%"
-        />
-      </v-card>
-    </template>
-  </v-dialog>
-</template>
-<script setup lang="ts">
-const isOpened = ref(false)
-</script>