refactor: rework of the KlippyState panel (#1118)

src/components/panels/KlippyStatePanel.vue

@@ -1,37 +1,80 @@
 <template>
-    <panel
-        v-if="klipperState !== 'ready' && socketIsConnected"
-        :icon="mdiAlertCircle"
-        :title="$t('Panels.KlippyStatePanel.KlippyState') + ': ' + klipperState"
-        card-class="klippy-state-panel">
-        <template v-if="klippyIsConnected">
-            <v-card-text v-if="klippy_message !== null" class="py-1 mt-2">
-                <pre style="white-space: pre-wrap">{{ klippy_message }}</pre>
-            </v-card-text>
-            <v-card-text v-else class="text-center py-3">
-                <v-progress-circular indeterminate color="primary"></v-progress-circular>
-            </v-card-text>
-            <v-divider class="mt-2"></v-divider>
-            <v-card-actions class="justify-start">
-                <v-btn small class="ml-2 error--text" @click="restart">
-                    <v-icon class="mr-sm-2">{{ mdiRestart }}</v-icon>
-                    {{ $t('Panels.KlippyStatePanel.Restart') }}
-                </v-btn>
-                <v-btn small class="ml-4 error--text" @click="firmwareRestart">
-                    <v-icon class="mr-sm-2">{{ mdiRestart }}</v-icon>
-                    {{ $t('Panels.KlippyStatePanel.FirmwareRestart') }}
-                </v-btn>
-            </v-card-actions>
-        </template>
-        <template v-else>
-            <v-card-text class="pt-5 pb-1">
+    <div v-if="klipperState !== 'ready' && socketIsConnected">
+        <v-container v-if="klippyIsConnected" class="pa-0 pb-6">
+            <v-alert :color="messageType.color" dense text border="left" class="mb-0">
+                <!-- 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
+                                :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
+                                :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
+                                :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
+                                :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>
+        </v-container>
+        <!-- DISCONNECTED INFOGRAPHIC -->
+        <v-container v-if="klipperState === 'disconnected'" class="pa-0">
+            <v-alert dense text border="left">
+                <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>
-                <v-divider class="my-2"></v-divider>
-                <p class="mt-2">{{ $t('Panels.KlippyStatePanel.KlipperCheck') }}</p>
-            </v-card-text>
-        </template>
-    </panel>
+                <p class="mb-0 text-center">{{ $t('Panels.KlippyStatePanel.KlipperCheck') }}</p>
+            </v-alert>
+        </v-container>
+    </div>
 </template>
 
 <script lang="ts">
@@ -40,21 +83,43 @@ import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import ConnectionStatus from '../ui/ConnectionStatus.vue'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiAlertCircle, mdiRestart } from '@mdi/js'
+import {
+    mdiRestart,
+    mdiDownload,
+    mdiMessageOutline,
+    mdiAlertOutline,
+    mdiRocketLaunch,
+    mdiConnection,
+    mdiPrinter3d,
+} from '@mdi/js'
 
 @Component({
     components: { Panel, ConnectionStatus },
 })
 export default class KlippyStatePanel extends Mixins(BaseMixin) {
-    //private timer: number | null = null
-
-    mdiAlertCircle = mdiAlertCircle
+    mdiPrinter3d = mdiPrinter3d
     mdiRestart = mdiRestart
+    mdiDownload = mdiDownload
 
     get klippy_message() {
         return this.$store.state.server.klippy_message ?? null
     }
 
+    get messageType(): { color: string; icon: string } {
+        switch (this.klipperState) {
+            case 'startup':
+                return { color: 'info', icon: mdiRocketLaunch }
+            case 'shutdown':
+                return { color: 'warning', icon: mdiAlertOutline }
+            case 'error':
+                return { color: 'error', icon: mdiAlertOutline }
+            case 'disconnected':
+                return { color: '', icon: mdiConnection }
+            default:
+                return { color: '', icon: mdiMessageOutline }
+        }
+    }
+
     restart() {
         this.$socket.emit('printer.restart', {}, { loading: 'restart' })
     }
@@ -63,22 +128,13 @@ export default class KlippyStatePanel extends Mixins(BaseMixin) {
         this.$socket.emit('printer.firmware_restart', {}, { loading: 'firmwareRestart' })
     }
 
-    /*requestKlippyState() {
-        this.$socket.emit('printer.info', {}, { action: 'printer/getInfo' })
-    }
+    downloadLog(event: any) {
+        event.preventDefault()
+        let href = ''
+        if ('href' in event.target.attributes) href = event.target.attributes.href.value
+        if ('href' in event.target.parentElement.attributes) href = event.target.parentElement.attributes.href.value
 
-    @Watch('klipperState')
-    klipperStateChanged(newVal: string) {
-        if (['ready', 'disconnected'].includes(newVal)) {
-            if (this.timer) {
-                clearInterval(this.timer)
-                this.timer = null
-            }
-        } else if (this.timer === null) {
-            this.timer = setInterval(() => {
-                this.requestKlippyState()
-            }, 2000)
-        }
-    }*/
+        window.open(href)
+    }
 }
 </script>

