From 5e818a5e7a3f70327eada677b5f886468c528022 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 21 Mar 2024 19:09:49 +0100
Subject: [PATCH] refactor: refactor KlippyStatePanel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/KlippyStatePanel.vue | 186 ++++++++++-----------
 src/locales/en.json                        |   2 +
 2 files changed, 92 insertions(+), 96 deletions(-)

diff --git a/src/components/panels/KlippyStatePanel.vue b/src/components/panels/KlippyStatePanel.vue
index 58f1f8e50..48607c811 100644
--- a/src/components/panels/KlippyStatePanel.vue
+++ b/src/components/panels/KlippyStatePanel.vue
@@ -1,105 +1,83 @@
 <template>
     <div v-if="klipperState !== 'ready' && socketIsConnected">
-        <template v-if="klippyIsConnected">
-            <v-alert :color="messageType.color" dense text border="left" class="mb-0 mb-6">
-                <!-- KLIPPER MESSAGE TITLE -->
-                <p class="font-weight-medium d-flex align-center">
-                    <v-icon :color="messageType.color" class="pr-2">{{ messageType.icon }}</v-icon>
-                    {{ $t('Panels.KlippyStatePanel.ServiceReports', { service: 'Klipper' }) }}:
-                    {{ klipperState.toUpperCase() }}
-                </p>
-                <!-- KLIPPER MESSAGE -->
-                <div v-if="klippy_message !== null">
-                    <pre style="white-space: pre-wrap">{{ klippy_message.trim() }}</pre>
-                    <v-divider class="mt-2 pb-3"></v-divider>
-                    <v-row>
-                        <!-- RESTART BUTTONS -->
-                        <v-col>
-                            <v-btn
-                                small
-                                outlined
-                                text
-                                :class="`${messageType.color}--text my-1`"
-                                style="width: 100%"
-                                @click="restart">
-                                <v-icon class="mr-sm-2">{{ mdiRestart }}</v-icon>
-                                {{ $t('Panels.KlippyStatePanel.Restart') }}
-                            </v-btn>
-                            <v-btn
-                                small
-                                outlined
-                                text
-                                :class="`${messageType.color}--text my-1`"
-                                style="width: 100%"
-                                @click="firmwareRestart">
-                                <v-icon class="mr-sm-2">{{ mdiRestart }}</v-icon>
-                                {{ $t('Panels.KlippyStatePanel.FirmwareRestart') }}
-                            </v-btn>
-                        </v-col>
-                        <!-- LOG DOWNLOAD BUTTONS -->
-                        <v-col>
-                            <v-btn
-                                :href="apiUrl + '/server/files/klippy.log'"
-                                small
-                                outlined
-                                text
-                                :class="`${messageType.color}--text my-1`"
-                                style="width: 100%"
-                                @click="downloadLog">
-                                <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
-                                Klipper Log
-                            </v-btn>
-                            <v-btn
-                                :href="apiUrl + '/server/files/moonraker.log'"
-                                small
-                                outlined
-                                text
-                                :class="`${messageType.color}--text my-1`"
-                                style="width: 100%"
-                                @click="downloadLog">
-                                <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
-                                Moonraker Log
-                            </v-btn>
-                        </v-col>
-                    </v-row>
-                </div>
-                <!-- LOADER -->
-                <v-card-text v-else class="text-center py-3">
-                    <v-progress-circular indeterminate :color="messageType.color"></v-progress-circular>
-                </v-card-text>
-            </v-alert>
-        </template>
-        <!-- Power OFF panel -->
-        <template v-else-if="isPrinterPowerOff">
-            <v-alert dense text border="left" class="mb-6">
-                <p class="font-weight-medium d-flex align-center">
-                    <v-icon class="pr-2">{{ messageType.icon }}</v-icon>
-                    {{ $t('Panels.KlippyStatePanel.PrinterSwitchedOff') }}
-                </p>
-                <p>{{ $t('Panels.KlippyStatePanel.PrinterSwitchedOffDescription') }}</p>
+        <v-alert v-if="klippyIsConnected" :color="messageType.color" dense text border="left" class="mb-0 mb-6">
+            <!-- KLIPPER MESSAGE TITLE -->
+            <p class="font-weight-medium d-flex align-center">
+                <v-icon :color="messageType.color" class="pr-2">{{ messageType.icon }}</v-icon>
+                {{ serviceReportsKlipper }}
+            </p>
+            <!-- KLIPPER MESSAGE -->
+            <div v-if="klippy_message !== null">
+                <pre style="white-space: pre-wrap">{{ klippy_message.trim() }}</pre>
+                <v-divider class="mt-2 pb-3" />
                 <v-row>
