62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
|
|
export const Stats = props => (
|
|
<div className="row d-flex flex-wrap">
|
|
<Stat
|
|
name="Movies"
|
|
count={props.stats.get("movies_count")}
|
|
torrentCount={props.stats.get("movies_torrents_count")}
|
|
torrentCountById={props.stats.get("movies_torrents_count_by_id")}
|
|
/>
|
|
<Stat
|
|
name="Shows"
|
|
count={props.stats.get("shows_count")}
|
|
torrentCount={props.stats.get("episodes_torrents_count")}
|
|
torrentCountById={props.stats.get("shows_torrents_count_by_id")}
|
|
/>
|
|
<Stat
|
|
name="Episodes"
|
|
count={props.stats.get("episodes_count")}
|
|
torrentCount={props.stats.get("episodes_torrents_count")}
|
|
torrentCountById={props.stats.get("episodes_torrents_count_by_id")}
|
|
/>
|
|
</div>
|
|
)
|
|
Stats.propTypes = { stats: PropTypes.object }
|
|
|
|
const Stat = props => (
|
|
<div className="col-12 col-md-4 my-2">
|
|
<div className="card">
|
|
<div className="card-header">
|
|
<h3>
|
|
{props.name}
|
|
<span className="badge badge-pill badge-info pull-right">{props.count}</span>
|
|
</h3>
|
|
</div>
|
|
<div className="card-body">
|
|
<TorrentsStat data={props} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
Stat.propTypes = {
|
|
name: PropTypes.string,
|
|
count: PropTypes.number,
|
|
};
|
|
|
|
const TorrentsStat = function(props) {
|
|
if (props.data.torrentCount === undefined) {
|
|
return (<span>No torrents</span>);
|
|
}
|
|
|
|
const percentage = Math.floor((props.data.torrentCountById * 100) / props.data.count);
|
|
return (
|
|
<span>
|
|
{percentage}% with torrents
|
|
<small> - {props.data.torrentCount} total</small>
|
|
</span>
|
|
);
|
|
}
|
|
TorrentsStat.propTypes = { data: PropTypes.object };
|