src/locales/da.json

@@ -487,7 +487,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Genstart alt",
             "KlipperCheck": "Check at Klipper service kører og at en UDS (Unix Domain Socket) er konfigureret.",
-            "KlippyState": "Klippy-Status",
             "MoonrakerCannotConnect": "Moonraker kan ikke forbinde til Klipper!",
             "Restart": "Genstart"
         },

src/locales/de.json

@@ -498,9 +498,9 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Firmware Neustart",
             "KlipperCheck": "Bitte überprüfen Sie, ob der Klipper-Dienst läuft und ein UDS (Unix Domain Socket) konfiguriert ist.",
-            "KlippyState": "Klippy-Status",
             "MoonrakerCannotConnect": "Moonraker kann keine Verbindung zu Klipper herstellen!",
-            "Restart": "Neustart"
+            "Restart": "Neustart",
+            "ServiceReports": "{service} meldet"
         },
         "MachineSettingsPanel": {
             "Headline": "Maschine",

src/locales/en.json

@@ -497,10 +497,10 @@
         },
         "KlippyStatePanel": {
             "FirmwareRestart": "Firmware Restart",
-            "KlipperCheck": "Please check if the Klipper service is running and an UDS (Unix Domain Socket) is configured.",
-            "KlippyState": "Klippy-State",
+            "KlipperCheck": "Please check if the Klipper service is running.",
             "MoonrakerCannotConnect": "Moonraker can't connect to Klipper!",
-            "Restart": "Restart"
+            "Restart": "Restart",
+            "ServiceReports": "{service} reports"
         },
         "MachineSettingsPanel": {
             "Headline": "Machine",

src/locales/es.json

@@ -479,7 +479,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Reiniciar Firmware",
             "KlipperCheck": "Verifique que el servicio Klipper está corriendo y que un  UDS (Unix Domain Socket) esta configurado.",
-            "KlippyState": "Estado de Klippy",
             "MoonrakerCannotConnect": "¡Moonraker no se pudo conectar a Klipper!",
             "Restart": "Reiniciar"
         },

src/locales/fr.json

@@ -491,7 +491,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Redémarrage Firmware",
             "KlipperCheck": "Contrôlez que le sevice Klipper est actif et qu'un UDS (Unix Domain Socket) est configuré",
-            "KlippyState": "Etat-Klippy",
             "MoonrakerCannotConnect": "Moonraker n'arrive pas à se connecter à Klipper",
             "Restart": "Redémarrage"
         },

src/locales/hu.json

@@ -480,7 +480,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Firmware újraindítása",
             "KlipperCheck": "Kérjük, ellenőrizd, a Klipper szolgáltatás fut-e, konfigurálva van-e UDS (Unix Domain Socket).",
-            "KlippyState": "Klippy-állapota",
             "MoonrakerCannotConnect": "A Moonraker nem tud csatlakozni a Klipperhez!",
             "Restart": "Újraindítás"
         },

src/locales/it.json

@@ -382,7 +382,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Riavvio Firmware",
             "KlipperCheck": "Controlla se il servizio Klipper è in esecuzione e se è configurato un UDS (Unix Domain Socket).",
-            "KlippyState": "Stato Klippy",
             "MoonrakerCannotConnect": "Moonraker non riesce a connettersi a Klipper!",
             "Restart": "Riavvia"
         },

src/locales/ja.json

