feat(header): statistic panel interface

DEgITx · May 12, 2018 · 71c86e2 · 71c86e2
1 parent a216279
commit 71c86e2
Show file tree

Hide file tree

Showing 4 changed files with 294 additions and 57 deletions.
diff --git a/src/app/app.css b/src/app/app.css
@@ -20,4 +20,12 @@
 
 .header.sticky .header-main > div > div > div:nth-child(2) > div > div:nth-child(1) {
   opacity:0;
+}
+
+.header .counter-statistic {
+  transition: 0.5s;
+}
+
+.header.sticky .counter-statistic {
+  opacity: 0;
 }
diff --git a/src/app/header.js b/src/app/header.js
@@ -247,35 +247,13 @@ class Header extends React.Component {
                   </svg>
              }
           />
-          {
-						((window.currentWindow && !window.currentWindow.isModal()) || typeof WEB !== 'undefined')
-						&&
-						<div className='fs0-85 pad0-75 column peers-status' style={{
+						<div className='fs0-85 pad0-75 column search-panel' style={{
               marginLeft: 'auto', 
-              marginTop: '-10px', 
-              color: window.peers > 0 ? '#42f445' : 'white',
+              marginTop: '-10px',
               zIndex: 2
               }}>
               <Search />
-
-              <div>rats peers: {window.peers} [{window.peersTorrents} torrents] {window.peers > 0 ? ' (p2p rats search enabled)' : ' (p2p rats search not available at this moment)'}</div>
-              {
-                window.p2pStatus == 0
-                &&
-                <div style={{color: 'red'}}>external connections not available (check port forwarding)</div>
-              }
-              {
-                window.p2pStatus == 1
-                &&
-                <div style={{color: 'orange'}}>port not available, but connections redirected</div>
-              }
-              {
-                window.p2pStatus == 2
-                &&
-                <div style={{color: 'green'}}>port connections fully available</div>
-              }
 						</div>
-          }
         </div>
       </CardMedia>
     </Card>

diff --git a/src/app/search.js b/src/app/search.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 
 import AdvancedSearch from './search-advanced-controls'
+import TorrentsStatistic from './torrent-statistic'
+
 import TextField from 'material-ui/TextField';
 import RaisedButton from 'material-ui/RaisedButton';
 import RefreshIndicator from 'material-ui/RefreshIndicator';
@@ -11,42 +13,9 @@ import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';
 import AddIcon from 'material-ui/svg-icons/content/add';
 import RemoveIcon from 'material-ui/svg-icons/content/remove';
 
-import formatBytes from './format-bytes'
-
 import _ from 'lodash'
 import singleton from './singleton';
 
-class TorrentsStatistic extends Component {
-  constructor(props)
-  {
-    super(props)
-
-    this.stats = props.stats || {}
-  }
-  componentDidMount()
-  {
-    this.newTorrentFunc = (torrent) => {
-      this.stats.size += torrent.size;
-      this.stats.torrents++;
-      this.stats.files += torrent.files; 
-      this.forceUpdate()
-    }
-
-    window.torrentSocket.on('newTorrent', this.newTorrentFunc);
-  }
-  componentWillUnmount()
-  {
-    if(this.newTorrentFunc)
-      window.torrentSocket.off('newTorrent', this.newTorrentFunc);
-  }
-  render()
-  {
-    return (
-      <div className='fs0-75 pad0-75' style={{color: 'rgba(0, 0, 0, 0.541176)'}}>you have information about {this.stats.torrents} torrents and around {this.stats.files} files and { formatBytes(this.stats.size, 1) } of data</div>
-    )
-  }
-}
-
 class Search extends Component {
   constructor(props)
   {