Merge branch 'fix/status-panel-relayout' of github.com:vajonam/fluidd…

… into my_develop Signed-off-by: vajonam <152501+vajonam@users.noreply.github.com>
vajonam · Jan 5, 2024 · 80943bc · 80943bc
2 parents 884767e + 30af378
commit 80943bc
Show file tree

Hide file tree

Showing 9 changed files with 305 additions and 289 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "@fontsource/roboto": "^5.0.8",
     "@irojs/iro-core": "^1.2.1",
     "@jaames/iro": "^5.5.2",
-    "axios": "^1.6.2",
+    "axios": "^1.6.3",
     "consola": "^3.2.3",
     "deepmerge": "^4.3.1",
     "dompurify": "^3.0.6",
@@ -60,9 +60,9 @@
     "shlex": "^2.1.2",
     "sortablejs": "^1.15.1",
     "uuid": "^9.0.1",
-    "vue": "^2.7.15",
+    "vue": "^2.7.16",
     "vue-class-component": "^7.2.6",
-    "vue-echarts": "^6.6.5",
+    "vue-echarts": "^6.6.8",
     "vue-i18n": "^8.28.2",
     "vue-inline-svg": "^2.1.3",
     "vue-json-viewer": "^2.2.22",
@@ -75,18 +75,18 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@mdi/js": "^7.3.67",
+    "@mdi/js": "^7.4.47",
     "@originjs/vite-plugin-content": "^1.0.5",
     "@types/dompurify": "^3.0.5",
     "@types/jsdom": "^21.1.6",
     "@types/lodash-es": "^4.17.12",
     "@types/md5": "^2.3.5",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.10.6",
     "@types/semver": "^7.5.6",
     "@types/sortablejs": "^1.15.7",
     "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vue/eslint-config-standard": "^8.0.1",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -99,7 +99,7 @@
     "madge": "^6.1.0",
     "mockdate": "^3.0.5",
     "monaco-vscode-textmate-theme-converter": "^0.1.7",
-    "rollup": "^4.9.1",
+    "rollup": "^4.9.2",
     "sass": "~1.32.13",
     "shx": "^0.3.4",
     "standard-version": "^9.5.0",
@@ -109,11 +109,11 @@
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-pwa": "^0.17.4",
-    "vitest": "^1.1.0",
+    "vitest": "^1.1.1",
     "vue-debounce-decorator": "^1.0.1",
     "vue-i18n-extract": "^2.0.7",
-    "vue-template-compiler": "^2.7.15",
-    "vue-tsc": "^1.8.26",
+    "vue-template-compiler": "^2.7.16",
+    "vue-tsc": "^1.8.27",
     "workbox-build": "^7.0.0",
     "workbox-core": "^7.0.0",
     "workbox-routing": "^7.0.0",

diff --git a/src/components/settings/GeneralSettings.vue b/src/components/settings/GeneralSettings.vue
@@ -239,7 +239,7 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     return Object.entries(DateFormats)
       .map(([key, entry]) => ({
         value: key,
-        text: `${date.toLocaleDateString(entry.locales ?? this.$filters.getNavigatorLocales(), entry.options)}${entry.suffix ?? ''}`
+        text: `${date.toLocaleDateString(entry.locales ?? this.$filters.getAllLocales(), entry.options)}${entry.suffix ?? ''}`
       }))
   }
 
@@ -261,7 +261,7 @@ export default class GeneralSettings extends Mixins(StateMixin) {
     return Object.entries(TimeFormats)
       .map(([key, entry]) => ({
         value: key,
-        text: `${date.toLocaleTimeString(entry.locales ?? this.$filters.getNavigatorLocales(), entry.options)}${entry.suffix ?? ''}`
+        text: `${date.toLocaleTimeString(entry.locales ?? this.$filters.getAllLocales(), entry.options)}${entry.suffix ?? ''}`
       }))
   }
 

