@fdm-monster/client-next 0.0.1

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

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

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

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

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

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

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

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

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