mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 02:35:09 +02:00
random dvd location and start of paginate component
This commit is contained in:
parent
668d8170fa
commit
ff2fc48dc8
@ -12,6 +12,7 @@ import {
|
||||
} from "react-router-dom";
|
||||
|
||||
export default function App() {
|
||||
const randomDelay = "-" + (600 + Math.floor(Math.random() * 1800)) + "s";
|
||||
return (
|
||||
<Startup>
|
||||
<Router>
|
||||
@ -22,7 +23,7 @@ export default function App() {
|
||||
<Route exact path='/orchestrator' element={<Grafana />} />
|
||||
<Route path='/' element={<Home />} />
|
||||
</Routes>
|
||||
<div id="dvdlogo">
|
||||
<div id="dvdlogo" style={{animationDelay: randomDelay}}>
|
||||
<svg width="153px" height="69px">
|
||||
<g>
|
||||
<path d="M140.186,63.52h-1.695l-0.692,5.236h-0.847l0.77-5.236h-1.693l0.076-0.694h4.158L140.186,63.52L140.186,63.52z M146.346,68.756h-0.848v-4.545l0,0l-2.389,4.545l-1-4.545l0,0l-1.462,4.545h-0.771l1.924-5.931h0.695l0.924,4.006l2.078-4.006 h0.848V68.756L146.346,68.756z M126.027,0.063H95.352c0,0-8.129,9.592-9.654,11.434c-8.064,9.715-9.523,12.32-9.779,13.02 c0.063-0.699-0.256-3.304-3.686-13.148C71.282,8.7,68.359,0.062,68.359,0.062H57.881V0L32.35,0.063H13.169l-1.97,8.131 l14.543,0.062h3.365c9.336,0,15.055,3.747,13.467,10.354c-1.717,7.24-9.91,10.416-18.545,10.416h-3.24l4.191-17.783H10.502 L4.34,37.219h20.578c15.432,0,30.168-8.13,32.709-18.608c0.508-1.906,0.443-6.67-0.764-9.527c0-0.127-0.063-0.191-0.127-0.444 c-0.064-0.063-0.127-0.509,0.127-0.571c0.128-0.062,0.383,0.189,0.445,0.254c0.127,0.317,0.19,0.57,0.19,0.57l13.083,36.965 l33.344-37.6h14.1h3.365c9.337,0,15.055,3.747,13.528,10.354c-1.778,7.24-9.972,10.416-18.608,10.416h-3.238l4.191-17.783h-14.481 l-6.159,25.976h20.576c15.434,0,30.232-8.13,32.709-18.608C152.449,8.193,141.523,0.063,126.027,0.063L126.027,0.063z M71.091,45.981c-39.123,0-70.816,4.512-70.816,10.035c0,5.59,31.693,10.034,70.816,10.034c39.121,0,70.877-4.444,70.877-10.034 C141.968,50.493,110.212,45.981,71.091,45.981L71.091,45.981z M68.55,59.573c-8.956,0-16.196-1.523-16.196-3.365 c0-1.84,7.239-3.303,16.196-3.303c8.955,0,16.195,1.463,16.195,3.303C84.745,58.05,77.505,59.573,68.55,59.573L68.55,59.573z" />
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { VictoryPie } from 'victory';
|
||||
import ScrollContainer from "react-indiana-drag-scroll";
|
||||
import Winner from '../components/WinnerStat';
|
||||
import {
|
||||
getOrchestratorScores
|
||||
@ -19,7 +20,7 @@ const activationColour = "rgba(154, 158, 25, 0.4)";
|
||||
const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
|
||||
const greyColour = "rgba(122, 128, 127, 0.4)";
|
||||
|
||||
const itemsPerPage = 6;
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const WinnerMonth = (obj) => {
|
||||
const livepeer = useSelector((state) => state.livepeerstate);
|
||||
@ -549,58 +550,69 @@ const WinnerMonth = (obj) => {
|
||||
<Pagination page={activeGraph} onChange={setGraph} total={totalGraphs} siblings={1} initialPage={1} />
|
||||
: null}
|
||||
</div>
|
||||
<div className="flexContainer forceWrap">
|
||||
{
|
||||
sortedList.map(function (orch, i) {
|
||||
const tmp = i - ((activePage - 1) * itemsPerPage);
|
||||
if (tmp >= 0 && tmp < itemsPerPage) {
|
||||
let thisCommission = null;
|
||||
let thisStake = null;
|
||||
let thisEarnings = null;
|
||||
<div className="row">
|
||||
<div className="strokeSmollLeft fullMargin" style={{ paddingBottom: 0, marginBottom: 0, height: '80vh' }}>
|
||||
<div className="row">
|
||||
<h3>{sortedList.length} Delegators</h3>
|
||||
</div>
|
||||
<div className="content-wrapper">
|
||||
<ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
|
||||
<div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
|
||||
{
|
||||
sortedList.map(function (orch, i) {
|
||||
const tmp = i - ((activePage - 1) * itemsPerPage);
|
||||
if (tmp >= 0 && tmp < itemsPerPage) {
|
||||
let thisCommission = null;
|
||||
let thisStake = null;
|
||||
let thisEarnings = null;
|
||||
|
||||
for (const obj of ticketList) {
|
||||
if (obj.address == orch.address) {
|
||||
thisEarnings = obj;
|
||||
for (const obj of ticketList) {
|
||||
if (obj.address == orch.address) {
|
||||
thisEarnings = obj;
|
||||
}
|
||||
}
|
||||
for (const obj of commissionList) {
|
||||
if (obj.address == orch.address) {
|
||||
thisCommission = obj;
|
||||
}
|
||||
}
|
||||
for (const obj of stakeList) {
|
||||
if (obj.address == orch.address) {
|
||||
thisStake = obj;
|
||||
}
|
||||
}
|
||||
let thisScore = null;
|
||||
if (thisScores && thisScores.scores) {
|
||||
thisScore = thisScores.scores[orch.address];
|
||||
}
|
||||
return (
|
||||
<div className='stroke' key={obj.seed + orch.address + i}>
|
||||
<Winner
|
||||
thisScore={thisScore}
|
||||
totalEarnings={obj.data.winningTicketsReceivedSum}
|
||||
thisEarnings={thisEarnings}
|
||||
totalStake={totalStakeSum}
|
||||
thisStake={thisStake}
|
||||
thisCommission={thisCommission}
|
||||
address={orch.address}
|
||||
thisIndex={i + 1}
|
||||
seed={obj.seed + "win" + orch.address + i}
|
||||
/>
|
||||
<div className="verticalDivider" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
})
|
||||
}
|
||||
}
|
||||
for (const obj of commissionList) {
|
||||
if (obj.address == orch.address) {
|
||||
thisCommission = obj;
|
||||
}
|
||||
}
|
||||
for (const obj of stakeList) {
|
||||
if (obj.address == orch.address) {
|
||||
thisStake = obj;
|
||||
}
|
||||
}
|
||||
let thisScore = null;
|
||||
if (thisScores && thisScores.scores) {
|
||||
thisScore = thisScores.scores[orch.address];
|
||||
}
|
||||
return (
|
||||
<div className='stroke' key={obj.seed + orch.address + i}>
|
||||
<Winner
|
||||
thisScore={thisScore}
|
||||
totalEarnings={obj.data.winningTicketsReceivedSum}
|
||||
thisEarnings={thisEarnings}
|
||||
totalStake={totalStakeSum}
|
||||
thisStake={thisStake}
|
||||
thisCommission={thisCommission}
|
||||
address={orch.address}
|
||||
thisIndex={i + 1}
|
||||
seed={obj.seed + "win" + orch.address + i}
|
||||
/>
|
||||
<div className="verticalDivider" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
})
|
||||
}
|
||||
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
|
||||
{totalPages > 1 ?
|
||||
<Pagination page={activePage} onChange={setPage} total={totalPages} boundaries={2} siblings={2} initialPage={1} />
|
||||
: null}
|
||||
</div>
|
||||
</ScrollContainer>
|
||||
</div>
|
||||
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
|
||||
{totalPages > 1 ?
|
||||
<Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="verticalDivider" />
|
||||
|
||||
59
src/pages/paginator.js
Normal file
59
src/pages/paginator.js
Normal file
@ -0,0 +1,59 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import ScrollContainer from "react-indiana-drag-scroll";
|
||||
import Address from "./OrchAddressViewer";
|
||||
import { Pagination } from "@mantine/core";
|
||||
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const Paginator = (obj) => {
|
||||
const [activePage, setPage] = useState(1);
|
||||
let renderData = obj.data;
|
||||
if (renderData && renderData.length) {
|
||||
|
||||
const totalPages = (renderData.length + (itemsPerPage - (renderData.length % itemsPerPage))) / itemsPerPage;
|
||||
|
||||
return (
|
||||
<div className="row">
|
||||
<div className="strokeSmollLeft fullMargin" style={{ paddingBottom: 0, marginBottom: 0 }}>
|
||||
<div className="row">
|
||||
<h3>{obj.title}</h3>
|
||||
</div>
|
||||
<div className="content-wrapper">
|
||||
<ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
|
||||
<div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
|
||||
{
|
||||
renderData.map((delObj, idx) => {
|
||||
const tmp = idx - ((activePage - 1) * itemsPerPage);
|
||||
if (tmp >= 0 && tmp < itemsPerPage) {
|
||||
return (
|
||||
<div className="flexContainer forceWrap" key={"delegator" + idx}>
|
||||
<div className="rowAlignLeft">
|
||||
<div className="strokeSmollLeft" style={{ marginLeft: '0.2em', whiteSpace: 'nowrap' }} >
|
||||
<h3>{idx}</h3>
|
||||
</div>
|
||||
<div className="rowAlignLeft">
|
||||
{delObj}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return null;
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</ScrollContainer>
|
||||
</div>
|
||||
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
|
||||
{totalPages > 1 ?
|
||||
<Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Paginator;
|
||||
Loading…
x
Reference in New Issue
Block a user