Fix statistics update method

src/components/WireStatistics.vue

@@ -4,13 +4,9 @@
       Wire statistics
     </template>
     <template #content>
-      <DataTable :value="wireStatistics" sortField="peerId" :autoLayout="true">
-        <Column field="peerId" header="Wire ID"></Column>
-        <Column field="remoteAddress" header="Remote address"></Column>
-        <Column field="uploadSpeed" header="Upload speed"></Column>
-        <Column field="uploaded" header="Uploaded"></Column>
-        <Column field="downloadSpeed" header="Download speed"></Column>
-        <Column field="downloaded" header="Downloaded"></Column>
+      <DataTable :value="wireStatistics" :sortField="sortField" :sortOrder="sortOrder" :autoLayout="true">
+        <Column field="id" header="Wire ID" :sortable="true" />
+        <Column v-for="(column, index) of columns" :field="column.field" :header="column.header" :key="column.field + '_' + index" :sortable="true" />
       </DataTable>
     </template>
   </Card>
@@ -22,6 +18,26 @@ export default {
     wireStatistics: {
       type: Object,
       required: true
+    },
+    sortField: {
+      type: String,
+      default: 'id'
+    },
+    sortOrder: {
+      type: Number,
+      default: -1
+    }
+  },
+  setup () {
+    const columns = [
+      { field: 'remoteAddress', header: 'Remote address' },
+      { field: 'uploadSpeed', header: 'Upload speed' },
+      { field: 'uploaded', header: 'Uploaded' },
+      { field: 'downloadSpeed', header: 'Download speed' },
+      { field: 'downloaded', header: 'Downloaded' }
+    ]
+    return {
+      columns
     }
   }
 }

src/helpers/wire-statistics.js

@@ -1,15 +1,24 @@
-import sha1 from 'sha-1'
 import prettyBytes from 'pretty-bytes'
+import sha1 from 'sha-1'
 
-const generateWireStatistics = (wires) => {
-  return wires.map(wire => ({
-    peerId: sha1(wire.peerId).toString().substring(0, 5),
-    remoteAddress: wire.remoteAddress,
-    uploadSpeed: prettyBytes(wire.uploadSpeed()) + 'ps',
-    uploaded: prettyBytes(wire.uploaded),
-    downloadSpeed: prettyBytes(wire.downloadSpeed()) + 'ps',
-    downloaded: prettyBytes(wire.downloaded)
-  }))
+const updateWireStatistics = (wires, wireStatistics) => {
+  wires.forEach(wire => {
+    if (!wireStatistics.some(w => w.wire === wire)) {
+      wireStatistics.push({
+        id: sha1(wire.peerId).toString().substring(0, 5),
+        remoteAddress: wire.remoteAddress,
+        wire: wire
+      })
+    }
+  })
+  wireStatistics.forEach(wireStatistic => {
+    var wire = wireStatistic.wire
+    wireStatistic.uploaded = prettyBytes(wire.uploaded)
+    wireStatistic.downloaded = prettyBytes(wire.downloaded)
+    wireStatistic.uploadSpeed = prettyBytes(wire.uploadSpeed()) + 'ps'
+    wireStatistic.downloadSpeed = prettyBytes(wire.downloadSpeed()) + 'ps'
+  })
+  window.w = wireStatistics
 }
 
-export default generateWireStatistics
+export default updateWireStatistics

src/views/Host.vue

@@ -42,7 +42,7 @@
         </div>
       </template>
     </Card>
-    <WireStatistics :wireStatistics="wireStatistics"/>
+    <WireStatistics :wireStatistics="wireStatistics" sortField="uploaded" />
   </div>
 </template>
 
@@ -52,7 +52,7 @@ import { useToast } from 'primevue/usetoast'
 import prettyBytes from 'pretty-bytes'
 import prettyMilliseconds from 'pretty-ms'
 import WebTorrent from 'webtorrent/webtorrent.min.js'
-import generateWireStatistics from '@/helpers/wire-statistics'
+import updateWireStatistics from '@/helpers/wire-statistics'
 
 export default {
   setup () {
@@ -129,18 +129,15 @@ export default {
         })
 
         wireUpdateHandle = setInterval(() => {
-          updateWireStatistics()
-        }, 200)
+          updateWireStatistics(state.wires, wireStatistics)
+          window.w = wireStatistics
+          wireStatistics.set()
+        }, 250)
 
         toast.add({ severity: 'success', summary: 'Video added', detail: `You are now sharing ${video.name}`, life: 5000 })
       })
     }
 
-    const updateWireStatistics = () => {
-      var newWireStatistics = generateWireStatistics(state.wires)
-      wireStatistics.splice.apply(wireStatistics, [0, newWireStatistics.length].concat(newWireStatistics))
-    }
-
     return {
       onFilesSelected,
       player,
@@ -151,9 +148,3 @@ export default {
   }
 }
 </script>
-
-<style>
-#infoHash {
-  width: 100%;
-}
-</style>

src/views/Screen.vue

@@ -40,7 +40,7 @@
         </div>
       </template>
     </Card>
-    <WireStatistics :wireStatistics="wireStatistics"/>
+    <WireStatistics :wireStatistics="wireStatistics" sortField="downloaded" />
   </div>
 </template>
 
@@ -51,7 +51,7 @@ import { useToast } from 'primevue/usetoast'
 import prettyBytes from 'pretty-bytes'
 import prettyMilliseconds from 'pretty-ms'
 import WebTorrent from 'webtorrent/webtorrent.min.js'
-import generateWireStatistics from '@/helpers/wire-statistics'
+import updateWireStatistics from '@/helpers/wire-statistics'
 
 export default {
   props: {
@@ -152,13 +152,9 @@ export default {
       file.renderTo(player.value)
 
       wireUpdateHandle = setInterval(() => {
-        updateWireStatistics()
-      }, 200)
-    }
-
-    const updateWireStatistics = () => {
-      var newWireStatistics = generateWireStatistics(state.wires)
-      wireStatistics.splice.apply(wireStatistics, [0, newWireStatistics.length].concat(newWireStatistics))
+        window.w = wireStatistics
+        updateWireStatistics(state.wires, wireStatistics)
+      }, 250)
     }
 
     return {