Show backup info in proper places only

src/account/NetworkPage.vue

@@ -93,7 +93,7 @@
 <!--            </table>-->
 <!--        </div>-->
 
-        <div v-if="network.state === 'running' && configs.networkUuid && network.uuid === configs.networkUuid">
+        <div v-if="isSelfNetAndRunning">
             <button class="btn btn-secondary" @click="requestRestoreKey()"
                     :disabled="loading && loading.requestNetworkKeys">
                 {{messages.link_network_action_request_keys}}
@@ -128,6 +128,15 @@
                           readonly="true" />
                 {{ messages.message_network_keys_description }}
             </div>
+
+            <span v-html="latestBackupInfoHtml"></span>
+
+            <span v-if="allowQueueBackup">
+                <br/>
+                <button @click="queueBckup()" class="btn btn-secondary" :disabled="loading && loading.queueBackup">
+                    {{ messages.link_backup_network }}
+                </button>
+            </span>
         </div>
 
         <div v-if="network.state === 'stopped'">
@@ -166,22 +175,8 @@
                 <img v-show="loading && loading.stopping" :src="loadingImgSrc" />
                 {{messages.link_network_action_stop_description}}
 
-                <hr/>
-                <span v-if="backups === null">{{ messages.label_latest_backup }} <img :src="loadingImgSrc" /></span>
-                <span v-else>
-                    <span v-if="backups.length === 0">{{ messages.label_no_latest_backup }}</span>
-                    <span v-else>
-                        {{ messages.label_latest_backup }} {{ backups[0].label }} {{ backups[0].status }}
-                        {{ messages.date_format_app_data_epoch_time.parseDateMessage(backups[0]['creationTime'], messages) }}
-                    </span>
-                </span>
-
-                <span v-if="allowQueueBackup">
-                    <br/>
-                    <button @click="queueBckup()" class="btn btn-secondary" :disabled="loading && loading.queueBackup">
-                        {{ messages.link_backup_network }}
-                    </button>
-                </span>
+                <!-- the next condition is to prevent this info shown twice on this page -->
+                <span v-if="!isSelfNetAndRunning" v-html="latestBackupInfoHtml"></span>
             </div>
             <div v-else-if="network.state === 'stopped' || network.state === 'error_stopping'"
                  style="border: 2px solid #000;">
@@ -241,6 +236,23 @@
 
                 let lastBackupStatus = this.backups[0].status;
                 return lastBackupStatus !== 'queued' && lastBackupStatus !==  'backup_in_progress';
+            },
+            latestBackupInfoHtml: function() {
+                if (this.backups === null) {
+                    return '<hr/>' + this.messages.label_latest_backup + '<img :src="' + loadingImgSrc + '" />';
+                } else if (this.backups.length === 0) {
+                    return '<hr/>' + this.messages.label_no_latest_backup;
+                } else {
+                    let lastBackup = this.backups[0];
+                    return '<hr/>' + this.messages.label_latest_backup
+                           + " " + lastBackup.label + " <i>" + lastBackup.status + "</i> "
+                           + this.messages.date_format_app_data_epoch_time.parseDateMessage(lastBackup.creationTime,
+                                                                                            this.messages);
+                }
+            },
+            isSelfNetAndRunning: function() {
+                return this.network.state === 'running'
+                       && this.configs.networkUuid && this.network.uuid === this.configs.networkUuid;
             }
         },
         methods: {