Added status indicator on main torrents list.

web/src/components/TorrentCard/index.jsx

@@ -18,8 +18,16 @@ import { useTranslation } from 'react-i18next'
 import AddDialog from 'components/Add/AddDialog'
 import { StyledDialog } from 'style/CustomMaterialUiStyles'
 import useOnStandaloneAppOutsideClick from 'utils/useOnStandaloneAppOutsideClick'
+import { GETTING_INFO, IN_DB, CLOSED, PRELOAD, WORKING } from 'torrentStates'
 
-import { StyledButton, TorrentCard, TorrentCardButtons, TorrentCardDescription, TorrentCardPoster } from './style'
+import {
+  StatusIndicators,
+  StyledButton,
+  TorrentCard,
+  TorrentCardButtons,
+  TorrentCardDescription,
+  TorrentCardPoster,
+} from './style'
 
 const Transition = forwardRef((props, ref) => <Slide direction='up' ref={ref} {...props} />)
 
@@ -36,7 +44,7 @@ const Torrent = ({ torrent }) => {
   const openDeleteTorrentAlert = () => setIsDeleteTorrentOpened(true)
   const closeDeleteTorrentAlert = () => setIsDeleteTorrentOpened(false)
 
-  const { title, name, poster, torrent_size: torrentSize, download_speed: downloadSpeed, hash } = torrent
+  const { title, name, poster, torrent_size: torrentSize, download_speed: downloadSpeed, hash, stat } = torrent
 
   const dropTorrent = () => axios.post(torrentsHost(), { action: 'drop', hash })
   const deleteTorrent = () => axios.post(torrentsHost(), { action: 'rem', hash })
@@ -105,6 +113,8 @@ const Torrent = ({ torrent }) => {
           </div>
 
           <div className='description-statistics-wrapper'>
+            <StatusIndicator stat={stat} />
+
             <div className='description-statistics-element-wrapper'>
               <div className='description-section-name'>{t('Size')}</div>
               <div className='description-statistics-element-value'>{torrentSize > 0 && humanizeSize(torrentSize)}</div>
@@ -165,4 +175,30 @@ const Torrent = ({ torrent }) => {
   )
 }
 
+export const StatusIndicator = ({ stat }) => {
+  const { t } = useTranslation()
+
+  const values = {
+    [GETTING_INFO]: t('TorrentGettingInfo'),
+    [PRELOAD]: t('TorrentPreload'),
+    [WORKING]: t('TorrentWorking'),
+    [CLOSED]: t('TorrentClosed'),
+    [IN_DB]: t('TorrentInDb'),
+  }
+
+  const colors = {
+    [GETTING_INFO]: '#2196F3',
+    [PRELOAD]: '#FFC107',
+    [WORKING]: '#CDDC39',
+    [CLOSED]: '#E57373',
+    [IN_DB]: '#9E9E9E',
+  }
+
+  return (
+    <div className='description-statistics-element-wrapper'>
+      <StatusIndicators color={colors[stat]} title={values[stat]} />
+    </div>
+  )
+}
+
 export default memo(Torrent)

web/src/components/TorrentCard/style.js

@@ -134,20 +134,20 @@ export const TorrentCardDescription = styled.div`
 
     .description-statistics-wrapper {
       display: grid;
-      grid-template-columns: 80px 80px 1fr;
+      grid-template-columns: 24px 80px 80px 1fr;
       align-self: end;
 
       @media (max-width: 1260px), (max-height: 500px) {
-        grid-template-columns: 70px 70px 1fr;
+        grid-template-columns: 24px 70px 70px 1fr;
       }
 
       @media (max-width: 770px) {
-        grid-template-columns: 65px 65px 1fr;
+        grid-template-columns: 24px 65px 65px 1fr;
       }
 
       @media (max-width: 700px) {
         display: grid;
-        grid-template-columns: repeat(3, 1fr);
+        grid-template-columns: 24px repeat(3, 1fr);
       }
     }
 
@@ -155,7 +155,7 @@ export const TorrentCardDescription = styled.div`
     }
 
     .description-statistics-element-value {
-      margin-left: 5px;
+      margin-left: 0px;
       margin-bottom: 10px;
       word-break: break-all;
 
@@ -229,3 +229,17 @@ export const StyledButton = styled.button`
     }
   `}
 `
+
+export const StatusIndicators = styled.div`
+  ${({ color }) => css`
+    height: 8px;
+    width: 8px;
+    background-color: ${color};
+    border-radius: 50%;
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+  `}
+`