@@ -490,7 +490,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "ファームウェア再始動",
             "KlipperCheck": "Klipperサービスが動いていて、UDS (Unix Domain Socket)が設定されているかどうか確認してください。",
-            "KlippyState": "Klippy-State",
             "MoonrakerCannotConnect": "MoonrakerはKlipperに接続できません!",
             "Restart": "再始動"
         },

src/locales/ko.json

@@ -480,7 +480,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "펌웨어 재시작",
             "KlipperCheck": "Klipper 서비스가 실행 중이고 UDS(Unix Domain Socket)의 구성 확인 또는 클리퍼 재시작을 눌러 주세요",
-            "KlippyState": "Klippy 상태",
             "MoonrakerCannotConnect": "문래커가 클리퍼로 접속할 수 없습니다!",
             "Restart": "재시작"
         },

src/locales/nl.json

@@ -490,7 +490,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Firmware Herstart",
             "KlipperCheck": "Controleer of de Klipper service draait en een UDS (Unix Domain Socket) geconfigureerd is.",
-            "KlippyState": "Klippy-Status",
             "MoonrakerCannotConnect": "Moonraker kan niet met Klipper verbinden!",
             "Restart": "Herstart"
         },

src/locales/pl.json

@@ -479,7 +479,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Ponowne uruchomienie oprogramowania",
             "KlipperCheck": "Sprawdź , czy Klipper jest uruchomiony oraz czy UDS (Unix Domain Socket) został skonfigurowany poprawnie.",
-            "KlippyState": "Status Klippera",
             "MoonrakerCannotConnect": "Moonraker nie może połączyć się z Klipperem!",
             "Restart": "Ponowne uruchomienie"
         },

src/locales/ru.json

@@ -479,7 +479,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Перезапуск прошивки",
             "KlipperCheck": "Проверьте, запущена ли служба Klipper и настроен ли UDS (Unix Domain Socket).",
-            "KlippyState": "Klippy-Статус",
             "MoonrakerCannotConnect": "Moonraker не может соединиться с Клиппером!",
             "Restart": "Перезапустить"
         },

src/locales/sv.json

@@ -432,7 +432,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Omstart av Firmware",
             "KlipperCheck": "Kontrollera om Klipper-tjänsten körs och en UDS (Unix Domain Socket) är konfigurerad.",
-            "KlippyState": "Klippy-läge",
             "MoonrakerCannotConnect": "Moonraker kan inte ansluta till Klipper!",
             "Restart": "Starta om"
         },

src/locales/tr.json

@@ -489,7 +489,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Firmware Yeniden Başlatma",
             "KlipperCheck": "Lütfen Klipper hizmetinin çalışıp çalışmadığını ve bir UDS'nin (Unix Etki Alanı Soketi) yapılandırılıp yapılandırılmadığını kontrol edin.",
-            "KlippyState": "Klippy-Durumu",
             "MoonrakerCannotConnect": "Moonraker Klipper'a bağlanamıyor!",
             "Restart": "Yeniden Başlat"
         },

src/locales/uk.json

@@ -490,7 +490,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "Перезапуск Прошивки",
             "KlipperCheck": "Будь ласка, перевірте, чи працює служба Klipper та налаштована UDS (UNIX домен).",
-            "KlippyState": "Klippy-Стан",
             "MoonrakerCannotConnect": "Moonraker не може підключитися до Klipper!",
             "Restart": "Перезапустити"
         },

src/locales/zh.json

@@ -492,7 +492,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "重启Klipper并重置主控",
             "KlipperCheck": "请检查Klipper服务是否运行并且已经设置UDS(Unix Domain Socket)。",
-            "KlippyState": "Klippy状态",
             "MoonrakerCannotConnect": "Moonraker无法连接到Klipper ！",
             "Restart": "重启Klipper"
         },

src/locales/zh_TW.json

@@ -334,7 +334,6 @@
         "KlippyStatePanel": {
             "FirmwareRestart": "韌體重新啟動",
             "KlipperCheck": "請檢查Klipper服務是否運行並且已經設定UDS（Unix Domain Socket）。",
-            "KlippyState": "Klippy狀態: ",
             "MoonrakerCannotConnect": "Moonraker 不能連接 Klipper!",
             "Restart": "重新啟動"
         },