-                    <v-col class="text-center">
-                        <v-btn small outlined text :class="`${messageType.color}--text my-1`" @click="powerOn">
-                            <v-icon class="mr-sm-2">{{ mdiPower }}</v-icon>
-                            {{ $t('Panels.KlippyStatePanel.PowerOn') }}
+                    <!-- RESTART BUTTONS -->
+                    <v-col>
+                        <v-btn small outlined text :class="buttonClasses" @click="restart">
+                            <v-icon class="mr-sm-2">{{ mdiRestart }}</v-icon>
+                            {{ $t('Panels.KlippyStatePanel.Restart') }}
+                        </v-btn>
+                        <v-btn small outlined text :class="buttonClasses" @click="firmwareRestart">
+                            <v-icon class="mr-sm-2">{{ mdiRestart }}</v-icon>
+                            {{ $t('Panels.KlippyStatePanel.FirmwareRestart') }}
+                        </v-btn>
+                    </v-col>
+                    <!-- LOG DOWNLOAD BUTTONS -->
+                    <v-col>
+                        <v-btn
+                            :href="apiUrl + '/server/files/klippy.log'"
+                            small
+                            outlined
+                            text
+                            :class="buttonClasses"
+                            @click="downloadLog">
+                            <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
+                            {{ $t('Panels.KlippyStatePanel.KlipperLog') }}
+                        </v-btn>
+                        <v-btn
+                            :href="apiUrl + '/server/files/moonraker.log'"
+                            small
+                            outlined
+                            text
+                            :class="buttonClasses"
+                            @click="downloadLog">
+                            <v-icon class="mr-2">{{ mdiDownload }}</v-icon>
+                            {{ $t('Panels.KlippyStatePanel.MoonrakerLog') }}
                         </v-btn>
                     </v-col>
                 </v-row>
-            </v-alert>
-        </template>
+            </div>
+            <!-- LOADER -->
+            <v-card-text v-else class="text-center py-3">
+                <v-progress-circular indeterminate :color="messageType.color" />
+            </v-card-text>
+        </v-alert>
+        <!-- Power OFF panel -->
+        <v-alert v-else-if="isPrinterPowerOff" dense text border="left" class="mb-6">
+            <p class="font-weight-medium d-flex align-center">
+                <v-icon class="pr-2">{{ messageType.icon }}</v-icon>
+                {{ $t('Panels.KlippyStatePanel.PrinterSwitchedOff') }}
+            </p>
+            <p>{{ $t('Panels.KlippyStatePanel.PrinterSwitchedOffDescription') }}</p>
+            <v-row>
+                <v-col class="text-center">
+                    <v-btn small outlined text :class="`${messageType.color}--text my-1`" @click="powerOn">
+                        <v-icon class="mr-sm-2">{{ mdiPower }}</v-icon>
+                        {{ $t('Panels.KlippyStatePanel.PowerOn') }}
+                    </v-btn>
+                </v-col>
+            </v-row>
+        </v-alert>
         <!-- DISCONNECTED INFOGRAPHIC -->
-        <template v-else-if="klipperState === 'disconnected'">
-            <v-alert dense text border="left" class="mb-6">
-                <p class="font-weight-medium d-flex align-center">
-                    <v-icon class="pr-2">{{ messageType.icon }}</v-icon>
-                    {{ $t('Panels.KlippyStatePanel.ServiceReports', { service: 'Moonraker' }) }}:
-                    {{ klipperState.toUpperCase() }}
-                </p>
-                <connection-status :moonraker="true" :klipper="false"></connection-status>
-                <p class="mt-2 mb-0 text-center">{{ $t('Panels.KlippyStatePanel.MoonrakerCannotConnect') }}</p>
-                <p class="mb-0 text-center">{{ $t('Panels.KlippyStatePanel.CheckKlippyAndUdsAddress') }}</p>
-            </v-alert>
-        </template>
+        <v-alert v-else-if="klipperState === 'disconnected'" dense text border="left" class="mb-6">
+            <p class="font-weight-medium d-flex align-center">
+                <v-icon class="pr-2">{{ messageType.icon }}</v-icon>
+                {{ serviceReportsMoonraker }}
+            </p>
+            <connection-status :moonraker="true" :klipper="false" />
+            <p class="mt-2 mb-0 text-center">{{ $t('Panels.KlippyStatePanel.MoonrakerCannotConnect') }}</p>
+            <p class="mb-0 text-center">{{ $t('Panels.KlippyStatePanel.CheckKlippyAndUdsAddress') }}</p>
+        </v-alert>
     </div>
 </template>
 
@@ -129,7 +107,7 @@ export default class KlippyStatePanel extends Mixins(BaseMixin) {
     mdiDownload = mdiDownload
     mdiPower = mdiPower
 
-    get klippy_message() {
+    get klippy_message(): string | null {
         return this.$store.state.server.klippy_message ?? null
     }
 
@@ -148,6 +126,22 @@ export default class KlippyStatePanel extends Mixins(BaseMixin) {
         }
     }
 
+    get buttonClasses() {
+        return [this.messageType.color + '--text', 'my-1', 'w-100']
+    }
+
+    get serviceReportsKlipper() {
+        return `${this.$t('Panels.KlippyStatePanel.ServiceReports', {
+            service: 'Klipper',
+        })}: ${this.klipperState.toUpperCase()}`
+    }
+
+    get serviceReportsMoonraker() {
+        return `${this.$t('Panels.KlippyStatePanel.ServiceReports', {
+            service: 'Moonraker',
+        })}: ${this.klipperState.toUpperCase()}`
+    }
+
     restart() {
         this.$socket.emit('printer.restart', {}, { loading: 'restart' })
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index 4b25e5eb0..58c5c6aab 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -599,7 +599,9 @@
         "KlippyStatePanel": {
             "CheckKlippyAndUdsAddress": "Please check if the Klipper service is running and klippy_uds_address is correctly configured in the moonraker.conf.",
             "FirmwareRestart": "Firmware Restart",
+            "KlipperLog": "Klipper Log",
             "MoonrakerCannotConnect": "Moonraker can't connect to Klipper!",
+            "MoonrakerLog": "Moonraker Log",
             "PowerOn": "Power on",
             "PrinterSwitchedOff": "Printer is powered off",
             "PrinterSwitchedOffDescription": "The printer is currently powered off and Klipper cannot connect. To power on the printer, click the button below:",