diff --git a/src/components/widgets/history/JobHistoryItemStatus.vue b/src/components/widgets/history/JobHistoryItemStatus.vue
@@ -22,6 +22,8 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import FilesMixin from '@/mixins/files'
 import type { HistoryItem } from '@/store/history/types'
 
+type JobHistoryItemState = 'error' | 'warning' | 'success'
+
 @Component({})
 export default class JobHistoryItemStatus extends Mixins(FilesMixin) {
   @Prop({ type: Object, required: true })
@@ -37,12 +39,13 @@ export default class JobHistoryItemStatus extends Mixins(FilesMixin) {
   // }
 
   get icon () {
-    const iconMap: { [index: string]: string } = {
+    const iconMap: Record<string, string> = {
       completed: '$checkedCircle',
       printing: '$inProgress',
       in_progress: '$inProgress',
       standby: '$inProgress',
-      cancelled: '$cancelled'
+      cancelled: '$cancelled',
+      interrupted: '$cancelled'
     }
 
     const icon = iconMap[this.job.status]
@@ -51,25 +54,26 @@ export default class JobHistoryItemStatus extends Mixins(FilesMixin) {
     return icon || '$warning'
   }
 
-  get state () {
-    if (
-      this.job.status === 'cancelled' ||
-      this.job.status === 'error' ||
-      this.job.status === 'server_exit'
-    ) return 'error'
+  get state (): JobHistoryItemState {
+    switch (this.job.status) {
+      case 'cancelled':
+      case 'error':
+      case 'interrupted':
+      case 'server_exit':
+        return 'error'
 
-    if (
-      this.job.status === 'printing' ||
-      this.job.status === 'completed' ||
-      this.job.status === 'in_progress'
-    ) return 'success'
+      case 'klippy_shutdown':
+      case 'klippy_disconnect':
+        return 'warning'
 
-    if (
-      this.job.status === 'klippy_shutdown' ||
-      this.job.status === 'klippy_disconnect'
-    ) return 'warning'
+      case 'completed':
+      case 'in_progress':
+      case 'printing':
+        return 'success'
 
-    return 'success'
+      default:
+        return 'success'
+    }
   }
 
   get inError () {

diff --git a/src/components/widgets/status/StatusTab.vue b/src/components/widgets/status/StatusTab.vue
@@ -21,35 +21,23 @@
           class="position-relative"
         >
           <v-row>
-            <div
-              class="progress-wrapper"
-              style="cursor: pointer"
+            <v-progress-circular
+              :rotate="-90"
+              :size="90"
+              :width="7"
+              :value="estimates.progress"
+              color="primary"
+              class="progress-circle mx-1"
               @click="handleViewThumbnail"
             >
-              <v-progress-circular
-                :rotate="-90"
-                :size="90"
-                :width="7"
-                :value="estimates.progress"
-                color="primary"
-                class="progress-circle"
-              />
-              <div class="thumbnail-background" />
-
-              <div class="fill-height print-thumb">
-                <img
-                  class="print-thumb"
-                  :src="thumbnail"
-                >
-              </div>
-            </div>
+              <img
+                class="print-thumb"
+                :src="thumbnail"
+              >
+            </v-progress-circular>
           </v-row>
-          <v-row
-            justify="center"
-          >
-            <div class="percentage-wrapper">
-              <span class="primary--text">{{ estimates.progress }}%</span>
-            </div>
+          <v-row justify="center">
+            <span class="primary--text">{{ estimates.progress }}%</span>
           </v-row>
         </v-col>
 
@@ -396,66 +384,36 @@ export default class StatusTab extends Mixins(StateMixin, FilesMixin, ToolheadMi
 </script>
 
 <style lang="scss" scoped>
-.print-thumb {
-  display: block;
-  max-height: 110px;
-}
-
-.filename {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  // width: 200px;
-  direction: rtl;
-  text-align: left;
-}
-
-.position-relative {
-  position: relative;
-}
-
-.progress-wrapper {
-  position: relative;
-  width: 90px;
-  /* Set the width and height to match progress circle size */
-  height: 90px;
-  /* Set the width and height to match progress circle size */
-  overflow: hidden;
-  border-radius: 50%;
-}
+  @import 'vuetify/src/styles/styles.sass';
+
+  .filename {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    // width: 200px;
+    direction: rtl;
+    text-align: left;
+  }
 
-.progress-circle {
-  position: absolute;
-  z-index: 4;
-}
+  .progress-circle {
+    cursor: pointer;
 
-.thumbnail-background {
-  position: absolute;
-  width: 85px;
-  /* 10% less than the size of the progress circle */
-  height: 85px;
-  /* 10% less than the size of the progress circle */
-  border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.5);
-  /* Adjust transparency here */
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 0;
-}
+    :deep(.v-progress-circular__underlay) {
+      fill: rgba(0, 0, 0, 0.5);
+    }
 
-.print-thumb {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 0;
-  max-height: 73px;
-  max-width: 73px;
-  /* Adjust as needed */
-  border-radius: 50%;
-  opacity: 0.8;
-  /* Adjust opacity as needed */
-}
+    &:hover :deep(.v-progress-circular__underlay) {
+      fill: rgba(0, 0, 0, 0.2);
+      transition-duration: 0.28s;
+      transition-property: fill;
+      transition-timing-function: map-get($transition, 'fast-out-slow-in');
+    }
+  }
 
+  .print-thumb {
+    max-height: 73px;
+    max-width: 73px;
+    border-radius: 50%;
+    opacity: 0.8;
+  }
 </style>
diff --git a/src/plugins/filters.ts b/src/plugins/filters.ts
@@ -71,16 +71,23 @@ export const Filters = {
     return navigator.languages ?? [navigator.language]
   },
 
+  getAllLocales: () => {
+    return [
+      i18n.locale,
+      ...Filters.getNavigatorLocales()
+    ]
+  },
+
   getDateFormat: (override?: string): DateTimeFormat => {
     return {
-      locales: Filters.getNavigatorLocales(),
+      locales: Filters.getAllLocales(),
       ...DateFormats[override ?? store.state.config.uiSettings.general.dateFormat]
     }
   },
 
   getTimeFormat: (override?: string): DateTimeFormat => {
     return {
-      locales: Filters.getNavigatorLocales(),
+      locales: Filters.getAllLocales(),
       ...TimeFormats[override ?? store.state.config.uiSettings.general.timeFormat]
     }
   },
@@ -157,7 +164,7 @@ export const Filters = {
   },
 
   formatRelativeTime (value: number, unit: Intl.RelativeTimeFormatUnit, options?: Intl.RelativeTimeFormatOptions) {
-    const rtf = new Intl.RelativeTimeFormat(Filters.getNavigatorLocales() as string[], {
+    const rtf = new Intl.RelativeTimeFormat(Filters.getAllLocales(), {
       numeric: 'auto',
       ...options
     })

diff --git a/src/store/history/types.ts b/src/store/history/types.ts
@@ -29,4 +29,4 @@ export interface HistoryRollUp {
   longest_print: number;
 }
 
-export type HistoryItemStatus = 'completed' | 'cancelled' | 'error' | 'printing' | 'in_progress' | 'server_exit' | 'klippy_shutdown' | 'klippy_disconnect'
+export type HistoryItemStatus = 'completed' | 'cancelled' | 'error' | 'printing' | 'in_progress' | 'server_exit' | 'klippy_shutdown' | 'klippy_disconnect' | 'interrupted'
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -24,7 +24,7 @@
         >
           <transition-group
             type="transition"
-            :name="!inLayout ? 'flip-list' : null"
+            :name="!inLayout ? 'flip-list' : undefined"
           >
             <template v-for="c in container">
               <component

diff --git a/src/views/Diagnostics.vue b/src/views/Diagnostics.vue
@@ -51,7 +51,7 @@
           >
             <transition-group
               type="transition"
-              :name="!inLayout ? 'flip-list' : null"
+              :name="!inLayout ? 'flip-list' : undefined"
             >
               <template v-for="c in container">
                 <diagnostics-card