Merge branch 'develop' into multiple-nevermores

.docker/nginx.conf

@@ -1,11 +1,12 @@
 server {
   listen 80;
-
+  listen [::]:80;
+
   location / {
     root /usr/share/nginx/html;
     index index.html index.htm;
     try_files $uri $uri/ /index.html =404;
   }
 
   include /etc/nginx/extra-conf.d/*.conf;
-}
+}

package.json

@@ -96,7 +96,7 @@
         "start-server-and-test": "^2.0.5",
         "typescript": "^4.5.5",
         "unplugin-vue-components": "^0.22.12",
-        "vite": "^4.5.3",
+        "vite": "^4.5.5",
         "vite-plugin-checker": "^0.6.0",
         "vite-plugin-package-version": "^1.0.2",
         "vite-plugin-pwa": "^0.16.4",

src/components/TheConnectingDialog.vue

@@ -1,35 +1,34 @@
-<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 v-if="helpButtonUrl" class="text--disabled mr-3" :href="helpButtonUrl" target="_blank">
+                        <v-icon left>{{ mdiHelp }}</v-icon>
+                        {{ $t('ConnectionDialog.Help') }}
+                    </v-btn>
                     <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>
 
@@ -40,7 +39,7 @@ import BaseMixin from '@/components/mixins/base'
 
 import ThemeMixin from '@/components/mixins/theme'
 import ConnectionStatus from '@/components/ui/ConnectionStatus.vue'
-import { mdiConnection } from '@mdi/js'
+import { mdiConnection, mdiHelp } from '@mdi/js'
 
 @Component({
     components: {
@@ -49,13 +48,10 @@ import { mdiConnection } from '@mdi/js'
 })
 export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
     mdiConnection = mdiConnection
+    mdiHelp = mdiHelp
 
     counter = 0
 
-    get protocol() {
-        return this.$store.state.socket.protocol
-    }
-
     get hostname() {
         return this.$store.state.socket.hostname
     }
@@ -94,6 +90,16 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return this.formatHostname
     }
 
+    get connectionFailedMessage() {
+        return this.$store.state.socket.connectionFailedMessage ?? null
+    }
+
+    get helpButtonUrl() {
+        if (!this.$store.state.socket.connectionFailedMessage) return null
+
+        return `https://docs.mainsail.xyz/faq/mainsail_errors/connection-${this.connectionFailedMessage?.toLowerCase()}`
+    }
+
     reconnect() {
         this.counter++
         this.$store.dispatch('socket/setData', { connectingFailed: false })