Merge branch 'develop' into fix/fix-control-action-button

mainsail-crew · Sep 7, 2024 · 047d86a · 047d86a
2 parents c68d383 + 6fd64df
commit 047d86a
Show file tree

Hide file tree

Showing 63 changed files with 2,326 additions and 1,126 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -18,6 +18,14 @@
             "options": {
                 "tabWidth": 2
             }
+        },
+        {
+            "files": "src/locales/*.json",
+            "options": {
+                "plugins": ["prettier-plugin-sort-json"],
+                "jsonRecursiveSort": true,
+                "jsonSortOrder": "{ \"placeThisFirst\": null, \"/^[a-zA-Z0-9]/\": \"caseInsensitiveNumeric\"  }"
+            }
         }
     ]
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
         "@lezer/highlight": "^1.0.0",
         "@sindarius/gcodeviewer": "^3.7.11",
         "@uiw/codemirror-theme-vscode": "^4.19.11",
-        "axios": "^1.6.0",
+        "axios": "^1.7.4",
         "codemirror": "^6.0.1",
         "core-js": "^3.16.0",
         "detect-browser": "^5.3.0",
@@ -90,9 +90,10 @@
         "eslint-plugin-vue": "^9.0.0",
         "postcss": "^8.4.31",
         "postcss-nesting": "^12.0.1",
-        "prettier": "^3.0.0",
+        "prettier": "^3.3.3",
+        "prettier-plugin-sort-json": "^4.0.0",
         "sass": "~1.32",
-        "start-server-and-test": "^2.0.0",
+        "start-server-and-test": "^2.0.5",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
         "vite": "^4.5.3",

diff --git a/public/css/themes/vzbot.css b/public/css/themes/vzbot.css
@@ -0,0 +1,3 @@
+div.v-navigation-drawer__image div.v-image__image {
+    background-position: bottom center !important;
+}
diff --git a/src/App.vue b/src/App.vue
@@ -347,6 +347,26 @@ export default class App extends Mixins(BaseMixin, ThemeMixin) {
         this.drawFavicon(this.print_percent)
     }
 
+    @Watch('themeCss')
+    themeCssChanged(newVal: string | null): void {
+        // remove linked CSS file if it exists
+        const style = document.getElementById('theme-css')
+        if (style) style.remove()
+
+        // if themeCss does not exist, stop here and load no CSS file
+        if (newVal === null) return
+
+        // fetch the CSS file and append it to the head
+        fetch(newVal)
+            .then((response) => response.text())
+            .then((css) => {
+                const newStyle = document.createElement('style')
+                newStyle.id = 'theme-css'
+                newStyle.innerHTML = css
+                document.head.appendChild(newStyle)
+            })
+    }
+
     @Watch('print_percent')
     print_percentChanged(newVal: number): void {
         this.drawFavicon(newVal)

diff --git a/src/components/TheConnectingDialog.vue b/src/components/TheConnectingDialog.vue
@@ -1,35 +1,30 @@
-<style scoped></style>
-
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
-        <v-card>
-            <v-toolbar flat dense>
-                <v-toolbar-title>
-                    <span class="subheading">
-                        <v-icon left>{{ mdiConnection }}</v-icon>
-                        {{ titleText }}
-                    </span>
-                </v-toolbar-title>
-            </v-toolbar>
+        <panel :title="titleText" :icon="mdiConnection" card-class="the-connection-dialog" :margin-bottom="false">
             <v-card-text v-if="connectingFailed" class="pt-5">
-                <connection-status :moonraker="false"></connection-status>
-                <p class="text-center mt-3">{{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}</p>
+                <connection-status :moonraker="false" />
+                <p class="text-center mt-3 mb-0">
+                    {{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}
+                </p>
+                <p v-if="connectionFailedMessage" class="text-center mt-1 red--text">
+                    {{ $t('ConnectionDialog.ErrorMessage', { message: connectionFailedMessage }) }}
+                </p>
                 <template v-if="counter > 2">
-                    <v-divider class="my-3"></v-divider>
+                    <v-divider class="my-3" />
                     <p>{{ $t('ConnectionDialog.CheckMoonrakerLog') }}</p>
                     <ul>
                         <li>~/printer_data/logs/moonraker.log</li>
                     </ul>
-                    <v-divider class="mt-4 mb-5"></v-divider>
+                    <v-divider class="mt-4 mb-5" />
                 </template>
-                <div class="text-center">
+                <div class="text-center mt-3">
                     <v-btn class="primary--text" @click="reconnect">{{ $t('ConnectionDialog.TryAgain') }}</v-btn>
                 </div>
             </v-card-text>
             <v-card-text v-else class="pt-5">
-                <v-progress-linear :color="progressBarColor" indeterminate></v-progress-linear>
+                <v-progress-linear :color="progressBarColor" indeterminate />
             </v-card-text>
-        </v-card>
+        </panel>
     </v-dialog>
 </template>
 
@@ -52,10 +47,6 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
 
     counter = 0
 
-    get protocol() {
-        return this.$store.state.socket.protocol
-    }
-
     get hostname() {
         return this.$store.state.socket.hostname
     }
@@ -94,6 +85,10 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return this.formatHostname
     }
 
+    get connectionFailedMessage() {
+        return this.$store.state.socket.connectionFailedMessage ?? null
+    }
+
     reconnect() {
         this.counter++
         this.$store.dispatch('socket/setData', { connectingFailed: false })