From 50d10bd097713b2492d0a4bf29158892e35ce15b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Fri, 7 Jan 2022 20:33:05 +0100
Subject: [PATCH] fix pull client.

---
 client/src/components/Pull.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Pull.vue b/client/src/components/Pull.vue
index e528a64..56841f5 100644
--- a/client/src/components/Pull.vue
+++ b/client/src/components/Pull.vue
@@ -6,23 +6,23 @@
       color="info"
       dark
     >
-      <v-icon class="mr-2" color="white">mdi-cloud-download-outline</v-icon> Pull neko images
+      <v-icon class="mr-2" color="white">{{ status.active ? 'mdi-cloud-sync' : 'mdi-cloud-download-outline' }}</v-icon> Pull neko images
     </v-btn>
 
-    <v-dialog v-model="dialog" max-width="920px">
+    <v-dialog v-model="dialog" max-width="780px">
       <v-card>
         <v-card-title class="headline">
           Pull neko images
         </v-card-title>
         <v-card-text>
-          <template v-if="status.layers.length > 0">
-            <pre v-for="layer in status.layers" :key="layer.id">{{ layer.id }} {{ layer.progress && layer.progress + ' ' }}{{ layer.status }}</pre>
+          <template v-if="status.active && status.layers && Object.keys(status.layers).length > 0">
+            <pre v-for="layer in status.layers" :key="layer.id">{{ layer.id }} {{ layer.status }}{{ layer.progress && ' ' + layer.progress }}</pre>
             <br />
           </template>
-          <template v-if="status.status.length > 0">
+          <template v-if="status.status && status.status.length > 0">
             <pre v-for="text in status.status" :key="text">{{ text }}</pre>
           </template>
-          <pre v-else>Preparing docker image pull</pre>
+          <pre v-else-if="status.active">Preparing docker image pull</pre>
         </v-card-text>
         <v-card-actions>
           <template v-if="!status.active">
@@ -38,11 +38,11 @@
               Start
             </v-btn>
           </template>
-          <v-spacer></v-spacer>
+          <v-spacer v-else></v-spacer>
           <v-btn v-if="status.active" color="red" text :loading="loading" @click="Stop">
             Stop
           </v-btn>
-          <v-btn v-else color="grey" text @click="dialog = false">
+          <v-btn color="grey" text @click="dialog = false">
             Close
           </v-btn>
         </v-card-actions>
@@ -57,7 +57,7 @@ import { Vue, Component } from 'vue-property-decorator'
 @Component({
   components: {}
 })
-export default class PUll extends Vue {
+export default class Pull extends Vue {
   private dialog = false
   private loading = false
   private nekoImage = ''