Rename "Seeds" to "Seeding to" and "Peers" to "Downloading from" (#342)

johman10 · Jan 30, 2022 · c4bbb0c · c4bbb0c
1 parent 18c9134
commit c4bbb0c
Show file tree

Hide file tree

Showing 9 changed files with 350 additions and 143 deletions.
diff --git a/src/components/Modal/Settings/UserInterface.svelte b/src/components/Modal/Settings/UserInterface.svelte
@@ -42,9 +42,7 @@
   };
 
   const handleColumnDrop = (sorting) => {
-    newColumns.sort(
-      (a, b) => sorting.indexOf(a.name) - sorting.indexOf(b.name)
-    );
+    newColumns.sort((a, b) => sorting.indexOf(a.id) - sorting.indexOf(b.id));
   };
 </script>
 
@@ -85,9 +83,9 @@
         class="column"
         draggable="true"
         use:orderable="{handleColumnDrop}"
-        id="{column.name}"
+        id="{column.id}"
       >
-        <span>{column.name}</span>
+        <span>{uiColumns.getColumnLabel(column.id)}</span>
         <Checkbox bind:checked="{column.enabled}" label="Enabled" />
       </div>
     {/each}

diff --git a/src/components/TorrentList/ColumnHeader.svelte b/src/components/TorrentList/ColumnHeader.svelte
@@ -2,33 +2,33 @@
   import { resizeableTable } from '~helpers/actions';
   import { uiColumns, sorting } from '~helpers/stores';
 
-  export let name;
+  export let id;
 
   const columnSizes = uiColumns.sizes;
 
   const handleResize = (newWidth) => {
-    const columnIndex = $uiColumns.findIndex((column) => column.name === name);
+    const columnIndex = $uiColumns.findIndex((column) => column.id === id);
     const column = { ...$uiColumns[columnIndex], width: newWidth };
     const newColumns = [...$uiColumns];
     newColumns.splice(columnIndex, 1, column);
     uiColumns.set(newColumns);
   };
 
   const handleClick = () => {
-    sorting.updateToColumn(name);
+    sorting.updateToColumn(id);
   };
 </script>
 
-{#if name}
+{#if id}
   <th
     class="header"
-    class:sorting="{name === $sorting.column}"
-    class:asc="{$sorting.column === name && $sorting.direction === 'asc'}"
-    class:desc="{$sorting.column === name && $sorting.direction === 'desc'}"
-    style="width: {$columnSizes[name]}px"
+    class:sorting="{id === $sorting.id}"
+    class:asc="{$sorting.id === id && $sorting.direction === 'asc'}"
+    class:desc="{$sorting.id === id && $sorting.direction === 'desc'}"
+    style="width: {$columnSizes[id]}px"
     on:click="{handleClick}"
   >
-    {name}
+    {uiColumns.getColumnLabel(id)}
     <span class="handle" use:resizeableTable="{handleResize}"></span>
   </th>
 {/if}

diff --git a/src/components/TorrentList/Torrent.svelte b/src/components/TorrentList/Torrent.svelte
@@ -72,11 +72,11 @@
 
   // TODO: Move to constants/columns, pass torrent and session as arg to props;
   $: rendererMap = {
-    [UI_COLUMN.NAME]: {
+    [UI_COLUMN.NAME.id]: {
       component: TextRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.NAME], size: 'big' }),
     },
-    [UI_COLUMN.PERCENT_COMPLETE]: {
+    [UI_COLUMN.PERCENT_COMPLETE.id]: {
       component: ProgressRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.DOWNLOAD_PROGRESS],
@@ -85,29 +85,29 @@
         torrentStatus: STATUSES[torrent[TRANSMISSION_COLUMN.STATUS]],
       }),
     },
-    [UI_COLUMN.DOWNLOADED]: {
+    [UI_COLUMN.DOWNLOADED.id]: {
       component: SizeRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.DOWNLOADED],
         perSize: $session[SESSION_COLUMN_UNITS]?.[SESSION_COLUMN_UNITS_SIZE],
       }),
     },
-    [UI_COLUMN.DOWNLOAD_SPEED]: {
+    [UI_COLUMN.DOWNLOAD_SPEED.id]: {
       component: SizeRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.DOWNLOAD_RATE],
         isSpeed: true,
         perSize: $session[SESSION_COLUMN_UNITS]?.[SESSION_COLUMN_UNITS_SPEED],
       }),
     },
-    [UI_COLUMN.UPLOADED]: {
+    [UI_COLUMN.UPLOADED.id]: {
       component: SizeRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.UPLOADED],
         perSize: $session[SESSION_COLUMN_UNITS]?.[SESSION_COLUMN_UNITS_SIZE],
       }),
     },
-    [UI_COLUMN.UPLOAD_SPEED]: {
+    [UI_COLUMN.UPLOAD_SPEED.id]: {
       component: SizeRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.UPLOAD_RATE],
@@ -116,68 +116,68 @@
         perSize: $session[SESSION_COLUMN_UNITS]?.[SESSION_COLUMN_UNITS_SPEED],
       }),
     },
-    [UI_COLUMN.ETA]: {
+    [UI_COLUMN.ETA.id]: {
       component: ArrivalRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.ETA] }),
     },
-    [UI_COLUMN.RATIO]: {
+    [UI_COLUMN.RATIO.id]: {
       component: TextRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.RATIO]?.toFixed(2) }),
     },
