Tweak UI

src/components/dialogs/Panel.vue

@@ -5,7 +5,7 @@
     <slot />
   </div>
 </fieldset>
-<div v-else>
+<div class="inner" v-else>
   <slot />
 </div>
 </template>

src/components/dialogs/Peers.vue

@@ -6,15 +6,17 @@
   >
     <template v-slot:items="row">
       <td class="ip">
-        <img
-          v-if="isWindows"
-          class="country-flag"
-          :title="row.item.country"
-          :alt="codeToFlag(row.item.country_code).char"
-          :src="codeToFlag(row.item.country_code).url"
-        />
-        <template v-else>
-          {{ codeToFlag(row.item.country_code).char }}
+        <template v-if="row.item.country_code">
+          <img
+            v-if="isWindows"
+            class="country-flag"
+            :title="row.item.country"
+            :alt="codeToFlag(row.item.country_code).char"
+            :src="codeToFlag(row.item.country_code).url"
+          />
+          <template v-else>
+            {{ codeToFlag(row.item.country_code).char }}
+          </template>
         </template>
         {{ row.item.ip }}
         <span class="grey--text">:{{ row.item.port }}</span>
@@ -23,10 +25,10 @@
       <td :title="row.item.flags_desc">{{ row.item.flags }}</td>
       <td>{{ row.item.client }}</td>
       <td>{{ row.item.progress | progress }}</td>
-      <td>{{ row.item.dl_speed | size }}/s</td>
-      <td>{{ row.item.up_speed | size }}/s</td>
-      <td>{{ row.item.downloaded | size }}</td>
-      <td>{{ row.item.uploaded | size }}</td>
+      <td>{{ row.item.dl_speed | networkSpeed }}</td>
+      <td>{{ row.item.downloaded | networkSize }}</td>
+      <td>{{ row.item.up_speed | networkSpeed }}</td>
+      <td>{{ row.item.uploaded | networkSize }}</td>
       <td>{{ row.item.relevance | progress }}</td>
       <td>{{ row.item.files }}</td>
     </template>
@@ -39,6 +41,7 @@ import Vue from 'vue';
 import { codeToFlag, isWindows } from '../../utils';
 import Taskable from '@/mixins/taskable';
 import { api } from '../../Api';
+import { formatSize } from '../../filters';
 
 export default Vue.extend({
   mixins: [Taskable],
@@ -55,8 +58,8 @@ export default Vue.extend({
       { text: 'Client', value: 'client' },
       { text: 'Progress', value: 'progress' },
       { text: 'DL Speed', value: 'dl_speed' },
-      { text: 'UP Speed', value: 'up_speed' },
       { text: 'Downloaded', value: 'downloaded' },
+      { text: 'UP Speed', value: 'up_speed' },
       { text: 'Uploaded', value: 'uploaded' },
       { text: 'Relevance', value: 'relevance' },
       { text: 'Files', value: 'files' },
@@ -69,6 +72,22 @@ export default Vue.extend({
       isWindows,
     };
   },
+  filters: {
+    networkSpeed(speed: number) {
+      if (speed === 0) {
+        return null;
+      }
+
+      return formatSize(speed) + '/s';
+    },
+    networkSize(size: number) {
+      if (size === 0) {
+        return null;
+      }
+
+      return formatSize(size);
+    },
+  },
   computed: {
     peers() {
       return _.map(this.peersObj, (value, key) => {
@@ -78,7 +97,11 @@ export default Vue.extend({
   },
   methods: {
     codeToFlag(code: string) {
-      return codeToFlag(code);
+      if (code) {
+        return codeToFlag(code);
+      }
+
+      return {};
     },
     async getPeers() {
       const resp = await api.getTorrentPeers(this.hash, this.rid);

src/components/dialogs/Trackers.vue

@@ -50,10 +50,10 @@ export default Vue.extend({
     formatTrackerStatus(status: number) {
       const map = [
         'Disabled',
-        'Contacted',
-        'Working',
-        'Not working',
         'Not contacted',
+        'Working',
+        'Updating',
+        'Not working',
       ];
 
       return map[status];

src/filters.ts

@@ -1,18 +1,28 @@
 import dayjs from 'dayjs';
 import Vue from 'vue';
 
+export function toPrecision(value: number, precision: number) {
+  if (value >= (Math.pow(10, precision))) {
+    return value.toString();
+  } else if (value >= 1) {
+    return value.toPrecision(precision);
+  }
+
+  return value.toFixed(precision - 1);
+}
+
 export function formatSize(value: number) {
   const units = 'KMGTP';
   let index = -1;
 
-  while (value >= 1024) {
+  while (value >= 1000) {
     index++;
     value /= 1024;
   }
 
   const unit = index < 0 ? 'B' : units[index] + 'iB';
 
-  return `${value.toFixed(2)} ${unit}`;
+  return `${toPrecision(value, 3)} ${unit}`;
 }
 
 Vue.filter('formatSize', formatSize);
@@ -92,7 +102,8 @@ export function formatAsDuration(date: number, options?: DurationOptions) {
 Vue.filter('formatAsDuration', formatAsDuration);
 
 export function formatProgress(progress: number) {
-  return Math.floor(progress * 100) + '%';
+  progress = progress * 100;
+  return toPrecision(progress, 3) + '%';
 }
 
 Vue.filter('progress', formatProgress);