feat: piece states progress bar (#426)

src/components/Modals/TorrentDetailModal/Tabs/Info.vue

@@ -2,6 +2,14 @@
   <v-card flat>
     <v-simple-table>
       <tbody>
+        <tr>
+          <td :class="commonStyle">
+            {{ $t('modals.detail.pageInfo.pieceStates') }}
+          </td>
+          <td id="pieceStates">
+            <canvas width="0" height="1" />
+          </td>
+        </tr>
         <tr>
           <td :class="commonStyle">
             {{ $t('modals.detail.pageInfo.torrentTitle') }}
@@ -252,12 +260,58 @@ export default {
   },
   mounted() {
     this.getTorrentProperties()
+    this.renderTorrentPieceStates()
   },
   methods: {
     async getTorrentProperties() {
       const props = await qbit.getTorrentProperties(this.hash)
       this.createdBy = props.created_by || null
       this.comment = props.comment || null
+    },
+    async renderTorrentPieceStates() {
+      const canvas = document.querySelector('#pieceStates canvas')
+      const { data } = await qbit.getTorrentPieceStates(this.hash)
+
+      // Source: https://github.com/qbittorrent/qBittorrent/blob/6229b817300344759139d2fedbd59651065a561d/src/webui/www/private/scripts/prop-general.js#L230
+      if (data) {
+        canvas.width = data.length
+        const ctx = canvas.getContext('2d')
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+        // Group contiguous colors together and draw as a single rectangle
+        let color = ''
+        let rectWidth = 1
+
+        for (let i = 0; i < data.length; ++i) {
+          const status = data[i]
+          let newColor = ''
+
+          if (status === 1) // requested / downloading
+            newColor = this.$vuetify.theme.currentTheme['torrent-downloading']
+          else if (status === 2) // already downloaded
+            newColor = this.$vuetify.theme.currentTheme['torrent-done']
+
+          if (newColor === color) {
+            ++rectWidth
+            continue
+          }
+
+          if (color !== '') {
+            ctx.fillStyle = color
+            ctx.fillRect((i - rectWidth), 0, rectWidth, canvas.height)
+          }
+
+          rectWidth = 1
+          color = newColor
+        }
+
+        // Fill a rect at the end of the canvas if one is needed
+        if (color !== '') {
+          ctx.fillStyle = color
+          ctx.fillRect((data.length - rectWidth), 0, rectWidth, canvas.height)
+        }
+      }
+
     }
   }
 }
@@ -278,4 +332,13 @@ export default {
     padding-right: 8px !important;
   }
 }
+
+#pieceStates {
+  display: block;
+
+  canvas {
+    height: 100%;
+    width: 100%;
+  }
+}
 </style>

src/lang/en.js

@@ -242,6 +242,7 @@ const locale = {
       tabTitleContent: 'Content',
       tabTitleTagsCategories: 'Tags & Categories',
       pageInfo: {
+        pieceStates: 'Progress',
         torrentTitle: 'Torrent title',
         hash: 'hash',
         ratio: 'Ratio',