added key to .map

This commit is contained in:
Daniel Shleifman
2021-05-24 18:11:49 +03:00
parent af1534787e
commit 13cef741b9
2 changed files with 67 additions and 61 deletions

File diff suppressed because one or more lines are too long

View File

@@ -6,44 +6,44 @@ import DialogTitle from '@material-ui/core/DialogTitle'
import DialogContent from '@material-ui/core/DialogContent' import DialogContent from '@material-ui/core/DialogContent'
import { cacheHost } from '../utils/Hosts' import { cacheHost } from '../utils/Hosts'
const style = { // const style = {
cache: { // cache: {
paddingLeft: "6px", // paddingLeft: "6px",
paddingRight: "2px", // paddingRight: "2px",
lineHeight: "11px", // lineHeight: "11px",
}, // },
piece: { // piece: {
width: "12px", // width: "12px",
height: "12px", // height: "12px",
backgroundColor: "#eef2f4", // backgroundColor: "#eef2f4",
border: "1px solid #eef2f4", // border: "1px solid #eef2f4",
display: "inline-block", // display: "inline-block",
marginRight: "1px", // marginRight: "1px",
}, // },
pieceComplete: { // pieceComplete: {
backgroundColor: "#3fb57a", // backgroundColor: "#3fb57a",
borderColor: "#3fb57a", // borderColor: "#3fb57a",
}, // },
pieceLoading: { // pieceLoading: {
backgroundColor: "#00d0d0", // backgroundColor: "#00d0d0",
borderColor: "#00d0d0", // borderColor: "#00d0d0",
}, // },
readerRange: { // readerRange: {
borderColor: "#9a9aff !important", // borderColor: "#9a9aff !important",
}, // },
pieceReader: { // pieceReader: {
borderColor: "#000000 !important", // borderColor: "#000000 !important",
}, // },
pieceProgress: { // pieceProgress: {
position: "relative", // position: "relative",
zIndex: "1", // zIndex: "1",
backgroundColor: "#009090", // backgroundColor: "#009090",
left: "-1px", // left: "-1px",
top: "-1px", // top: "-1px",
width: "12px", // width: "12px",
}, // },
} // }
export default function DialogCacheInfo(props) { export default function DialogCacheInfo(props) {
const [hash] = React.useState(props.hash) const [hash] = React.useState(props.hash)
@@ -65,8 +65,8 @@ export default function DialogCacheInfo(props) {
} }
}, [hash, props.open]) }, [hash, props.open])
useEffect(()=>{ useEffect(() => {
if (cache && cache.PiecesCount && cache.Pieces){ if (cache && cache.PiecesCount && cache.Pieces) {
var map = []; var map = [];
for (let i = 0; i < cache.PiecesCount; i++) { for (let i = 0; i < cache.PiecesCount; i++) {
var reader = 0 var reader = 0
@@ -96,12 +96,12 @@ export default function DialogCacheInfo(props) {
} }
setPMap(map) setPMap(map)
} }
},[cache.Pieces]) }, [cache.Pieces])
return ( return (
<div> <div>
<DialogTitle id="form-dialog-title"> <DialogTitle id="form-dialog-title">
<Typography fullWidth> <Typography>
<b>Hash </b> {cache.Hash} <b>Hash </b> {cache.Hash}
<br /> <br />
<b>Capacity </b> {humanizeSize(cache.Capacity)} <b>Capacity </b> {humanizeSize(cache.Capacity)}
@@ -125,7 +125,13 @@ export default function DialogCacheInfo(props) {
</DialogTitle> </DialogTitle>
<DialogContent> <DialogContent>
<div className="cache"> <div className="cache">
{pMap.map((itm) => <span className={itm.class} title={itm.info}>{itm.prc>0 && itm.prc<100 && (<div className="piece-progress" style={{height: itm.prc/100*12+"px"}}></div>)}</span>)} {pMap.map(itm => (
<span key={itm.info} className={itm.class} title={itm.info}>
{itm.prc > 0 && itm.prc < 100 && (
<div className="piece-progress" style={{ height: itm.prc / 100 * 12 + "px" }}></div>
)}
</span>
))}
</div> </div>
</DialogContent> </DialogContent>
</div> </div>
@@ -140,18 +146,18 @@ function getCacheMap(cache) {
let info = i let info = i
var prcDiv = "" var prcDiv = ""
if (cache.Pieces && cache.Pieces[i]) { if (cache.Pieces && cache.Pieces[i]) {
let prc = (cache.Pieces[i].Size/cache.Pieces[i].Length*100).toFixed(2) let prc = (cache.Pieces[i].Size / cache.Pieces[i].Length * 100).toFixed(2)
let piece = cache.Pieces[i] let piece = cache.Pieces[i]
if (piece.Completed && piece.Size >= piece.Length) { if (piece.Completed && piece.Size >= piece.Length) {
html += ' piece-complete' html += ' piece-complete'
info += ' 100%' info += ' 100%'
}else { } else {
html += ' piece-loading' html += ' piece-loading'
info += ' ' + prc + '%' info += ' ' + prc + '%'
prcDiv = "<div class='piece-progress' style='height: "+prc+"%;'></div>" prcDiv = "<div class='piece-progress' style='height: " + prc + "%;'></div>"
} }
} }
cache.Readers.forEach((r,k)=> { cache.Readers.forEach((r, k) => {
if (i >= r.Start && i <= r.End && i !== r.Reader) if (i >= r.Start && i <= r.End && i !== r.Reader)
html += ' reader-range' html += ' reader-range'
if (i === r.Reader) { if (i === r.Reader) {
@@ -193,19 +199,19 @@ function getCache(hash, callback) {
} }
/* /*
{ {
"Hash": "41e36c8de915d80db83fc134bee4e7e2d292657e", "Hash": "41e36c8de915d80db83fc134bee4e7e2d292657e",
"Capacity": 209715200, "Capacity": 209715200,
"Filled": 2914808, "Filled": 2914808,
"PiecesLength": 4194304, "PiecesLength": 4194304,
"PiecesCount": 2065, "PiecesCount": 2065,
"DownloadSpeed": 32770.860273455524, "DownloadSpeed": 32770.860273455524,
"Pieces": { "Pieces": {
"2064": { "2064": {
"Id": 2064, "Id": 2064,
"Length": 2914808, "Length": 2914808,
"Size": 162296, "Size": 162296,
"Completed": false "Completed": false
} }
} }
} }
*/ */