-    [UI_COLUMN.FILE_SIZE]: {
+    [UI_COLUMN.FILE_SIZE.id]: {
       component: SizeRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.SIZE],
         perSize: $session[SESSION_COLUMN_UNITS]?.[SESSION_COLUMN_UNITS_SIZE],
       }),
     },
-    [UI_COLUMN.ADDED]: {
+    [UI_COLUMN.ADDED.id]: {
       component: DateRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.ADDED] }),
     },
-    [UI_COLUMN.CREATION_DATE]: {
+    [UI_COLUMN.CREATION_DATE.id]: {
       component: DateRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.CREATED] }),
     },
-    [UI_COLUMN.SEEDS]: {
+    [UI_COLUMN.SEEDS.id]: {
       component: ConnectionRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.SEEDING_TO],
         connected: torrent[TRANSMISSION_COLUMN.PEERS_CONNECTED],
       }),
     },
-    [UI_COLUMN.PEERS]: {
+    [UI_COLUMN.PEERS.id]: {
       component: ConnectionRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.DOWNLOADING_FROM],
         connected: torrent[TRANSMISSION_COLUMN.PEERS_CONNECTED],
       }),
     },
-    [UI_COLUMN.BASE_PATH]: {
+    [UI_COLUMN.BASE_PATH.id]: {
       component: TextRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.DOWNLOAD_DIR] }),
     },
-    [UI_COLUMN.HASH]: {
+    [UI_COLUMN.HASH.id]: {
       component: TextRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.HASH] }),
     },
-    [UI_COLUMN.COMMENT]: {
+    [UI_COLUMN.COMMENT.id]: {
       component: TextRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.COMMENT] }),
     },
-    [UI_COLUMN.LABELS]: {
+    [UI_COLUMN.LABELS.id]: {
       component: LabelRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.LABELS] }),
     },
-    [UI_COLUMN.ERROR]: {
+    [UI_COLUMN.ERROR.id]: {
       component: TextRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.ERROR_STRING] }),
     },
-    [UI_COLUMN.PRIVATE]: {
+    [UI_COLUMN.PRIVATE.id]: {
       component: BooleanRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.PRIVATE] }),
     },
-    [UI_COLUMN.TRACKERS]: {
+    [UI_COLUMN.TRACKERS.id]: {
       component: TextRenderer,
       props: () => {
         const value = torrent[TRANSMISSION_COLUMN.TRACKERS]
@@ -187,20 +187,52 @@
         return { value };
       },
     },
-    [UI_COLUMN.DONE]: {
+    [UI_COLUMN.DONE.id]: {
       component: DateRenderer,
       props: () => ({ value: torrent[TRANSMISSION_COLUMN.DONE] }),
     },
-    [UI_COLUMN.STATUS]: {
+    [UI_COLUMN.STATUS.id]: {
       component: TextRenderer,
       props: () => ({ value: STATUSES[torrent[TRANSMISSION_COLUMN.STATUS]] }),
     },
-    [UI_COLUMN.QUEUE_POSITION]: {
+    [UI_COLUMN.QUEUE_POSITION.id]: {
       component: TextRenderer,
       props: () => ({
         value: torrent[TRANSMISSION_COLUMN.QUEUE_POSITION],
       }),
     },
+    [UI_COLUMN.TOTAL_LEECHERS.id]: {
+      component: TextRenderer,
+      props: () => {
+        const leecherCounts = torrent[TRANSMISSION_COLUMN.TRACKER_STATS].map(
+          ({ leecherCount }) => leecherCount
+        );
+        const filteredLeecherCounts = leecherCounts.filter(
+          (count) => count !== -1
+        );
+        const value = filteredLeecherCounts.length
+          ? Math.max(...filteredLeecherCounts)
+          : '-';
+
+        return { value };
+      },
+    },
+    [UI_COLUMN.TOTAL_SEEDERS.id]: {
+      component: TextRenderer,
+      props: () => {
+        const seederCounts = torrent[TRANSMISSION_COLUMN.TRACKER_STATS].map(
+          ({ seederCount }) => seederCount
+        );
+        const filteredSeederCounts = seederCounts.filter(
+          (count) => count !== -1
+        );
+        const value = filteredSeederCounts.length
+          ? Math.max(...filteredSeederCounts)
+          : '-';
+
+        return { value };
+      },
+    },
   };
 </script>
 
@@ -212,7 +244,7 @@
   on:click="{handleClick}"
 >
   {#each $activeColumns
-    .map((column) => rendererMap[column.name])
+    .map((column) => rendererMap[column.id])
     .filter(Boolean) as { component, props }}
     <td>
       <svelte:component

diff --git a/src/components/TorrentList/TorrentList.svelte b/src/components/TorrentList/TorrentList.svelte
@@ -128,7 +128,7 @@
   <table class="table" style="width: {$totalSize}px">
     <thead class="table-header">
       {#each $activeColumns as column}
-        <ColumnHeader name="{column.name}" />
+        <ColumnHeader id="{column.id}" />
       {/each}
     </thead>
     <tbody>

diff --git a/src/helpers/actions/orderable.js b/src/helpers/actions/orderable.js
@@ -21,7 +21,13 @@ export default function orderable(item, handleDrop) {
 
   const onDrop = (event) => {
     event.preventDefault();
-    const data = Array.from(list.childNodes).map((node) => node.id);
+    const data = Array.from(list.childNodes).map((node) => {
+      if (isNaN(node.id)) {
+        return node.id;
+      }
+
+      return parseInt(node.id, 10);
+    });
     handleDrop(data);
     draggingElement.style = 'opacity: 1';
   };